Oletetaan, että käyttäjän on luotava luettelo kohteista verkkosivulleen. Suunnitteluprosessin helpottamiseksi Tailwind tarjoaa erilaisia listatyylisiä luokkia, joiden avulla voidaan muuttaa listaelementtien tyyppiä, sijaintia ja kohdistusta.
Tässä artikkelissa käsitellään luettelotyylityypin määrittämistä Tailwindissä.
Kuinka asettaa listatyylityyppi Tailwindissä?
Tailwind tarjoaa kolme oletusarvoista luettelotyylityyppiä. Niitä käytetään tarjoamaan ' merkki ”-tyyli listakohdille. Kolme oletusarvoista luettelotyylityyppiluokkaa kuvataan seuraavasti:
- lista-levy: Tämä luokka tarjoaa pyöreät luettelomerkit luettelomerkinnäksi.
- lista-desimaali: Tämä luokka tarjoaa desimaaliluvut luettelon merkkinä.
- lista-ei mitään: Tämä luokka poistaa kohteista kaikki luettelomerkit.
Listan tyylityyppien syntaksi on seuraava:
< ul luokkaa = 'list-{style}' > < / ul >
Ymmärtämisen helpottamiseksi alla olevassa esittelyssä käytetään yllä määritettyä syntaksia erilaisten merkkityylejen tarjoamiseen kohteiden luetteloimiseksi. Tässä esimerkissä luodaan kolme luetteloelementtiä ja tarjotaan eri merkkityylejä käyttämällä Tailwindin oletusluettelotyyliluokkia:
< s luokkaa = 'text-center text-xl font-bold' >Oletusarvoinen eri luettelo Tyyli Tyypit myötätuulessa< / s >
< br >
< div luokkaa = 'flex justify-center space-x-20 bg-slate-100 rounded-lg mx-4 p-2' >
< ul luokkaa = 'lista-levy' >
LIST # 1
< että >Tämä on ensimmäinen kohde< / että >
< että >Tämä on toinen kohde< / että >
< että >Tämä on kolmas kohde< / että >
< / ul >
< ul luokkaa = 'lista-desimaali' >
LIST # 2
< että >Tämä on ensimmäinen kohde< / että >
< että >Tämä on toinen kohde< / että >
< että >Tämä on kolmas kohde< / että >
< / ul >
< ul luokkaa = 'lista-ei mitään' >
LIST # 3
< että >Tämä on ensimmäinen kohde< / että >
< että >Tämä on toinen kohde< / että >
< että >Tämä on kolmas kohde< / että >
< / ul >
< / div >
Yllä olevan koodin selitys on seuraava:
- A ' ' elementti luodaan ' xl ' kirjasinkoko ja ' lihavoitu ” fontin paino. Elementin tekstisisältö sijoitetaan keskelle ' tekstikeskus ”luokka.
- rivinvaihdon jälkeen ' '-elementti luodaan ja se on varustettu ' flex ”luokka. Tämä luo säilön, joka kohdistaa alikohteet vaakasuoraan.
- ' tasauskeskus ”-luokka sijoittaa tavarat säiliön keskelle.
- ' väli-x-{koko} ”-luokka tarjoaa vaakatilan kohteiden väliin.
- ' bg-{väri}-{numero} ” luokka asettaa säilön taustan määritetylle värille.
- ' pyöristetty-lg ”-luokka tekee kontin kulmista pyöristetyt.
- ' mx-4 ” luokka tarjoaa vaakamarginaalin flex-säiliölle.
- ' p-2 ” luokka tarjoaa pehmusteen flex-säiliöön.
- Seuraavaksi luodaan kolme luetteloelementtiä, jotka on varustettu eri tyylityypeillä käyttämällä ' lista-{tyyppi} ”luokka.
Lähtö:
Alla olevasta tuotosta voidaan nähdä, että ensimmäinen lista käyttää luettelomerkkejä, toinen desimaalilukuja ja kolmas ei käytä yhtään kohdemerkkiä.
List Style -luokan käyttäminen Tailwindin tilamuunnelmien kanssa
Luettelotyyliluokkaa voidaan käyttää Tailwindin oletustilamuunnelmien kanssa suunnittelun dynaamisen lisäämiseksi. Käyttämällä osoittimen, kohdistuksen ja aktiivisen tilan muunnelmia käyttäjä voi muuttaa luettelokohteiden merkkityyliä aina, kun määritetty tila laukeaa. Syntaksi listatyyliluokan käyttämiselle tilamuunnelmien kanssa on seuraava:
< ul luokkaa = '{state}:list-{style}...' > < / ul >Tässä on esimerkki luettelotyylityypin käytöstä 'hover'-tilassa, jossa käyttäjä voi muuttaa merkin tyyliä viemällä hiiren osoittimen luettelolohkon päälle:
< s luokkaa = 'text-center text-xl font-bold' >Vaihda merkin tyyliä siirtämällä osoitin luettelolohkon päälle< / s >
< br >
< div luokkaa = 'flex justify-center space-x-20 bg-slate-100 rounded-lg mx-4 p-2' >
< ul luokkaa = 'list-disc hover:list-decimal' >
LIST # 1
< että >Tämä on ensimmäinen kohde< / että >
< että >Tämä on toinen kohde< / että >
< että >Tämä on kolmas kohde< / että >
< / ul >
< / div >Yllä olevassa koodissa luettelossa on ' lista-levy ” -luokkaa oletusarvoisena listatyylityypinä. Kuitenkin käyttämällä ' hover:list-decimal ” luokassa listatyylityyppi muuttuu, kun käyttäjä vie hiiren osoittimen listalohkon päälle.
Lähtö:
Alla oleva tulos osoittaa, että luettelotyypin tyyli muuttuu luettelomerkitystä luettelosta numeroituksi luetteloksi, kun osoitin liikkuu luettelolohkon päällä.
List Style -luokan käyttäminen tailwind-katkospisteiden kanssa
Katkopisteitä käytetään asettelun responsiiviseen suunnitteluun eri näyttökokoille. Tailwindin viisi oletusarvoista keskeytyspistettä ovat sm, md, lg, xl ja 2xl. Seuraavaa syntaksia käytetään antamaan luettelotyypin tyyliluokalle keskeytyskohta:
< ul luokkaa = '{breakpoint}:list-{style}...' > < / ul >Tässä on esimerkki luettelotyylityypin käyttämisestä ' md ” keskeytyskohta, jossa merkin tyyli muuttuu, kun näytön koko saavuttaa ”md”-katkaisukohdan:
< s luokkaa = 'text-center text-xl font-bold' > Suurenna näyttöä Koko muuttaaksesi merkin tyyliä< / s >
< br >
< div luokkaa = 'flex justify-center space-x-20 bg-slate-100 rounded-lg mx-4 p-2' >
< ul luokkaa = 'list-disc md:list-decimal' >
LIST # 1
< että >Tämä on ensimmäinen kohde< / että >
< että >Tämä on toinen kohde< / että >
< että >Tämä on kolmas kohde< / että >
< / ul >
< / div >Yllä olevassa koodissa luettelossa on ' lista-levy ”-luokka oletustyylinä. Kuitenkin käyttämällä ' md:list-decimal ” luokassa listatyylityyppi muuttuu ”md”-näytön koon mukaan.
Lähtö:
Kuten alla olevasta lähdöstä näet, luettelon tyylityyppi muuttuu levystä desimaaliksi, kun näytön koko saavuttaa ' md ”katkospiste.
Siinä on kyse listatyylityypin asettamisesta Tailwindissä.
Johtopäätös
Tailwind tarjoaa kolme ennalta määritettyä listatyylityyppiluokkaa elementin listaustyylin muuttamiseen. ' lista-levy ”-luokka tarjoaa luettelopisteet kohteiden listaamiseen. ' lista-desimaali ” luokka tarjoaa numerot kohteiden listaamiseksi. ' lista-ei mitään ” luokka luo listan, jossa ei käytetä yhtään alkiomerkkiä. Tässä artikkelissa on annettu menettely listatyylityypin määrittämiseksi Tailwindissä.