Bu blog, Tailwind'deki birden fazla öğe arasında eşit alan atama fikri sağlayacaktır.
Arka Rüzgarda Çoklu Elemanlar Arasına Eşit Boşluk Nasıl Atanır?
Kullanıcılar “” seçeneğini kullanarak öğeler arasında eşit boşluklar atayabilir. boşluk-{x/y}-{boyut} ” yardımcı program sınıfı. Kullanıcılar bir tamsayı değeri belirterek x veya y eksenine boşluk ekleyebilir. Web sayfasını çekici hale getirdiği için aralık yardımcı programı gereklidir. Bir web sayfasında öğeler arasında uygun boşluk yoksa kullanıcıların ilgisini çekmez.
Izgara elemanları arasında eşit boşluk atamak için bir kod örneği ele alalım.
Yöntem 1: X eksenine Boşluk Atama.
X eksenine atanan eşit alan, elemanın sağına ve soluna eşit aralık sağlar. X eksenindeki boşluğu atamak için aşağıdaki sözdizimini kullanın:
uzay - X - { boyut }
Boyut herhangi bir tamsayı değeri olabilir.
X eksenine eşit alan atamak için aşağıdaki kodu göz önünde bulundurun:
< vücut >< div sınıf = 'mx-4 ızgara ızgara-sütunları-4 boşluk-x-4' >
< div sınıf = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 1 div >
< div sınıf = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 2 div >
< div sınıf = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 3 div >
< div sınıf = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 4 div >
div >
vücut >
Bu kodda:
- “ mx-4 ” x eksenine (sağ ve sol) 4 piksellik bir kenar boşluğu ekler.
- “ Kafes ” sınıfı bir ızgara oluşturur.
- “ ızgara-sütun-4 ” Gridde 4 sütun yapın.
- “ boşluk-x-4 ” ızgaranın elemanları arasına 4 piksellik bir boşluk ekler.
- “ bg-green-400 ” arka plan rengini yeşil olarak ayarlar.
- “ h-16 ” yüksekliği 16 piksele ayarlar.
- “ yuvarlak-lg ” köşeyi yuvarlak yapar ve kenarlık yarıçapı büyüktür.
- “ sınır-2 ”, öğenin etrafında 2 piksellik bir kenarlık oluşturur.
- “ kenar-yeşil-800 ” kenarlığı koyu yeşil yapar.
Çıktı
Yukarıdaki kod tarafından oluşturulan çıktıyı önizleyin:
Elemanlar arasında 4 piksel aralık bırakıldığı görülmektedir.
Yöntem 2: Y eksenine boşluk atama.
Yukarıdaki kodda küçük değişiklikler yapılarak yukarıdaki yönteme benzer şekilde y ekseni üzerinde aralık atanabilir. Y ekseni boyunca (üst ve alt) boşluklar atar. Bunun sözdizimi şöyledir:
Y ekseni boyunca boşluk eklemek için aşağıdaki kod uygulanabilir:
< vücut >< div sınıf = 'mx-4 my-4 uzay-y-4' >
< div sınıf = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 1 div >
< div sınıf = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 2 div >
< div sınıf = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 3 div >
< div sınıf = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 4 div >
div >
vücut >
Bu kodda:
- “ mx-4 ” Çıktıyı daha optimize hale getirmek için öğelerin soluna ve sağına 4 piksellik bir kenar boşluğu ekler.
- “ benim-4 ”, y eksenine (üst ve alt) 4 piksellik bir kenar boşluğu ekler.
- “ uzay-y-4 ”, y eksenine (üst ve alt) 4 piksellik boşluk ekler.
Çıktı
Yukarıdaki kodu kaydedin ve boşluğu şu şekilde görmek için onun oluşturduğu web sayfasını önizleyin:
Bu tamamen öğeler arasında eşit alan tahsis etmekle ilgilidir.
Çözüm
Tailwind'de birden fazla öğe arasında eşit alan atamak için kullanıcılar ' boşluk-{x/y}-{boyut} ” Utility sınıfını seçin ve gereksinime göre boyut olarak bir tamsayı değeri belirtin. Öğeler arasındaki eşit aralık, çıktının daha ölçeklenebilir olmasını sağlar ve izleyicilerin web sayfasıyla etkileşimde kalmasını sağlar. Bu yazı, Tailwind'deki birden fazla öğe arasında eşit alan atama yöntemini sağladı.