Artikel ini akan menjelaskan prosedur penerapan properti ketinggian minimum ke Hover, Focus, dan status lainnya di Tailwind.
Catatan: Untuk mengetahui lebih lanjut tentang kelas tinggi badan minimum di Tailwind, baca ini artikel di situs web kami.
Bagaimana Cara Menerapkan Properti Min-height ke Hover, Focus, dan Status Lainnya di Tailwind?
Tailwind menyediakan varian status default yang dapat diberikan bersama properti desain. Varian status ini mencakup “hover”, “fokus”, dan “aktif”. Deskripsi varian negara tersebut adalah sebagai berikut:
- Itu' melayang Status ” dipicu setiap kali kursor mouse melayang di atas suatu elemen.
- “ fokus Status ” dipicu setiap kali elemen berada dalam fokus.
- “ aktif Status ” dipicu setiap kali elemen diaktifkan atau diklik.
Mari kita gunakan properti tinggi minimum dengan masing-masing negara bagian ini satu per satu.
Menggunakan Properti Tinggi Minimum Dengan Status Hover
Untuk menggunakan “ tinggi minimal ” kelas dengan varian status hover di Tailwind, sintaksis berikut digunakan:
< div kelas = 'arahkan:min-h-{ukuran}...' > < / div >
Mari gunakan sintaks yang ditentukan di atas dalam demonstrasi. Dalam contoh ini, kita akan menambah tinggi minimum suatu elemen setiap kali kursor mouse melayang di atas elemen tersebut.
< div kelas = 'min-h-fit round-md bg-blue-700 teks-tengah teks-putih hover:min-h-screen' >Arahkan kursor untuk Meningkatkan minimum tinggi < / div >Penjelasan kode di atas adalah sebagai berikut:
- “ min-w-fit ” kelas menetapkan batas ketinggian minimum ke ketinggian yang dibutuhkan oleh elemen div agar sesuai dengan kontennya.
- “ arahkan kursor:min-w-layar Kelas ” akan memberikan batas ketinggian minimum sebesar 100% dari ukuran layar.
- “ bulat-md ', ' bg-{warna}-{angka} ', ' pusat teks ', Dan ' teks-putih ” Kelas masing-masing bertanggung jawab atas sudut membulat, warna latar belakang, teks rata tengah, dan warna teks putih untuk elemen div. sudut elemen div membulat.
Keluaran:
Jelas dari keluaran di bawah ini, bahwa tinggi minimum elemen meningkat hingga 100% dari ukuran layar saat kursor mouse melayang di atasnya.
Menggunakan Properti Tinggi Minimum Dengan Status Fokus
Untuk menggunakan “ tinggi minimal ” kelas dengan status fokus di Tailwind, sintaks berikut digunakan:
< div kelas = 'fokus:min-h-{ukuran}...' > < / div >Mari gunakan sintaks yang ditentukan di atas dalam demonstrasi. Dalam contoh ini, tinggi minimum kolom masukan akan bertambah saat pengguna memfokuskannya.
< memasukkan pengganti = 'Fokus pada kolom masukan ini' kelas = 'min-h-0 h-fit w-48 round-md bg-gray-200 fokus pusat teks:min-h-[35%]' < / memasukkan >Penjelasan kode di atas adalah sebagai berikut:
- Sebuah ' memasukkan Bidang ” dibuat dengan beberapa teks di atribut placeholder.
- Disediakan batas ketinggian minimal 0px menggunakan “ menit-jam-0 ' kelas. Jadi, pengembang menetapkan tinggi default elemen sama dengan tinggi yang diperlukan agar sesuai dengan konten menggunakan “ h-cocok ' kelas.
- “ fokus:min-h-[35%] Kelas ” akan meningkatkan batas ketinggian minimum bidang masukan saat pengguna memfokuskannya.
Keluaran:
Jelas dari keluaran di bawah ini bahwa ketinggian bidang masukan meningkat seiring pengguna memfokuskannya. Hal ini karena batas tinggi minimum bertambah dari 0px menjadi 35% dari tinggi layar.
Menggunakan Properti Tinggi Minimum Dengan Status Aktif di Tailwind
Untuk menggunakan “ tinggi minimum ” properti dengan varian status aktif di Tailwind, sintaks berikut digunakan:
< div kelas = 'aktif:min-h-{ukuran}...' > < / div >Mari gunakan sintaks yang ditentukan di atas dalam demonstrasi. Dalam contoh ini, tinggi minimum tombol akan bertambah ketika pengguna mengkliknya secara aktif.
< tombol kelas = 'min-h-0 h-fit w-48 round-md bg-blue-300 pusat teks aktif:min-h-[35%]' > Klik untuk Meningkatkan Tinggi < / tombol >Sebuah tombol dibuat dengan batas ketinggian minimal 0px. Namun, menggunakan “ aktif:min-h-[35%] ” batas tinggi minimum akan meningkat dari 0px menjadi 35% dari ukuran layar setiap kali tombol diklik.
Keluaran:
Terlihat pada keluaran berikut bahwa tinggi minimum tombol bertambah ketika pengguna mengkliknya.
Itu semua tentang menerapkan properti ketinggian minimum ke Tailwind hover, focus, dan status lainnya di Tailwind.
Kesimpulan
Varian status seperti hover, focus, dan active di Tailwind memungkinkan pengguna membuat tata letak desain dinamis. Untuk menggunakan kelas tinggi minimum dengan varian negara bagian di Tailwind, “ arahkan kursor:min-h-{nilai} ', ' fokus:min-h-{nilai} ', Dan ' aktif:min-h-{nilai} ” kelas digunakan. Artikel ini telah memberikan prosedur untuk menerapkan hover, fokus, dan status lain dengan kelas ketinggian minimum di Tailwind.