Trenner

Ein Trenner trennt Inhaltsgruppen. Er rendert ein Element mit role="separator" statt eines <hr>, weil die Beschriftung hineingehört und <hr> keine Kinder aufnimmt.

Einfacher Trenner

Alles darüber.

Alles darunter.

stack({ gap: 'none' },
  text({ tone: 'muted' }, 'Alles darüber.'),
  divider(),
  text({ tone: 'muted' }, 'Alles darunter.'),
)

Mit Beschriftung

Kinder werden zu einer Beschriftung, zentriert in der Linie.

oder

stack({ gap: 'none' },
  button({ variant: 'outline', color: 'neutral', block: true }, 'Weiter mit GitHub'),
  divider('oder'),
  button({ block: true }, 'Weiter mit E-Mail'),
)

Abstand

spacing setzt den Abstand darüber und darunter, aus derselben Skala wie alles andere.

Eng

Standard

Großzügig

Ende

stack({ gap: 'none' },
  text({ variant: 'small', tone: 'muted' }, 'Eng'),
  divider({ spacing: 'xs' }),
  text({ variant: 'small', tone: 'muted' }, 'Standard'),
  divider(),
  text({ variant: 'small', tone: 'muted' }, 'Großzügig'),
  divider({ spacing: 'xl' }),
  text({ variant: 'small', tone: 'muted' }, 'Ende'),
)

Vertikal

Ein vertikaler Trenner braucht ein Elternelement, das ihm Höhe gibt — eine Flex-Reihe, deren Elemente sich strecken, was stack() standardmäßig tut.

4,1 kB

12 Seiten

0 Islands

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

Props

Prop	Typ	Standard	Beschreibung
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	In welche Richtung die Linie läuft.
`spacing`	`Space`	`'md'`	Abstand zu beiden Seiten der Linie.