Ayırıcı

Ayırıcı, içerik gruplarını ayırır. Bir <hr> yerine role="separator" taşıyan bir öğe işler, çünkü içine bir etiket girer ve <hr> çocuk almaz.

Temel ayırıcı

Yukarıdaki her şey.

Aşağıdaki her şey.

stack({ gap: 'none' },
  text({ tone: 'muted' }, 'Yukarıdaki her şey.'),
  divider(),
  text({ tone: 'muted' }, 'Aşağıdaki her şey.'),
)

Etiketle

Çocuklar, çizginin ortasında yer alan bir etiket olur.

ya da

stack({ gap: 'none' },
  button({ variant: 'outline', color: 'neutral', block: true }, 'GitHub ile devam et'),
  divider('ya da'),
  button({ block: true }, 'E-posta ile devam et'),
)

Boşluk

spacing üstteki ve alttaki kenar boşluğunu, geri kalan her şeyin kullandığı aynı ölçekten ayarlar.

Sıkı

Varsayılan

Ferah

Son

stack({ gap: 'none' },
  text({ variant: 'small', tone: 'muted' }, 'Sıkı'),
  divider({ spacing: 'xs' }),
  text({ variant: 'small', tone: 'muted' }, 'Varsayılan'),
  divider(),
  text({ variant: 'small', tone: 'muted' }, 'Ferah'),
  divider({ spacing: 'xl' }),
  text({ variant: 'small', tone: 'muted' }, 'Son'),
)

Dikey

Dikey bir ayırıcı, ona yükseklik veren bir ebeveyn ister — öğeleri gerilen bir flex satırı, ki stack() varsayılan olarak bunu yapar.

4,1 kB

12 sayfa

0 ada

stack({ direction: 'row', gap: 'none', align: 'stretch' },
  text({ variant: 'small' }, '4,1 kB'),
  divider({ orientation: 'vertical' }),
  text({ variant: 'small' }, '12 sayfa'),
  divider({ orientation: 'vertical' }),
  text({ variant: 'small' }, '0 ada'),
)

Proplar

Prop	Tür	Varsayılan	Açıklama
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Çizginin hangi yöne gittiği.
`spacing`	`Space`	`'md'`	Çizginin iki yanındaki kenar boşluğu.