Dikey ve yatay kaydırma, fare, dokunmatik yüzey veya parmak kullanarak bir web sayfasında gezinmenin yollarıdır. Dikey kaydırma, bir öğenin içeriği kabın yüksekliğini aştığında kullanılır. Yatay kaydırma, bir öğe içindeki içerik kabın genişliğini aştığında kullanılır. Dikey kaydırma, kullanıcıların web sayfasını yukarı ve aşağı hareket ettirmesini sağlarken yatay kaydırma, sayfanın sola ve sağa hareket etmesine olanak tanır. Tailwind CSS, web sayfalarında dikey ve yatay kaydırmayı etkinleştirmek için yardımcı program sınıfları sağlar.
Bu makale şunları örnekleyecektir:
Tailwind'de Dikey Kaydırma Nasıl Etkinleştirilir?
Tailwind'de dikey kaydırmayı etkinleştirmek için ' taşma-y-kaydırma ” HTML programında istenen öğe ile yardımcı sınıf. Dikey kaydırmaya izin verir ve kullanıcı sistem ayarlarında 'her zaman görünür' kaydırma çubuklarını devre dışı bırakmadığı sürece kaydırma çubuklarını her zaman gösterir.
Sözdizimi
< eleman sınıf = 'taşma-y-kaydırma ...' > ... eleman >
Örnek: Dikey Kaydırmayı Etkinleştirme
Bu örnekte, bir sütunda bazı esnek öğeler içeren bir esnek kap oluşturacağız ve ' taşma-y-kaydırma ” buna yardımcı olur:
< vücut >
< div sınıf = 'flex flex-col taşma-y-scroll bg-mor-700 p-4 mx-14 mt-5 h-36' >
< div sınıf = 'bg-sarı-400 p-2 m-2' > 1 div >
< div sınıf = 'bg-sarı-400 p-2 m-2' > 2 div >
< div sınıf = 'bg-sarı-400 p-2 m-2' > 3 div >
< div sınıf = 'bg-sarı-400 p-2 m-2' > 4 div >
< div sınıf = 'bg-sarı-400 p-2 m-2' > 5 div >
< div sınıf = 'bg-sarı-400 p-2 m-2' > 6 div >
div >
vücut >
Burada, üst öğede
- “ esnek ” sınıfı, esnek bir düzen oluşturarak alt öğenin boyutlarını kullanılabilir alana göre ayarlamak için kullanılır.
- “ flex-col ” sınıfı, kabın esnek yönünü bir sütuna ayarlar.
- “ taşma-y-kaydırma ” sınıfı dikey kaydırmayı sağlar.
- “ bg-mor-700 ” sınıfı, mor rengi kabın arka planına ayarlar.
- “ p-4 ” sınıfı, kabın her tarafında 4 birim dolgu belirler.
- “ mx-14 ” sınıfı, kabın x eksenindeki 14 birimlik marjı uygular.
- “ mt-5 ” sınıfı, 5 birim kenar boşluğunu kabın üstüne uygular.
- “ h-36 ” sınıfı, konteynerin yüksekliğini 36 birim olarak ayarlar.
- “ bg-sarı-400 ” sınıfı, ızgara öğelerinin arka planını sarı olarak ayarlar.
- “ p-2 ” sınıfı, esnek öğelerin içindeki içeriğe 3 birim dolgu ekler.
- “ m-2 ” sınıfı, 2 birimlik marjı esnek öğelere ayarlar.
Çıktı
Yukarıdaki çıktıda, dikey kaydırmanın başarıyla etkinleştirildiği görülebilir.
Tailwind'de Yatay Kaydırma Nasıl Etkinleştirilir?
Tailwind'de yatay kaydırmayı etkinleştirmek için ' taşma-x-kaydırma ” HTML programındaki belirli öğeye sahip yardımcı program sınıfı. Yatay kaydırmayı etkinleştirir ve kullanıcı sistem ayarlarında 'her zaman görünür' kaydırma çubuklarını devre dışı bırakmadığı sürece kaydırma çubuklarını her zaman gösterir.
Sözdizimi
< eleman sınıf = 'taşma-x-kaydırma ...' > ... eleman >
Örnek: Yatay Kaydırmayı Etkinleştirme
Bu örnekte, arka arkaya bazı esnek öğeler içeren bir esnek kap oluşturacağız ve ' taşma-x-kaydırma ” buna yardımcı olur:
< vücut >< div sınıf = 'flex flex-row overflow-x-scroll space-x-24 bg-mor-700 p-4 mx-14 mt-5 h-36' >
< div sınıf = 'bg-sarı-400 p-2 m-2' > 1 div >
< div sınıf = 'bg-sarı-400 p-2 m-2' > 2 div >
< div sınıf = 'bg-sarı-400 p-2 m-2' > 3 div >
< div sınıf = 'bg-sarı-400 p-2 m-2' > 4 div >
< div sınıf = 'bg-sarı-400 p-2 m-2' > 5 div >
< div sınıf = 'bg-sarı-400 p-2 m-2' > 6 div >
div >
vücut >
Burada üst öğedeki
Çıktı
Yukarıdaki çıktı, yatay kaydırmanın başarıyla etkinleştirildiğini gösterir.
Çözüm
Tailwind'de dikey ve yatay kaydırmayı etkinleştirmek için ' taşma-y-kaydırma ' Ve ' taşma-x-kaydırma ” yardımcı sınıflar sırasıyla kullanılır. Bu yardımcı programlar, dikey ve yatay kaydırmayı etkinleştirmek ve kaydırma çubuklarını her zaman göstermek için HTML programında istenen öğelere uygulanır. Bu makale, Tailwind'de dikey ve yatay kaydırmayı etkinleştirme yöntemini göstermiştir.