Dit artikel beschrijft de procedure voor het instellen van de lijststijlafbeelding van een lijstblok in Tailwind.
Hoe stel ik de lijststijlafbeeldingsklasse in Tailwind in?
De List Style Image Class wordt gebruikt om een afbeelding aan te bieden als lijstmarkering in Tailwind. Standaard biedt Tailwind alleen de “ lijst-afbeelding-geen ”-klasse die alleen kan worden gebruikt voor het verwijderen van eerder ingestelde afbeeldingsmarkeringen voor een lijst.
Syntaxis
De syntaxis voor het gebruik van de lijststijlafbeeldingsklasse in Tailwind is als volgt:
< ul klas = 'lijst-afbeelding-[url({Afbeeldings-URL})]' > < / ul >
Deze syntaxis biedt de opgegeven afbeelding als markering voor het lijstelement.
< ul klas = 'lijst-afbeelding-geen' > < / ul >
Deze syntaxis verwijdert alle eerder ingestelde afbeeldingen als markering voor een lijstelement.
Laten we de hierboven gedefinieerde syntaxis gebruiken om een afbeelding als markering in een ongeordende lijst te gebruiken. In deze demonstratie heeft de gebruiker een afbeelding met de naam “ handpointer.png aanwezig in dezelfde Tailwind-projectmap. Als de afbeelding in een andere map aanwezig is, moet de gebruiker het volledige pad naar de afbeeldingsklasse lijststijl opgeven. We zullen die afbeelding gebruiken als lijstmarkering met behulp van de klasse 'list-image'.
< div klas = 'flex justify-center' >
< ul klas = ' lijst-in lijst-afbeelding-[url(handpointer.png)] spatie-y-2 afgerond-md bg-groen-400 p-2' >
VOORBEELDLIJST
< Dat >Dit is het eerste artikel< / Dat >
< Dat >Dit is het tweede artikel< / Dat >
< Dat >Dit is het derde item< / Dat >
< / ul >
< / div >
De uitleg van de bovenstaande code is als volgt:
- A ' ”-element wordt gemaakt en wordt voorzien van de “ buigen ”-klasse die de items horizontaal in een container uitlijnt.
- De ' rechtvaardigen-centrum De klasse lijnt de onderliggende items uit met het midden van de container.
- Vervolgens wordt de “
- Het is voorzien van de “ lijst-binnen ”-klasse die de opgegeven lijstitemmarkering in het lijstblok plaatst.
- De ' lijst-afbeelding-[url({Afbeeldings-URL})] ”-klasse wordt gebruikt om een afbeelding aan te bieden als lijstitemmarkering voor het element.
- De ' spatie-y-{getal} ”-klasse biedt de verticale ruimte tussen de lijstitems.
- De ' afgerond-md ”-klasse maakt de hoeken van het lijstblok afgerond.
- De ' bg-{kleur}-{nummer} ” klasse wordt gebruikt voor het leveren van de achtergrondkleur aan het lijstblok.
- De ' p-2 ” klasse levert de rand aan het lijstelement.
- Er worden drie lijstitems gemaakt met behulp van de “
”-tags. Uitgang:
In de uitvoer is te zien dat een handaanwijzerafbeelding is ingesteld als markering voor de lijstitems:
Staatsvarianten gebruiken met lijststijlafbeeldingsklasse in staartwind
Tailwind biedt verschillende statusvarianten, zoals hover, focus en active, wat helpt bij het maken van interactieve ontwerpen. Om een afbeeldingsklasse in lijststijl met deze statussen te gebruiken, wordt de volgende syntaxis gebruikt:
< ul klas = '{state}:lijst-afbeelding-{geen OF afbeeldings-URL}' > < / ul >Laten we de hierboven gedefinieerde syntaxis gebruiken om de afbeeldingseigenschap in lijststijl te gebruiken met de “ zweven ’ staat in Tailwind. In deze demonstratie wordt de lijst voorzien van een afbeelding als lijstmarkering. Echter, met behulp van de “ zweven ” staat, wordt de afbeelding verwijderd.
< div klas = 'flex justify-center' >
< ul klas = ' list-inside list-image-[url(handpointer.png)] hover:list-image-none spatie-y-2 afgerond-md bg-green-400 p-2' >
VOORBEELDLIJST
< Dat >Dit is het eerste artikel< / Dat >
< Dat >Dit is het tweede artikel< / Dat >
< Dat >Dit is het derde item< / Dat >
< / ul >
< / div >In de bovenstaande code wordt de “ hover:lijst-afbeelding-none ” klasse verwijdert de eerder ingestelde afbeelding als lijstmarkering.
Uitgang:
In de onderstaande uitvoer wordt de afbeelding in lijststijl opnieuw ingesteld op ' geen ' wanneer de gebruiker de muiscursor erover beweegt. Hierdoor werd de afbeelding die als lijstmarkering werd gebruikt, verwijderd.
Breekpunten gebruiken met lijststijlafbeeldingsklasse in staartwind
De breakpoints zijn vooraf ingestelde mediaquery's voor de elementen in Tailwind. Ze worden gebruikt om het ontwerp responsief te maken voor verschillende schermformaten. Deze breekpunten omvatten sm, md, lg, xl en 2xl. Om een afbeeldingsklasse in lijststijl met een breekpunt te gebruiken, wordt de volgende syntaxis gebruikt:
< ul klas = '{breakpoint}:lijst-afbeelding-{geen OF afbeeldings-URL}' > < / ul >Laten we de hierboven gedefinieerde syntaxis gebruiken om de lijstmarkering te wijzigen van een “ afbeelding ' naar ' geen ” met behulp van een breekpunt. In dit voorbeeld wordt de afbeeldingsmarkering verwijderd zodra de schermgrootte de breedte van “ md ' breekpunt:
< div klas = 'flex justify-center' >
< ul klas = ' lijst-binnen lijst-afbeelding-[url(handpointer.png)] md:lijst-afbeelding-geen spatie-y-2 afgerond-md bg-groen-400 p-2' >
VOORBEELDLIJST
< Dat >Dit is het eerste artikel< / Dat >
< Dat >Dit is het tweede artikel< / Dat >
< Dat >Dit is het derde item< / Dat >
< / ul >
< / div >In de bovenstaande code wordt de “ md:lijst-afbeelding-none ” klasse verwijdert de afbeeldingslijstmarkering wanneer de schermgrootte de “ md ' breekpunt.
Uitgang:
In de onderstaande uitvoer wordt de afbeeldingsmarkering verwijderd wanneer de schermgrootte het md-breekpunt bereikt:
Dat gaat allemaal over het instellen van de lijstachtige afbeelding in Tailwind.
Conclusie
Tailwind heeft twee vooraf gedefinieerde afbeeldingsklassen in lijststijl voor het verwijderen of instellen van de lijstmarkering van een element op een afbeelding. De ' lijst-afbeelding-[url({Afbeeldings-URL})] ”-klasse levert de opgegeven afbeelding als lijstmarkering. De ' lijst-afbeelding-geen ”-klasse verwijdert alle eerder opgegeven afbeeldingen als lijstmarkering. In dit artikel wordt de procedure beschreven voor het instellen van het lijststijltype in Tailwind.