Stack
Tek boyutlu bir flex layout: children'ı bir kolon ya da satır halinde dizer, aralarına --mrd-space-* skalasından bir gap koyar. Kardeş elemanlar arasında margin yerine bunu kullan.
1
2
3
<Stack gap={3}>
<Box>1</Box>
<Box>2</Box>
<Box>3</Box>
</Stack>Import
import { Stack } from "@merid/react";Örnekler
Satır
1
2
3
<Stack direction="row" gap={2}>
<Box>1</Box>
<Box>2</Box>
<Box>3</Box>
</Stack>Hizalama
align, align-items'a; justify, justify-content'e karşılık gelir (between, space-between demektir).
Satır kaydırma
Tasarım
Token'lar
React
CSS
Erişilebilirlik
Dark mode
<Stack direction="row" gap={2} wrap>
{tags.map((tag) => <Box key={tag}>{tag}</Box>)}
</Stack>Semantik eleman
Liste, nav ya da form render'lamak için as kullan; layout aynı kalır.
- Birinci öğe
- İkinci öğe
<Stack as="ul" gap={1}>
<li>Birinci öğe</li>
<li>İkinci öğe</li>
</Stack>API referansı
as verilmedikçe bir div render'lar; ref'ini iletir ve tüm HTML attribute'larını aktarır.
| Prop | Tip | Varsayılan | Açıklama |
|---|---|---|---|
direction | "row" | "column" | "column" | Ana eksen. |
gap | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | 14 | 16 | 18 | 28 | 4 | --mrd-space-* skalasından gap (4 = 16px). |
align | "start" | "center" | "end" | "stretch" | "baseline" | – | Çapraz eksende hizalama (align-items). |
justify | "start" | "center" | "end" | "between" | – | Ana eksende dağılım (justify-content). |
wrap | boolean | false | Öğelerin birden fazla satıra kaymasına izin verir. |
as | ElementType | "div" | div yerine render'lanacak eleman ya da component. |
Stil verme
| Seçici | Değerler |
|---|---|
.mrd-stack | Kök eleman |
data-direction | row · column |
data-align | start · center · end · stretch · baseline |
data-justify | start · center · end · between |
data-wrap | wrap verildiğinde bulunur |
Component değişkeni: gap'ten inline olarak ayarlanan --mrd-stack-gap. Responsive gap'ler için CSS'te onu ez:
@media (max-width: 640px) {
.actions.mrd-stack { --mrd-stack-gap: var(--mrd-space-2); }
}Erişilebilirlik
- Stack yalnızca layout'tur ve rol eklemez. Doğru elemanı
asile seç (ul,nav,form). - Görsel sıra DOM sırasını izler; bunu CSS ile ters çevirme, yoksa focus sırası ile okuma sırası birbirini tutmaz.
Kullanım ilkeleri
Yap
Her stack'te tek bir gap kullan; farklı ritimler için stack'leri iç içe koy.
Kaçın
Boşluğa ince ayar yapmak için gap ile children üzerindeki margin'leri karıştırmak.