Stack

Ne zaman kullanılır

Stack, çocukları dikey bir akışta, aralarında sabit ve token’lı bir boşlukla dizmek içindir: form alanları, kart içeriği, ayar listeleri, sayfa bölümleri.

Ne zaman kullanılmaz

• Yatay dizmek için: Yan yana öğeler için Inline kullanın.
• Sütunlar için: Satır ve sütunlu yerleşim için Grid kullanın.
• Görsel sırayı ters çevirmek için: Stack ters yön sunmaz. Okuma sırasını DOM sırası belirler; öğeleri istediğiniz sırayla yazın.
• Kutu görünümü için: Dolgu, yüzey ya da kenarlık gerekiyorsa Box kullanın; Stack’i Box’ın içine koyabilirsiniz.

Anatomi

Stack iki parçadan oluşur:

1. Kapsayıcı: dikey flex kapsayıcı (flex-col). gap ve align bu öğeye uygulanır.
2. Çocuklar: children, DOM sırasıyla. separator açıkken ilk çocuktan sonraki her çocuğun üstüne 1 px’lik bir çizgi gelir.

Davranış

• Stack durağandır: üzerine gelince, tıklayınca ya da odaklanınca değişmez ve sekme sırasına girmez.
• Varsayılanlar: gap md, align stretch, separator false.
• separator açıkken boşluk, çizginin iki yanındaki iç boşluğa dönüşür; çizgi boşluğun ortasında durur.
• Görsel sıra her zaman DOM sırasıdır; ters yön ya da order ayarı yoktur.

Yönergeler

Boşluğu gruba göre seçin

İlişkili öğelere küçük boşluk verin; boşluk hiç yoksa öğeler tek metin gibi okunur.

Birinci öğeİkinci öğe

YapınBoşluk `sm`: öğeler ayrı ayrı okunuyor.

Birinci öğeİkinci öğe

YapmayınBoşluk `none`: öğeler birbirine yapışıyor.

Ayırıcıyı birden çok satır için kullanın

separator ayar ve açıklama listelerinde işe yarar. Çocuk tek ise çizgi hiç görünmez.

Birinci öğeİkinci öğe

YapınÇizgi, bir listenin satırlarını ayırıyor.

Birinci öğe

YapmayınTek çocuklu Stack'te çizgi görünmez; ayırıcı boşuna açık.

İçerik

• Stack kendi metnini taşımaz.
• Stack’e render={<ul />} verdiğinizde her çocuğu <li> olarak yazın; liste olmayan çocuk koymayın.
• Örnek metinleri nötr tutun: “Birinci öğe”, “İkinci öğe”.

İlgili bileşenler

• Inline: Öğeleri yatay dizmek için.
• Grid: Sütunlu yerleşim için.
• Box: Dolgu, yüzey ve kenarlık için; Stack’i Box’ın içine koyun.