Pretpostavimo da korisnik mora stvoriti popis stavki za svoju web stranicu. Kako bi proces dizajniranja bio lakši, Tailwind nudi razne klase stilova popisa koje se mogu koristiti za promjenu tipa, položaja i poravnanja elemenata popisa.
Ovaj članak će pružiti postupak za postavljanje vrste stila popisa u Tailwindu.
Kako postaviti vrstu stila popisa u Tailwindu?
Tailwind nudi tri zadana tipa stilova popisa. Koriste se za pružanje ' marker ” stil za stavke popisa. Tri zadane klase tipa stila popisa opisane su kako slijedi:
- disk s popisom: Ova klasa će pružiti okrugle grafičke oznake kao oznaku popisa.
- lista-decimala: Ova klasa će dati decimalne brojeve kao oznaku popisa.
- lista-ništa: Ova klasa će ukloniti sve oznake popisa iz stavki.
Sintaksa za korištenje tipova stilova popisa je sljedeća:
< ul razreda = 'list-{style}' > < / ul >
Radi boljeg razumijevanja, dolje navedena demonstracija koristit će gore definiranu sintaksu za pružanje različitih stilova markera za stavke popisa. U ovom primjeru, tri elementa popisa bit će stvorena i opremljena različitim stilovima markera pomoću zadanih klasa stilova popisa u Tailwindu:
< str razreda = 'text-center text-xl font-bold' >Zadani različiti popis Stil Upisuje u Tailwind< / str >
< br >
< div razreda = 'flex justify-center space-x-20 bg-slate-100 rounded-lg mx-4 p-2' >
< ul razreda = 'popis-disk' >
POPIS # 1
< da >Ovo je prva stavka< / da >
< da >Ovo je druga stavka< / da >
< da >Ovo je treća stavka< / da >
< / ul >
< ul razreda = 'decimalni popis' >
POPIS # 2
< da >Ovo je prva stavka< / da >
< da >Ovo je druga stavka< / da >
< da >Ovo je treća stavka< / da >
< / ul >
< ul razreda = 'list-none' >
POPIS # 3
< da >Ovo je prva stavka< / da >
< da >Ovo je druga stavka< / da >
< da >Ovo je treća stavka< / da >
< / ul >
< / div >
Objašnjenje gornjeg koda je sljedeće:
- A “ ' element je kreiran s ' xl ' veličina fonta i ' podebljano ” težina fonta. Tekstualni sadržaj elementa postavlja se u središte pomoću ' tekst-centar ” razred.
- Nakon prijeloma retka, ' ' element je kreiran i ima ' savijati ” razred. Ovo će stvoriti spremnik koji će vodoravno poravnati podređene stavke.
- ' poravnati-centrirati ” klasa će staviti stavke u središte spremnika.
- ' razmak-x-{veličina} ” klasa pruža vodoravni razmak između stavki.
- ' bg-{boja}-{broj} ” klasa postavlja pozadinu spremnika na navedenu boju.
- ' zaobljeno-lg ” klasa čini kutove spremnika zaobljenima.
- ' mx-4 ” klasa daje horizontalnu marginu fleksibilnom spremniku.
- ' p-2 ” klasa pruža podlogu za flex spremnik.
- Zatim se stvaraju tri elementa popisa i dobivaju različite vrste stilova popisa pomoću ' lista-{vrsta} ” razred.
Izlaz:
Iz donjeg rezultata može se vidjeti da prvi popis koristi grafičke oznake, drugi koristi decimalne brojeve, a treći ne koristi nikakvu oznaku stavke.
Korištenje klase stila liste s varijantama stanja u Tailwindu
Klasa stila popisa može se koristiti sa zadanim varijantama stanja u Tailwindu kako bi dizajn bio dinamičniji. Koristeći varijante lebdenja, fokusa i aktivnog stanja, korisnik može promijeniti stil markera stavki popisa kad god se aktivira navedeno stanje. Sintaksa za korištenje klase stila popisa s varijantama stanja je sljedeća:
< ul razreda = '{state}:list-{style}...' > < / ul >Ovdje je primjer upotrebe vrste stila popisa sa stanjem 'lebdjenja', gdje korisnik može promijeniti stil markera tako što će lebdjeti iznad bloka popisa:
< str razreda = 'text-center text-xl font-bold' >Zadržite pokazivač iznad bloka popisa za promjenu stila markera< / str >
< br >
< div razreda = 'flex justify-center space-x-20 bg-slate-100 rounded-lg mx-4 p-2' >
< ul razreda = 'list-disc hover:list-decimal' >
POPIS # 1
< da >Ovo je prva stavka< / da >
< da >Ovo je druga stavka< / da >
< da >Ovo je treća stavka< / da >
< / ul >
< / div >U gornjem kodu, popis je dat s ' lista-disk ” kao zadanu vrstu stila popisa. Međutim, koristeći ' hover:list-decimal ” tip stila popisa će se promijeniti kada korisnik pokazivačem miša prijeđe iznad bloka popisa.
Izlaz:
Donji rezultat pokazuje da se stil vrste popisa mijenja iz popisa s grafičkim oznakama u numerirani popis kada pokazivač lebdi iznad bloka popisa.
Korištenje klase stila liste s prijelomnim točkama u Tailwindu
Prijelomne točke koriste se za responzivno dizajniranje izgleda za različite veličine zaslona. Pet zadanih prijelomnih točaka koje pruža Tailwind su sm, md, lg, xl i 2xl. Sljedeća sintaksa koristi se za pružanje klase stila vrste popisa s točkom prekida:
< ul razreda = '{breakpoint}:list-{style}...' > < / ul >Evo primjera korištenja vrste stila popisa s ' doktor medicine ”, gdje će se stil markera promijeniti kada veličina zaslona dosegne prekidnu točku “md”:
< str razreda = 'text-center text-xl font-bold' >Povećaj zaslon Veličina za promjenu stila markera< / str >
< br >
< div razreda = 'flex justify-center space-x-20 bg-slate-100 rounded-lg mx-4 p-2' >
< ul razreda = 'list-disc md:list-decimal' >
POPIS # 1
< da >Ovo je prva stavka< / da >
< da >Ovo je druga stavka< / da >
< da >Ovo je treća stavka< / da >
< / ul >
< / div >U gornjem kodu, popis je dat s ' lista-disk ” kao zadani stil. Međutim, koristeći ' md:popis-decimal ” tip stila popisa će se promijeniti za veličinu zaslona “md”.
Izlaz:
Kao što možete vidjeti u donjem izlazu, vrsta stila popisa mijenja se iz diska u decimalni kada veličina zaslona dosegne ' doktor medicine ” prijelomna točka.
To je sve o postavljanju vrste stila popisa u Tailwindu.
Zaključak
Tailwind pruža tri unaprijed definirane klase tipa stila popisa za promjenu stila popisa elementa. ' lista-disk ” klasa daje grafičke oznake za popis stavki. ' lista-decimala ” klasa daje brojeve za popis stavki. ' popis-ništa ” klasa stvara popis koji ne koristi nikakvu oznaku stavke. Ovaj članak pruža postupak za postavljanje vrste stila popisa u Tailwindu.