Šajā rakstā tiks sniegta procedūra saraksta bloka saraksta stila attēla iestatīšanai programmā Tailwind.
Kā iestatīt saraksta stila attēla klasi programmā Tailwind?
Saraksta stila attēlu klase tiek izmantota, lai nodrošinātu attēlu kā saraksta marķieri programmā Tailwind. Pēc noklusējuma Tailwind nodrošina tikai “ saraksts-attēls-nav ” klase, kuru var izmantot tikai jebkura iepriekš iestatīta attēla marķiera noņemšanai sarakstam.
Sintakse
Sintakse saraksta stila attēla klases izmantošanai programmā Tailwind ir šāda:
< ul klasē = 'saraksta attēls-[url({Attēla URL})]' > < / ul >
Šī sintakse nodrošina norādīto attēlu kā saraksta elementa marķieri.
< ul klasē = 'list-image-none' > < / ul >
Šī sintakse noņem visus iepriekš iestatītos attēlus kā saraksta elementa marķieri.
Izmantosim iepriekš definēto sintaksi, lai izmantotu attēlu kā marķieri nesakārtotā sarakstā. Šajā demonstrācijā lietotājam ir attēls ar nosaukumu ' handpointer.png ” atrodas tajā pašā Tailwind projekta mapē. Gadījumā, ja attēls atrodas kādā citā mapē, lietotājam ir jānorāda pilns ceļš uz saraksta stila attēlu klasi. Mēs izmantosim šo attēlu kā saraksta marķieri, izmantojot klasi “list-image”.
< div klasē = 'elastības taisnošanas centrs' >
< ul klasē = ' list-inside list-image-[url(handpointer.png)] space-y-2 rounded-md bg-green-400 p-2' >
PARAUGU SARAKSTS
< ka >Šī ir pirmā prece< / ka >
< ka >Šis ir otrais punkts< / ka >
< ka >Šis ir trešais punkts< / ka >
< / ul >
< / div >
Iepriekš minētā koda skaidrojums ir šāds:
- A ' 'elements ir izveidots un tiek nodrošināts ar ' flex ” klase, kas konteinerā novieto vienumus horizontāli.
- ' attaisnot-centrs ” klase izlīdzina pakārtotos vienumus konteinera centrā.
- Tālāk “
- Tas ir nodrošināts ar ' saraksts-iekšā ” klase, kas liks norādīto saraksta vienuma marķieri saraksta blokā.
- ' list-image-[url({Attēla URL})] ” klase tiek izmantota attēla nodrošināšanai kā elementa saraksta vienuma marķieris.
- ' atstarpe-y-{skaitlis} ” klase nodrošina vertikālo atstarpi starp saraksta vienumiem.
- ' noapaļots-md ” klase padara saraksta bloka stūrus noapaļotus.
- ' bg-{color}-{number} ” klase tiek izmantota, lai saraksta blokam nodrošinātu fona krāsu.
- ' p-2 ” klase nodrošina saraksta elementa apmali.
- Trīs saraksta vienumi tiek izveidoti, izmantojot “
” atzīmes. Izvade:
Izvadē var redzēt, ka rokas rādītāja attēls ir iestatīts kā marķieris saraksta vienumiem:
Stāvokļa variantu izmantošana ar saraksta stila attēla klasi programmā Tailwind
Tailwind nodrošina dažādus stāvokļa variantus, piemēram, kursoru, fokusu un aktīvo, kas palīdz izveidot interaktīvus dizainus. Lai izmantotu saraksta stila attēlu klasi ar šiem stāvokļiem, tiek izmantota šāda sintakse:
< ul klasē = '{state}:saraksta attēls-{nav VAI attēla url}' > < / ul >Izmantosim iepriekš definēto sintaksi, lai izmantotu saraksta stila attēla rekvizītu ar “ novietojiet kursoru ” stāvoklī Tailwind. Šajā demonstrācijā saraksts tiks nodrošināts ar attēlu kā saraksta marķieri. Tomēr, izmantojot “ novietojiet kursoru ” stāvoklī, attēls tiks noņemts.
< div klasē = 'elastības taisnošanas centrs' >
< ul klasē = ' list-inside list-image-[url(handpointer.png)] hover:list-image-none space-y-2 rounded-md bg-green-400 p-2' >
PARAUGU SARAKSTS
< ka >Šī ir pirmā prece< / ka >
< ka >Šis ir otrais punkts< / ka >
< ka >Šis ir trešais punkts< / ka >
< / ul >
< / div >Iepriekš minētajā kodā ' hover:list-image-none ” klase noņem iepriekš iestatīto attēlu kā saraksta marķieri.
Izvade:
Tālāk redzamajā izvadā saraksta stila attēls tiek atiestatīts uz “ neviens ”, kad lietotājs novieto peles kursoru virs tā. Tāpēc attēls, kas tika izmantots kā saraksta marķieris, tika noņemts.
Pārtraukuma punktu izmantošana ar saraksta stila attēlu klasi programmā Tailwind
Pārtraukuma punkti ir iepriekš iestatīti multivides vaicājumi Tailwind elementiem. Tie tiek izmantoti, lai dizains būtu piemērots dažādiem ekrāna izmēriem. Šie pārtraukuma punkti ir sm, md, lg, xl un 2xl. Lai izmantotu saraksta stila attēlu klasi ar pārtraukuma punktu, tiek izmantota šāda sintakse:
< ul klasē = '{breakpoint}:saraksta attēls-{nav VAI attēla url}' > < / ul >Izmantosim iepriekš definēto sintaksi, lai mainītu saraksta marķieri no “ attēlu 'uz' neviens ” izmantojot pārtraukuma punktu. Šajā piemērā attēla marķieris tiks noņemts, tiklīdz ekrāna izmērs palielinās ' md ” pārtraukuma punkts:
< div klasē = 'elastības taisnošanas centrs' >
< ul klasē = ' list-inside list-image-[url(handpointer.png)] md:list-image-none space-y-2 rounded-md bg-green-400 p-2' >
PARAUGU SARAKSTS
< ka >Šī ir pirmā prece< / ka >
< ka >Šis ir otrais punkts< / ka >
< ka >Šis ir trešais punkts< / ka >
< / ul >
< / div >Iepriekš minētajā kodā ' md:list-image-none ” klase noņem attēlu saraksta marķieri, kad ekrāna izmērs sasniedz md ” pārtraukuma punkts.
Izvade:
Tālāk redzamajā izvadē attēla marķieris tiek noņemts, kad ekrāna izmērs sasniedz md pārtraukuma punktu:
Tas ir viss par saraksta stila attēla iestatīšanu programmā Tailwind.
Secinājums
Tailwind ir divas iepriekš noteiktas saraksta stila attēlu klases elementa saraksta marķiera noņemšanai vai iestatīšanai attēlam. ' list-image-[url({Attēla URL})] ” klase nodrošina norādīto attēlu kā saraksta marķieri. ' saraksts-attēls-nav ” klase noņem jebkuru iepriekš sniegto attēlu kā saraksta marķieri. Šajā rakstā ir sniegta procedūra saraksta stila iestatīšanai programmā Tailwind.