Bu yazı şunu gösterecek:
Tailwind'de “overflow-auto” Nasıl Kullanılır?
“ taşma-otomatik ” sınıfı, içerik taştığında otomatik olarak kaydırma çubukları ekler. İçerik taşmazsa kaydırma çubuğunu göstermez. Tailwind'de 'overflow-auto'yu kullanmak için bir HTML programı yapın ve ' taşma-otomatik ” yardımcı sınıfı, HTML programında istenen öğeye.
Sözdizimi
< eleman sınıf = 'taşma-otomatik ...' > ... eleman >
Örnek
Bu örnekte uygulayacağımız “taşma-otomatik” yarar
konteyner: < vücut >
< div sınıf = 'taşma-otomatik bg-mor-300 p-4 mx-16 mt-5 h-32 metin-yasla' >
Tailwind CSS, 'overflow-auto', 'overflow-scroll', 'overflow-hidden', 'overflow-visible' vb. gibi çeşitli 'taşma' yardımcı programları sağlar. Bu yardımcı programlar, belirli bir öğenin kapsayıcıyı aşan içeriği nasıl işleyeceğini belirler boyut. Her yardımcı program benzersiz işlevsellik sunar, ancak nihai hedefleri aynı kalır, yani seçilen öğenin taşma davranışını kontrol etmek.
< / div >
< / vücut >
- “taşma-otomatik” sınıf, kaydırma çubuklarını eklemek için kullanılır. kapsayıcı ve bunları yalnızca kaydırma gerektiğinde gösterin.
- “bg-mor-300” class, mor rengi kabın arka plan rengine ayarlar.
- “s-4” class, kabın her tarafında 4 adet dolgu malzemesi ayarlar.
- “mx-16” class, kabın x eksenindeki 16 birimlik marjı uygular.
- “mt-5” class, 5 birim kenar boşluğunu kabın üstüne uygular.
- “h-32” class, kabın yüksekliğini 32 birime ayarlar.
- “metni iki yana yasla” class, kapsayıcı içindeki içeriğin metnini yaslar.
Çıktı
Yukarıdaki çıktı, metin taştığında dikey bir kaydırma çubuğu gösterir. Bu, “taşma-otomatik” yardımcı program öğeye başarıyla uygulandı.
Tailwind'de “overflow-scroll” Nasıl Kullanılır?
Bu yardımcı program, kaydırma çubuklarını kaba ekler ve kaydırma gerekli olmasa bile bunları her zaman gösterir. Ayrıca her yöne kaydırmaya izin verir. Tailwind'de 'overflow-scroll'u kullanmak için bir HTML programı yapın ve “taşma-kaydırma” yardımcı sınıf, HTML programındaki belirli bir öğeye.
Sözdizimi
< eleman sınıf = 'taşma-kaydırma ...' > ... eleman > Örnek
Bu örnekte uygulayacağımız “taşma-kaydırma” yarar
< div sınıf = 'taşma-kaydırma bg-mor-300 p-4 mx-16 mt-5 h-32 metin-yasla' >
Tailwind CSS, 'overflow-auto', 'overflow-scroll', 'overflow-hidden', 'overflow-visible' vb. gibi çeşitli 'taşma' yardımcı programları sağlar. Bu yardımcı programlar, belirli bir öğenin kapsayıcıyı aşan içeriği nasıl işleyeceğini belirler boyut. Her yardımcı program benzersiz işlevsellik sunar, ancak nihai hedefleri aynı kalır, yani seçilen öğenin taşma davranışını kontrol etmek.
< / div >
< / vücut >
Burada, “taşma-kaydırma” sınıf, kaydırma çubuklarını eklemek için kullanılır.
konteyner ve her zaman onları gösterir.Çıktı
Yukarıdaki çıktıda hem dikey hem de yatay kaydırma çubukları görülebilir. Bu, “taşma-kaydırma” yardımcı program öğeye başarıyla uygulandı.
Çözüm
Tailwind'de “overflow-auto” ve “overflow-scroll” kullanmak için, “taşma-otomatik” Ve “taşma-kaydırma” yardımcı program sınıflarını HTML programında istenen öğelere dönüştürür. Her iki yardımcı program sınıfı da belirtilen öğelere kaydırma çubukları ekler. Ancak, 'overflow-auto' sınıfı kaydırma çubuklarını yalnızca kaydırma gerektiğinde gösterirken, 'taşma-kaydırma' sınıfı kaydırma gerekli olmasa bile her zaman gösterir. Bu yazı, Tailwind'de 'overflow-auto' ve 'overflow-scroll' kullanma yöntemlerini göstermektedir.