Gayunpaman, ang artikulong ito ay magdedetalye sa dalawang partikular na klase na mga proporsyonal na figure at tabular figure. Ginagamit ang mga ito upang i-istilo ang mga numeric na halaga sa Tailwind at ayusin at katawanin ang numeric na data sa paraang nakakaakit sa disenyo ng dokumento.
Ang artikulong ito ay magdedetalye sa mga proporsyonal at tabular na mga numero sa Tailwind CSS gamit ang sumusunod na balangkas:
- Paano Gumamit ng Mga Proporsyonal na Figure sa Tailwind CSS?
- Paano Gamitin ang Tabular Figures sa Tailwind CSS?
- Pagkakaiba sa pagitan ng Proportional at Tabular Figure
Paano Gumamit ng Mga Proporsyonal na Figure sa Tailwind CSS?
Ang klase ng proportional figure ay magtatalaga sa elemento ng isang convention kung saan ang bawat numero ay walang parehong lapad.
Syntax
Ang syntax para sa paggamit ng mga proporsyonal na numero sa Tailwind ay ang mga sumusunod:
< div klase = 'proportional-nums' >
< div / >
Sa ibinigay na syntax sa itaas, ang ' proporsyonal-nums ” klase ay kailangang ibigay sa elemento upang gumamit ng mga proporsyonal na numero.
Tingnan natin ang isang praktikal na halimbawa ng mga proporsyonal na numero.
Sa ibinigay na code sa ibaba, dalawang ' p Ang mga elemento ay nakapaloob sa isang div ” element na gumagamit ng proportional figures class:
< div klase = ' proportional-nums text-center bg-slate-200 text-xl' >< p > 121212 < / p >
< p > 838383 < / p >
< / div >
Ang paliwanag ng ibinigay na code sa itaas ay ang mga sumusunod:
- Ang ' div 'Ang elemento ay gumagamit ng ' proporsyonal-nums ” class na maglalapat ng proportional figure property sa mga numero.
- Ang ' text-center ” ipinoposisyon ng klase ang teksto sa gitna ng elemento.
- Ang ' bg-{color}-{number} ” class ang may pananagutan para sa kulay ng background ng elemento.
- Ang ' text-xl ” Ang klase ay nagbibigay ng sobrang laki ng font para sa teksto.
- Susunod, dalawa' p Ang mga elemento ay nilikha na naglalaman ng iba't ibang mga numero.
Output
Makikita sa output na ang mga numero sa pangalawang ' p ” ang elemento ay may bahagyang mas malaking lapad kaysa sa una. Ito ay dahil sa proportional figures class:
Paano Gamitin ang Tabular Figures sa Tailwind CSS?
Ang mga tabular figure sa Tailwind ay nagtatalaga ng convention sa isang elemento kung saan ang bawat numero ay may parehong laki ng lapad. Lumilikha ito ng simetriko na tulad ng talahanayan na representasyon ng mga numero.
Syntax
Ang syntax para sa paggamit ng mga tabular figure ay ang mga sumusunod:
< div klase = 'tabular-nums' >< div / >
Sa ibinigay na syntax sa itaas, ang ' tabular-nums ” klase ay ibinibigay sa elemento upang magamit ang mga tabular figure.
Tingnan natin kung paano ang ' tabular-nums ” makakaapekto sa mga numerong halaga sa isang HTML na dokumento. Para sa pagpapakitang ito, dalawang ' p ' na may mga numerong halaga ay nilikha at nakapaloob sa isang ' div ” element na gumagamit ng tabular figures class:
< div klase = ' tabular-nums text-center bg-slate-200 text-xl' >< p > 121212 < / p >
< p > 838383 < / p >
< / div >
Sa code sa itaas, ang ' tabular-nums 'Ang klase ay ibinibigay sa ' div 'elemento na magtatalaga ng istilo ng mga tabular figure sa bata' p ' mga elemento.
Output:
Makikita sa output sa itaas na ang mga numeric na halaga sa parehong mga elemento ay ganap na nakahanay dahil sa parehong laki ng lapad ng mga digit.
Impormasyon ng Bonus: Pagkakaiba sa Pagitan ng Mga Proporsyonal at Tabular na Figure sa Tailwind CSS
Tingnan natin ang isang demonstrasyon na nag-iiba sa epekto ng mga klase ng tabular at proportional figure sa mga numeric na halaga. Sa demonstration na ito, ang mga elemento ay itatalaga sa proportional figures class bilang default. Susunod, gamit ang hover state, ang mga elemento ay itatalaga sa tabular figures class:
< div klase = ' proportional-nums text-center bg-slate-200 text-xl hover:tabular-nums' >< p > 121212 < / p >
< p > 838383 < / p >
< / div >
Makikita sa code sa itaas na ang ' div Ang 'elemento ay binibigyan ng ' proporsyonal-nums ”, na magiging default na convention na susundin ng mga numerong halaga.
Katulad nito, dahil sa ' hover:tabular-nums ” class, ang mga numeric na halaga ay susunod sa tabular figures convention sa tuwing i-hover ng user ang mouse cursor sa ibabaw ng “div” na elemento.
Output
Sa ibinigay na output, nagbabago ang lapad ng mga numeric na halaga kapag ini-hover ng user ang mouse sa ibabaw ng elemento. Nagbibigay ito ng visual na pagkakaiba sa pagitan ng proporsyonal at mga tabular na figure sa Tailwind:
Iyon ay tungkol sa proporsyonal at tabular na mga numero sa Tailwind.
Konklusyon
Upang gumamit ng mga proporsyonal na numero sa Tailwind, ang ' proporsyonal-nums ” klase ang ginagamit. Ang mga proporsyonal na figure ay gumagamit ng convention kung saan ang bawat numeric na halaga ay may iba't ibang laki ng lapad. Upang gamitin ang mga tabular figure sa Tailwind, ang ' tabular-nums ” klase ang ginagamit. Ginagamit ng mga tabular figure ang convention kung saan ang bawat numeric na halaga ay may parehong laki ng lapad. Ang artikulong ito ay nagbigay ng pamamaraan para sa paggamit ng proporsyonal at tabular na mga numero sa Tailwind.