Bu makale, Tailwind CSS'deki kılavuz otomatik akış yardımcı programında fareyle üzerine gelme efektini uygulama yöntemini örneklendirecektir.
Tailwind'de Hover on Grid Auto Flow Nasıl Uygulanır?
Tailwind'de kılavuz otomatik akışına fareyle üzerine gelme efektini uygulamak için bir HTML dosyası oluşturun ve ' üzerine gelin “ ile sınıf grid-flow-
Pratik uygulaması için verilen-sağlanan adımlara bakın:
Adım 1: Hover Özelliğini HTML Programında Satır Izgarasıyla Kullanın
Bir HTML programı oluşturun ve “ üzerine gelin ”istenilen özellik” grid-flow-
< vücut >
< div sınıf = 'grid grid-flow-col vurgulu: grid-flow-satır boşluğu-3 m-3 metin merkezi' >
< div sınıf = 'bg-teal-500 p-5' > 1 < / div >
< div sınıf = 'bg-teal-500 p-5' > 2 < / div >
< div sınıf = 'bg-teal-500 p-5' > 3 < / div >
< div sınıf = 'bg-teal-500 p-5' > 4 < / div >
< div sınıf = 'bg-teal-500 p-5' > 5 < / div >
< div sınıf = 'bg-teal-500 p-5' > 6 < / div >
< / div >
< / vücut >
Burada:
- “ Kafes ” sınıfı, öğeyi bir ızgara kabı olarak ayarlar.
- “ grid-flow-col ”, sütunlardaki ızgara öğelerinin akışını tanımlar.
- “ üzerine gelin: ızgara akışı satırı ” sınıfı, fare kapsayıcının üzerine geldiğinde ızgara öğelerinin akışını satırlara dönüştürür.
- “ boşluk-3 ” ızgara öğeleri arasına 3 birimlik bir boşluk ekler.
- “ m-3 ”, ızgara kabının etrafına 3 birimlik bir kenar boşluğu ekler.
- “ metin merkezi ” ızgara öğelerinin içindeki metin içeriğini ortaya hizalar.
2. Adım: Çıktıyı Doğrulayın
Izgara otomatik akışına fareyle üzerine gelme efektinin uygulandığını doğrulamak için web sayfasını görüntüleyin ve fareyi ızgara öğelerinin üzerine getirin:
Izgara öğelerinin akışının başlangıçta sütunlar halinde olduğu ve fareyle üzerine gelindiğinde akışın satırlara dönüştüğü gözlemlenebilir. Bu, fareyle üzerine gelme efektinin ızgara otomatik akışına başarıyla uygulandığını gösterir.
Çözüm
Tailwind'de kılavuz otomatik akışına fareyle üzerine gelme efektini uygulamak için ' üzerine gelin 'istenilen sınıf' grid-flow-