See artikkel pakub Tailwindis loendiploki loendi stiilis kujutise määramise protseduuri.
Kuidas seada Tailwindis loendi stiili pildiklass?
Loendistiili pildiklassi kasutatakse Tailwindis pildi kuvamiseks loendimarkerina. Vaikimisi pakub Tailwind ainult ' list-image-noone ” klass, mida saab kasutada ainult loendi eelnevalt seadistatud pildimarkerite eemaldamiseks.
Süntaks
Loendistiili pildiklassi kasutamise süntaks Tailwindis on järgmine:
< ul klass = 'list-image-[url({Image Url})]' > < / ul >
See süntaks pakub määratud kujutist loendielemendi markerina.
< ul klass = 'loend-image-noone' > < / ul >
See süntaks eemaldab kõik varem seatud pildid loendielemendi markerina.
Kasutame ülalmääratletud süntaksit, et kasutada pilti markerina järjestamata loendis. Selles demonstratsioonis on kasutajal pilt nimega ' handpointer.png ”, mis asub samas Tailwindi projektikaustas. Juhul, kui pilt asub mõnes teises kaustas, peab kasutaja sisestama loendi stiili pildiklassi täieliku tee. Kasutame seda pilti loendi markerina, kasutades klassi 'loend-image'.
< div klass = 'flex justify-center' >
< ul klass = ' list-inside list-image-[url(handpointer.png)] space-y-2 rounded-md bg-green-400 p-2' >
NÄIDISLOEND
< et >See on esimene üksus< / et >
< et >See on teine üksus< / et >
< et >See on kolmas üksus< / et >
< / ul >
< / div >
Ülaltoodud koodi selgitus on järgmine:
- A ' ' element luuakse ja see on varustatud ' painduv ” klass, mis joodab üksused konteineris horisontaalselt.
- ' õigusta-keskus ” klass joondab alamüksused konteineri keskele.
- Järgmiseks '
- See on varustatud ' list-inside ” klass, mis asetab määratud loendiüksuse markeri loendiploki sisse.
- ' list-image-[url({Pildi URL})] ” klassi kasutatakse kujutise loomiseks elemendi loendiüksuse markerina.
- ' tühik-y-{number} ” klass pakub vertikaalset ruumi loendiüksuste vahel.
- ' ümardatud-md ” klass muudab loendiploki nurgad ümaraks.
- ' bg-{color}-{number} ” klassi kasutatakse loendiploki taustavärvi andmiseks.
- ' p-2 ” klass pakub loendielemendile piiri.
- Kolm loendiüksust luuakse kasutades '
” sildid. Väljund:
Väljundis on näha, et loendiüksuste markeriks on seatud käeosuti kujutis:
Olekuvariantide kasutamine loendi stiilis pildiklassiga Tailwindis
Tailwind pakub erinevaid olekuvariante, nagu hõljutamine, teravustamine ja aktiivne, mis aitab luua interaktiivseid kujundusi. Nende olekutega loendi stiilis pildiklassi kasutamiseks kasutatakse järgmist süntaksit:
< ul klass = '{state}:loendi-pilt-{puudub VÕI pildi url}' > < / ul >Kasutame ülalmääratletud süntaksit, et kasutada loendi stiilis kujutise atribuuti koos ' hõljuma ” osariik Tailtuules. Selles demonstratsioonis on loendile lisatud pilt loendi markerina. Kuid kasutades ' hõljuma ” olekus, pilt eemaldatakse.
< div klass = 'flex justify-center' >
< ul klass = ' list-inside list-image-[url(handpointer.png)] hover:list-image-none space-y-2 rounded-md bg-green-400 p-2' >
NÄIDISLOEND
< et >See on esimene üksus< / et >
< et >See on teine üksus< / et >
< et >See on kolmas üksus< / et >
< / ul >
< / div >Ülaltoodud koodis on ' hover:list-image-noone ” klass eemaldab loendi markerina varem seatud pildi.
Väljund:
Allolevas väljundis lähtestatakse loendi stiilis pilt väärtusele ' mitte ühtegi ', kui kasutaja viib hiirekursori selle kohale. Seetõttu eemaldati loendi markerina kasutatud pilt.
Katkestuspunktide kasutamine loendi stiilis pildiklassiga Tailwindis
Katkestuspunktid on Tailwindi elementide eelseadistatud meediumipäringud. Neid kasutatakse kujunduse muutmiseks erinevate ekraanisuuruste jaoks tundlikuks. Nende murdepunktide hulka kuuluvad sm, md, lg, xl ja 2xl. Katkestuspunktiga loendi stiilis pildiklassi kasutamiseks kasutatakse järgmist süntaksit:
< ul klass = '{breakpoint}: list-image-{none OR image url}' > < / ul >Kasutame ülalmääratletud süntaksit, et muuta loendi markerit ' pilt ' kuni ' mitte ühtegi ” kasutades katkestuspunkti. Selles näites eemaldatakse pildimarker, kui ekraani suurus suurendab ' md ” murdepunkt:
< div klass = 'flex justify-center' >
< ul klass = ' list-inside list-image-[url(handpointer.png)] md:list-image-none space-y-2 rounded-md bg-green-400 p-2' >
NÄIDISLOEND
< et >See on esimene üksus< / et >
< et >See on teine üksus< / et >
< et >See on kolmas üksus< / et >
< / ul >
< / div >Ülaltoodud koodis on ' md:list-image-none ” klass eemaldab piltide loendi markeri, kui ekraani suurus jõuab „ md ” murdepunkt.
Väljund:
Allolevas väljundis eemaldatakse pildimarker, kui ekraani suurus jõuab md murdepunktini:
See on kõik, mis puudutab loendi stiilis pildi määramist Tailwindis.
Järeldus
Tailwindil on kaks eelmääratletud loendi stiilis pildiklassi elemendi loendimarkeri eemaldamiseks või pildile seadistamiseks. ' list-image-[url({Pildi URL})] ” klass pakub loendi markerina määratud kujutist. ' list-image-noone ” klass eemaldab loendi markerina kõik varem esitatud pildid. See artikkel pakub Tailwindis loendi stiili tüübi määramise protseduuri.