Tento článok poskytuje postup na nastavenie obrázka zoznamu v štýle zoznamu v Tailwinde.
Ako nastaviť triedu obrázkov štýlu zoznamu v Tailwinde?
Trieda obrázka štýlu zoznamu sa používa na poskytnutie obrázka ako značky zoznamu v Tailwinde. Tailwind predvolene poskytuje iba „ zoznam-obrázok-žiadny ” triedu, ktorú možno použiť iba na odstránenie akejkoľvek predtým nastavenej značky obrázka pre zoznam.
Syntax
Syntax na použitie triedy obrázkov štýlu zoznamu v Tailwind je nasledovná:
< ul trieda = 'list-image-[url({Image Url})]' > < / ul >
Táto syntax poskytuje zadaný obrázok ako značku pre prvok zoznamu.
< ul trieda = 'zoznam-obrázok-žiadny' > < / ul >
Táto syntax odstráni všetky predtým nastavené obrázky ako značku pre prvok zoznamu.
Použime vyššie definovanú syntax na použitie obrázka ako značky v neusporiadanom zozname. V tejto ukážke má používateľ obrázok s názvom „ handpointer.png ” nachádzajúce sa v rovnakom priečinku projektu Tailwind. V prípade, že sa obrázok nachádza v inom priečinku, používateľ musí poskytnúť úplnú cestu k triede obrázkov v štýle zoznamu. Tento obrázok použijeme ako značku zoznamu pomocou triedy „list-image“.
< div trieda = 'flex justify-center' >
< ul trieda = ' list-inside list-image-[url(handpointer.png)] space-y-2 rounded-md bg-green-400 p-2' >
VZOROVÝ ZOZNAM
< že >Toto je prvá položka< / že >
< že >Toto je druhá položka< / že >
< že >Toto je tretia položka< / že >
< / ul >
< / div >
Vysvetlenie vyššie uvedeného kódu je nasledovné:
- A “ je vytvorený prvok ” a je vybavený znakom “ flex ” trieda, ktorá horizontálne zarovnáva položky v kontajneri.
- ' justify-center ” trieda zarovná podradené položky do stredu kontajnera.
- Ďalej, „
- Je vybavený „ zoznam-vnútri ” trieda, ktorá umiestni špecifikovanú značku položky zoznamu do bloku zoznamu.
- ' list-image-[url({Image Url})] ” sa používa na poskytnutie obrázka ako značky položky zoznamu pre prvok.
- ' medzera-y-{číslo} ” poskytuje vertikálny priestor medzi položkami zoznamu.
- ' zaoblené-md ” zaobľuje rohy bloku zoznamu.
- ' bg-{color}-{number} ” sa používa na poskytnutie farby pozadia bloku zoznamu.
- ' p-2 ” poskytuje ohraničenie prvku zoznamu.
- Tri položky zoznamu sa vytvoria pomocou „
'značky.' Výkon:
Vo výstupe je vidieť, že obrázok ukazovateľa ruky je nastavený ako značka pre položky zoznamu:
Použitie stavových variantov s triedou obrázkov štýlu zoznamu v Tailwinde
Tailwind poskytuje rôzne varianty stavu, ako je napríklad vznášanie sa, zameranie a aktívne, čo pomáha pri vytváraní interaktívnych návrhov. Ak chcete použiť triedu obrázkov v štýle zoznamu s týmito stavmi, použije sa nasledujúca syntax:
< ul trieda = '{state}:list-image-{none OR image url}' > < / ul >Použime vyššie definovanú syntax na použitie vlastnosti obrázka v štýle zoznamu s „ vznášať sa v Tailwinde. V tejto ukážke bude zoznam vybavený obrázkom ako značkou zoznamu. Avšak pomocou „ vznášať sa “, obrázok sa odstráni.
< div trieda = 'flex justify-center' >
< ul trieda = ' list-inside list-image-[url(handpointer.png)] podržte:list-image-none space-y-2 rounded-md bg-green-400 p-2' >
VZOROVÝ ZOZNAM
< že >Toto je prvá položka< / že >
< že >Toto je druhá položka< / že >
< že >Toto je tretia položka< / že >
< / ul >
< / div >Vo vyššie uvedenom kóde je „ hover:list-image-none ” trieda odstráni predtým nastavený obrázok ako značku zoznamu.
Výkon:
Vo výstupe nižšie sa obrázok v štýle zoznamu obnoví na „ žiadny “, keď naň používateľ umiestni kurzor myši. Z tohto dôvodu bol obrázok, ktorý sa používal ako značka zoznamu, odstránený.
Používanie zarážok s triedou obrázkov v štýle zoznamu v službe Tailwind
Body prerušenia sú vopred nastavené mediálne dopyty pre prvky v Tailwinde. Používajú sa na to, aby dizajn reagoval na rôzne veľkosti obrazoviek. Tieto body prerušenia zahŕňajú sm, md, lg, xl a 2xl. Ak chcete použiť triedu obrázkov v štýle zoznamu s bodom prerušenia, použije sa nasledujúca syntax:
< ul trieda = '{breakpoint}:list-image-{none OR image url}' > < / ul >Použime vyššie definovanú syntax na zmenu značky zoznamu z „ obrázok “ až “ žiadny “ pomocou bodu prerušenia. V tomto príklade sa značka obrázka odstráni, keď veľkosť obrazovky zväčší šírku „ md bod zlomu:
< div trieda = 'flex justify-center' >
< ul trieda = ' list-inside list-image-[url(handpointer.png)] md:list-image-none space-y-2 rounded-md bg-green-400 p-2' >
VZOROVÝ ZOZNAM
< že >Toto je prvá položka< / že >
< že >Toto je druhá položka< / že >
< že >Toto je tretia položka< / že >
< / ul >
< / div >Vo vyššie uvedenom kóde je „ md:list-image-none “ trieda odstráni značku zoznamu obrázkov, keď veľkosť obrazovky dosiahne „ md “bod zlomu.
Výkon:
V nižšie uvedenom výstupe sa značka obrázka odstráni, keď veľkosť obrazovky dosiahne bod prerušenia md:
To je všetko o nastavení obrázka v štýle zoznamu v Tailwinde.
Záver
Tailwind má dve preddefinované triedy obrázkov v štýle zoznamu na odstránenie alebo nastavenie značky zoznamu prvku na obrázok. ' list-image-[url({Image Url})] ” poskytuje zadaný obrázok ako značku zoznamu. ' zoznam-obrázok-žiadny ” trieda odstráni akýkoľvek predtým poskytnutý obrázok ako značku zoznamu. Tento článok obsahuje postup nastavenia typu štýlu zoznamu v Tailwinde.