Oletame, et kasutaja peab looma oma veebilehe jaoks üksuste loendi. Kujundamise hõlbustamiseks pakub Tailwind erinevaid loendi stiilis klasse, mida saab kasutada loendielementide tüübi, asukoha ja joonduse muutmiseks.
See artikkel pakub Tailwindis loendi stiili tüübi määramise protseduuri.
Kuidas määrata Tailwindis loendi stiili tüüp?
Tailwind pakub kolme vaikeloendi stiili tüüpi. Neid kasutatakse selleks, et pakkuda ' marker ” stiilis loendiüksuste jaoks. Kolme vaikimisi loendi stiili tüüpi klassi kirjeldatakse järgmiselt.
- list-plaat: See klass pakub loendi markerina ümaraid täppe.
- list-decimal: See klass esitab loendi markerina kümnendarvud.
- list-none: See klass eemaldab üksustelt kõik loendimarkerid.
Loendi stiilitüüpide kasutamise süntaks on järgmine:
< ul klass = 'loend-{style}' > < / ul >
Parema mõistmise huvides kasutatakse alltoodud esitluses ülalmääratletud süntaksit, et pakkuda üksuste loetlemiseks erinevaid markeri stiile. Selles näites luuakse kolm loendielementi, mis on varustatud erinevate markeristiilidega, kasutades Tailwindi loendi vaikestiiliklasse:
< lk klass = 'text-center text-xl font-bold' >Vaikimisi erinev loend Stiil Tüübid taganttuules< / lk >
< br >
< div klass = 'flex justify-center space-x-20 bg-slate-100 rounded-lg mx-4 p-2' >
< ul klass = 'nimekiri-plaat' >
LOEND # 1
< et >See on esimene üksus< / et >
< et >See on teine üksus< / et >
< et >See on kolmas üksus< / et >
< / ul >
< ul klass = 'loend-koma' >
LOEND # 2
< et >See on esimene üksus< / et >
< et >See on teine üksus< / et >
< et >See on kolmas üksus< / et >
< / ul >
< ul klass = 'nimekiri-pole' >
LOEND # 3
< et >See on esimene üksus< / et >
< et >See on teine üksus< / et >
< et >See on kolmas üksus< / et >
< / ul >
< / div >
Ülaltoodud koodi selgitus on järgmine:
- A ' ' element luuakse ' xl ' fondi suurus ja ' julge ” fondi kaal. Elemendi tekstisisu paigutatakse keskele, kasutades ' tekstikeskus ” klass.
- Pärast rea pausi ilmub ' ' element luuakse ja see on varustatud ' painduv ” klass. See loob konteineri, mis joodab alamüksused horisontaalselt.
- ' õigusta-keskus ” klass asetab esemed konteineri keskele.
- ' tühik-x-{suurus} ” klass pakub horisontaalset ruumi üksuste vahel.
- ' bg-{color}-{number} ” klass määrab konteineri tausta määratud värviga.
- ' ümardatud-lg ” klass teeb anuma nurgad ümaraks.
- ' mx-4 ” klass pakub paindlikule konteinerile horisontaalse veerise.
- ' p-2 ” klass pakub flex konteinerile polsterdust.
- Järgmisena luuakse kolm loendielementi, mis on varustatud erinevate loendi stiilitüüpidega, kasutades ' list-{type} ” klass.
Väljund:
Allolevast väljundist on näha, et esimene loend kasutab täppe, teine kümnendnumbreid ja kolmas ei kasuta ühtegi üksuse markerit.
Loendistiili klassi kasutamine Tailwindis olekuvariantidega
Loendi stiiliklassi saab kasutada koos Tailwindi vaikeolekuvariantidega, et muuta kujundus dünaamilisemaks. Hõljutus-, fookus- ja aktiivse oleku variante kasutades saab kasutaja muuta loendiüksuste markeri stiili alati, kui määratud olek käivitatakse. Loendi stiiliklassi kasutamise süntaks olekuvariantidega on järgmine:
< ul klass = '{state}:list-{style}...' > < / ul >Siin on näide loendi stiili tüübi kasutamisest olekuga 'hover', kus kasutaja saab muuta markeri stiili, hõljutades kursorit loendiploki kohal:
< lk klass = 'text-center text-xl font-bold' >Hõljutage kursorit loendiploki kohal, et muuta markeri stiili< / lk >
< br >
< div klass = 'flex justify-center space-x-20 bg-slate-100 rounded-lg mx-4 p-2' >
< ul klass = 'list-disc hover:list-decimal' >
LOEND # 1
< et >See on esimene üksus< / et >
< et >See on teine üksus< / et >
< et >See on kolmas üksus< / et >
< / ul >
< / div >Ülaltoodud koodis on loend varustatud ' list-plaat ” klassi vaikeloendi stiilitüübina. Kuid kasutades ' hover:list-decimal ” klassis, muudetakse loendi stiili tüüpi, kui kasutaja viib hiirekursori loendiploki kohale.
Väljund:
Allolev väljund näitab, et loenditüübi stiil muutub täpploendist nummerdatud loendiks, kui kursor hõljub loendiploki kohal.
Loendistiili klassi kasutamine Tailwindis katkestuspunktidega
Katkestuspunkte kasutatakse erinevate ekraanisuuruste paigutuse tundlikuks kujundamiseks. Tailwindi pakutavad viis vaikemurdepunkti on sm, md, lg, xl ja 2xl. Loenditüübi stiiliklassi katkestuspunktiga varustamiseks kasutatakse järgmist süntaksit:
< ul klass = '{breakpoint}:list-{style}...' > < / ul >Siin on näide loendi stiili tüübi kasutamisest koos ' md ” murdepunkt, kus markeri stiil muutub, kui ekraani suurus jõuab „md” katkestuspunktini:
< lk klass = 'text-center text-xl font-bold' >Suurendage ekraani Suurus Markeri stiili muutmiseks< / lk >
< br >
< div klass = 'flex justify-center space-x-20 bg-slate-100 rounded-lg mx-4 p-2' >
< ul klass = 'list-disc md:loend-decimal' >
LOEND # 1
< et >See on esimene üksus< / et >
< et >See on teine üksus< / et >
< et >See on kolmas üksus< / et >
< / ul >
< / div >Ülaltoodud koodis on loend varustatud ' list-plaat ” klassi vaikestiiliks. Kuid kasutades ' md:loend-decimal ” klassi loendi stiili tüüp muutub ekraani suuruse „md” jaoks.
Väljund:
Nagu näete allolevast väljundist, muutub loendi stiili tüüp plaadilt kümnendkohani, kui ekraani suurus jõuab ' md ” murdepunkt.
See kõik puudutab loendi stiili tüübi määramist Tailwindis.
Järeldus
Tailwind pakub kolme eelmääratletud loendi stiilide klassi elemendi loendi stiili muutmiseks. ' list-plaat ” klass pakub üksuste loetlemiseks täppe. ' loend-koma ” klass pakub numbreid üksuste loetlemiseks. ' nimekiri-pole ” klass loob loendi, mis ei kasuta ühtegi üksuse markerit. See artikkel pakub Tailwindis loendi stiili tüübi määramise protseduuri.