“ h-ekran Tailwind'deki 'sınıf, görünüm alanı yüksekliğini bir HTML öğesine atamak için kullanılır. Viewport, istemcinin ekran boyutunun yalnızca başka bir adıdır. Geliştirici bunun yardımıyla tüm görünüm penceresini kolayca seçebilir “ h-ekran ” sınıfını seçin ve ardından buna göre birkaç Tailwind sınıfını uygulayın.
Bu makale, görünüm yüksekliğini Tailwind'deki bir öğeye '' kullanarak ekleme prosedürünü sağlayacaktır. h-ekran ' sınıf.
Tailwind'de “h-screen” Sınıfını Kullanarak Bir Öğenin Görünüm Alanı Yüksekliğini Nasıl Ayarlayabilirim?
Bir öğeye görünüm yüksekliği “ kullanılarak atanırsa h-ekran ” sınıfı, yükseklik özelliğini müşterinin ekranına göre otomatik olarak ayarlayacaktır. Tailwind'de görünüm yüksekliğini kullanmak için aşağıda sağlanan kuralları izleyin:
< div sınıf = 'h-ekran' > Merhaba < / div >
Yukarıdaki gösteriden açıkça görülüyor ki, ' h-ekran ”, düzeni tasarlamak için diğer çeşitli Tailwind sınıflarıyla birlikte öğenin sınıf özelliğinde kullanılır.
Sahte bir kontrol paneli oluşturalım ve kontrol paneli ekranının kenar çubuğuna bir görünüm yüksekliği verelim.
< div sınıf = 'esnek' >
< div sınıf = 'w-56 h-ekran yuvarlak-lg bg-mavi-600 metin merkezi metin-mavi-50 py-6 metin-2xl yazı tipi-kalın' >Kontrol Paneli
< ul sınıf = 'metin-lg py-8 boşluk-y-7' >
< O >Takım< / O >
< O >Projeler< / O >
< O >Raporlar< / O >
< O >Belgeler< / O >
< / ul >
< / div >
< div sınıf = 'metin merkezi metin-3xl py-8 ps-5' >Kontrol Paneline Hoş Geldiniz!< / div >
< / div >
Kodun açıklaması:
- Öncelikle bir “ div ” elementi “ sınıfına sahip olarak yaratıldı esnek ”, bu sınıf, yerleşik öğeleri yatay bir çizgide hizalar.
- Sonra başka bir ' div ” 8 piksellik üst ve alt dolgu ile “ py-2 ” sınıfını seçin ve “ kullanarak ona sabit bir genişlik ayırın. w-56 ' sınıf. Daha sonra “ ile öğenin yüksekliğini görünüm yüksekliğine ayarlayın. h-ekran ' sınıf. Kabın köşeleri yuvarlatılmış olarak ayarlanmıştır.
- “ bg-{renk}-{sayı} ” sınıfı, konteynere arka plan rengi sağlamak için kullanılır. “ metin merkezi ” sınıfı metin içeriğini merkeze hizalar. Metnin yazı tipi ağırlığı “ gözü pek ” ve yazı tipi boyutu “ 2xl ”.
- Daha sonra sırasız bir liste “< ul >” büyük yazı tipi boyutuyla oluşturulur ve “ 48 piksel 'space-y' arka rüzgar sınıfını kullanarak kenar boşluğunu doldurun.
- Daha sonra “<” kullanılarak dört liste öğesi oluşturulur. O >” etiketleri.
- Bir diğer ' div ” öğesi, “ kullanılarak 32 piksel üst-alt ve 20 piksel satır içi başlangıç dolgusu ile oluşturulur. py” ve “ps ” sınıfları.
Yukarıda açıklanan kodun çıktısı aşağıdaki gibidir:
Yukarıdaki çıktıdan, kontrol paneli kenar çubuğunun ekranın görünüm yüksekliğine sahip olduğu açıktır. Tamamen amacınla ilgili” h-ekran ” Tailwind'deki sınıf.
Çözüm
“ h-ekran Tailwind'deki 'sınıf, Viewport yüksekliğini bir öğeye, yani müşterinin ekranının yüksekliğine atamak için kullanılır. Kullanmak ' h-ekran ” sınıfı, öğe otomatik olarak ekran yüksekliğini devralır. Tailwind'de görünüm yüksekliğini kullanmak için “ h-ekran ” özelliğinin “ için bir değer olarak iletilmesi gerekiyor sınıf ” özelliği “< gibi” div sınıfı= “h-ekran ”>”. Bu makale, “ h-ekran ” Tailwind'deki sınıf.