Tässä artikkelissa kerrotaan menettelystä listatyylisen kuvan asettamiseen Tailwindissä olevasta luettelolohkosta.
Kuinka asettaa List Style -kuvaluokka Tailwindissä?
List Style -kuvaluokkaa käytetään kuvan tarjoamiseen Tailwind-luettelomerkinnänä. Oletuksena Tailwind tarjoaa vain ' lista-kuva-ei mitään ” luokka, jota voidaan käyttää vain aiemmin asetettujen kuvamerkkien poistamiseen luettelosta.
Syntaksi
Listatyylisen kuvaluokan syntaksi Tailwindissä on seuraava:
< ul luokkaa = 'list-image-[url({Image URL})]' > < / ul >
Tämä syntaksi tarjoaa määritetyn kuvan luetteloelementin merkinnäksi.
< ul luokkaa = 'lista-kuva-ei mitään' > < / ul >
Tämä syntaksi poistaa kaikki aiemmin asetetut kuvat luetteloelementin merkiksi.
Käytetään kuvaa yllä määritellyllä syntaksilla merkinnänä järjestämättömässä luettelossa. Tässä esittelyssä käyttäjällä on kuva nimeltä ' handpointer.png ” samassa Tailwind-projektikansiossa. Jos kuva on jossain muussa kansiossa, käyttäjän on annettava koko polku listatyyliseen kuvaluokkaan. Käytämme tätä kuvaa listamerkinnänä käyttämällä 'list-image' -luokkaa.
< div luokkaa = 'flex justify-center' >
< ul luokkaa = ' list-inside list-image-[url(handpointer.png)] space-y-2 rounded-md bg-green-400 p-2' >
NÄYTELUETTELO
< 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 ja se on varustettu ' flex ”-luokka, joka kohdistaa kohteet vaakasuoraan säilössä.
- ' tasauskeskus ” luokka kohdistaa alikohteet säilön keskelle.
- Seuraavaksi '
- Se on varustettu ' listan sisällä ” luokka, joka sijoittaa määritetyn luettelokohtamerkinnän luettelolohkon sisään.
- ' lista-kuva-[url({Kuvan URL-osoite})] ” -luokkaa käytetään kuvan tarjoamiseen elementin luettelokohtamerkinnäksi.
- ' välilyönti-y-{numero} ”-luokka tarjoaa pystysuoran tilan luettelon kohteiden väliin.
- ' pyöristetty-md ” luokka pyöristää listalohkon kulmat.
- ' bg-{väri}-{numero} ” -luokkaa käytetään taustavärin antamiseen listalohkolle.
- ' p-2 ” luokka tarjoaa reunuksen listaelementille.
- Kolme luettelokohdetta luodaan käyttämällä '
”tunnisteet. Lähtö:
Tulosteessa näkyy, että listan kohteiden merkinnäksi on asetettu käsiosoittimen kuva:
Tilamuunnelmien käyttö List Style -kuvaluokissa Tailwindissä
Tailwind tarjoaa erilaisia tilavaihtoehtoja, kuten hover, focus ja active, mikä auttaa luomaan interaktiivisia malleja. Jos haluat käyttää luettelotyylistä kuvaluokkaa näillä tiloilla, käytetään seuraavaa syntaksia:
< ul luokkaa = '{state}:luettelokuva-{ei mitään TAI kuvan URL-osoite}' > < / ul >Käytetään yllä määritettyä syntaksia listatyylisen kuvaominaisuuden käyttämiseen ' leijuu ”-tilassa Tailwindissä. Tässä esittelyssä luettelossa on kuva luettelomerkinnänä. Kuitenkin käyttämällä ' leijuu ”-tilassa, kuva poistetaan.
< div luokkaa = 'flex justify-center' >
< ul luokkaa = ' list-inside list-image-[url(handpointer.png)] hover:list-image-none space-y-2 rounded-md bg-green-400 p-2' >
NÄYTELUETTELO
< 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 ' hover:list-image-none ” luokka poistaa aiemmin asetetun kuvan listamerkiksi.
Lähtö:
Alla olevassa lähdössä luettelotyylinen kuva palautuu ' ei mitään ', kun käyttäjä vie hiiren osoittimen sen päälle. Tästä johtuen luettelomerkinnänä käytetty kuva poistettiin.
Katkaisupisteiden käyttäminen List Style -kuvaluokissa Tailwindissä
Katkaisupisteet ovat valmiiksi asetettuja mediakyselyjä Tailwindin elementeille. Niitä käytetään tekemään suunnittelusta herkkä erikokoisille näyttöille. Näitä keskeytyskohtia ovat sm, md, lg, xl ja 2xl. Jos haluat käyttää luettelotyylistä kuvaluokkaa keskeytyskohdan kanssa, käytetään seuraavaa syntaksia:
< ul luokkaa = '{breakpoint}:list-image-{ei mitään TAI kuvan URL-osoite}' > < / ul >Käytä yllä määriteltyä syntaksia vaihtaaksesi luettelomerkin ' kuva ”–” ei mitään ” käyttämällä keskeytyspistettä. Tässä esimerkissä kuvamerkki poistetaan, kun näytön koko kasvaa ' md ”katkospiste:
< div luokkaa = 'flex justify-center' >
< ul luokkaa = ' list-inside list-image-[url(handpointer.png)] md:list-image-none space-y-2 rounded-md bg-green-400 p-2' >
NÄYTELUETTELO
< 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 ' md:list-image-none ' luokka poistaa kuvaluettelomerkin, kun näytön koko saavuttaa ' md ”katkospiste.
Lähtö:
Alla olevassa tulosteessa kuvamerkki poistetaan, kun näytön koko saavuttaa md-katkospisteen:
Siinä on kyse listatyylisen kuvan asettamisesta Tailwindissä.
Johtopäätös
Tailwindissä on kaksi ennalta määritettyä listatyylistä kuvaluokkaa elementin listausmerkin poistamiseen tai kuvan asettamiseen. ' lista-kuva-[url({Kuvan URL-osoite})] ” luokka tarjoaa määritetyn kuvan luettelomerkinnäksi. ' lista-kuva-ei mitään ” luokka poistaa kaikki aiemmin annetut kuvat luettelomerkinnäksi. Tässä artikkelissa on annettu menettely listatyylityypin määrittämiseksi Tailwindissä.