Pieņemsim, ka lietotājam ir jāizveido savas tīmekļa lapas vienumu saraksts. Lai atvieglotu projektēšanas procesu, Tailwind nodrošina dažādas saraksta stila klases, kuras var izmantot, lai mainītu saraksta elementu veidu, pozīciju un izlīdzināšanu.
Šajā rakstā tiks sniegta procedūra saraksta stila iestatīšanai programmā Tailwind.
Kā iestatīt saraksta stila veidu programmā Tailwind?
Tailwind nodrošina trīs noklusējuma saraksta stilu veidus. Tie tiek izmantoti, lai nodrošinātu ' marķieris ” stilu saraksta vienumiem. Trīs noklusējuma saraksta stila veidu klases ir aprakstītas šādi:
- saraksts-disks: Šī klase kā saraksta marķieri nodrošinās apaļos aizzīmju punktus.
- saraksta decimālzīme: Šī klase kā saraksta marķieri nodrošinās decimālskaitļus.
- saraksts — nav: Šī klase no vienumiem noņems visus saraksta marķierus.
Sarakstu stila veidu izmantošanas sintakse ir šāda:
< ul klasē = 'saraksts-{style}' > < / ul >
Lai labāk izprastu, tālāk sniegtajā demonstrācijā tiks izmantota iepriekš definētā sintakse, lai nodrošinātu dažādus marķieru stilus vienumu sarakstam. Šajā piemērā tiks izveidoti trīs saraksta elementi un nodrošināti ar dažādiem marķieru stiliem, izmantojot noklusējuma saraksta stila klases programmā Tailwind:
< lpp klasē = 'text-center text-xl font-bold' >Noklusējuma atšķirīgo saraksts Stils Veidi Tailwind< / lpp >
< br >
< div klasē = 'flex justify-center space-x-20 bg-slate-100 rounded-lg mx-4 p-2' >
< ul klasē = 'saraksta disks' >
SARAKSTS Nr. 1
< ka >Šī ir pirmā prece< / ka >
< ka >Šis ir otrais punkts< / ka >
< ka >Šis ir trešais punkts< / ka >
< / ul >
< ul klasē = 'saraksts aiz komata' >
SARAKSTS Nr. 2
< ka >Šī ir pirmā prece< / ka >
< ka >Šis ir otrais punkts< / ka >
< ka >Šis ir trešais punkts< / ka >
< / ul >
< ul klasē = 'saraksts-nav' >
SARAKSTS Nr. 3
< ka >Šī ir pirmā prece< / ka >
< ka >Šis ir otrais punkts< / ka >
< ka >Šis ir trešais punkts< / ka >
< / ul >
< / div >
Iepriekš minētā koda skaidrojums ir šāds:
- A ' 'elements ir izveidots ar ' xl ' fonta lielums un ' treknrakstā ” fonta svars. Elementa teksta saturs tiek novietots centrā, izmantojot ' teksta centrs ” klase.
- Pēc rindiņas pārtraukuma parādās ' 'elements ir izveidots un tiek nodrošināts ar ' flex ” klase. Tādējādi tiks izveidots konteiners, kas izlīdzinās pakārtotos vienumus horizontāli.
- ' attaisnot-centrs ” klase priekšmetus novietos konteinera centrā.
- ' space-x-{size} ” klase nodrošina horizontālo atstarpi starp vienumiem.
- ' bg-{color}-{number} ” klase iestata konteinera fonu norādītajā krāsā.
- ' noapaļots-lg ” klase padara konteinera stūrus noapaļotus.
- ' mx-4 ” klase nodrošina horizontālo rezervi elastīgajam konteineram.
- ' p-2 ” klase nodrošina polsterējumu flex konteineram.
- Pēc tam tiek izveidoti trīs saraksta elementi, kas tiek nodrošināti ar dažādiem saraksta stila veidiem, izmantojot “ saraksts-{type} ” klase.
Izvade:
No zemāk esošās izvades var redzēt, ka pirmajā sarakstā tiek izmantoti aizzīmju punkti, otrajā - decimālskaitļi, bet trešajā netiek izmantoti vienuma marķieri.
Saraksta stila klases izmantošana ar štata variantiem programmā Tailwind
Saraksta stila klasi var izmantot kopā ar noklusējuma stāvokļa variantiem programmā Tailwind, lai padarītu dizainu dinamiskāku. Izmantojot kursora novietošanas, fokusa un aktīvā stāvokļa variantus, lietotājs var mainīt saraksta vienumu marķiera stilu ikreiz, kad tiek aktivizēts norādītais stāvoklis. Sintakse saraksta stila klases izmantošanai ar stāvokļa variantiem ir šāda:
< ul klasē = '{state}:list-{style}...' > < / ul >Šeit ir piemērs, kā izmantot saraksta stila veidu ar “virzīšanas” stāvokli, kur lietotājs var mainīt marķiera stilu, virzot kursoru virs saraksta bloka:
< lpp klasē = 'text-center text-xl font-bold' >Novietojiet kursoru virs saraksta bloka, lai mainītu marķiera stilu< / lpp >
< br >
< div klasē = 'flex justify-center space-x-20 bg-slate-100 rounded-lg mx-4 p-2' >
< ul klasē = 'list-disc hover:list-decimal' >
SARAKSTS Nr. 1
< ka >Šī ir pirmā prece< / ka >
< ka >Šis ir otrais punkts< / ka >
< ka >Šis ir trešais vienums< / ka >
< / ul >
< / div >Iepriekš minētajā kodā saraksts ir nodrošināts ar ' saraksts-disks ” klasi kā noklusējuma saraksta stila veidu. Tomēr, izmantojot “ hover:list-decimal ” klasē, saraksta stila tips tiks mainīts, kad lietotājs novieto peles kursoru virs saraksta bloka.
Izvade:
Tālāk redzamā izvade parāda, ka saraksta tipa stils mainās no saraksta ar aizzīmēm uz numurētu sarakstu, kad kursors virza kursoru virs saraksta bloka.
Saraksta stila klases izmantošana ar pārtraukuma punktiem Tailwind
Pārtraukuma punkti tiek izmantoti, lai reaģētu uz izkārtojuma projektēšanu dažādiem ekrāna izmēriem. Pieci noklusējuma pārtraukuma punkti, ko nodrošina Tailwind, ir sm, md, lg, xl un 2xl. Lai nodrošinātu saraksta tipa stila klasi ar pārtraukuma punktu, tiek izmantota šāda sintakse:
< ul klasē = '{breakpoint}:list-{style}...' > < / ul >Šeit ir piemērs, kā izmantot saraksta stila veidu ar ' md ” pārtraukuma punkts, kur marķiera stils mainīsies, kad ekrāna izmērs sasniegs “md” pārtraukuma punktu:
< lpp klasē = 'text-center text-xl font-bold' >Palielināt ekrānu Izmērs lai mainītu marķiera stilu< / lpp >
< br >
< div klasē = 'flex justify-center space-x-20 bg-slate-100 rounded-lg mx-4 p-2' >
< ul klasē = 'list-disc md:list-decimal' >
SARAKSTS Nr. 1
< ka >Šī ir pirmā prece< / ka >
< ka >Šis ir otrais punkts< / ka >
< ka >Šis ir trešais punkts< / ka >
< / ul >
< / div >Iepriekš minētajā kodā saraksts ir nodrošināts ar ' saraksts-disks ” klasi kā noklusējuma stilu. Tomēr, izmantojot “ md:list-decimal ” klases saraksta stila veids mainīsies “md” ekrāna izmēram.
Izvade:
Kā redzat zemāk esošajā izvadā, saraksta stila veids mainās no diska uz decimāldaļu, kad ekrāna izmērs sasniedz ' md ” pārtraukuma punkts.
Tas viss attiecas uz saraksta stila veida iestatīšanu programmā Tailwind.
Secinājums
Tailwind nodrošina trīs iepriekš noteiktas saraksta stila klases, lai mainītu elementa saraksta stilu. ' saraksts-disks ” klase nodrošina aizzīmju punktus vienumu uzskaitīšanai. ' saraksts-decimālzīme ” klase nodrošina skaitļus vienumu uzskaitīšanai. ' saraksts-nav ” klase izveido sarakstu, kurā netiek izmantots neviens vienumu marķieris. Šajā rakstā ir sniegta procedūra saraksta stila iestatīšanai programmā Tailwind.