Tento článek poskytuje postup pro nastavení obrázku seznamu ve stylu seznamu v Tailwindu.
Jak nastavit třídu obrázků ve stylu seznamu v Tailwindu?
Třída obrázku ve stylu seznamu se používá k poskytnutí obrázku jako značky seznamu v Tailwindu. Tailwind ve výchozím nastavení poskytuje pouze „ seznam-obrázek-žádný ” třídu, kterou lze použít pouze pro odstranění jakékoli dříve nastavené značky obrázku pro seznam.
Syntax
Syntaxe pro použití třídy obrázků stylu seznamu v Tailwindu je následující:
< ul třída = 'list-image-[url({Image Url})]' > < / ul >
Tato syntaxe poskytuje zadaný obrázek jako značku pro prvek seznamu.
< ul třída = 'list-image-none' > < / ul >
Tato syntaxe odstraní všechny dříve nastavené obrázky jako značku pro prvek seznamu.
Použijme výše definovanou syntaxi k použití obrázku jako značky v neuspořádaném seznamu. V této ukázce má uživatel obrázek s názvem „ handpointer.png ” ve stejné složce projektu Tailwind. V případě, že je obrázek přítomen v jiné složce, musí uživatel poskytnout úplnou cestu ke třídě obrázků ve stylu seznamu. Tento obrázek použijeme jako značku seznamu pomocí třídy „list-image“.
< div třída = 'flex justify-center' >
< ul třída = ' list-inside list-image-[url(handpointer.png)] space-y-2 rounded-md bg-green-400 p-2' >
VZOROVÝ SEZNAM
< že >Toto je první položka< / že >
< že >Toto je druhá položka< / že >
< že >Toto je třetí položka< / že >
< / ul >
< / div >
Vysvětlení výše uvedeného kódu je následující:
- A ' je vytvořen prvek “ a je opatřen „ flex ” třída, která zarovná položky vodorovně v kontejneru.
- ' justify-center ” třída zarovná podřízené položky na střed kontejneru.
- Dále, „
- Je opatřena „ seznam-uvnitř ” třída, která umístí zadanou značku položky seznamu do bloku seznamu.
- ' list-image-[url({Image Url})] Třída ” se používá k poskytnutí obrázku jako značky položky seznamu prvku.
- ' mezera-y-{číslo} ” poskytuje vertikální mezeru mezi položkami seznamu.
- ' zaoblené-md ” zakulatí rohy bloku seznamu.
- ' bg-{barva}-{číslo} Třída ” se používá k poskytnutí barvy pozadí bloku seznamu.
- ' p-2 Třída ” poskytuje ohraničení prvku seznamu.
- Tři položky seznamu jsou vytvořeny pomocí „
” tagy. Výstup:
Ve výstupu je vidět, že obrázek ukazatele ruky je nastaven jako značka pro položky seznamu:
Použití stavových variant s třídou obrázků ve stylu seznamu v Tailwind
Tailwind poskytuje různé varianty stavu, jako je hover, focus a active, což pomáhá při vytváření interaktivních návrhů. Chcete-li použít třídu obrázků ve stylu seznamu s těmito stavy, použije se následující syntaxe:
< ul třída = '{state}:list-image-{none OR image url}' > < / ul >Použijme výše definovanou syntaxi k použití vlastnosti obrázku ve stylu seznamu s „ vznášet se “ stát v Tailwind. V této ukázce bude seznam opatřen obrázkem jako značkou seznamu. Nicméně pomocí „ vznášet se “, obrázek bude odstraněn.
< div třída = 'flex justify-center' >
< ul třída = ' list-inside list-image-[url(handpointer.png)] hover:list-image-none space-y-2 rounded-md bg-green-400 p-2' >
VZOROVÝ SEZNAM
< že >Toto je první položka< / že >
< že >Toto je druhá položka< / že >
< že >Toto je třetí položka< / že >
< / ul >
< / div >Ve výše uvedeném kódu je „ hover:list-image-none ” třída odstraní dříve nastavený obrázek jako značku seznamu.
Výstup:
V níže uvedeném výstupu se obrázek ve stylu seznamu resetuje na „ žádný “, když na něj uživatel najede kurzorem myši. Kvůli tomu byl odstraněn obrázek, který byl používán jako značka seznamu.
Použití zarážek s třídou obrázků ve stylu seznamu ve službě Tailwind
Body přerušení jsou přednastavené mediální dotazy pro prvky v Tailwindu. Používají se k tomu, aby design reagoval na různé velikosti obrazovky. Mezi tyto body přerušení patří sm, md, lg, xl a 2xl. Chcete-li použít třídu obrázků ve stylu seznamu s bodem přerušení, použije se následující syntaxe:
< ul třída = '{breakpoint}:list-image-{none OR image url}' > < / ul >Použijme výše definovanou syntaxi ke změně značky seznamu z „ obraz “ až “ žádný “ pomocí bodu přerušení. V tomto příkladu bude značka obrázku odstraněna, jakmile velikost obrazovky zvětší šířku „ md 'bod přerušení:
< div třída = 'flex justify-center' >
< ul třída = ' list-inside list-image-[url(handpointer.png)] md:list-image-none space-y-2 rounded-md bg-green-400 p-2' >
VZOROVÝ SEZNAM
< že >Toto je první položka< / že >
< že >Toto je druhá položka< / že >
< že >Toto je třetí položka< / že >
< / ul >
< / div >Ve výše uvedeném kódu je „ md:list-image-none Třída ” odstraní značku seznamu obrázků, když velikost obrazovky dosáhne md “bod zlomu.
Výstup:
V níže uvedeném výstupu je značka obrázku odstraněna, když velikost obrazovky dosáhne bodu přerušení md:
To je vše o nastavení obrázku ve stylu seznamu v Tailwindu.
Závěr
Tailwind má dvě předdefinované třídy obrázků ve stylu seznamu pro odstranění nebo nastavení značky seznamu prvku na obrázek. ' list-image-[url({Image Url})] ” poskytuje zadaný obrázek jako značku seznamu. ' seznam-obrázek-žádný Třída ” odstraní jakýkoli dříve poskytnutý obrázek jako značku seznamu. Tento článek poskytuje postup pro nastavení typu stylu seznamu v Tailwindu.