Artikel ini akan menjelaskan cara menggunakan pecahan diagonal di Tailwind.
Bagaimana Cara Menggunakan Pecahan Diagonal di Tailwind CSS?
Kelas pecahan diagonal di Tailwind adalah varian font numerik yang telah ditentukan sebelumnya yang memperkecil pembilang dan penyebut serta memisahkannya dengan garis miring. Hal ini membuat bilangan pecahan tampak berbeda dari teks lainnya.
Sintaksis
Sintaks penggunaan “ pecahan diagonal ”kelasnya adalah sebagai berikut:
< div kelas = 'pecahan diagonal' >
< div / >
Seperti yang Anda lihat dari sintaks di atas, pengembang harus menyediakan “ pecahan diagonal ' dalam ' kelas ” atribut elemen.
Mari kita gunakan kelas “pecahan diagonal” sebagai contoh praktis. Pada demonstrasi di bawah ini, pengguna dapat melihat perbedaan antara pecahan normal dan pecahan diagonal:
< div kelas = 'bg-slate-200 pusat teks teks-lg' >< P >Pecahan Normal: 3 / 5 6 / 3 6 / 5 < / P >
< P kelas = 'pecahan diagonal' >Pecahan Diagonal: 3 / 5 6 / 3 6 / 5 < / P >
< / div >
Penjelasan kode di atas adalah sebagai berikut:
- “ div Elemen ” dibuat dan disediakan sebagai warna latar belakang menggunakan “ bg-{warna}-{angka} ' kelas.
- Kemudian, teks tersebut disediakan ukuran font yang besar dan disejajarkan dengan bagian tengah elemen menggunakan tombol “ teks-lg ' Dan ' pusat teks ” kelas masing-masing.
- Selanjutnya, dua “ ” elemen dibuat, di mana elemen kedua dilengkapi dengan “ pecahan diagonal ' kelas.
Keluaran:
Perbedaan pecahan diagonal dan pecahan normal terlihat jelas pada keluaran di atas.
Menggunakan Kelas Pecahan Diagonal Dengan Breakpoint
Breakpoint digunakan sebagai kueri media di Tailwind. Ada lima breakpoint default dengan lebar minimum yang ditentukan. Breakpoint ini dapat digunakan dengan kelas mana pun di Tailwind untuk membuat tata letak desain yang responsif dan dinamis.
Untuk menggunakan “ pecahan diagonal ” kelas dengan breakpoint di Tailwind, sintaks berikut digunakan:
{ awalan titik henti sementara } : pecahan diagonalTabel di bawah ini memberikan lebar minimum untuk breakpoint berbeda di Tailwind:
| Awalan Titik Istirahat | Lebar Minimal |
|---|---|
| sm | 640 piksel |
| md | 768 piksel |
| lg | 1024 piksel |
| xl | 1280 piksel |
| 2xl | 1536 piksel |
Mari gunakan breakpoint dengan “ pecahan diagonal ” kelas untuk memahami secara praktis penggunaannya:
< div kelas = 'bg-slate-200 teks-pusat teks-lg md: pecahan-diagonal' >3/4, 7/8, 5/4, 6/5
< / div >
Dalam kode yang disediakan di atas, elemen div disediakan di “ md:pecahan diagonal ” kelas yang akan mengubah font pecahan numerik ketika “ md ” breakpoint tercapai.
Keluaran
Seperti yang Anda lihat pada keluaran, bilangan pecahan disediakan dengan font pecahan diagonal ketika “ md ” breakpoint tercapai:
Menggunakan Kelas Pecahan Diagonal Dengan Status Tailwind
Tailwind memberikan default “ negara bagian ” untuk memberikan properti desain ke suatu elemen ketika keadaan spesifik tersebut dipicu. Hal ini membuat tata letak desain lebih menarik dan dinamis. Untuk menggunakan kelas “pecahan diagonal” dengan status di Tailwind, sintaks berikut digunakan:
{ negara } : pecahan diagonalStatus default yang disediakan oleh Tailwind adalah sebagai berikut:
- Arahkan kursor: Saat pengguna mengarahkan kursor ke elemen.
- Fokus: Saat pengguna berfokus pada suatu elemen dengan menavigasi ke sana.
- Aktif: Saat pengguna mengaktifkan suatu elemen dengan mengkliknya.
- Cacat: Ketika pengguna tidak diperbolehkan untuk mengaktifkan suatu elemen.
Demonstrasi di bawah ini memberikan contoh praktis penggunaan “ pecahan diagonal ” kelas dengan “ melayang ” nyatakan di Tailwind:
< div kelas = 'bg-slate-200 teks-pusat teks-lg hover: pecahan diagonal' >3/4, 7/8, 5/4, 6/5
< / div >
“ div ” elemen dalam kode di atas disediakan oleh “ hover:pecahan diagonal kelas ” yang akan mengubah font normal bilangan pecahan menjadi font pecahan diagonal.
Keluaran
Seperti yang Anda lihat di output, font numerik dari bilangan pecahan berubah saat pengguna mengarahkan kursor mouse ke atasnya:
Sekian tentang penggunaan kelas pecahan diagonal di Tailwind CSS.
Kesimpulan
Untuk menggunakan pecahan diagonal di Tailwind CSS, gunakan “ pecahan diagonal ' kelas. Kelas ini akan memisahkan pembilang dan penyebutnya dengan garis miring dan menjadikannya kecil. Pengguna juga dapat menggunakan kelas “pecahan diagonal” dengan titik henti sementara dan status default di Tailwind untuk membuat desain lebih dinamis. Artikel ini telah menjelaskan tata cara penggunaan pecahan diagonal di Tailwind.