Predpokladajme, že používateľ musí vytvoriť zoznam položiek pre svoju webovú stránku. Na uľahčenie procesu navrhovania poskytuje Tailwind rôzne triedy v štýle zoznamu, ktoré možno použiť na zmenu typu, polohy a zarovnania prvkov zoznamu.
Tento článok obsahuje postup nastavenia typu štýlu zoznamu v Tailwinde.
Ako nastaviť typ štýlu zoznamu v Tailwinde?
Tailwind poskytuje tri predvolené typy štýlu zoznamu. Používajú sa na poskytovanie „ marker ” štýl pre položky zoznamu. Tri predvolené triedy typov štýlu zoznamu sú opísané nasledovne:
- zoznam-disk: Táto trieda poskytne okrúhle odrážky ako značku zoznamu.
- zoznam-desiatkové číslo: Táto trieda poskytne desatinné čísla ako značku zoznamu.
- zoznam-žiadny: Táto trieda odstráni z položiek všetky značky zoznamu.
Syntax na používanie typov štýlov zoznamu je nasledovná:
< ul trieda = 'list-{style}' > < / ul >
Pre lepšie pochopenie nižšie uvedená ukážka použije vyššie definovanú syntax na poskytnutie rôznych štýlov značiek na zoznam položiek. V tomto príklade budú vytvorené tri prvky zoznamu a poskytnuté s rôznymi štýlmi značiek pomocou predvolených tried štýlov zoznamu v Tailwinde:
< p trieda = 'text-center text-xl font-bold' >Predvolený iný zoznam Štýl Typy v Tailwind< / p >
< br >
< div trieda = 'flex justify-center space-x-20 bg-slate-100 rounded-lg mx-4 p-2' >
< ul trieda = 'list-disk' >
ZOZNAM # 1
< že >Toto je prvá položka< / že >
< že >Toto je druhá položka< / že >
< že >Toto je tretia položka< / že >
< / ul >
< ul trieda = 'zoznam-desiatkové' >
ZOZNAM # 2
< že >Toto je prvá položka< / že >
< že >Toto je druhá položka< / že >
< že >Toto je tretia položka< / že >
< / ul >
< ul trieda = 'zoznam-žiadny' >
ZOZNAM # 3
< ž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 “ 'prvok je vytvorený s ' xl 'veľkosť písma a ' tučný “hmotnosť písma. Textový obsah prvku sa umiestni do stredu pomocou „ textové centrum ' trieda.
- Po prerušení riadku sa zobrazí „ “ je vytvorený prvok a je vybavený „ flex ' trieda. Tým sa vytvorí kontajner, ktorý zarovná podradené položky horizontálne.
- ' justify-center “ trieda umiestni položky do stredu kontajnera.
- ' medzera-x-{veľkosť} ” poskytuje horizontálny priestor medzi položkami.
- ' bg-{color}-{number} ” nastaví pozadie kontajnera na zadanú farbu.
- ' zaoblené-lg ” triedy zaobľuje rohy nádoby.
- ' mx-4 Trieda ” poskytuje horizontálny okraj flex kontajneru.
- ' p-2 ” trieda poskytuje výplň flex kontajnera.
- Ďalej sa vytvoria tri prvky zoznamu, ktoré sú vybavené rôznymi typmi štýlu zoznamu pomocou „ zoznam-{type} ' trieda.
Výkon:
Z nižšie uvedeného výstupu je vidieť, že prvý zoznam používa odrážky, druhý používa desatinné čísla a tretí nepoužíva žiadnu značku položky.
Použitie triedy štýlu zoznamu so stavovými variantmi v Tailwinde
Triedu štýlu zoznamu možno použiť s predvolenými variantmi stavu v Tailwinde, aby bol návrh dynamickejší. Pomocou variantov kurzora, zamerania a aktívneho stavu môže používateľ zmeniť štýl značiek položiek zoznamu vždy, keď sa spustí zadaný stav. Syntax na použitie triedy štýlu zoznamu s variantmi stavu je nasledovná:
< ul trieda = '{state}:list-{style}...' > < / ul >Tu je príklad použitia typu štýlu zoznamu so stavom „umiestnenia kurzora“, kde používateľ môže zmeniť štýl značky umiestnením kurzora myši na blok zoznamu:
< p trieda = 'text-center text-xl font-bold' >Presunutím kurzora nad blok zoznamu zmeníte štýl značky< / p >
< br >
< div trieda = 'flex justify-center space-x-20 bg-slate-100 rounded-lg mx-4 p-2' >
< ul trieda = 'list-disc hover:list-decimal' >
ZOZNAM # 1
< ž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 zoznam vybavený „ zoznam-disk ” ako predvolený typ štýlu zoznamu. Avšak pomocou „ hover:list-decimal ” sa typ štýlu zoznamu zmení, keď používateľ umiestni kurzor myši na blok zoznamu.
Výkon:
Nižšie uvedený výstup ukazuje, že štýl typu zoznamu sa zmení zo zoznamu s odrážkami na očíslovaný zoznam, keď sa kurzor presunie nad blok zoznamu.
Používanie triedy štýlu zoznamu s bodmi prerušenia v Tailwinde
Body zlomu sa používajú na responzívny návrh rozloženia pre rôzne veľkosti obrazovky. Päť predvolených bodov prerušenia, ktoré poskytuje Tailwind, sú sm, md, lg, xl a 2xl. Na poskytnutie triedy štýlu typu zoznamu s bodom prerušenia sa používa nasledujúca syntax:
< ul trieda = '{breakpoint}:list-{style}...' > < / ul >Tu je príklad použitia typu štýlu zoznamu s „ md bod prerušenia, kde sa štýl značky zmení, keď veľkosť obrazovky dosiahne bod prerušenia 'md':
< p trieda = 'text-center text-xl font-bold' >Zväčšiť obrazovku Veľkosť na zmenu štýlu značky< / p >
< br >
< div trieda = 'flex justify-center space-x-20 bg-slate-100 rounded-lg mx-4 p-2' >
< ul trieda = 'list-disc md:list-decimal' >
ZOZNAM # 1
< ž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 zoznam vybavený „ zoznam-disk ” ako predvolený štýl. Avšak pomocou „ md:list-decimal ” sa typ štýlu zoznamu zmení pre veľkosť obrazovky “md”.
Výkon:
Ako môžete vidieť na výstupe nižšie, typ štýlu zoznamu sa zmení z disku na desatinný, keď veľkosť obrazovky dosiahne „ md “bod zlomu.
To je všetko o nastavení typu štýlu zoznamu v Tailwinde.
Záver
Tailwind poskytuje tri preddefinované triedy typov štýlu zoznamu na zmenu štýlu zoznamu prvku. ' zoznam-disk ” poskytuje odrážky pre zoznam položiek. ' zoznam-desiatkové ” trieda poskytuje čísla pre zoznam položiek. ' zoznam-žiadny ” vytvorí zoznam, ktorý nepoužíva žiadnu značku položky. Tento článok obsahuje postup nastavenia typu štýlu zoznamu v Tailwinde.