Recimo, da mora uporabnik ustvariti seznam elementov za svojo spletno stran. Za lažji postopek oblikovanja Tailwind ponuja različne razrede v slogu seznama, ki jih je mogoče uporabiti za spreminjanje vrste, položaja in poravnave elementov seznama.
Ta članek ponuja postopek za nastavitev vrste sloga seznama v Tailwindu.
Kako nastaviti vrsto sloga seznama v Tailwind?
Tailwind ponuja tri privzete vrste slogov seznama. Uporabljajo se za zagotavljanje ' marker ” za elemente seznama. Trije privzeti razredi tipov stilov seznama so opisani takole:
- seznam-disk: Ta razred bo zagotovil okrogle točke kot oznako seznama.
- decimalni seznam: Ta razred bo zagotovil decimalna števila kot oznako seznama.
- seznam-brez: Ta razred bo odstranil vse oznake seznama iz elementov.
Sintaksa za uporabo vrst slogov seznama je naslednja:
< ul razred = 'seznam-{slog}' > < / ul >
Za boljše razumevanje bo spodnja predstavitev uporabila zgoraj definirano sintakso za zagotavljanje različnih slogov označevalcev za elemente seznama. V tem primeru bodo ustvarjeni trije elementi seznama in opremljeni z različnimi slogi označevalcev z uporabo privzetih razredov slogov seznama v Tailwindu:
< str razred = 'text-center text-xl font-bold' >Privzeti različni seznam Slog Tipi v Tailwind< / str >
< št >
< div razred = 'flex justify-center space-x-20 bg-slate-100 rounded-lg mx-4 p-2' >
< ul razred = 'list-disk' >
ŠT. SEZNAMA 1
< to >To je prvi element< / to >
< to >To je drugi predmet< / to >
< to >To je tretji predmet< / to >
< / ul >
< ul razred = 'decimalni seznam' >
ŠT. SEZNAMA 2
< to >To je prvi element< / to >
< to >To je drugi predmet< / to >
< to >To je tretji predmet< / to >
< / ul >
< ul razred = 'seznam-brez' >
ŠT. SEZNAMA 3
< to >To je prvi element< / to >
< to >To je drugi predmet< / to >
< to >To je tretji predmet< / to >
< / ul >
< / div >
Razlaga zgornje kode je naslednja:
- A “ ' element je ustvarjen z ' xl ' velikost pisave in ' krepko ” teža pisave. Besedilna vsebina elementa je postavljena na sredino z uporabo ' besedilno središče ” razred.
- Po prelomu vrstice je ' ' je ustvarjen element in je opremljen z ' flex ” razred. To bo ustvarilo vsebnik, ki bo vodoravno poravnal podrejene elemente.
- ' poravnati na sredino ” bo predmete postavil na sredino vsebnika.
- ' presledek-x-{velikost} ” zagotavlja vodoravni prostor med elementi.
- ' bg-{barva}-{številka} ” nastavi ozadje vsebnika na podano barvo.
- ' zaobljeno-lg ” naredi vogale vsebnika zaobljene.
- ' mx-4 ” zagotavlja vodoravni rob vsebniku flex.
- ' p-2 ” zagotavlja oblazinjenje flex vsebnika.
- Nato so ustvarjeni trije elementi seznama in opremljeni z različnimi vrstami slogov seznama z uporabo ' seznam-{vrsta} ” razred.
Izhod:
Iz spodnjega izpisa je razvidno, da prvi seznam uporablja točke, drugi uporablja decimalna števila, tretji pa ne uporablja nobenega označevalca elementov.
Uporaba razreda slogov seznama z različicami stanja v Tailwindu
Razred sloga seznama lahko uporabite s privzetimi različicami stanja v Tailwindu, da naredite dizajn bolj dinamičen. Z uporabo različic lebdenja, fokusa in aktivnega stanja lahko uporabnik spremeni slog označevalca elementov seznama, kadar koli se sproži navedeno stanje. Sintaksa za uporabo razreda slogov seznama z različicami stanja je naslednja:
< ul razred = '{state}:list-{style} ...' > < / ul >Tukaj je primer uporabe vrste sloga seznama s stanjem »lebdenja«, kjer lahko uporabnik spremeni slog označevalca tako, da se premakne nad blok seznama:
< str razred = 'text-center text-xl font-bold' >Prestavite kazalec nad blok seznama, da spremenite slog označevalnika< / str >
< št >
< div razred = 'flex justify-center space-x-20 bg-slate-100 rounded-lg mx-4 p-2' >
< ul razred = 'list-disc hover:list-decimal' >
ŠT. SEZNAMA 1
< to >To je prvi element< / to >
< to >To je drugi predmet< / to >
< to >To je tretji predmet< / to >
< / ul >
< / div >V zgornji kodi je seznam opremljen z » disk s seznamom ” kot privzeti tip sloga seznama. Vendar z uporabo ' hover:list-decimal ” se bo tip sloga seznama spremenil, ko uporabnik premakne kazalec miške nad blok seznama.
Izhod:
Spodnji rezultat kaže, da se slog vrste seznama spremeni iz označenega seznama v oštevilčen seznam, ko se kazalec premakne nad blok seznama.
Uporaba razreda slogov seznama z prelomnimi točkami v Tailwindu
Prelomne točke se uporabljajo za odzivno oblikovanje postavitve za različne velikosti zaslona. Pet privzetih mejnih točk, ki jih ponuja Tailwind, so sm, md, lg, xl in 2xl. Naslednja sintaksa se uporablja za zagotavljanje razreda sloga vrste seznama s prelomno točko:
< ul razred = '{breakpoint}:list-{style}...' > < / ul >Tukaj je primer uporabe vrste sloga seznama z ' md «, kjer se bo slog označevalca spremenil, ko velikost zaslona doseže prelomno točko »md«:
< str razred = 'text-center text-xl font-bold' >Povečaj zaslon Velikost da spremenite slog označevalca< / str >
< št >
< div razred = 'flex justify-center space-x-20 bg-slate-100 rounded-lg mx-4 p-2' >
< ul razred = 'list-disc md:list-decimal' >
ŠT. SEZNAMA 1
< to >To je prvi element< / to >
< to >To je drugi predmet< / to >
< to >To je tretji predmet< / to >
< / ul >
< / div >V zgornji kodi je seznam opremljen z » disk s seznamom ” kot privzeti slog. Vendar z uporabo ' md:decimalni seznam « se bo vrsta sloga seznama spremenila za velikost zaslona »md«.
Izhod:
Kot lahko vidite v spodnjem izpisu, se vrsta sloga seznama spremeni iz diska v decimalno, ko velikost zaslona doseže ' md ” prelomna točka.
To je vse o nastavitvi vrste sloga seznama v Tailwindu.
Zaključek
Tailwind ponuja tri vnaprej določene razrede tipov slogov seznama za spreminjanje sloga seznama elementa. ' disk s seznamom ” ponuja točke za navajanje elementov. ' list-decimal ” ponuja številke za seznam predmetov. ' seznam-brez ” razred ustvari seznam, ki ne uporablja nobenega označevalca elementov. Ta članek ponuja postopek za nastavitev vrste sloga seznama v Tailwindu.