Den här artikeln kommer att tillhandahålla proceduren för att ställa in liststilsbilden för ett listblock i Tailwind.
Hur ställer man in liststilsbildklassen i medvind?
Liststilsbildklassen används för att tillhandahålla en bild som listmarkör i Tailwind. Som standard tillhandahåller Tailwind endast ' lista-bild-ingen ” klass som endast kan användas för att ta bort tidigare inställda bildmarkörer för en lista.
Syntax
Syntaxen för att använda bildklassen liststil i Tailwind är följande:
< ul klass = 'list-image-[url({Image Url})]' > < / ul >
Denna syntax tillhandahåller den angivna bilden som en markör för listelementet.
< ul klass = 'lista-bild-ingen' > < / ul >
Denna syntax tar bort alla tidigare inställda bilder som markör för ett listelement.
Låt oss använda den ovan definierade syntaxen för att använda en bild som en markör i en oordnad lista. I den här demonstrationen har användaren en bild som heter ' handpointer.png ” finns i samma Tailwind-projektmapp. Om bilden finns i någon annan mapp måste användaren ange den fullständiga sökvägen till liststilsbildklassen. Vi kommer att använda den bilden som en listmarkör med klassen 'list-image'.
< div klass = 'flex justify-center' >
< ul klass = ' list-inside list-image-[url(handpointer.png)] space-y-2 rounded-md bg-green-400 p-2' >
EXEMPELLISTA
< den där >Detta är det första föremålet< / den där >
< den där >Detta är det andra föremålet< / den där >
< den där >Detta är det tredje föremålet< / den där >
< / ul >
< / div >
Förklaringen av ovanstående kod är följande:
- en ' '-element skapas och förses med ' böja ” klass som justerar objekten horisontellt i en container.
- den ' motivera-center klass justerar de underordnade objekten mot mitten av behållaren.
- Därefter '
- Den är försedd med ' lista inuti ” klass som kommer att placera den angivna listobjektsmarkören inuti listblocket.
- den ' list-image-[url({Image Url})] ” klass används för att tillhandahålla en bild som en listobjektmarkör till elementet.
- den ' blanksteg-y-{number} ” klass tillhandahåller det vertikala utrymmet mellan listobjekten.
- den ' rundad-md ” klass gör listblockets hörn avrundade.
- den ' bg-{color}-{number} ” klass används för att tillhandahålla bakgrundsfärgen till listblocket.
- den ' p-2 ” klass tillhandahåller gränsen till listelementet.
- Tre listobjekt skapas med hjälp av '
'-taggar. Produktion:
Det kan ses i utgången att en handpekarbild är inställd som markör för listobjekten:
Använda tillståndsvarianter med liststilsbildklass i medvind
Tailwind tillhandahåller olika tillståndsvarianter som hovring, fokus och aktiv vilket hjälper till att skapa interaktiva mönster. För att använda en bildklass i liststil med dessa tillstånd, används följande syntax:
< ul klass = '{state}:list-bild-{ingen ELLER bildadress}' > < / ul >Låt oss använda den ovan definierade syntaxen för att använda liststilsbildegenskapen med ' sväva ” stat i Tailwind. I denna demonstration kommer listan att förses med en bild som listmarkör. Men med hjälp av ' sväva ” tillstånd kommer bilden att tas bort.
< div klass = 'flex justify-center' >
< ul klass = ' list-inside list-image-[url(handpointer.png)] hover:list-image-none space-y-2 rounded-md bg-green-400 p-2' >
EXEMPELLISTA
< den där >Detta är det första föremålet< / den där >
< den där >Detta är det andra föremålet< / den där >
< den där >Detta är det tredje föremålet< / den där >
< / ul >
< / div >I ovanstående kod, ' hover:list-image-none ” klass tar bort den tidigare inställda bilden som listmarkör.
Produktion:
I utgången nedan återställs bilden i liststil till ' ingen ” när användaren för muspekaren över den. På grund av detta togs bilden som användes som listmarkör bort.
Använda brytpunkter med liststil bildklass i medvind
Brytpunkterna är förinställda mediefrågor för elementen i Tailwind. De används för att göra designen responsiv för olika skärmstorlekar. Dessa brytpunkter inkluderar sm, md, lg, xl och 2xl. För att använda en bildklass i liststil med en brytpunkt används följande syntax:
< ul klass = '{breakpoint}:list-image-{ingen ELLER image url}' > < / ul >Låt oss använda den ovan definierade syntaxen för att ändra listmarkören från en ' bild ' till ' ingen ” med hjälp av en brytpunkt. I det här exemplet kommer bildmarkören att tas bort när skärmstorleken ökar bredden på ' md ' brytpunkt:
< div klass = 'flex justify-center' >
< ul klass = ' list-inside list-image-[url(handpointer.png)] md:list-image-none space-y-2 rounded-md bg-green-400 p-2' >
EXEMPELLISTA
< den där >Detta är det första föremålet< / den där >
< den där >Detta är det andra föremålet< / den där >
< den där >Detta är det tredje föremålet< / den där >
< / ul >
< / div >I ovanstående kod, ' md:list-image-none ' klass tar bort bildlistmarkören när skärmstorleken når ' md ' brytpunkt.
Produktion:
I utgången nedan tas bildmarkören bort när skärmstorleken når md-brytpunkten:
Det handlar om att ställa in liststilsbilden i Tailwind.
Slutsats
Tailwind har två fördefinierade bildklasser i liststil för att ta bort eller ställa in listmarkören för ett element till en bild. den ' list-image-[url({Image Url})] ” klass tillhandahåller den angivna bilden som listmarkör. den ' lista-bild-ingen ” klass tar bort alla tidigare tillhandahållna bilder som listmarkör. Den här artikeln har tillhandahållit proceduren för att ställa in liststilstypen i Tailwind.