Antag, at en bruger skal oprette en liste over elementer til deres webside. For at gøre designprocessen nemmere, tilbyder Tailwind forskellige listestil-klasser, der kan bruges til at ændre type, position og justering af listeelementerne.
Denne artikel vil give proceduren for indstilling af listestiltypen i Tailwind.
Hvordan indstilles listestiltypen i medvind?
Tailwind giver tre standard listestiltyper. De bruges til at give ' markør ” stil for listeelementer. De tre standardlistestiltypeklasser er beskrevet som følger:
- liste-disk: Denne klasse vil give de runde punkttegn som listemarkør.
- liste-decimal: Denne klasse vil give decimaltallene som listemarkør.
- liste-ingen: Denne klasse fjerner alle listemarkører fra emnerne.
Syntaksen for brug af listestiltyper er som følger:
< ul klasse = 'liste-{stil}' > < / ul >
For bedre forståelse vil den nedenfor angivne demonstration bruge den ovenfor definerede syntaks til at give forskellige markørstile til at liste elementer. I dette eksempel vil tre listeelementer blive oprettet og forsynet med de forskellige markørstile ved hjælp af standardlistestilklasserne i Tailwind:
< s klasse = 'tekst-center tekst-xl skrifttype-fed' >Standard forskellig 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-disk' >
LISTE # 1
< at >Dette er det første element< / at >
< at >Dette er den anden vare< / at >
< at >Dette er det tredje element< / at >
< / ul >
< ul klasse = 'liste-decimal' >
LISTE # 2
< at >Dette er det første element< / at >
< at >Dette er den anden vare< / at >
< at >Dette er det tredje element< / at >
< / ul >
< ul klasse = 'liste-ingen' >
LISTE # 3
< at >Dette er det første element< / at >
< at >Dette er den anden vare< / at >
< at >Dette er det tredje element< / at >
< / ul >
< / div >
Forklaringen af ovenstående kode er som følger:
- en ' element oprettes med et ' xl ' skriftstørrelse og en ' fremhævet ” skrifttypevægt. Tekstindholdet i elementet er placeret i midten ved hjælp af ' tekst-center ' klasse.
- Efter et linjeskift vises et ' '-element oprettes og er forsynet med en ' bøje ' klasse. Dette vil oprette en beholder, der vil justere de underordnede elementer vandret.
- Det ' retfærdiggøre-center ” klasse placerer emnerne i midten af containeren.
- Det ' mellemrum-x-{størrelse} ” klasse giver det vandrette mellemrum mellem emnerne.
- Det ' bg-{color}-{number} ” klasse indstiller baggrunden for beholderen til den angivne farve.
- Det ' afrundet-lg ” klasse gør containerens hjørner afrundede.
- Det ' mx-4 ” klasse giver den vandrette margen til flex containeren.
- Det ' p-2 ” klasse giver polstring til flex containeren.
- Derefter oprettes tre listeelementer og forsynes med forskellige listestiltyper ved hjælp af ' liste-{type} ' klasse.
Produktion:
Fra nedenstående output kan det ses, at den første liste bruger punkttegn, den anden bruger decimaltal, og den tredje bruger ikke nogen punktmarkør.
Brug af listestilklassen med tilstandsvarianter i medvind
Listestilklassen kan bruges med standardtilstandsvarianterne i Tailwind for at gøre designet mere dynamisk. Ved at bruge svæve-, fokus- og aktivtilstandsvarianterne kan brugeren ændre markørstilen for listeelementerne, når den angivne tilstand udløses. Syntaksen for at bruge listestilklassen med tilstandsvarianter er som følger:
< ul klasse = '{stat}:liste-{stil}...' > < / ul >Her er et eksempel på brug af listestiltypen med en 'hover'-tilstand, hvor brugeren kan ændre markørstilen ved at holde markøren over listeblokken:
< s klasse = 'tekst-center tekst-xl skrifttype-fed' >Hold markøren over listeblokken for at ændre 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-decimal' >
LISTE # 1
< at >Dette er det første element< / at >
< at >Dette er den anden vare< / at >
< at >Dette er det tredje element< / at >
< / ul >
< / div >I ovenstående kode er listen forsynet med ' liste-skive ” klasse som standard listestiltype. Men ved at bruge ' hover:list-decimal ” klasse, vil listestiltypen blive ændret, når brugeren holder musemarkøren over listeblokken.
Produktion:
Nedenstående output viser, at listetypestilen ændres fra en punktopstilling til en nummereret liste, når markøren svæver over listeblokken.
Brug af listestilklassen med brudpunkterne i medvind
Breakpoints bruges til responsivt design af layoutet til forskellige skærmstørrelser. De fem standardbrudpunkter leveret af Tailwind er sm, md, lg, xl og 2xl. Følgende syntaks bruges til at give listetypestilklassen et brudpunkt:
< ul klasse = '{breakpoint}:list-{stil}...' > < / ul >Her er et eksempel på brug af listestiltypen med en ' md ' brudpunkt, hvor markørstilen ændres, når skærmstørrelsen når 'md' brudpunktet:
< s klasse = 'tekst-center tekst-xl skrifttype-fed' >Forøg skærmen Størrelse for at ændre markørstil< / s >
< br >
< div klasse = 'flex justify-center space-x-20 bg-slate-100 rounded-lg mx-4 p-2' >
< ul klasse = 'liste-disk md:liste-decimal' >
LISTE # 1
< at >Dette er det første element< / at >
< at >Dette er det andet punkt< / at >
< at >Dette er det tredje element< / at >
< / ul >
< / div >I ovenstående kode er listen forsynet med ' liste-skive ” klasse som standardstil. Men ved at bruge ' md:liste-decimal ” klasse ændres listestiltypen for “md”-skærmstørrelsen.
Produktion:
Som du kan se i nedenstående output, ændres listestiltypen fra disk til decimal, når skærmstørrelsen når ' md ” brudpunkt.
Det handler om at indstille List Style Type i Tailwind.
Konklusion
Tailwind giver tre foruddefinerede listestiltypeklasser til ændring af et elements listestil. Det ' liste-skive ”-klassen giver punktopstillingerne for at opliste emnerne. Det ' liste-decimal ”-klasse giver numrene for at liste varerne. Det ' liste-ingen ” klasse opretter en liste, der ikke bruger nogen elementmarkør. Denne artikel har angivet proceduren for indstilling af listestiltypen i Tailwind.