Separator

İçeriği bölen, 1px'lik --mrd-line ince çizgisi. Önce boşluğa ya da yüzey değişikliğine başvur; ikisi de yetmediğinde separator kullan.

<Text weight="medium" tone="ink">Hesap</Text>
<Separator />
<Text size="sm">Profil, e-posta ve şifre.</Text>

Import

import { Separator } from "@merid/react";

Örnekler

Dikey

orientation="vertical", flex kapsayıcısının yüksekliği boyunca uzanan dikey bir çizgi çizer.

<Stack direction="row" gap={3} align="center">
<Text size="sm" as="span">Dokümanlar</Text>
<Separator orientation="vertical" />
<Text size="sm" as="span">Sürüm notları</Text>
<Separator orientation="vertical" />
<Text size="sm" as="span">GitHub</Text>
</Stack>

Anlamsal separator

Çizgi varsayılan olarak dekoratiftir (role="none"). Anlamlı grupları ayırıyorsa decorative={false} ver; böylece role="separator" olarak sunulur.

<Text size="sm">Son dosyalar</Text>
<Separator decorative={false} />
<Text size="sm">Seninle paylaşılanlar</Text>

API referansı

Bir div render'lar; ref'ini iletir ve native attribute'ları olduğu gibi geçirir.

Stil verme

Separator'ın component değişkeni yoktur; rengi --mrd-line'dır. Boşluk için separator'a margin ya da üst elemana gap ver.

Erişilebilirlik

• Dekoratif separator'lar erişilebilirlik ağacından çıkarılır.
• decorative={false} verildiğinde eleman role="separator" alır; dikey separator'lara ayrıca aria-orientation="vertical" eklenir.

Kullanım ilkeleri

İlgili sayfalar

• Stack: gap tabanlı boşluk, çoğu zaman daha iyi bir ayraç.
• Section: sayfa bantlarını yüzeyle ayırır.