Předpokládejme, že uživatel musí vytvořit seznam položek pro svou webovou stránku. Aby byl proces navrhování jednodušší, Tailwind poskytuje různé třídy ve stylu seznamu, které lze použít ke změně typu, pozice a zarovnání prvků seznamu.
Tento článek poskytuje postup pro nastavení typu stylu seznamu v Tailwindu.
Jak nastavit typ stylu seznamu v Tailwind?
Tailwind nabízí tři výchozí typy stylů seznamů. Používají se k poskytování „ popisovač ” styl pro položky seznamu. Tři výchozí třídy typů stylu seznamu jsou popsány následovně:
- seznam-disk: Tato třída poskytne kulaté odrážky jako značku seznamu.
- seznam-desítkový: Tato třída poskytne desetinná čísla jako značku seznamu.
- seznam-žádný: Tato třída odstraní z položek všechny značky seznamu.
Syntaxe pro použití typů stylů seznamu je následující:
< ul třída = 'list-{style}' > < / ul >
Pro lepší pochopení bude níže uvedená ukázka používat výše definovanou syntaxi k poskytnutí různých stylů značek pro seznam položek. V tomto příkladu budou vytvořeny tři prvky seznamu a poskytnuty s různými styly značek pomocí výchozích tříd stylů seznamu v Tailwindu:
< p třída = 'text-center text-xl font-bold' >Výchozí jiný seznam Styl Typy v Tailwind< / p >
< br >
< div třída = 'flex justify-center space-x-20 bg-slate-100 rounded-lg mx-4 p-2' >
< ul třída = 'list-disk' >
SEZNAM # 1
< že >Toto je první položka< / že >
< že >Toto je druhá položka< / že >
< že >Toto je třetí položka< / že >
< / ul >
< ul třída = 'seznam-desítkový' >
SEZNAM # 2
< že >Toto je první položka< / že >
< že >Toto je druhá položka< / že >
< že >Toto je třetí položka< / že >
< / ul >
< ul třída = 'seznam-žádný' >
SEZNAM # 3
< ž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 ' 'prvek je vytvořen s ' xl 'velikost písma a ' tučně ” tloušťka písma. Textový obsah prvku se umístí do středu pomocí „ textové centrum “třída.
- Po zalomení řádku se zobrazí „ “ je vytvořen a je opatřen „ flex “třída. Tím se vytvoří kontejner, který zarovná podřízené položky vodorovně.
- ' justify-center ” třída umístí položky do středu kontejneru.
- ' mezera-x-{velikost} Třída ” poskytuje vodorovný prostor mezi položkami.
- ' bg-{barva}-{číslo} ” nastaví pozadí kontejneru na zadanou barvu.
- ' zaoblené-lg ” třídy zaoblují rohy nádoby.
- ' mx-4 Třída ” poskytuje horizontální okraj kontejneru Flex.
- ' p-2 ” třída poskytuje vycpávku flex kontejneru.
- Dále se vytvoří tři prvky seznamu a jsou opatřeny různými typy stylů seznamu pomocí „ seznam-{type} “třída.
Výstup:
Z níže uvedeného výstupu je vidět, že první seznam používá odrážky, druhý používá desetinná čísla a třetí nepoužívá žádnou značku položky.
Použití třídy stylu seznamu se stavovými variantami v Tailwind
Třídu stylu seznamu lze použít s výchozími variantami stavu v Tailwindu, aby byl návrh dynamičtější. Pomocí variant přechodu, fokusu a aktivního stavu může uživatel změnit styl značek položek seznamu, kdykoli se spustí zadaný stav. Syntaxe pro použití třídy stylu seznamu s variantami stavu je následující:
< ul třída = '{state}:list-{style}...' > < / ul >Zde je příklad použití typu stylu seznamu se stavem „hover“, kdy uživatel může změnit styl značky umístěním kurzoru nad blok seznamu:
< p třída = 'text-center text-xl font-bold' >Najetím kurzorem na blok seznamu změňte styl značky< / p >
< br >
< div třída = 'flex justify-center space-x-20 bg-slate-100 rounded-lg mx-4 p-2' >
< ul třída = 'list-disc hover:list-decimal' >
SEZNAM # 1
< ž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 seznam opatřen „ seznam-disk ” jako výchozí typ stylu seznamu. Nicméně pomocí „ hover:list-decimal ” se typ stylu seznamu změní, když uživatel najede kurzorem myši na blok seznamu.
Výstup:
Níže uvedený výstup ukazuje, že styl typu seznamu se změní ze seznamu s odrážkami na číslovaný seznam, když kurzor najede na blok seznamu.
Použití třídy stylu seznamu s body přerušení v Tailwindu
Body přerušení se používají pro responzivní návrh rozložení pro různé velikosti obrazovky. Pět výchozích bodů přerušení poskytovaných Tailwindem je sm, md, lg, xl a 2xl. Pro poskytnutí třídy stylu typu seznamu s bodem přerušení se používá následující syntaxe:
< ul třída = '{breakpoint}:list-{style}...' > < / ul >Zde je příklad použití typu stylu seznamu s „ md ” breakpoint, kde se styl značky změní, když velikost obrazovky dosáhne bodu přerušení „md“:
< p třída = 'text-center text-xl font-bold' >Zvětšit obrazovku Velikost pro změnu stylu značky< / p >
< br >
< div třída = 'flex justify-center space-x-20 bg-slate-100 rounded-lg mx-4 p-2' >
< ul třída = 'list-disc md:list-decimal' >
SEZNAM # 1
< ž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 seznam opatřen „ seznam-disk ” jako výchozí styl. Nicméně pomocí „ md:list-decimal ” se typ stylu seznamu změní pro velikost obrazovky „md“.
Výstup:
Jak můžete vidět na níže uvedeném výstupu, typ stylu seznamu se změní z disku na desítkový, když velikost obrazovky dosáhne „ md “bod zlomu.
To je vše o nastavení typu stylu seznamu v Tailwindu.
Závěr
Tailwind poskytuje tři předdefinované třídy typů stylu seznamu pro změnu stylu výpisu prvku. ' seznam-disk ” poskytuje odrážky pro výpis položek. ' seznam-desítkový ” třída poskytuje čísla pro výpis položek. ' seznam-žádný ” vytvoří seznam, který nepoužívá žádnou značku položky. Tento článek poskytuje postup pro nastavení typu stylu seznamu v Tailwindu.