Stel dat een gebruiker een lijst met items voor zijn webpagina moet maken. Om het ontwerpproces eenvoudiger te maken, biedt Tailwind verschillende lijststijlklassen die kunnen worden gebruikt voor het wijzigen van het type, de positie en de uitlijning van de lijstelementen.
Dit artikel beschrijft de procedure voor het instellen van het lijststijltype in Tailwind.
Hoe stel ik het lijststijltype in Tailwind in?
Tailwind biedt drie standaardtypen lijststijlen. Ze worden gebruikt om de “ markeerstift ”stijl voor lijstitems. De drie standaardklassen voor lijststijltypes worden als volgt beschreven:
- lijst-schijf: Deze klasse biedt de ronde opsommingstekens als lijstmarkering.
- lijst-decimaal: Deze klasse levert de decimale getallen als lijstmarkering.
- lijst-geen: Deze klasse verwijdert alle lijstmarkeringen van de items.
De syntaxis voor het gebruik van de lijststijltypen is als volgt:
< ul klas = 'lijst-{stijl}' > < / ul >
Voor een beter begrip zal de onderstaande demonstratie de hierboven gedefinieerde syntaxis gebruiken om verschillende markeringsstijlen te bieden om items weer te geven. In dit voorbeeld worden drie lijstelementen aangemaakt en voorzien van de verschillende markeringsstijlen met behulp van de standaard lijststijlklassen in Tailwind:
< P klas = 'tekst-center tekst-xl lettertype-bold' >Standaard verschillende lijst Stijl Typen in meewind< / P >
< br >
< div klas = 'flex justify-center space-x-20 bg-slate-100 afgerond-lg mx-4 p-2' >
< ul klas = 'lijst-schijf' >
LIJST # 1
< Dat >Dit is het eerste artikel< / Dat >
< Dat >Dit is het tweede artikel< / Dat >
< Dat >Dit is het derde item< / Dat >
< / ul >
< ul klas = 'lijst-decimaal' >
LIJST # 2
< Dat >Dit is het eerste artikel< / Dat >
< Dat >Dit is het tweede artikel< / Dat >
< Dat >Dit is het derde item< / Dat >
< / ul >
< ul klas = 'lijst-geen' >
LIJST # 3
< 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 met een “ xl ' lettergrootte en een ' vetgedrukt ' lettertype dikte. De tekstinhoud van het element wordt in het midden geplaatst met behulp van de “ tekst-centrum ' klas.
- Na een regeleinde verschijnt een “ ”-element wordt gemaakt en wordt voorzien van een “ buigen ' klas. Hierdoor wordt een container gemaakt waarin de onderliggende items horizontaal worden uitgelijnd.
- De ' rechtvaardigen-centrum '-klasse plaatst de items in het midden van de container.
- De ' spatie-x-{grootte} ”-klasse biedt de horizontale ruimte tussen de items.
- De ' bg-{kleur}-{nummer} ” klasse stelt de achtergrond van de container in op de opgegeven kleur.
- De ' afgerond-lg ”-klasse maakt de hoeken van de container afgerond.
- De ' mx-4 ”-klasse biedt de horizontale marge voor de flexcontainer.
- De ' p-2 ”-klasse biedt opvulling voor de flexcontainer.
- Vervolgens worden drie lijstelementen gemaakt en voorzien van verschillende lijststijltypen met behulp van de “ lijst-{type} ' klas.
Uitgang:
Uit de onderstaande uitvoer blijkt dat de eerste lijst opsommingstekens gebruikt, de tweede decimale getallen en de derde geen itemmarkering gebruikt.
De lijststijlklasse gebruiken met de staatsvarianten in Tailwind
De lijststijlklasse kan worden gebruikt met de standaardstatusvarianten in Tailwind om het ontwerp dynamischer te maken. Met behulp van de hover-, focus- en actieve statusvarianten kan de gebruiker de markeringsstijl van de lijstitems wijzigen wanneer de opgegeven status wordt geactiveerd. De syntaxis voor het gebruik van de lijststijlklasse met statusvarianten is als volgt:
< ul klas = '{state}:lijst-{stijl}...' > < / ul >Hier is een voorbeeld van het gebruik van het lijststijltype met een ‘zweef’-status, waarbij de gebruiker de markeringsstijl kan wijzigen door over het lijstblok te bewegen:
< P klas = 'tekst-center tekst-xl lettertype-bold' >Beweeg de cursor over het lijstblok om de markeringsstijl te wijzigen< / P >
< br >
< div klas = 'flex justify-center space-x-20 bg-slate-100 afgerond-lg mx-4 p-2' >
< ul klas = 'lijst-schijf hover:lijst-decimaal' >
LIJST # 1
< 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 lijst voorzien van de “ lijst-schijf ”-klasse als het standaardlijststijltype. Echter, met behulp van de “ hover:lijst-decimaal ” klasse, wordt het lijststijltype gewijzigd wanneer de gebruiker de muiscursor over het lijstblok beweegt.
Uitgang:
De onderstaande uitvoer laat zien dat de stijl van het lijsttype verandert van een lijst met opsommingstekens in een genummerde lijst wanneer de cursor over het lijstblok zweeft.
De lijststijlklasse gebruiken met de breekpunten in Tailwind
Breekpunten worden gebruikt voor het responsief ontwerpen van de lay-out voor verschillende schermformaten. De vijf standaardbreekpunten van Tailwind zijn sm, md, lg, xl en 2xl. De volgende syntaxis wordt gebruikt om de lijsttypestijlklasse van een breekpunt te voorzien:
< ul klas = '{breekpunt}:lijst-{stijl}...' > < / ul >Hier is een voorbeeld van het gebruik van het lijststijltype met een “ md ”-breekpunt, waarbij de markeringsstijl verandert wanneer de schermgrootte het “md”-breekpunt bereikt:
< P klas = 'tekst-center tekst-xl lettertype-bold' >Scherm vergroten Maat om de markeringsstijl te wijzigen< / P >
< br >
< div klas = 'flex justify-center space-x-20 bg-slate-100 afgerond-lg mx-4 p-2' >
< ul klas = 'lijst-schijf md:lijst-decimaal' >
LIJST # 1
< 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 lijst voorzien van de “ lijst-schijf ”-klasse als de standaardstijl. Echter, met behulp van de “ md:lijst-decimaal ” klasse zal het lijststijltype veranderen voor de “md” schermgrootte.
Uitgang:
Zoals u in de onderstaande uitvoer kunt zien, verandert het lijststijltype van schijf naar decimaal wanneer de schermgrootte de “ md ' breekpunt.
Dat gaat allemaal over het instellen van het Lijststijltype in Tailwind.
Conclusie
Tailwind biedt drie vooraf gedefinieerde lijststijltypeklassen voor het wijzigen van de lijststijl van een element. De ' lijst-schijf ” klasse biedt de opsommingstekens voor het vermelden van de items. De ' lijst-decimaal ” klasse biedt de nummers voor het vermelden van de items. De ' lijst-geen ” class maakt een lijst die geen itemmarkering gebruikt. In dit artikel wordt de procedure beschreven voor het instellen van het lijststijltype in Tailwind.