Artikel ini akan menerangkan cara menggunakan pecahan pepenjuru dalam Tailwind.
Bagaimana untuk Menggunakan Pecahan Diagonal dalam Tailwind CSS?
Kelas pecahan pepenjuru dalam Tailwind ialah varian fon angka yang dipratentukan yang menjadikan pengangka dan penyebut lebih kecil dan memisahkannya dengan garis miring. Ini menjadikan nombor pecahan kelihatan berbeza daripada teks yang lain.
Sintaks
Sintaks menggunakan ' pecahan pepenjuru ” kelas adalah seperti berikut:
< div kelas = 'pecahan pepenjuru' >
< div / >
Seperti yang anda lihat dari sintaks di atas, pembangun perlu menyediakan ' pecahan pepenjuru ' di dalam ' kelas ” atribut unsur.
Mari kita gunakan kelas 'pecahan pepenjuru' sebagai contoh praktikal. Dalam tunjuk cara di bawah, pengguna boleh melihat perbezaan antara pecahan normal dan pecahan pepenjuru:
< div kelas = 'bg-slate-200 text-center text-lg' >< hlm >Pecahan Normal: 3 / 5 6 / 3 6 / 5 < / hlm >
< hlm kelas = 'pecahan pepenjuru' >Pecahan Diagonal: 3 / 5 6 / 3 6 / 5 < / hlm >
< / div >
Penjelasan kod di atas adalah seperti berikut:
- ' div elemen ' dicipta dan disediakan sebagai warna latar belakang menggunakan ' bg-{warna}-{nombor} ” kelas.
- Kemudian, teks disediakan saiz fon yang besar dan diselaraskan ke tengah elemen menggunakan ' teks-lg ” dan “ pusat teks ” kelas masing-masing.
- Seterusnya, dua ' 'elemen dicipta, di mana elemen kedua disediakan dengan ' pecahan pepenjuru ” kelas.
Pengeluaran:
Perbezaan antara pecahan pepenjuru dan pecahan normal boleh dilihat dengan jelas dalam keluaran di atas.
Menggunakan Kelas Pecahan Diagonal Dengan Titik Putus
Titik putus digunakan sebagai pertanyaan media dalam Tailwind. Terdapat lima titik putus lalai dengan lebar minimum yang ditentukan. Titik putus ini boleh digunakan dengan mana-mana kelas dalam Tailwind untuk mencipta reka letak reka bentuk yang responsif dan dinamik.
Untuk menggunakan ' pecahan pepenjuru ” dengan titik putus dalam Tailwind, sintaks berikut digunakan:
{ awalan titik putus } : pecahan pepenjuruJadual di bawah menyediakan lebar minimum untuk titik putus yang berbeza dalam Tailwind:
| Awalan Titik Putus | Lebar Minimum |
|---|---|
| sm | 640px |
| md | 768px |
| lg | 1024px |
| xl | 1280px |
| 2xl | 1536px |
Mari gunakan titik putus dengan ' pecahan pepenjuru ” kelas untuk memahami penggunaannya secara praktikal:
< div kelas = 'bg-slate-200 text-center text-lg md:diagonal-fractions' >3/4, 7/8, 5/4, 6/5
< / div >
Dalam kod yang diberikan di atas, elemen div disediakan dalam ' md:pecahan pepenjuru kelas ” yang akan menukar fon pecahan berangka apabila “ md ” titik putus dicapai.
Pengeluaran
Seperti yang anda lihat dalam output, nombor pecahan disediakan dengan fon pecahan pepenjuru apabila ' md ” titik putus dicapai:
Menggunakan Kelas Pecahan Diagonal Dengan Keadaan Angin Ekor
Tailwind menyediakan lalai ' negeri ” untuk menyediakan sifat reka bentuk kepada elemen apabila keadaan khusus itu dicetuskan. Ini menjadikan reka bentuk reka bentuk lebih menarik dan dinamik. Untuk menggunakan kelas 'pecahan pepenjuru' dengan keadaan dalam Tailwind, sintaks berikut digunakan:
{ negeri } : pecahan pepenjuruKeadaan lalai yang disediakan oleh Tailwind adalah seperti berikut:
- Tuding: Apabila pengguna menuding kursor ke atas elemen.
- Fokus: Apabila pengguna memfokuskan pada elemen dengan menavigasi kepadanya.
- aktif: Apabila pengguna mengaktifkan elemen dengan mengklik padanya.
- Lumpuhkan: Apabila pengguna tidak dibenarkan untuk mengaktifkan elemen.
Demonstrasi di bawah memberikan contoh praktikal menggunakan ' pecahan pepenjuru 'kelas dengan ' berlegar ” negeri di Tailwind:
< div kelas = 'bg-slate-200 text-center text-lg hover:diagonal-fractions' >3/4, 7/8, 5/4, 6/5
< / div >
' div 'elemen dalam kod di atas disediakan oleh ' hover:pepenjuru-pecahan ” kelas yang akan menukar fon biasa nombor pecahan kepada fon pecahan pepenjuru.
Pengeluaran
Seperti yang anda lihat dalam output, fon berangka nombor pecahan berubah apabila pengguna menuding kursor tetikus di atasnya:
Itu semua tentang menggunakan kelas pecahan pepenjuru dalam Tailwind CSS.
Kesimpulan
Untuk menggunakan pecahan pepenjuru dalam Tailwind CSS, gunakan ' pecahan pepenjuru ” kelas. Kelas ini akan memisahkan pengangka dan penyebut dengan garis miring dan menjadikannya kecil. Pengguna juga boleh menggunakan kelas 'pecahan pepenjuru' dengan titik putus lalai dan keadaan dalam Tailwind untuk menjadikan reka bentuk lebih dinamik. Artikel ini telah menyediakan prosedur untuk menggunakan pecahan pepenjuru dalam Tailwind.