Bu makale, konumlandırılmış öğelerin web sayfası üzerindeki yerleşimini kontrol etmek için kullanılabilecek yardımcı programları gösterecektir.
Konumlandırılmış Elemanların Yerleşimini Kontrol Etmek İçin Arka Rüzgar Yardımcı Programları Kullanılıyor mu?
Konumlandırılmış öğelerin hem yatay hem de dikey eksende yerleştirilmesiyle özel olarak ilgilenen Tailwind CSS yardımcı programı “ Üst | Sağ | Alt | Sol ”. Tıpkı diğer yardımcı programlar gibi, konumlandırılan öğeyi çeşitli yerlere ayarlayabilen çeşitli sınıflar da sağlar, bu sınıflardan bazıları aşağıda belirtilmiştir:
- iç metin-{placementValue}
- start-{placementValue}
- top-{placementValue}
- end-{placementValue}
- alt-{placementValue}
- left-{placementValue}
- right-{placementValue}
Şimdi bu sınıflardan bazılarını daha iyi anlamak için kullanmak üzere pratik bir örnek verelim.
Örnek: Tailwind CSS Yardımcı Programlarını Kullanarak Konumlandırılmış Elemanın Yerleştirilmesi
Bu örnekte, aşağıda gösterildiği gibi, konumlandırılan öğeyi bir web sayfası üzerinde farklı yerlere yerleştirmek için yukarıda açıklanan yardımcı program kullanılacaktır:
< vücut sınıf = 'ızgara ızgara-sütunları-3' >
< div sınıf = 'göreceli h-32 w-32 bg-turuncu-200 p-4 m-4 metin-merkeze yasla-uzat yuvarlatılmış' >
< div sınıf = 'mutlak sol-0 üst-0 h-16 w-16 bg-mavi-400 yuvarlak p-4' > Madde 1 < / div >
< / div >
< div sınıf = 'göreceli h-32 w-32 bg-turuncu-200 p-4 m-4 metin-merkeze yasla-uzat yuvarlatılmış' >
< div sınıf = 'mutlak iç metin-x-0 üst-0 h-16 bg-mavi-400 yuvarlak p-4' > Öğe 2 < / div >
< / div >
< div sınıf = 'göreceli h-32 w-32 bg-turuncu-200 p-4 m-4 metin-merkeze yasla-uzat yuvarlatılmış' >
< div sınıf = 'mutlak ek-0 bg-mavi-400 yuvarlak p-4' > Madde 3 < / div >
< / div >
< div sınıf = 'göreceli h-32 w-32 bg-turuncu-200 p-4 m-4 metin-merkeze yasla-uzat yuvarlatılmış' >
< div sınıf = 'mutlak ek-y-0 sağ-0 w-16 bg-mavi-400 yuvarlak p-4' > Madde 4 < / div >
< / div >
< div sınıf = 'göreceli h-32 w-32 bg-turuncu-200 p-4 m-4 metin-merkeze yasla-uzat yuvarlatılmış' >
< div sınıf = 'mutlak alt-0 sağ-0 h-16 w-16 bg-mavi-400 yuvarlak p-4' > Madde 5 < / div >
< / div >
< / vücut >
Yukarıdaki kodun açıklaması:
- İlk önce beş ebeveyn oluşturun “ div ” öğelerini kullanın ve göreceli konumu, yüksekliği, genişliği, arka planı, dolguyu, kenar boşluğunu vb. ayarlamak için çeşitli Tailwind CSS sınıflarını uygulayın.
- Ardından, iç içe geçmiş bir ' div Her ebeveynin içindeki 'öğesi' div '. Bu iç içe geçmiş “div” elemanı için yerleştirme yapılacaktır.
- Ardından, “ kuyruk rüzgarı CSS sınıflarını uygulayın mutlak ”, “ H ”, “ İçinde ”, “ bg ”,” P ', Ve ' yuvarlak ' iç içe ' stil vermek için div ” öğesi.
- Bundan sonra, iç içe geçmiş div birden beşe kadar yeni sınıflar atayın: sol-0 üst-0 ”, “ iç metin-x-0 ”, “ ek-0 ”, “ iç metin-y-0 sağ-0 ', Ve ' alt-0 sağ-0 ' sırasıyla.
- Bu sınıflar sırasıyla iç içe geçmiş div öğelerinin sol üst köşedeki konumunu ayarlar, üst konumu kaplar, tüm ana alanı kaplar, sağ tarafı kaplar ve sol alt konumu kaplar.
Yürütmeden sonra div öğelerinin önizlemesi şöyle görünür:
Çıktı, konumlandırılan elemanların istenen konumlara yerleştirildiğini gösterir.
Çözüm
“ Üst | Sağ | Alt | Sol ” Tailwind yardımcı programı, öğelerin web sayfası üzerindeki yerleşimini kontrol etmek için kullanılır. Her konumu hedeflemek için birkaç sınıf kullanır ve ardından seçilen öğeyi gereksinimlere göre o yere taşır. Bu sınıflar esas olarak konumlandırılan öğeleri sola, sağa, alta ve üste yerleştirir. Tüm alanı kapsamaya, sol veya üst gibi belirli yönleri kapsamaya yardımcı olabilirler. Bu makale, konumlandırılmış elemanların yerleşimini kontrol etmek için kullanılabilecek yardımcı programları başarıyla açıklamıştır.