Tarkime, kad vartotojas turi sukurti savo tinklalapio elementų sąrašą. Kad projektavimo procesas būtų lengvesnis, Tailwind pateikia įvairias sąrašo stiliaus klases, kurias galima naudoti sąrašo elementų tipui, vietai ir lygiavimui keisti.
Šiame straipsnyje bus pateikta sąrašo stiliaus nustatymo „Tailwind“ procedūra.
Kaip nustatyti sąrašo stiliaus tipą Tailwind?
Tailwind pateikia tris numatytuosius sąrašo stiliaus tipus. Jie naudojami teikti „ žymeklis “ stilius sąrašo elementams. Trys numatytosios sąrašo stiliaus tipo klasės aprašytos taip:
- sąrašas diskas: Šioje klasėje kaip sąrašo žymeklis bus pateikti apvalūs taškai.
- sąrašas dešimtainis: Ši klasė kaip sąrašo žymeklį pateiks dešimtainius skaičius.
- sąrašas-nėra: Ši klasė pašalins visus sąrašo žymeklius iš elementų.
Sąrašo stiliaus tipų naudojimo sintaksė yra tokia:
< ul klasė = 'list-{style}' > < / ul >
Kad būtų geriau suprasti, toliau pateiktoje demonstracijoje bus naudojama aukščiau apibrėžta sintaksė, kad būtų pateikti skirtingi elementų sąrašo žymeklio stiliai. Šiame pavyzdyje bus sukurti trys sąrašo elementai ir pateikti skirtingi žymeklio stiliai, naudojant numatytąsias sąrašo stiliaus klases programoje Tailwind:
< p klasė = 'text-center text-xl font-bold' >Numatytasis skirtingas sąrašas Stilius Tipai Tailwind< / p >
< br >
< div klasė = „flex justify-center space-x-20 bg-slate-100 rounded-lg mx-4 p-2“ >
< ul klasė = 'sąrašas-diskas' >
SĄRAŠAS Nr. 1
< kad >Tai pirmas daiktas< / kad >
< kad >Tai antras punktas< / kad >
< kad >Tai trečias elementas< / kad >
< / ul >
< ul klasė = 'sąrašas dešimtainis' >
SĄRAŠAS Nr. 2
< kad >Tai pirmas daiktas< / kad >
< kad >Tai antras punktas< / kad >
< kad >Tai trečias elementas< / kad >
< / ul >
< ul klasė = 'sąrašas - nėra' >
SĄRAŠAS Nr. 3
< kad >Tai pirmas daiktas< / kad >
< kad >Tai antras punktas< / kad >
< kad >Tai trečias elementas< / kad >
< / ul >
< / div >
Aukščiau pateikto kodo paaiškinimas yra toks:
- A “ “ elementas sukurtas naudojant „ xl ' šrifto dydis ir ' drąsus “ šrifto svoris. Elemento teksto turinys yra centre naudojant „ teksto centras ' klasė.
- Po eilutės pertraukos „ “ elementas yra sukurtas ir pateikiamas su “ lankstus ' klasė. Taip bus sukurtas konteineris, kuris sulygiuos antrinius elementus horizontaliai.
- „ pateisinimo centras “ klasė daiktus patalpins konteinerio centre.
- „ tarpas-x-{dydis} “ klasė suteikia horizontalų tarpą tarp elementų.
- „ bg-{color}-{number} ” klasė nustato konteinerio foną į nurodytą spalvą.
- „ suapvalintas-lg ” klasė padaro konteinerio kampus suapvalintais.
- „ mx-4 ” klasė suteikia lanksčios talpyklos horizontalią paraštę.
- „ p-2 ” klasė suteikia flex konteinerio paminkštinimą.
- Tada sukuriami trys sąrašo elementai ir pateikiami skirtingi sąrašo stiliaus tipai naudojant „ sąrašas-{type} ' klasė.
Išvestis:
Iš žemiau pateiktos išvesties matyti, kad pirmame sąraše naudojami taškai, antrame – dešimtainiai skaičiai, o trečiajame nenaudojamas joks elementų žymeklis.
Sąrašo stiliaus klasės naudojimas su būsenos variantais „Tailwind“.
Sąrašo stiliaus klasė gali būti naudojama su numatytosiomis būsenos variantais programoje Tailwind, kad dizainas būtų dinamiškesnis. Naudodamas pelės žymeklio, fokusavimo ir aktyvios būsenos variantus, vartotojas gali pakeisti sąrašo elementų žymeklio stilių, kai tik suaktyvinama nurodyta būsena. Sąrašo stiliaus klasės su būsenos variantais naudojimo sintaksė yra tokia:
< ul klasė = '{state}:list-{style}...' > < / ul >Štai pavyzdys, kaip naudoti sąrašo stiliaus tipą su „užvedimo“ būsena, kai vartotojas gali pakeisti žymeklio stilių užvesdamas pelės žymeklį virš sąrašo bloko:
< p klasė = 'text-center text-xl font-bold' >Jei norite pakeisti žymeklio stilių, užveskite žymeklį virš sąrašo bloko / p >
< 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' >
SĄRAŠAS Nr. 1
< kad >Tai pirmas daiktas< / kad >
< kad >Tai antras punktas< / kad >
< kad >Tai trečias elementas< / kad >
< / ul >
< / div >Aukščiau pateiktame kode sąrašas pateikiamas su ' sąrašas-diskas “ klasę kaip numatytąjį sąrašo stiliaus tipą. Tačiau naudojant „ hover:list-decimal ” klasėje, sąrašo stiliaus tipas bus pakeistas, kai vartotojas užves pelės žymeklį virš sąrašo bloko.
Išvestis:
Žemiau pateikta išvestis rodo, kad sąrašo tipo stilius pasikeičia iš sąrašo su ženkleliais į numeruotą sąrašą, kai žymeklis užvedamas virš sąrašo bloko.
Sąrašo stiliaus klasės naudojimas su lūžio taškais „Tailwind“.
Lūžio taškai naudojami reaguojant į skirtingų dydžių ekranų išdėstymą. Penki numatytieji „Tailwind“ taškai yra sm, md, lg, xl ir 2xl. Ši sintaksė naudojama sąrašo tipo stiliaus klasei pateikti su lūžio tašku:
< ul klasė = '{breakpoint}:list-{style}...' > < / ul >Štai pavyzdys, kaip naudoti sąrašo stiliaus tipą su „ md “ pertraukos taškas, kur žymeklio stilius pasikeis, kai ekrano dydis pasieks „md“ pertraukos tašką:
< p klasė = 'text-center text-xl font-bold' >Padidinti ekraną Dydis pakeisti žymeklio stilių< / p >
< 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' >
SĄRAŠAS Nr. 1
< kad >Tai pirmas daiktas< / kad >
< kad >Tai antras punktas< / kad >
< kad >Tai trečias elementas< / kad >
< / ul >
< / div >Aukščiau pateiktame kode sąrašas pateikiamas su ' sąrašas-diskas “ klasę kaip numatytąjį stilių. Tačiau naudojant „ md:list-decimal “ klasėje sąrašo stiliaus tipas pasikeis „md“ ekrano dydžiui.
Išvestis:
Kaip matote toliau pateiktoje išvestyje, sąrašo stiliaus tipas keičiasi iš disko į dešimtainį, kai ekrano dydis pasiekia ' md “ lūžio taškas.
Tai viskas apie sąrašo stiliaus tipo nustatymą „Tailwind“.
Išvada
Tailwind pateikia tris iš anksto nustatytas sąrašo stiliaus tipų klases, skirtas elemento sąrašo stiliui pakeisti. „ sąrašas-diskas “ klasėje pateikiami punktai, skirti elementams išvardyti. „ sąrašas-dešimtainis “ klasėje pateikiami numeriai elementams išvardyti. „ sąrašas - nėra “ klasė sukuria sąrašą, kuriame nenaudojamas joks elementų žymeklis. Šiame straipsnyje pateikta sąrašo stiliaus nustatymo „Tailwind“ procedūra.