Cum să setați tipul de stil de listă în Tailwind

Să presupunem că un utilizator trebuie să creeze o listă de articole pentru pagina sa web. Pentru a ușura procesul de proiectare, Tailwind oferă diverse clase de stil de listă care pot fi utilizate pentru modificarea tipului, poziției și alinierii elementelor listei.

Acest articol va oferi procedura pentru setarea tipului de stil de listă în Tailwind.

Cum să setați tipul de stil de listă în Tailwind?

Tailwind oferă trei tipuri implicite de stil de listă. Ele sunt folosite pentru a oferi „ marker ” stil pentru articolele din listă. Cele trei clase implicite de tip de stil de listă sunt descrise după cum urmează:

• list-disc: Această clasă va oferi punctele rotunde ca marcator de listă.
• listă-zecimală: Această clasă va furniza numerele zecimale ca marcator de listă.
• lista-niciuna: Această clasă va elimina orice marcaj de listă din articole.

Sintaxa pentru utilizarea tipurilor de stil de listă este următoarea:

Pentru o mai bună înțelegere, demonstrația oferită mai jos va folosi sintaxa definită mai sus pentru a oferi diferite stiluri de marcare pentru a lista articole. În acest exemplu, trei elemente de listă vor fi create și furnizate cu diferite stiluri de marcare folosind clasele implicite de stil de listă în Tailwind:

Explicația codului de mai sus este următoarea:

• A '

  ' elementul este creat cu un ' xl ' dimensiunea fontului și un ' îndrăzneţ ' grosimea fontului. Conținutul text al elementului este poziționat în centru utilizând „ centru de text ” clasa.

• După o întrerupere de linie, un „
  ” este creat și este prevăzut cu un „ contracta ” clasa. Acest lucru va crea un container care va alinia elementele copil pe orizontală.
• „ justify-centre ” clasa va plasa articolele în centrul containerului.
• „ spațiu-x-{dimensiune} ” clasa oferă spațiul orizontal dintre articole.
• „ bg-{culoare}-{număr} ” class setează fundalul containerului la culoarea specificată.
• „ rotunjite-lg ” clasa face colțurile recipientului rotunjite.
• „ mx-4 ” clasă oferă marja orizontală containerului flexibil.
• „ p-2 ” clasa oferă umplutură pentru containerul flexibil.
• În continuare, trei elemente de listă sunt create și sunt furnizate cu diferite tipuri de stil de listă folosind „ list-{tip} ” clasa.

Ieșire:

Din rezultatul de mai jos, se poate observa că prima listă folosește marcatori, a doua folosește numere zecimale, iar a treia nu folosește niciun marcator de articol.

Utilizarea clasei de stil Listă cu variantele de stat în Tailwind

Clasa de stil de listă poate fi utilizată cu variantele de stare implicite în Tailwind pentru a face designul mai dinamic. Folosind variantele de trecere cu mouse-ul, focalizare și stare activă, utilizatorul poate schimba stilul de marcare al elementelor din listă ori de câte ori este declanșată starea specificată. Sintaxa pentru utilizarea clasei de stil de listă cu variante de stare este următoarea:

Iată un exemplu de utilizare a tipului de stil de listă cu o stare „hover”, în care utilizatorul poate schimba stilul de marcare trecând cu mouse-ul peste blocul de listă:

În codul de mai sus, lista este furnizată cu „ listă-disc ” ca tip de stil implicit de listă. Cu toate acestea, folosind „ hover:listă-zecimală ”, tipul de stil al listei va fi schimbat atunci când utilizatorul plasează cursorul mouse-ului peste blocul listei.

Ieșire:

Rezultatul de mai jos arată că stilul tipului de listă se schimbă de la o listă cu marcatori la o listă numerotată atunci când cursorul trece peste blocul listei.

Utilizarea clasei de stil Listă cu punctele de întrerupere în Tailwind

Punctele de întrerupere sunt folosite pentru proiectarea receptivă a aspectului pentru diferite dimensiuni de ecran. Cele cinci puncte de întrerupere implicite furnizate de Tailwind sunt sm, md, lg, xl și 2xl. Următoarea sintaxă este utilizată pentru a furniza clasei de stil tip listă cu un punct de întrerupere:

Iată un exemplu de utilizare a tipului de stil de listă cu un „ md ” punct de întrerupere, unde stilul marcatorului se va schimba când dimensiunea ecranului atinge punctul de întrerupere „md”:

În codul de mai sus, lista este furnizată cu „ listă-disc ” ca stil implicit. Cu toate acestea, folosind „ md:listă-zecimală ” tipul stilului listei se va schimba pentru dimensiunea ecranului „md”.

Ieșire:

După cum puteți vedea în rezultatul de mai jos, tipul de stil al listei se schimbă de la disc la zecimal atunci când dimensiunea ecranului atinge „ md ” Punct de întrerupere.

Este vorba despre setarea tipului de stil Listă în Tailwind.

Concluzie

Tailwind oferă trei clase de tip de stil de listă predefinite pentru schimbarea stilului de listare al unui element. „ listă-disc ” clasa oferă punctele marcante pentru listarea articolelor. „ listă-zecimală ” clasa furnizează numerele pentru listarea articolelor. „ lista-niciuna ” clasa creează o listă care nu folosește niciun marcator de element. Acest articol a furnizat procedura pentru setarea tipului de stil de listă în Tailwind.