Divisore

Un divisore separa gruppi di contenuto. Renderizza un elemento con role="separator" invece di un <hr>, perché l’etichetta va al suo interno e <hr> non accetta figli.

Divisore di base

Tutto quello che sta sopra.

Tutto quello che sta sotto.

stack({ gap: 'none' },
  text({ tone: 'muted' }, 'Tutto quello che sta sopra.'),
  divider(),
  text({ tone: 'muted' }, 'Tutto quello che sta sotto.'),
)

Con un’etichetta

I figli diventano un’etichetta centrata nella linea.

oppure

stack({ gap: 'none' },
  button({ variant: 'outline', color: 'neutral', block: true }, 'Continua con GitHub'),
  divider('oppure'),
  button({ block: true }, 'Continua con l’email'),
)

Spaziatura

spacing imposta il margine sopra e sotto, dalla stessa scala che usa tutto il resto.

Stretto

Predefinito

Ampio

Fine

stack({ gap: 'none' },
  text({ variant: 'small', tone: 'muted' }, 'Stretto'),
  divider({ spacing: 'xs' }),
  text({ variant: 'small', tone: 'muted' }, 'Predefinito'),
  divider(),
  text({ variant: 'small', tone: 'muted' }, 'Ampio'),
  divider({ spacing: 'xl' }),
  text({ variant: 'small', tone: 'muted' }, 'Fine'),
)

Verticale

Un divisore verticale ha bisogno di un genitore che gli dia un’altezza — una riga flex i cui elementi si allungano, che è ciò che stack() fa per impostazione predefinita.

4,1 kB

12 pagine

0 island

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

Props

Prop	Tipo	Predefinito	Descrizione
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	In che direzione corre la linea.
`spacing`	`Space`	`'md'`	Margine ai due lati della linea.