Acest articol va oferi procedura pentru setarea imaginii în stil listă a unui bloc de listă în Tailwind.
Cum să setați clasa de imagine de stil Listă în Tailwind?
Clasa List Style Image Class este folosită pentru a furniza o imagine ca marcator de listă în Tailwind. În mod implicit, Tailwind oferă doar „ lista-imagine-niciuna ” clasă care poate fi folosită numai pentru eliminarea oricărui marker de imagine setat anterior pentru o listă.
Sintaxă
Sintaxa pentru utilizarea clasei de imagini cu stil de listă în Tailwind este următoarea:
< ul clasă = „list-image-[url({Image Url})]” > < / ul >
Această sintaxă oferă imaginea specificată ca marker pentru elementul de listă.
< ul clasă = 'lista-imagine-niciuna' > < / ul >
Această sintaxă elimină toate imaginile setate anterior ca marcaj pentru un element de listă.
Să folosim sintaxa definită mai sus pentru a folosi o imagine ca marker într-o listă neordonată. În această demonstrație, utilizatorul are o imagine numită „ handpointer.png ” prezent în interiorul aceluiași folder de proiect Tailwind. În cazul în care imaginea este prezentă într-un alt folder, utilizatorul trebuie să furnizeze calea completă către clasa de imagini cu stil de listă. Vom folosi acea imagine ca marcator de listă folosind clasa „list-image”.
< div clasă = 'flex justify-center' >
< ul clasă = ' list-inside list-image-[url(handpointer.png)] space-y-2 rounded-md bg-green-400 p-2' >
EXEMPRE DE LISTĂ
< acea >Acesta este primul articol< / acea >
< acea >Acesta este al doilea articol< / acea >
< acea >Acesta este al treilea articol< / acea >
< / ul >
< / div >
Explicația codului de mai sus este următoarea:
- A ' ” este creat și este prevăzut cu „ contracta ” clasă care aliniază articolele pe orizontală într-un container.
- „ justify-centre ” clasa aliniază articolele copil la centrul containerului.
- În continuare, „
- Este prevazut cu „ listă-înăuntru ” care va plasa marcatorul specificat de element de listă în interiorul blocului de listă.
- „ list-image-[url({Image Url})] ” este folosită pentru furnizarea unei imagini ca marcator de element de listă pentru element.
- „ spațiu-y-{număr} ” clasa oferă spațiul vertical dintre elementele din listă.
- „ rotunjit-md ” clasa face colțurile blocului de listă rotunjite.
- „ bg-{culoare}-{număr} ” este folosită pentru a furniza culoarea de fundal blocului de listă.
- „ p-2 ” clasa furnizează chenarul elementului listă.
- Trei elemente de listă sunt create folosind „
' Etichete. Ieșire:
Se poate vedea în rezultat că o imagine cu indicator de mână este setată ca marcator pentru elementele din listă:
Utilizarea variantelor de stat cu clasa de imagine de stil Listă în Tailwind
Tailwind oferă diverse variante de stare, cum ar fi hover, focus și activ, care ajută la crearea de designuri interactive. Pentru a utiliza o clasă de imagini în stil listă cu aceste stări, se utilizează următoarea sintaxă:
< ul clasă = „{state}:list-image-{none SAU imagine URL}” > < / ul >Să folosim sintaxa definită mai sus pentru a folosi proprietatea de imagine în stil listă cu „ planare ” declară în Tailwind. În această demonstrație, lista va fi furnizată cu o imagine ca marcator de listă. Cu toate acestea, folosind „ planare ”, imaginea va fi eliminată.
< div clasă = 'flex justify-center' >
< ul clasă = „ list-inside list-image-[url(handpointer.png)] hover:list-image-none space-y-2 rounded-md bg-green-400 p-2” >
EXEMPRE DE LISTĂ
< acea >Acesta este primul articol< / acea >
< acea >Acesta este al doilea articol< / acea >
< acea >Acesta este al treilea articol< / acea >
< / ul >
< / div >În codul de mai sus, „ hover:list-image-none ” elimină imaginea setată anterior ca marcator de listă.
Ieșire:
În rezultatul de mai jos, imaginea în stil listă se resetează la „ nici unul ” când utilizatorul trece cursorul mouse-ului peste el. Din acest motiv, imaginea care era folosită ca marcator de listă a fost eliminată.
Folosirea punctelor de întrerupere cu clasa de imagini de stil Listă în Tailwind
Punctele de întrerupere sunt interogări media prestabilite pentru elementele din Tailwind. Acestea sunt folosite pentru a face designul receptiv pentru diferite dimensiuni de ecran. Aceste puncte de întrerupere includ sm, md, lg, xl și 2xl. Pentru a utiliza o clasă de imagini în stil listă cu un punct de întrerupere, se utilizează următoarea sintaxă:
< ul clasă = „{breakpoint}:list-image-{niciunul SAU adresa URL a imaginii}” > < / ul >Să folosim sintaxa definită mai sus pentru a schimba marcatorul de listă dintr-un „ imagine ' la ' nici unul ” folosind un punct de întrerupere. În acest exemplu, marcatorul de imagine va fi eliminat odată ce dimensiunea ecranului crește lățimea „ md ” Punct de întrerupere:
< div clasă = 'flex justify-center' >
< ul clasă = ' list-inside list-image-[url(handpointer.png)] md:list-image-none space-y-2 rounded-md bg-green-400 p-2' >
EXEMPRE DE LISTĂ
< acea >Acesta este primul articol< / acea >
< acea >Acesta este al doilea articol< / acea >
< acea >Acesta este al treilea articol< / acea >
< / ul >
< / div >În codul de mai sus, „ md:list-image-none clasa ” elimină marcatorul listei de imagini când dimensiunea ecranului atinge “ md ” Punct de întrerupere.
Ieșire:
În rezultatul de mai jos, marcatorul de imagine este eliminat când dimensiunea ecranului atinge punctul de întrerupere md:
Acesta este totul despre setarea imaginii în stil listă în Tailwind.
Concluzie
Tailwind are două clase de imagini în stil listă predefinite pentru eliminarea sau setarea marcatorului de listare al unui element la o imagine. „ list-image-[url({Image Url})] ” clasa furnizează imaginea specificată ca marcator de listă. „ lista-imagine-niciuna ” clasa elimină orice imagine furnizată anterior ca marcator de listă. Acest articol a furnizat procedura pentru setarea tipului de stil de listă în Tailwind.