Bu makale, Tailwind'deki Hover, Focus ve diğer durumlara minimum yükseklik özelliğini uygulama prosedürünü sağlayacaktır.
Not: Tailwind'deki minimum yükseklik sınıfları hakkında daha fazla bilgi edinmek için bunu okuyun madde Web sitemizde.
Arka Rüzgarda Vurgulu, Odaklı ve Diğer Durumlara Minimum Yükseklik Özelliği Nasıl Uygulanır?
Tailwind, tasarım özellikleriyle sağlanabilecek varsayılan durum değişkenlerini sağlar. Bu durum değişkenleri arasında 'havada kalma', 'odaklanma' ve 'etkin' yer alır. Bu durum değişkenlerinin açıklaması aşağıdaki gibidir:
- “ vurgulu Fare imleci bir öğenin üzerine geldiğinde ' durumu tetiklenir.
- “ odak ” durumu, öğe odakta olduğunda tetiklenir.
- “ aktif ” durumu, öğe etkinleştirildiğinde veya tıklandığında tetiklenir.
Bu durumların her biri için minimum yükseklik özelliğini tek tek kullanalım.
Vurgu Durumuyla Minimum Yükseklik Özelliğini Kullanma
“” seçeneğini kullanmak için Minimum yükseklik ' Tailwind'de fareyle üzerine gelme durumu değişkenine sahip bir sınıf için aşağıdaki sözdizimi kullanılır:
< div sınıf = 'vurgulu: min-h-{boyut}...' > < / div >
Yukarıda tanımlanan sözdizimini bir gösteride kullanalım. Bu örnekte, fare imleci öğenin üzerine geldiğinde öğenin minimum yüksekliğini artıracağız.
< div sınıf = 'min-h-fit yuvarlak-md bg-mavi-700 metin merkezi metin-beyaz vurgulu:min-h-ekran' >Minimum değeri artırmak için üzerine gelin yükseklik < / div >Yukarıdaki kodun açıklaması şu şekildedir:
- “ min-w-fit ” sınıfı, div öğesinin içeriğine sığması için gereken yüksekliğe minimum yükseklik sınırını ayarlar.
- “ fareyle üzerine gelin: min-w-ekran ” sınıfı, ekran boyutunun %100'üne eşit bir minimum yükseklik sınırı sağlayacaktır.
- “ yuvarlak-md ', ' bg-{renk}-{sayı} ', ' metin merkezi ', Ve ' metin-beyaz ” sınıfları sırasıyla div öğesi için yuvarlatılmış köşelerden, arka plan renginden, ortaya hizalanmış metinden ve beyaz metin renginden sorumludur. div öğesinin köşeleri yuvarlatılmıştır.
Çıktı:
Aşağıdaki çıktıdan, öğenin minimum yüksekliğinin, fare imleci üzerine gelindiğinde ekran boyutunun %100'üne kadar arttığı açıktır.
Odak Durumuyla Minimum Yükseklik Özelliğini Kullanma
“” seçeneğini kullanmak için Minimum yükseklik ” sınıfının Tailwind'deki odak durumuna sahip olması durumunda aşağıdaki sözdizimi kullanılır:
< div sınıf = 'odak: min-h-{boyut}...' > < / div >Yukarıda tanımlanan sözdizimini bir gösteride kullanalım. Bu örnekte, kullanıcı ona odaklandığında bir giriş alanının minimum yüksekliği artacaktır.
< giriş Yer tutucu = 'Bu giriş alanına odaklanın' sınıf = 'min-h-0 h-fit w-48 rounded-md bg-gray-200 metin merkezi odağı:min-h-[35%]' >< / giriş >Yukarıdaki kodun açıklaması şu şekildedir:
- Bir ' giriş ” alanı, yer tutucu özelliğindeki bazı metinlerle oluşturulur.
- “” kullanılarak minimum 0px yükseklik sınırı sağlanır. dk-sa-0 ' sınıf. Bu nedenle geliştirici, öğenin varsayılan yüksekliğini, ' h-fit ' sınıf.
- “ odak:dakika-sa-[%35] ” sınıfı, kullanıcı odaklandığında giriş alanının minimum yükseklik sınırını artıracaktır.
Çıktı:
Aşağıdaki çıktıdan, kullanıcı odaklandıkça giriş alanının yüksekliğinin arttığı açıkça görülmektedir. Bunun nedeni, minimum yükseklik sınırının 0 pikselden ekran yüksekliğinin %35'ine çıkmasıdır.
Arka Rüzgarda Aktif Durumda Minimum Yükseklik Özelliğini Kullanma
“” seçeneğini kullanmak için Minimum yükseklik ” özelliğinin Tailwind'deki etkin durum değişkenine sahip olması durumunda aşağıdaki sözdizimi kullanılır:
< div sınıf = 'aktif:min-h-{boyut}...' > < / div >Yukarıda tanımlanan sözdizimini bir gösteride kullanalım. Bu örnekte, kullanıcı aktif olarak düğmeyi tıkladığında düğmenin minimum yüksekliği artacaktır.
< düğme sınıf = 'min-h-0 h-fit w-48 rounded-md bg-blue-300 metin merkezi aktif:min-h-[35%]' > Artırmak için tıklayın Yükseklik < / düğme >Minimum yükseklik sınırı 0 piksel olan bir düğme oluşturulur. Ancak “kullanarak aktif:dak-sa-[%35] ” minimum yükseklik sınırı, butona her tıklandığında ekran boyutunun 0px'ten %35'ine artacaktır.
Çıktı:
Aşağıdaki çıktıda, kullanıcı tıkladığında butonun minimum yüksekliğinin arttığı görülmektedir.
Bu tamamen minimum yükseklik özelliğini Tailwind vurgulu, odak ve Tailwind'deki diğer durumlara uygulamakla ilgilidir.
Çözüm
Tailwind'deki fareyle üzerine gelme, odaklanma ve aktif gibi durum çeşitleri, kullanıcıların dinamik tasarım düzenleri oluşturmasına olanak tanır. Tailwind'de durum değişkenleriyle minimum yükseklik sınıfını kullanmak için ' fareyle üzerine gelin: min-h-{değer} ', ' odak:min-h-{değer} ', Ve ' aktif:min-h-{değer} ” sınıfları kullanılıyor. Bu makale, Tailwind'de minimum yükseklik sınıfına sahip fareyle üzerine gelme, odaklanma ve diğer durumları uygulama prosedürünü sağlamıştır.