Separator

Separator oddziela grupy treści. Renderuje element z role="separator" zamiast <hr>, bo etykieta ma trafić do środka, a <hr> nie przyjmuje dzieci.

Podstawowy separator

Wszystko powyżej.

Wszystko poniżej.

stack({ gap: 'none' },
  text({ tone: 'muted' }, 'Wszystko powyżej.'),
  divider(),
  text({ tone: 'muted' }, 'Wszystko poniżej.'),
)

Z etykietą

Dzieci stają się etykietą wyśrodkowaną w linii.

albo

stack({ gap: 'none' },
  button({ variant: 'outline', color: 'neutral', block: true }, 'Kontynuuj przez GitHuba'),
  divider('albo'),
  button({ block: true }, 'Kontynuuj przez e-mail'),
)

Odstęp

spacing ustawia margines nad i pod, z tej samej skali, której używa wszystko inne.

Ciasno

Domyślnie

Przestronnie

Koniec

stack({ gap: 'none' },
  text({ variant: 'small', tone: 'muted' }, 'Ciasno'),
  divider({ spacing: 'xs' }),
  text({ variant: 'small', tone: 'muted' }, 'Domyślnie'),
  divider(),
  text({ variant: 'small', tone: 'muted' }, 'Przestronnie'),
  divider({ spacing: 'xl' }),
  text({ variant: 'small', tone: 'muted' }, 'Koniec'),
)

Pionowo

Pionowy separator potrzebuje rodzica, który da mu wysokość — rzędu flex, którego elementy się rozciągają, czyli tego, co stack() robi domyślnie.

4,1 kB

12 stron

0 wysp

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

Propsy

Prop	Typ	Domyślnie	Opis
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	W którą stronę biegnie linia.
`spacing`	`Space`	`'md'`	Margines po obu stronach linii.