Walau bagaimanapun, artikel ini akan menghuraikan dua kelas khusus iaitu angka berkadar dan angka jadual. Ini digunakan untuk menggayakan nilai berangka dalam Tailwind dan menyusun serta mewakili data berangka dengan cara yang menarik untuk reka bentuk dokumen.
Artikel ini akan menghuraikan angka berkadar dan jadual dalam Tailwind CSS menggunakan garis besar berikut:
- Bagaimana Menggunakan Angka Berkadar dalam CSS Tailwind?
- Bagaimana Menggunakan Angka Tabular dalam CSS Tailwind?
- Perbezaan Antara Rajah Berkadaran dan Jadual
Bagaimana Menggunakan Angka Berkadar dalam CSS Tailwind?
Kelas angka berkadar akan menetapkan elemen konvensyen di mana setiap nombor tidak mempunyai lebar yang sama.
Sintaks
Sintaks untuk menggunakan angka berkadar dalam Tailwind adalah seperti berikut:
< div kelas = 'nombor berkadar' >
< div / >
Dalam sintaks yang disediakan di atas, ' proportional-nums ” kelas perlu disediakan kepada elemen untuk menggunakan angka berkadar.
Mari lihat contoh praktikal angka berkadar.
Dalam kod yang disediakan di bawah, dua ' hlm 'elemen terkandung dalam ' div 'elemen yang menggunakan kelas angka berkadar:
< div kelas = 'proportional-nums text-center bg-slate-200 text-xl' >< hlm > 121212 < / hlm >
< hlm > 838383 < / hlm >
< / div >
Penjelasan kod yang diberikan di atas adalah seperti berikut:
- ' div elemen ' menggunakan ' proportional-nums ” kelas yang akan menggunakan sifat angka berkadar pada nombor.
- ' pusat teks ” kelas meletakkan teks di tengah-tengah elemen.
- ' bg-{warna}-{nombor} ” kelas bertanggungjawab untuk warna latar belakang elemen.
- ' teks-xl kelas ” menyediakan saiz fon yang lebih besar untuk teks.
- Seterusnya, dua ' hlm ” unsur dicipta mengandungi nombor yang berbeza.
Pengeluaran
Ia boleh dilihat dalam output bahawa nombor dalam kedua ' hlm ” elemen mempunyai lebar sedikit lebih besar daripada yang pertama. Ini disebabkan oleh kelas angka berkadar:
Bagaimana Menggunakan Angka Tabular dalam CSS Tailwind?
Angka jadual dalam Tailwind menetapkan konvensyen kepada elemen di mana setiap nombor mempunyai saiz lebar yang sama. Ini mewujudkan perwakilan seperti jadual simetri bagi nombor.
Sintaks
Sintaks untuk menggunakan angka jadual adalah seperti berikut:
< div kelas = 'nombor jadual' >< div / >
Dalam sintaks yang disediakan di atas, ' jadual-nombor ” kelas disediakan kepada elemen untuk menggunakan angka jadual.
Mari lihat bagaimana ' jadual-nombor ” mempengaruhi nilai angka dalam dokumen HTML. Untuk demonstrasi ini, dua ' hlm ' dengan nilai angka dicipta dan terkandung dalam ' div 'elemen yang menggunakan kelas angka jadual:
< div kelas = ' tabular-nums text-center bg-slate-200 text-xl' >< hlm > 121212 < / hlm >
< hlm > 838383 < / hlm >
< / div >
Dalam kod di atas, ' jadual-nombor 'kelas disediakan kepada' div 'elemen yang akan memberikan gaya angka jadual kepada kanak-kanak' hlm ” unsur.
Pengeluaran:
Ia boleh dilihat dalam output di atas bahawa nilai berangka dalam kedua-dua elemen adalah sejajar dengan sempurna kerana saiz lebar digit yang sama.
Maklumat Bonus: Perbezaan Antara Angka Berkadar dan Jadual dalam CSS Tailwind
Mari lihat demonstrasi yang membezakan kesan kelas angka jadual dan angka berkadar pada nilai berangka. Dalam demonstrasi ini, elemen akan diberikan kelas angka berkadar sebagai lalai. Seterusnya, menggunakan keadaan hover, elemen akan diberikan kelas angka jadual:
< div kelas = 'proportional-nums text-center bg-slate-200 text-xl hover:tabular-nums' >< hlm > 121212 < / hlm >
< hlm > 838383 < / hlm >
< / div >
Ia boleh dilihat dalam kod di atas bahawa ' div elemen ' disediakan dengan ' proportional-nums ”, yang akan menjadi konvensyen lalai yang akan diikuti oleh nilai angka.
Begitu juga, disebabkan ' hover:tabular-nums ”, nilai berangka akan mengikut konvensyen angka jadual apabila pengguna menuding kursor tetikus ke atas elemen “div”.
Pengeluaran
Dalam output yang diberikan, lebar nilai berangka berubah apabila pengguna menuding tetikus di atas elemen. Ini memberikan perbezaan visual antara angka berkadar dan jadual dalam Tailwind:
Itu semua tentang angka berkadar dan jadual dalam Tailwind.
Kesimpulan
Untuk menggunakan angka berkadar dalam Tailwind, “ proportional-nums ” kelas digunakan. Angka berkadar menggunakan konvensyen di mana setiap nilai berangka mempunyai saiz lebar yang berbeza. Untuk menggunakan angka jadual dalam Tailwind, “ jadual-nombor ” kelas digunakan. Angka jadual menggunakan konvensyen di mana setiap nilai berangka mempunyai saiz lebar yang sama. Artikel ini telah menyediakan prosedur untuk menggunakan angka berkadar dan jadual dalam Tailwind.