Selles artiklis käsitletakse aga kahte konkreetset klassi, milleks on proportsionaalsed arvud ja tabelarvud. Neid kasutatakse Tailwindis arvuliste väärtuste kujundamiseks ning arvandmete korraldamiseks ja esitamiseks viisil, mis on dokumendi kujundusele ahvatlev.
Selles artiklis käsitletakse Tailwind CSS-i proportsionaalseid ja tabelinäiteid, kasutades järgmist ülevaadet:
- Kuidas kasutada proportsionaalseid arve Tailwind CSS-is?
- Kuidas kasutada Tailwind CSS-is tabelkujundeid?
- Proportsionaal- ja tabelkujude erinevus
Kuidas kasutada proportsionaalseid arve Tailwind CSS-is?
Proportsionaalsete arvude klass määrab elemendile kokkuleppe, kus iga arv ei ole sama laiusega.
Süntaks
Tailwindis proportsionaalsete arvude kasutamise süntaks on järgmine:
< div klass = 'proportsionaalsed arvud' >
< div / >
Ülaltoodud süntaksis on ' proportsionaalsed numbrid ” proportsionaalsete arvude kasutamiseks tuleb elemendile anda klass.
Vaatame proportsionaalsete arvude praktilist näidet.
Allpool esitatud koodis on kaks ' lk ' elemendid sisalduvad ' div ” element, mis kasutab proportsionaalsete arvude klassi:
< div klass = ' proportsionaalsed numbrid tekstikeskus bg-slate-200 text-xl' >< lk > 121212 < / lk >
< lk > 838383 < / lk >
< / div >
Ülaltoodud koodi selgitus on järgmine:
- ' div ' element kasutab ' proportsionaalsed numbrid ” klass, mis rakendab arvudele proportsionaalse figuuri omadust.
- ' tekstikeskus ” klass paigutab teksti elemendi keskele.
- ' bg-{color}-{number} ” klass vastutab elemendi taustavärvi eest.
- ' tekst-xl ” klass pakub teksti jaoks eriti suurt kirjasuurust.
- Järgmiseks kaks ' lk ” luuakse erinevaid numbreid sisaldavad elemendid.
Väljund
Väljundist on näha, et numbrid teises ' lk ” element on veidi laiem kui esimene. Selle põhjuseks on proportsionaalsete arvude klass:
Kuidas kasutada Tailwind CSS-is tabelkujundeid?
Tailwindi tabelarvud määravad kokkuleppe elemendile, kus igal numbril on sama laius. See loob numbrite sümmeetrilise tabelitaolise esituse.
Süntaks
Tabelikujude kasutamise süntaks on järgmine:
< div klass = 'tabelinumbrid' >< div / >
Ülaltoodud süntaksis on ' tabelinumbrid ” klass on elemendile ette nähtud tabelikujude kasutamiseks.
Vaatame, kuidas ' tabelinumbrid ” mõjutavad HTML-dokumendi arvväärtusi. Selle demonstratsiooni jaoks kaks ' lk ' koos numbriliste väärtustega luuakse ja sisalduvad ' div ” element, mis kasutab tabelikujude klassi:
< div klass = ' tabelinumbrid text-center bg-slate-200 text-xl' >< lk > 121212 < / lk >
< lk > 838383 < / lk >
< / div >
Ülaltoodud koodis on ' tabelinumbrid ' klass on ette nähtud ' div element, mis määrab lapsele tabelikujude stiili lk ” elemente.
Väljund:
Ülaltoodud väljundist on näha, et numbrite sama laiuse tõttu on mõlema elemendi arvväärtused ideaalselt joondatud.
Boonusteave: proportsionaalsete ja tabelkujude erinevus Tailwind CSS-is
Vaatame demonstratsiooni, mis eristab tabeli- ja proportsionaalsete arvude klasside mõju arvväärtustele. Selles demonstratsioonis määratakse elementidele vaikimisi proportsionaalsete arvude klass. Järgmiseks, kasutades hõljutusolekut, määratakse elementidele tabelarvude klass:
< div klass = ' proportsional-nums text-center bg-slate-200 text-xl hover:tabular-nums' >< lk > 121212 < / lk >
< lk > 838383 < / lk >
< / div >
Ülaltoodud koodist on näha, et ' div ' element on varustatud ' proportsionaalsed numbrid ”, mis on arvväärtuste vaikekokkulepe.
Samamoodi, kuna ' hover:tabular-nums ” klassis järgivad numbrilised väärtused tabelikujude tava alati, kui kasutaja viib hiirekursori elemendi „div” kohale.
Väljund
Antud väljundis muutub arvväärtuste laius, kui kasutaja viib hiire elemendi kohale. See annab visuaalse erinevuse Tailwindis proportsionaalsete ja tabelinäitajate vahel:
See kõik puudutab Tailwindis proportsionaalseid ja tabelikujusid.
Järeldus
Proportsionaalsete arvude kasutamiseks Tailwindis tuleb ' proportsionaalsed numbrid ” klassi kasutatakse. Proportsionaalsed arvud kasutavad tava, kus igal arvväärtusel on erinev laius. Tabelarvude kasutamiseks Tailwindis tuleb „ tabelinumbrid ” klassi kasutatakse. Tabelikujud kasutavad tava, kus igal arvväärtusel on sama laius. See artikkel pakub Tailwindis proportsionaalsete ja tabelikujude kasutamise protseduuri.