Tailwind'de Hover, Focus ve Diğer Durumlar Nasıl Kullanılır?

CSS, programcıların dinamik web sayfaları tasarlamaları için çeşitli çerçeveler sunar. Tüm önemli özellikleri ve araçları tek bir yerde sağladığı için daha beğenilir. Yani başka çerçeveler kullanmanıza gerek yok. CSS'deki Tailwind çerçevesi en yaygın kullanılanıdır çünkü kullanıcının aşırı CSS yazma zamanından tasarruf sağlar.

Bu kılavuz, Tailwind'de fareyle üzerine gelme, odaklanma ve diğer durumların kullanımını sağlar.

Tailwind'de Hover, Focus ve Diğer Durumlar Nasıl Kullanılır?

Web sayfalarını tasarlarken kullanıcılarla etkileşimi sürdürmek için dinamik ve çekici unsurlar eklemek gerekir. Tailwind'deki özellikler, ek özel CSS yazmaya gerek kalmadan etkileşimli ve dinamik sayfalar oluşturmak için kullanılabilir. Bazı özellikler, tasarımlara çekicilik katmaya yardımcı olan 'havada kalma', 'odaklanma' ve 'etkin'dir.

Hover Variant'ı HTML'de Kullanmak

Hover özelliği, kullanıcı fare imlecini belirli bir öğenin üzerine getirdiğinde bir HTML öğesine stil vermek için kullanılır. Sorunsuz bir deneyim sunmaya yardımcı olur.

Adım 1: HTML'de 'hover' Özelliğini uygulayın
Bir HTML dosyası oluşturun ve vurgulu özelliğini koddaki bazı öğelere uygulayın. Bir fikir edinmek için aşağıda verilen koda bir göz atın:

Bu kodda:

• “adlı bir düğme Beni gezdir! ” butonu etiketi tarafından oluşturulur.
• “ bg-green-500 ” butonun arka plan rengini yeşil olarak ayarlar.
• “ fareyle üzerine gelin: bg-blue-500 ”, fare üzerinde hareket ettirildiğinde düğmenin rengini yeşilden maviye değiştirir.
• Butondaki yazı beyaz renktedir” metin-beyaz ' Ve ' Yazı tipi kalın ” yazı tipini kalın yapar.
• Düğmenin şekli “ ile yuvarlak olacak şekilde ayarlanmıştır. yuvarlak ”.

2. Adım: Çıktıyı Önizleyin
Yukarıdaki kodu çalıştırdıktan sonra son görünüm şu şekilde görünecektir:

Fare imleci üzerine gelindiğinde butonun renginin değiştiği görülüyor.

HTML'de Odak Varyantını Kullanma

Focus özelliği, HTML öğelerini, kullanıcı öğeyi tıklattığında kullanıcının dikkatini çekmek için vurgulanacak şekilde biçimlendirmek için kullanılır.

Adım 1: Odak Özelliğini HTML koduna uygulayın
Bir HTML dosyası oluşturun ve focus özelliğini istediğiniz bazı öğelere uygulayın. Bir gösterim elde etmek için aşağıdaki kodu göz önünde bulundurun:

Bu kodda:

• “ esnek ” sınıfı bir esneklik yaratıyor.
• “ iki yana yasla-merkez ” içeriğin merkeze hizalanmasını haklı çıkarır.
• “ ürün merkezi ” sınıfı nesneleri ekranın ortasına ayarlar.
• “ h-ekran ” ekran boyutunu görünüm alanına göre ayarlar.
• “ bg-mavi-200 ” arka plan rengini mavi olarak ayarlar.
• Metin türünde bir giriş kutusu oluşturulur.
• “ odak: bg-green-300 ” kullanıcı tarafından tıklandığında giriş kutusunun rengi yeşile döner.
• “ w-64 ” genişliği 64 piksele ayarlar.
• “ h-10 ” yüksekliği 10 piksele ayarlar.
• “ px-4 ” üst ve sol tarafa 4 piksellik bir dolgu ekler.
• “ py-2 ” üst ve alt tarafa 2 piksellik bir dolgu ekler.

2. Adım: Odak Özelliğini Önizleyin
HTML kodunu kaydedin ve onun oluşturduğu web sayfasını açın. Daha sonra imleci giriş kutusunun üzerine getirin ve üzerine tıklayın; aşağıdaki değişiklik gerçekleşecektir:

HTML'de Aktif Varyantı Kullanmak

Bu özellik, kullanıcı dinamik olarak öğeye dokunduğunda koşula yönelik öğelere stil vermek için kullanılır. Aktif durum, imlecin aktivasyon aşamasından serbest bırakılmasına kadar geçen süredir.

Sözdizimi

Belirli CSS özelliği seçilen öğeye uygulanır.

1. Adım: Aktif Varyantı HTML koduna uygulayın
Bir HTML dosyası oluşturun ve active özelliğini, aşağıdaki durumda bir düğme olan bir öğeye uygulayın:

Bu kodda:

• “ bg-green-600 ” arka plan rengini yeşil olarak ayarlar.
• “ s-4 ” 4 piksellik bir dolgu ekler.
• “ yuvarlak-md ”düğmenin şeklinin yuvarlak olmasını sağlar.
• “ geçiş dönüşümü ',' tarafından belirlenen kısa bir süre boyunca düğmeyi dönüştürmek için kullanılır. süre-400 dönüşümü ”.
• “ aktif:ölçek-110 ”düğmeyi daha büyük bir boyuta dönüştürür.

2. Adım: Çıktıyı Önizleyin
Yukarıdaki kodu bir HTML dosyasına kaydedin ve onun tarafından oluşturulan web sayfasını önizleyin. Web sayfası şu şekilde görünecektir:

Fare tutulduğunda düğme boyutunun arttığı, bırakıldığı anda ise ilk durumuna döndüğü görülmektedir.

Çözüm

Tailwind'de fareyle üzerine gelme, odaklanma ve diğer durumları kullanmak için, 'üzerine gelme' gibi önceden tanımlanmış durum sınıflarını kullanın ve buna renk değiştirme, odak halkası oluşturma vb. gibi bazı stil özelliklerini uygulayın. Ekran yardımcı programları ölçeklenebilir bir çıktı sunmak için kullanılır. Bu yazı Tailwind'de fareyle üzerine gelme, odaklanma ve diğer durumları kullanma yöntemini göstermiştir.