Załóżmy, że użytkownik musi utworzyć listę elementów swojej strony internetowej. Aby ułatwić proces projektowania, Tailwind udostępnia różne klasy w stylu listy, których można używać do zmiany typu, położenia i wyrównania elementów listy.
W tym artykule opisano procedurę ustawiania typu stylu listy w Tailwind.
Jak ustawić typ stylu listy w Tailwind?
Tailwind udostępnia trzy domyślne typy stylów list. Służą one do zapewnienia „ znacznik ” dla elementów listy. Trzy domyślne klasy typu listy są opisane w następujący sposób:
- płyta-lista: Ta klasa zapewni okrągłe wypunktowania jako znaczniki listy.
- lista-dziesiętna: Ta klasa zapewni liczby dziesiętne jako znacznik listy.
- lista-brak: Ta klasa usunie wszelkie znaczniki listy z elementów.
Składnia używania typów stylów list jest następująca:
< ul klasa = „lista-{styl}” > < / ul >
Aby lepiej zrozumieć, w poniższej demonstracji wykorzystana zostanie zdefiniowana powyżej składnia, aby zapewnić różne style znaczników do wyświetlania elementów. W tym przykładzie zostaną utworzone trzy elementy listy i zaopatrzone w różne style znaczników przy użyciu domyślnych klas stylów list w Tailwind:
< P klasa = „tekst-wyśrodkuj tekst-xl czcionka-pogrubienie” >Domyślna inna lista Styl Typy w Tailwind< / P >
< br >
< div klasa = „flex justify-center space-x-20 bg-slate-100 zaokrąglony-lg mx-4 p-2” >
< ul klasa = „dysk z listą” >
LISTA # 1
< To >To jest pierwszy przedmiot< / To >
< To >To jest drugi element< / To >
< To >To jest trzeci element< / To >
< / ul >
< ul klasa = „lista dziesiętna” >
LISTA # 2
< To >To jest pierwszy przedmiot< / To >
< To >To jest drugi element< / To >
< To >To jest trzeci element< / To >
< / ul >
< ul klasa = „nie ma listy” >
LISTA # 3
< To >To jest pierwszy przedmiot< / To >
< To >To jest drugi element< / To >
< To >To jest trzeci element< / To >
< / ul >
< / div >
Wyjaśnienie powyższego kodu jest następujące:
- A ' ” jest tworzony za pomocą „ XL ” rozmiar czcionki i „ pogrubiony ' grubość czcionki. Treść tekstowa elementu jest umieszczana na środku za pomocą przycisku „ centrum tekstowe ' klasa.
- Po podziale wiersza pojawia się komunikat „ ” zostanie utworzony element i zostanie opatrzony „ przewód ' klasa. Spowoduje to utworzenie kontenera, który wyrówna elementy podrzędne w poziomie.
- „ wyśrodkuj ” umieści przedmioty na środku kontenera.
- „ spacja-x-{rozmiar} ” zapewnia poziomą przestrzeń pomiędzy elementami.
- „ bg-{kolor}-{liczba} ” ustawia tło kontenera na określony kolor.
- „ zaokrąglone-lg ” powoduje zaokrąglenie narożników kontenera.
- „ mx-4 ” zapewnia poziomy margines dla elastycznego kontenera.
- „ p-2 ” zapewnia dopełnienie elastycznego kontenera.
- Następnie tworzone są trzy elementy listy, którym przypisuje się różne typy stylów listy za pomocą „ lista-{typ} ' klasa.
Wyjście:
Z poniższego wyniku widać, że pierwsza lista używa punktorów, druga używa liczb dziesiętnych, a trzecia nie używa żadnego znacznika pozycji.
Używanie klasy stylu listy z wariantami stanu w Tailwind
Klasy stylu listy można używać z domyślnymi wariantami stanu w Tailwind, aby uczynić projekt bardziej dynamicznym. Korzystając z wariantów stanu najechania, fokusu i stanu aktywnego, użytkownik może zmienić styl znacznika elementów listy za każdym razem, gdy zostanie wyzwolony określony stan. Składnia używania klasy stylu listy z wariantami stanów jest następująca:
< ul klasa = „{stan}:list-{styl}…” > < / ul >Oto przykład użycia typu listy ze stanem „najechania”, w którym użytkownik może zmienić styl znacznika, najeżdżając kursorem na blok listy:
< P klasa = „tekst-wyśrodkuj tekst-xl czcionka-pogrubienie” >Najedź kursorem na blok listy, aby zmienić styl znacznika< / P >
< br >
< div klasa = „flex justify-center space-x-20 bg-slate-100 zaokrąglony-lg mx-4 p-2” >
< ul klasa = „najechanie dyskiem z listą: lista dziesiętna” >
LISTA # 1
< To >To jest pierwszy przedmiot< / To >
< To >To jest drugi element< / To >
< To >To jest trzeci element< / To >
< / ul >
< / div >W powyższym kodzie lista jest opatrzona znakiem „ płyta-lista ” jako domyślny typ stylu listy. Jednak użycie „ hover:lista-dziesiętna ” typ stylu listy zostanie zmieniony, gdy użytkownik najedzie kursorem myszy na blok listy.
Wyjście:
Poniższe dane wyjściowe pokazują, że styl typu listy zmienia się z listy punktowanej na listę numerowaną, gdy kursor znajduje się nad blokiem listy.
Używanie klasy stylu listy z punktami przerwania w Tailwind
Punkty przerwania służą do responsywnego projektowania układu dla różnych rozmiarów ekranów. Pięć domyślnych punktów przerwania udostępnianych przez Tailwind to sm, md, lg, xl i 2xl. Aby zapewnić klasie stylu typu listy punkt przerwania, używana jest następująca składnia:
< ul klasa = „{breakpoint}:list-{style}…” > < / ul >Oto przykład użycia typu stylu listy z „ md ”, punkt przerwania, w którym styl znacznika zmieni się, gdy rozmiar ekranu osiągnie punkt przerwania „md”:
< P klasa = „tekst-wyśrodkuj tekst-xl czcionka-pogrubienie” > Zwiększ ekran Rozmiar aby zmienić styl znacznika< / P >
< br >
< div klasa = „flex justify-center space-x-20 bg-slate-100 zaokrąglony-lg mx-4 p-2” >
< ul klasa = „list-disc md:list-decimal” >
LISTA # 1
< To >To jest pierwszy przedmiot< / To >
< To >To jest drugi element< / To >
< To >To jest trzeci element< / To >
< / ul >
< / div >W powyższym kodzie lista jest opatrzona znakiem „ płyta-lista ” jako styl domyślny. Jednak użycie „ md: lista-dziesiętna ” typ stylu listy zmieni się dla rozmiaru ekranu „md”.
Wyjście:
Jak widać na poniższym obrazie, typ stylu listy zmienia się z dyskowego na dziesiętny, gdy rozmiar ekranu osiągnie „ md „punkt przerwania.
Chodzi o ustawienie typu stylu listy w Tailwind.
Wniosek
Tailwind udostępnia trzy predefiniowane klasy typu listy umożliwiające zmianę stylu listy elementu. „ płyta-lista ” zawiera wypunktowanie list elementów. „ lista dziesiętna ” zapewnia numery służące do wystawiania pozycji. „ lista-brak ” tworzy listę, która nie używa żadnego znacznika pozycji. W tym artykule opisano procedurę ustawiania typu stylu listy w Tailwind.