Vendar bo ta članek podrobneje obravnaval dva specifična razreda, in sicer proporcionalne figure in tabelarične figure. Ti se uporabljajo za oblikovanje številskih vrednosti v Tailwindu ter urejanje in predstavljanje številskih podatkov na način, ki je privlačen za oblikovanje dokumenta.
Ta članek bo podrobneje razložil proporcionalne in tabelarične številke v Tailwind CSS z naslednjim orisom:
- Kako uporabljati proporcionalne figure v Tailwind CSS?
- Kako uporabljati tabelarične slike v Tailwind CSS?
- Razlika med proporcionalnimi in tabelarnimi figurami
Kako uporabljati proporcionalne figure v Tailwind CSS?
Razred proporcionalnih figur bo elementu dodelil konvencijo, kjer vsako število nima enake širine.
Sintaksa
Sintaksa za uporabo proporcionalnih številk v Tailwindu je naslednja:
< div razred = 'proporcionalne številke' >
< div / >
V zgoraj navedeni sintaksi je » proporcionalne številke ” je treba elementu zagotoviti razred za uporabo proporcionalnih številk.
Oglejmo si praktični primer proporcionalnih številk.
V spodnji kodi sta dva ' str ' elementi so vsebovani v ' div ”, ki uporablja razred proporcionalnih figur:
< div razred = 'proporcionalne številke besedilno središče bg-slate-200 besedilo-xl' >< str > 121212 < / str >
< str > 838383 < / str >
< / div >
Razlaga zgoraj navedene kode je naslednja:
- ' div ' element uporablja ' proporcionalne številke «, ki bo za števila uporabil lastnost proporcionalne figure.
- ' besedilno središče ” postavi besedilo v sredino elementa.
- ' bg-{barva}-{številka} ” je odgovoren za barvo ozadja elementa.
- ' besedilo-xl ” zagotavlja izjemno veliko velikost pisave za besedilo.
- Nato dva ' str ” so ustvarjeni elementi, ki vsebujejo različne številke.
Izhod
V izpisu je razvidno, da številke v drugem ' str ” imajo nekoliko večjo širino kot prvi. To je posledica razreda proporcionalnih številk:
Kako uporabljati tabelarične slike v Tailwind CSS?
Tabelarične številke v Tailwindu dodelijo konvencijo elementu, kjer ima vsako število enako velikost širine. To ustvari simetrično predstavitev števil v obliki tabele.
Sintaksa
Sintaksa za uporabo tabelaričnih slik je naslednja:
< div razred = 'tabular-nums' >< div / >
V zgoraj navedeni sintaksi je » tabularne številke ” je elementu na voljo razred za uporabo tabelaričnih slik.
Oglejmo si, kako ' tabularne številke ” vplivajo na številske vrednosti v dokumentu HTML. Za to predstavitev dva ' str « s številskimi vrednostmi so ustvarjeni in vsebovani v » div ”, ki uporablja razred tabelarnih slik:
< div razred = ' tabular-nums text-center bg-slate-200 text-xl' >< str > 121212 < / str >
< str > 838383 < / str >
< / div >
V zgornji kodi je » tabularne številke ' razred je na voljo ' div ” element, ki bo otroku dodelil slog tabelaričnih številk “ str ” elementi.
Izhod:
V zgornjem izhodu je razvidno, da so številske vrednosti v obeh elementih popolnoma poravnane zaradi enakih širin števk.
Dodatne informacije: razlika med proporcionalnimi in tabelarnimi številkami v Tailwind CSS
Oglejmo si predstavitev, ki razlikuje učinek razredov tabelarnih in proporcionalnih številk na številske vrednosti. V tej predstavitvi bo elementom privzeto dodeljen razred proporcionalnih figur. Nato bo z uporabo stanja lebdenja elementom dodeljen razred tabelarnih figur:
< div razred = 'proporcionalne-številke-središče besedila bg-skrilavec-200 besedilo-xl lebdenje:tabelarne-številke' >< str > 121212 < / str >
< str > 838383 < / str >
< / div >
V zgornji kodi je razvidno, da je » div ' je opremljen z ' proporcionalne številke «, kar bo privzeta konvencija, ki ji bodo sledile številske vrednosti.
Podobno zaradi ' hover:tabular-nums «, bodo številske vrednosti sledile konvenciji tabelarnih številk, kadar koli uporabnik premakne miškin kazalec nad element »div«.
Izhod
V danem izhodu se širina številskih vrednosti spremeni, ko uporabnik premakne miško nad element. To zagotavlja vizualno razliko med proporcionalnimi in tabelarnimi številkami v Tailwindu:
To je vse o proporcionalnih in tabelarnih številkah v Tailwindu.
Zaključek
Za uporabo proporcionalnih figur v Tailwind, ' proporcionalne številke ” se uporablja razred. Proporcionalne številke uporabljajo konvencijo, kjer ima vsaka številska vrednost drugačno velikost širine. Če želite uporabiti tabelarne številke v Tailwindu, uporabite » tabularne številke ” se uporablja razred. Tabelarične slike uporabljajo konvencijo, kjer ima vsaka številska vrednost enako velikost širine. Ta članek ponuja postopek za uporabo proporcionalnih in tabelarnih številk v Tailwindu.