Com configurar la imatge d'estil de llista a Tailwind

Com Configurar La Imatge D Estil De Llista A Tailwind



El marc de Tailwind utilitza classes predefinides per proporcionar propietats d'estil als elements HTML que fan que el procés de disseny sigui més eficient. Suposem que l'usuari està dissenyant una pàgina web amb Tailwind i vol 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 proporcionar diferents estils de marcador de llista o el posicionament del marcador de llista.

Aquest article proporcionarà el procediment per configurar la imatge d'estil de llista d'un bloc de llista a Tailwind.

Com configurar la classe d'imatge d'estil de llista a Tailwind?

La classe d'imatge d'estil de llista s'utilitza per proporcionar una imatge com a marcador de llista a Tailwind. Per defecte, Tailwind només proporciona el ' llista-imatge-cap ” classe que només es pot utilitzar per eliminar qualsevol marcador d'imatge establert anteriorment d'una llista.







Sintaxi



La sintaxi per utilitzar la classe d'imatge d'estil de llista a Tailwind és la següent:



< ul classe = 'list-image-[url({Image Url})]' > < / ul >

Aquesta sintaxi proporciona la imatge especificada com a marcador per a l'element de llista.





< ul classe = 'lista-imatge-cap' > < / ul >

Aquesta sintaxi elimina qualsevol imatge establerta anteriorment com a marcador d'un element de llista.

Utilitzem la sintaxi definida anteriorment per utilitzar una imatge com a marcador en una llista no ordenada. En aquesta demostració, l'usuari té una imatge anomenada ' handpointer.png ” present dins de la mateixa carpeta del projecte Tailwind. En cas que la imatge estigui present en alguna altra carpeta, l'usuari ha de proporcionar el camí complet a la classe d'imatge d'estil de llista. Utilitzarem aquesta imatge com a marcador de llista utilitzant la classe 'list-image'.



< div classe = 'Centre de justificació flexible' >

< ul classe = 'list-inside list-image-[url(handpointer.png)] space-y-2 rounded-md bg-green-400 p-2' >

LLISTA DE MOSTRA

< 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 '
    ' es crea l'element i es proporciona amb el ' flexionar ” classe que alinea els elements horitzontalment en un contenidor.
  • El ' justificar-centre ” La classe alinea els elements secundaris al centre del contenidor.
  • A continuació, el '
      ” s'utilitza per crear una llista no ordenada.
    • Està dotat amb el ' llista-dins ” classe que col·locarà el marcador d'element de llista especificat dins del bloc de llista.
    • El ' llista-imatge-[url({URL de la imatge})] ” s'utilitza per proporcionar una imatge com a marcador d'element de llista a l'element.
    • El ' espai-y-{nombre} ” La classe proporciona l'espai vertical entre els elements de la llista.
    • El ' arrodonit-md ”La classe fa que les cantonades del bloc de la llista siguin arrodonides.
    • El ' bg-{color}-{nombre} ” s'utilitza per proporcionar el color de fons al bloc de la llista.
    • El ' p-2 ” La classe proporciona la vora a l'element de la llista.
    • Es creen tres elements de la llista utilitzant el ' etiquetes.

    Sortida:

    Es pot veure a la sortida que s'estableix una imatge de punter manual com a marcador per als elements de la llista:

    Ús de variants d'estat amb classe d'imatge d'estil de llista a Tailwind

    Tailwind ofereix diverses variants d'estat, com ara hover, focus i active, que ajuda a crear dissenys interactius. Per utilitzar una classe d'imatge d'estil llista amb aquests estats, s'utilitza la sintaxi següent:

    < ul classe = '{estat}:list-image-{cap O URL de la imatge}' > < / ul >

    Utilitzem la sintaxi definida anteriorment per utilitzar la propietat d'imatge d'estil llista amb el ' flotar ” Estat a Tailwind. En aquesta demostració, la llista es proporcionarà amb una imatge com a marcador de llista. Tanmateix, utilitzant el ' flotar ”, la imatge s'eliminarà.

    < div classe = 'Centre de justificació flexible' >

    < ul classe = 'list-inside list-image-[url(handpointer.png)] hover:list-image-none space-y-2 rounded-md bg-green-400 p-2' >

    LLISTA DE MOSTRA

    < això >Aquest és el primer article< / això >

    < això >Aquest és el segon element< / això >

    < això >Aquest és el tercer article< / això >

    < / ul >

    < / div >

    En el codi anterior, el ' hover:lista-imatge-cap ” La classe elimina la imatge establerta anteriorment com a marcador de llista.

    Sortida:

    A la sortida següent, la imatge d'estil de llista es restableix a ' cap ” quan l'usuari passa el cursor del ratolí per sobre. A causa d'això, es va eliminar la imatge que s'estava utilitzant com a marcador de llista.

    Ús de punts d'interrupció amb classe d'imatge d'estil de llista a Tailwind

    Els punts d'interrupció són consultes de mitjans preestablerts per als elements de Tailwind. S'utilitzen per fer que el disseny respongui a diferents mides de pantalla. Aquests punts d'interrupció inclouen sm, md, lg, xl i 2xl. Per utilitzar una classe d'imatge d'estil llista amb un punt d'interrupció, s'utilitza la sintaxi següent:

    < ul classe = '{breakpoint}:list-image-{cap O URL de la imatge}' > < / ul >

    Utilitzem la sintaxi definida anteriorment per canviar el marcador de llista d'un ' imatge ' a ' cap ” utilitzant un punt d'interrupció. En aquest exemple, el marcador d'imatge s'eliminarà quan la mida de la pantalla augmenti l'amplada de ' md ”punt d'interrupció:

    < div classe = 'Centre de justificació flexible' >

    < ul classe = 'list-inside list-image-[url(handpointer.png)] md:list-image-none space-y-2 rounded-md bg-green-400 p-2' >

    LLISTA DE MOSTRA

    < això >Aquest és el primer article< / això >

    < això >Aquest és el segon element< / això >

    < això >Aquest és el tercer article< / això >

    < / ul >

    < / div >

    En el codi anterior, el ' md:list-image-none ” La classe elimina el marcador de la llista d'imatges quan la mida de la pantalla arriba al “ md ” punt d'interrupció.

    Sortida:

    A la sortida següent, el marcador d'imatge s'elimina quan la mida de la pantalla arriba al punt d'interrupció md:

    Es tracta de configurar la imatge d'estil de llista a Tailwind.

    Conclusió

    Tailwind té dues classes d'imatge d'estil de llista predefinides per eliminar o establir el marcador de llista d'un element a una imatge. El ' llista-imatge-[url({URL de la imatge})] ” La classe proporciona la imatge especificada com a marcador de llista. El ' llista-imatge-cap ” La classe elimina qualsevol imatge proporcionada anteriorment com a marcador de llista. Aquest article ha proporcionat el procediment per configurar el tipus d'estil de llista a Tailwind.