“ layar-h ” kelas di Tailwind digunakan untuk menetapkan tinggi area pandang ke elemen HTML. Area pandang hanyalah nama lain untuk ukuran layar klien. Pengembang dapat dengan mudah memilih seluruh area pandang dengan bantuan ini “ layar-h ” lalu terapkan beberapa kelas Tailwind yang sesuai.
Artikel ini akan memberikan prosedur untuk menambahkan tinggi area pandang ke elemen di Tailwind menggunakan “ layar-h ' kelas.
Bagaimana Cara Mengatur Ketinggian Area Pandang Elemen Menggunakan Kelas “h-screen” di Tailwind?
Jika suatu elemen diberi ketinggian viewport menggunakan “ layar-h ” kelas, maka secara otomatis akan menyesuaikan properti ketinggiannya sesuai dengan layar klien. Untuk menggunakan ketinggian area pandang di Tailwind, ikuti konvensi yang disediakan di bawah ini:
< div kelas = 'layar-h' > Halo < / div >
Dari demonstrasi di atas, jelas bahwa “ layar-h ” digunakan dalam atribut kelas elemen bersama dengan berbagai kelas Tailwind lainnya untuk mendesain tata letak.
Mari kita buat dashboard tiruan, dan berikan ketinggian viewport pada sidebar layar dashboard.
< div kelas = 'melenturkan' >
< div kelas = 'w-56 h-layar bulat-lg bg-biru-600 pusat teks teks-cyan-50 py-6 teks-2xl font-bold' >Dasbor
< jalan kelas = 'teks-lg py-8 spasi-y-7' >
< itu >Tim< / itu >
< itu >Proyek< / itu >
< itu >Laporan< / itu >
< itu >Dokumen< / itu >
< / jalan >
< / div >
< div kelas = 'pusat teks teks-3xl py-8 ps-5' >Selamat datang di Dasbor!< / div >
< / div >
Penjelasan kode:
- Pertama, sebuah “ div ” elemen dibuat memiliki kelas “ melenturkan ”, kelas ini menyelaraskan benda-benda yang berada dalam garis horizontal.
- Selanjutnya, buat yang lain “ div ” dengan padding atas & bawah 8px menggunakan “ py-2 ” kelas dan mengalokasikannya dengan lebar tetap menggunakan “ w-56 ' kelas. Selanjutnya, atur tinggi elemen ke tinggi viewport dengan “ layar-h ' kelas. Sudut-sudut wadah diatur membulat.
- “ bg-{warna}-{angka} Kelas ” digunakan untuk memberikan warna latar belakang pada container. “ pusat teks ” kelas menyelaraskan konten teks ke tengah. Berat font untuk teks diatur ke “ berani ”, dan ukuran fontnya adalah” 2xl ”.
- Selanjutnya, daftar tidak berurutan “< jalan >” dibuat dengan ukuran font besar dan “ 48 piksel ” margin-top menggunakan kelas penarik “spasi-y”.
- Kemudian, empat item daftar dibuat menggunakan “< itu >” tag.
- Lain ' div Elemen ” dibuat dengan padding inline-start 32px atas-bawah dan 20px menggunakan “ py” dan “ps ” kelas.
Output dari kode yang dijelaskan di atas adalah sebagai berikut:
Dari output di atas terlihat jelas bahwa sidebar dashboard memiliki viewport setinggi layar. Itu semua tentang tujuan dari “ layar-h ” kelas di Tailwind.
Kesimpulan
“ layar-h ” kelas di Tailwind digunakan untuk menetapkan tinggi Viewport ke suatu elemen, yaitu tinggi layar klien. Menggunakan ' layar-h ” kelas, elemen akan secara otomatis mewarisi tinggi layar. Untuk menggunakan ketinggian area pandang di Tailwind, tombol “ layar-h ” properti harus diteruskan sebagai nilai untuk “ kelas ” atribut seperti “< div class= “layar-h ”>”. Artikel ini telah memberikan tata cara penggunaan “ layar-h ” kelas di Tailwind.