Anta at en bruker må lage en liste over elementer for nettsiden deres. For å gjøre designprosessen enklere, tilbyr Tailwind forskjellige listestilklasser som kan brukes til å endre type, plassering og justering av listeelementene.
Denne artikkelen vil gi prosedyren for å angi listestiltypen i Tailwind.
Hvordan stille inn listestiltypen i medvind?
Tailwind gir tre standard listestiltyper. De brukes til å gi ' markør ' stil for listeelementer. De tre standard listestiltypeklassene er beskrevet som følger:
- liste-plate: Denne klassen vil gi de runde kulepunktene som listemarkør.
- liste-desimal: Denne klassen vil gi desimaltallene som listemarkør.
- liste-ingen: Denne klassen vil fjerne eventuelle listemarkører fra elementene.
Syntaksen for bruk av listestiltypene er som følger:
< ul klasse = 'liste-{stil}' > < / ul >
For bedre forståelse vil demonstrasjonen nedenfor bruke den ovenfor definerte syntaksen for å gi forskjellige markørstiler for å liste elementer. I dette eksemplet vil tre listeelementer opprettes og leveres med de forskjellige markørstilene ved å bruke standard listestilklassene i Tailwind:
< s klasse = 'text-center text-xl font-bold' >Standard forskjellig liste Stil Typer i medvind< / s >
< br >
< div klasse = 'flex justify-center space-x-20 bg-slate-100 rounded-lg mx-4 p-2' >
< ul klasse = 'liste-plate' >
LISTE # 1
< at >Dette er det første elementet< / at >
< at >Dette er det andre elementet< / at >
< at >Dette er det tredje elementet< / at >
< / ul >
< ul klasse = 'liste-desimal' >
LISTE # 2
< at >Dette er det første elementet< / at >
< at >Dette er det andre elementet< / at >
< at >Dette er det tredje elementet< / at >
< / ul >
< ul klasse = 'liste-ingen' >
LISTE # 3
< at >Dette er det første elementet< / at >
< at >Dette er det andre elementet< / at >
< at >Dette er det tredje elementet< / at >
< / ul >
< / div >
Forklaringen av koden ovenfor er som følger:
- en ' element er opprettet med en ' xl ' skriftstørrelse og en ' dristig ” skriftvekt. Tekstinnholdet til elementet plasseres i midten ved hjelp av ' tekst-senter ' klasse.
- Etter et linjeskift, en ' element opprettes og er utstyrt med en ' bøye seg ' klasse. Dette vil opprette en beholder som vil justere de underordnede elementene horisontalt.
- « rettferdiggjøre-senter ” klasse vil plassere varene i midten av beholderen.
- « space-x-{størrelse} ” klasse gir det horisontale rommet mellom elementene.
- « bg-{color}-{number} ” klasse setter bakgrunnen til beholderen til den angitte fargen.
- « avrundet-lg ” klasse gjør hjørnene på beholderen avrundede.
- « mx-4 ”-klassen gir den horisontale marginen til flex-beholderen.
- « p-2 ”-klassen gir polstring til flex-beholderen.
- Deretter opprettes tre listeelementer og leveres med forskjellige listestiltyper ved å bruke ' liste-{type} ' klasse.
Produksjon:
Fra utdataene nedenfor kan det ses at den første listen bruker punkttegn, den andre bruker desimaltall, og den tredje bruker ingen elementmarkør.
Bruk av listestilklassen med tilstandsvarianter i medvind
Listestilklassen kan brukes med standardtilstandsvariantene i Tailwind for å gjøre designet mer dynamisk. Ved å bruke sveve-, fokus- og aktiv tilstandsvarianter kan brukeren endre markørstilen til listeelementene hver gang den angitte tilstanden utløses. Syntaksen for bruk av listestilklassen med tilstandsvarianter er som følger:
< ul klasse = '{state}:liste-{stil}...' > < / ul >Her er et eksempel på bruk av listestiltypen med en 'hover'-tilstand, der brukeren kan endre markørstilen ved å holde musepekeren over listeblokken:
< s klasse = 'text-center text-xl font-bold' >Hold markøren over listeblokken for å endre markørstil< / s >
< br >
< div klasse = 'flex justify-center space-x-20 bg-slate-100 rounded-lg mx-4 p-2' >
< ul klasse = 'list-disc hover:list-desimal' >
LISTE # 1
< at >Dette er det første elementet< / at >
< at >Dette er det andre elementet< / at >
< at >Dette er det tredje elementet< / at >
< / ul >
< / div >I koden ovenfor er listen utstyrt med ' liste-plate ' klasse som standard listestiltype. Men ved å bruke ' hover:list-desimal ” klasse, vil listestiltypen endres når brukeren holder musepekeren over listeblokken.
Produksjon:
Utdataene nedenfor viser at listetypestilen endres fra en punktliste til en nummerert liste når markøren svever over listeblokken.
Bruke listestilklassen med bruddpunktene i medvind
Knekkpunkter brukes for responsiv utforming av oppsettet for forskjellige skjermstørrelser. De fem standardbruddpunktene levert av Tailwind er sm, md, lg, xl og 2xl. Følgende syntaks brukes for å gi listetypestilklassen et bruddpunkt:
< ul klasse = '{breakpoint}:list-{stil}...' > < / ul >Her er et eksempel på bruk av listestiltypen med en ' md ”-bruddpunkt, der markørstilen endres når skjermstørrelsen når ”md”-bruddpunktet:
< s klasse = 'text-center text-xl font-bold' >Øk skjermen Størrelse for å endre markørstil< / s >
< br >
< div klasse = 'flex justify-center space-x-20 bg-slate-100 rounded-lg mx-4 p-2' >
< ul klasse = 'liste-plate md:liste-desimal' >
LISTE # 1
< at >Dette er det første elementet< / at >
< at >Dette er det andre elementet< / at >
< at >Dette er det tredje elementet< / at >
< / ul >
< / div >I koden ovenfor er listen utstyrt med ' liste-plate '-klassen som standard stil. Men ved å bruke ' md:liste-desimal ” klasse vil listestiltypen endres for “md”-skjermstørrelsen.
Produksjon:
Som du kan se i utdataene nedenfor, endres listestiltypen fra plate til desimal når skjermstørrelsen når ' md ' bruddpunkt.
Det handler om å angi List Style Type i Tailwind.
Konklusjon
Tailwind gir tre forhåndsdefinerte listestiltypeklasser for å endre listestilen til et element. « liste-plate ”-klassen gir punktene for å liste varene. « liste-desimal ” klasse gir tallene for å liste varene. « liste-ingen Klasse oppretter en liste som ikke bruker noen elementmarkør. Denne artikkelen har gitt fremgangsmåten for å angi listestiltypen i Tailwind.