Bu makale Tailwind'de konum özellikleriyle vurgulu, odak ve diğer durumların kullanımını göstermektedir.
Tailwind'de Konum Özelliğiyle Hover, Focus ve Diğer Durumlar Nasıl Kullanılır?
Tailwind'deki fareyle üzerine gelme, odaklanma ve diğer durumlar, kullanıcılara çekici ve kullanıcı dostu bir arayüz ve ilgi çekici bir deneyim sunmak için Tailwind'deki öğeleri şekillendirmek için kullanılır. Bazen deneyimi en yüksek standartlarda tutmak için konum özelliğinin uygulanması gerekir.
Yöntem 1: Hover Varyantını Position Özelliğiyle Kullanma
Fareyle üzerine gelme değişkeni, kullanıcı imleci seçilen öğenin üzerine getirdiğinde seçilen öğelerin stilini belirlemek için kullanılır. “ konum ” özelliği “ ile birlikte kullanılabilir vurgulu ” fareyle üzerine gelme öncesi ve sonraki konumu ayarlamak için. Bu çift, kullanıcı için ilgi çekici bir deneyim yaratmak için kullanılır.
Adım 1: HTML'de Konumla Hover Özelliğini Ekleme
Aşağıdaki kodda, vurgulu özelliği, “ üzerindeki konum özelliği boyunca uygulanır. düğme ” öğesi:
< vücut >
< düğme sınıf = 'göreceli w-40 h-12 bg-blue-500 vurgulu:mutlak vurgulu:translate-x-4 vurgulu:translate-y-4 ' >
< P sınıf = 'metin-beyaz metin merkezi' > Beni gezdir < / P >
< / düğme >
< / vücut >
Bu kodda:
- “ akraba ” sınıfı, düğmeyi ana sayfaya göre ayarlar.
- “ w-40 ” genişliği 40 piksele ayarlar.
- “ h-12 ” yüksekliği 12 piksele ayarlar.
- “ bg-mavi-500 ” arka plan rengini mavi olarak ayarlar.
- “ vurgulu: mutlak ”, fare imleci üzerinde hareket ettiğinde düğmenin göreceli konumunu mutlak olarak değiştirir.
- “ fareyle üzerine gelin: tercüme-x-4 ” butonu x ekseninde 4px sağa ve aynı zamanda 4px aşağıya hareket ettirir. fareyle üzerine gelin: tercüme-y-4 ”.
- Metin “ ile merkeze hizalanmıştır metin merkezi ”.
2. Adım: Doğrulama
Yukarıdaki kod tarafından oluşturulan web sayfasının önizlemesini görüntüleyin:
Çıktı, öğenin sağa ve aşağı yönde 4 piksel hareket ettirildiğini gösterir.
Yöntem 2: Odak Varyantını Konum Özelliğiyle Kullanma
Odak değişkeni, kullanıcının dikkatini çekmek ve bazı öğelere vurgu yapmak amacıyla HTML öğelerini biçimlendirmek için kullanılır. Konum aynı zamanda nesneyi ana sayfaya göreli veya mutlak konumlandırmak için de uygulanabilir. Kullanıcının ilgisini canlı tutmak için yapılır.
Adım 1: HTML'de Konum ile Odak Özelliğini Ekleme
Bir HTML dosyası oluşturun ve odak özelliğini uygun bir konumla uygulayın. Örneğin, aşağıdaki kodda bir giriş kutusuna göreceli konum uygulanmıştır:
< / vücut >
Bu kodda:
- “ konumunu ayarlayın giriş ” öğelerini “ akraba ”.
- “ odak: çeviri-x-4 ” butonu x ekseninde 4px sağa ve aynı zamanda 4px aşağıya hareket ettirir. odak: tercüme-y-4 ”Kullanıcı giriş kutusuna tıkladığında.
- “ odak: taslak-2 ” kullanıcı tarafından tıklandığında metin kutusunun etrafında bir taslak oluşturur.
2. Adım: Çıktıyı Doğrulayın
Değişikliği fark etmek için kod tarafından oluşturulan web sayfasını önizleyin:
Yukarıdaki çıktı, seçilen öğeye odaklanıldığında stilin uygulandığını gösterir.
Active Variant'ı Position Özelliğiyle Kullanma.
Aktif değişken, kullanıcı bir düğmeyi veya başka bir öğeyi tıklayıp basılı tuttuğunda durumu tanımlamak amacıyla HTML öğelerine stil vermek için kullanılır. Konum özelliği, daha dinamik bir deneyim yaratarak çıktıyı kullanıcılar için daha ilgi çekici hale getirebilir.
Adım 1: HTML'de Konumla Hover Özelliğini Ekleme
Bir HTML dosyası oluşturun ve etkin değişkeni konum özelliğiyle birlikte uygulayın. Örneğin, bu özellikler aşağıdaki kod örneğindeki bir düğmeye uygulanmıştır:
< düğme sınıf = 'göreceli w-48 h-12 bg-blue-500 aktif:translate-y-2 aktif:bg-green-400' >
< açıklık sınıf = 'metin beyazı' >Beni Tıkla< / açıklık >
< / düğme >
< / vücut >
Yukarıdaki kodda:
- “ konumunu ayarlayın düğme ” öğesinden “ akraba ”.
- “ bg-mavi-500 ” butonun arka plan rengini mavi olarak ayarlar.
- “ aktif: tercüme-y-2 ” butonu 2 piksel aşağıya doğru hareket ettirir ve butonun rengini “ kadar yeşile çevirir aktif: bg-green-400 ”.
2. Adım: Çıktıyı Doğrulayın
Yukarıdaki kodla oluşturulan web sayfasını önizleyin ve değişikliği görmek için düğmeyi tıklayıp basılı tutun:
Yukarıdaki gif, seçilen düğme öğesinin stilinin, aktif hale geldiğinde değiştiğini gösterir.
Tailwind'de konum özelliğine sahip vurgulu, odak ve diğer durumları uygulamak için hepsi bu.
Çözüm
Fareyle üzerine gelme, odaklanma ve diğer durumlar, önceden tanımlanmış fareyle üzerine gelme, odaklanma ve diğer durum sınıfları kullanılarak ve ardından ' gibi konum sınıfı nitelikleri uygulanarak konum özelliğiyle birlikte kullanılabilir. mutlak ', ' akraba ” vb. birlikte. Bu blog, Tailwind'de konum yardımcı programıyla fareyle üzerine gelme, odaklanma ve diğer durumların nasıl kullanılacağını gösterdi.