Suposem que un usuari ha de crear una llista d'elements per a la seva pàgina web. Per facilitar el procés de disseny, Tailwind ofereix diverses classes d'estil de llista que es poden utilitzar per canviar el tipus, la posició i l'alineació dels elements de la llista.
Aquest article proporcionarà el procediment per configurar el tipus d'estil de llista a Tailwind.
Com configurar el tipus d'estil de llista a Tailwind?
Tailwind ofereix tres tipus d'estil de llista per defecte. S'utilitzen per proporcionar el ' marcador ” estil per als elements de la llista. Les tres classes d'estil de llista per defecte es descriuen de la següent manera:
- llista-disc: Aquesta classe proporcionarà les vinyetes rodones com a marcador de llista.
- llista decimal: Aquesta classe proporcionarà els nombres decimals com a marcador de llista.
- llista-cap: Aquesta classe eliminarà els marcadors de llista dels elements.
La sintaxi per utilitzar els tipus d'estil de llista és la següent:
< ul classe = 'llista-{estil}' > < / ul >
Per a una millor comprensió, la demostració que es proporciona a continuació utilitzarà la sintaxi definida anteriorment per proporcionar diferents estils de marcador per llistar elements. En aquest exemple, es crearan tres elements de llista i es proporcionaran amb els diferents estils de marcador utilitzant les classes d'estil de llista predeterminades a Tailwind:
< pàg classe = 'centre de text text-xl font-negreta' >Llista diferent per defecte Estil Tipus a Tailwind< / pàg >
< br >
< div classe = 'flex justify-center space-x-20 bg-slate-100 arrodonit-lg mx-4 p-2' >
< ul classe = 'llista-disc' >
LLISTA # 1
< això >Aquest és el primer article< / això >
< això >Aquest és el segon element< / això >
< això >Aquest és el tercer article< / això >
< / ul >
< ul classe = 'llista-decimal' >
LLISTA # 2
< això >Aquest és el primer article< / això >
< això >Aquest és el segon element< / això >
< això >Aquest és el tercer article< / això >
< / ul >
< ul classe = 'llista-cap' >
LLISTA # 3
< això >Aquest és el primer article< / això >
< això >Aquest és el segon element< / això >
< això >Aquest és el tercer article< / això >
< / ul >
< / div >
L'explicació del codi anterior és la següent:
- A ' L'element ' es crea amb un ' xl ' mida de lletra i un ' agosarat ” pes de la lletra. El contingut de text de l'element es col·loca al centre mitjançant el ' centre de text ” classe.
- Després d'un salt de línia, un ' ' es crea l'element i es proporciona amb un ' flexionar ” classe. Això crearà un contenidor que alinearà els elements secundaris horitzontalment.
- El ' justificar-centre ” la classe col·locarà els articles al centre del contenidor.
- El ' espai-x-{mida} ” La classe proporciona l'espai horitzontal entre els elements.
- El ' bg-{color}-{nombre} ” class estableix el fons del contenidor amb el color especificat.
- El ' arrodonit-lg ” la classe fa que les cantonades del contenidor siguin arrodonides.
- El ' mx-4 ” La classe proporciona el marge horitzontal al contenidor flexible.
- El ' p-2 La classe proporciona farciment al contenidor flexible.
- A continuació, es creen tres elements de llista i se'ls proporcionen diferents tipus d'estil de llista mitjançant el ' llista-{tipus} ” classe.
Sortida:
A partir de la sortida següent, es pot veure que la primera llista utilitza vinyetes, la segona utilitza números decimals i la tercera no utilitza cap marcador d'elements.
Ús de la classe d'estil de llista amb les variants d'estat a Tailwind
La classe d'estil de llista es pot utilitzar amb les variants d'estat predeterminades a Tailwind per fer que el disseny sigui més dinàmic. Utilitzant les variants d'estat actiu, enfocat i actiu, l'usuari pot canviar l'estil del marcador dels elements de la llista sempre que s'activa l'estat especificat. La sintaxi per utilitzar la classe d'estil de llista amb variants d'estat és la següent:
< ul classe = '{estat}:lista-{estil}...' > < / ul >Aquí hi ha un exemple d'ús del tipus d'estil de llista amb un estat de 'passar el cursor', on l'usuari pot canviar l'estil del marcador passant el cursor per sobre del bloc de la llista:
< pàg classe = 'centre de text text-xl font-negreta' >Passeu el cursor sobre el bloc de llista per canviar l'estil del marcador< / pàg >
< br >
< div classe = 'flex justify-center space-x-20 bg-slate-100 arrodonit-lg mx-4 p-2' >
< ul classe = 'llista-disc hover:lista-decimal' >
LLISTA # 1
< això >Aquest és el primer article< / això >
< això >Aquest és el segon element< / això >
< això >Aquest és el tercer article< / això >
< / ul >
< / div >Al codi anterior, la llista es proporciona amb el ' llista-disc ” class com a tipus d'estil de llista predeterminat. Tanmateix, utilitzant el ' hover:lista-decimal ” classe, el tipus d'estil de llista es canviarà quan l'usuari passi el cursor del ratolí per sobre del bloc de llista.
Sortida:
La sortida següent mostra que l'estil del tipus de llista canvia d'una llista amb vinyetes a una llista numerada quan el cursor passa per sobre del bloc de la llista.
Ús de la classe d'estil de llista amb els punts d'interrupció a Tailwind
Els punts d'interrupció s'utilitzen per al disseny responsiu del disseny per a diferents mides de pantalla. Els cinc punts d'interrupció per defecte proporcionats per Tailwind són sm, md, lg, xl i 2xl. La sintaxi següent s'utilitza per proporcionar la classe d'estil de tipus de llista amb un punt d'interrupció:
< ul classe = '{breakpoint}:list-{style}...' > < / ul >Aquí teniu un exemple d'ús del tipus d'estil de llista amb un ' md ” punt d'interrupció, on l'estil del marcador canviarà quan la mida de la pantalla arribi al punt d'interrupció “md”:
< pàg classe = 'centre de text text-xl font-negreta' > Augmenta la pantalla Mida per canviar l'estil del marcador< / pàg >
< br >
< div classe = 'flex justify-center space-x-20 bg-slate-100 arrodonit-lg mx-4 p-2' >
< ul classe = 'llista-disc md:lista-decimal' >
LLISTA # 1
< això >Aquest és el primer article< / això >
< això >Aquest és el segon element< / això >
< això >Aquest és el tercer article< / això >
< / ul >
< / div >Al codi anterior, la llista es proporciona amb el ' llista-disc ” classe com a estil predeterminat. Tanmateix, utilitzant el ' md:lista-decimal ” class el tipus d'estil de llista canviarà per a la mida de la pantalla “md”.
Sortida:
Com podeu veure a la sortida següent, el tipus d'estil de llista canvia de disc a decimal quan la mida de la pantalla arriba a ' md ” punt d'interrupció.
Es tracta de configurar el tipus d'estil de llista a Tailwind.
Conclusió
Tailwind proporciona tres classes de tipus d'estil de llista predefinides per canviar l'estil de llista d'un element. El ' llista-disc ” La classe proporciona els punts per enumerar els elements. El ' llista decimal ” La classe proporciona els números per enumerar els elements. El ' llista-cap ”La classe crea una llista que no utilitza cap marcador d'element. Aquest article ha proporcionat el procediment per configurar el tipus d'estil de llista a Tailwind.