Ez a cikk a Tailwind listablokk lista-stílusú képének beállítását ismerteti.
Hogyan állítsuk be a listastílusú képosztályt Tailwindben?
A List Style Image Class egy képet a Tailwindben listajelölőként biztosít. Alapértelmezés szerint a Tailwind csak a „ lista-kép-nincs ” osztály, amely csak a listához korábban beállított képjelölők eltávolítására használható.
Szintaxis
A Tailwind listastílusú képosztályának szintaxisa a következő:
< ul osztály = 'lista-kép-[url({Kép URL-je})]' > < / ul >
Ez a szintaxis a megadott képet jelöli a listaelemhez.
< ul osztály = 'lista-kép-nincs' > < / ul >
Ez a szintaxis eltávolítja a listaelemek jelölőjeként korábban beállított képeket.
Használjuk a fent meghatározott szintaxist, hogy egy képet jelölőként használjunk egy rendezetlen listában. Ebben a bemutatóban a felhasználónak van egy „nevű képe” handpointer.png ” található ugyanabban a Tailwind projekt mappában. Abban az esetben, ha a kép egy másik mappában található, a felhasználónak meg kell adnia a listastílusú képosztály teljes elérési útját. Ezt a képet listajelölőként fogjuk használni a „lista-kép” osztály használatával.
< div osztály = 'flex justify-center' >
< ul osztály = ' list-inside list-image-[url(handpointer.png)] space-y-2 rounded-md bg-green-400 p-2' >
MINTA LISTÁJA
< hogy >Ez az első tétel< / hogy >
< hogy >Ez a második tétel< / hogy >
< hogy >Ez a harmadik tétel< / hogy >
< / ul >
< / div >
A fenti kód magyarázata a következő:
- egy ' ' elem jön létre, és a ' Flex ” osztály, amely vízszintesen igazítja az elemeket egy tárolóban.
- A ' justify-center ” osztály a gyermekelemeket a tároló közepéhez igazítja.
- Ezután a „
- Ez a ' lista-belül ” osztály, amely a megadott listaelem-jelölőt a listablokkon belül helyezi el.
- A ' lista-kép-[url({Kép URL-je})] ” osztályt arra használjuk, hogy egy képet adjunk meg listaelem-jelölőként az elemhez.
- A ' szóköz-y-{szám} ” osztály biztosítja a függőleges teret a listaelemek között.
- A ' lekerekített-md ” osztály a listablokk sarkait lekerekítik.
- A ' bg-{color}-{number} ” osztály a listablokk háttérszínének megadására szolgál.
- A ' p-2 ” osztály biztosítja a listaelem szegélyét.
- Három listaelem jön létre a „
” címkéket. Kimenet:
A kimeneten látható, hogy a listaelemekhez egy kézmutató kép van beállítva:
Állapotváltozatok használata listastílusú képosztályokkal a Tailwindben
A Tailwind különféle állapotváltozatokat kínál, például lebegést, fókuszálást és aktív állapotot, ami segít interaktív tervek létrehozásában. Lista stílusú képosztály használatához ezekkel az állapotokkal a következő szintaxist kell használni:
< ul osztály = '{state}:list-image-{none OR image url}' > < / ul >Használjuk a fent meghatározott szintaxist a listastílusú képtulajdonság használatához a „ lebeg ” állapot a Tailwindben. Ebben a bemutatóban a lista egy képpel lesz ellátva listajelölőként. Azonban a „ lebeg ” állapot, a kép törlődik.
< div osztály = 'flex justify-center' >
< ul osztály = ' list-inside list-image-[url(handpointer.png)] hover:list-image-none space-y-2 rounded-md bg-green-400 p-2' >
MINTA LISTÁJA
< hogy >Ez az első tétel< / hogy >
< hogy >Ez a második tétel< / hogy >
< hogy >Ez a harmadik tétel< / hogy >
< / ul >
< / div >A fenti kódban a „ hover:list-image-none ” osztály eltávolítja a listajelölőként korábban beállított képet.
Kimenet:
Az alábbi kimenetben a lista stílusú kép visszaáll a „ egyik sem ” amikor a felhasználó az egérmutatót fölé viszi. Emiatt a listajelölőként használt képet eltávolítottuk.
Töréspontok használata listastílusú képosztályokkal a Tailwindben
A töréspontok előre beállított médialekérdezések a Tailwind elemeihez. Arra használják őket, hogy a design érzékeny legyen a különböző képernyőméretekre. Ezek a töréspontok a következők: sm, md, lg, xl és 2xl. A törésponttal rendelkező lista stílusú képosztály használatához a következő szintaxist kell használni:
< ul osztály = '{breakpoint}:list-image-{none OR image url}' > < / ul >Használjuk a fent meghatározott szintaxist a lista jelölőjének megváltoztatásához kép ' nak nek ' egyik sem ” töréspont segítségével. Ebben a példában a képjelző el lesz távolítva, ha a képernyő mérete megnöveli a „ md ” töréspont:
< div osztály = 'flex justify-center' >
< ul osztály = ' list-inside list-image-[url(handpointer.png)] md:list-image-none space-y-2 rounded-md bg-green-400 p-2' >
MINTA LISTÁJA
< hogy >Ez az első tétel< / hogy >
< hogy >Ez a második tétel< / hogy >
< hogy >Ez a harmadik tétel< / hogy >
< / ul >
< / div >A fenti kódban a „ md:list-image-none ” osztály eltávolítja a képlista jelölőt, ha a képernyő mérete eléri a „ md ” töréspont.
Kimenet:
Az alábbi kimenetben a képjelző eltávolításra kerül, amikor a képernyő mérete eléri az md töréspontot:
Ez minden a lista stílusú kép beállításáról szól a Tailwindben.
Következtetés
A Tailwind két előre definiált lista-stílusú képosztályt tartalmaz egy elem listázási jelölőjének képre történő eltávolításához vagy beállításához. A ' lista-kép-[url({Kép URL-je})] ” osztály a megadott képet adja meg listajelölőként. A ' lista-kép-nincs ” osztály eltávolítja a listajelölőként korábban megadott képeket. Ez a cikk bemutatja a listastílus típusának beállítását a Tailwindben.