分割线

分割线用来分开成组的内容。它渲染的是带 role="separator" 的元素，而不是 <hr>，因为文字要放在里面，而 <hr> 不接受子元素。

基础分割线

上面的一切。

下面的一切。

stack({ gap: 'none' },
  text({ tone: 'muted' }, '上面的一切。'),
  divider(),
  text({ tone: 'muted' }, '下面的一切。'),
)

带文字

子元素会变成一段居中在线条里的文字。

stack({ gap: 'none' },
  button({ variant: 'outline', color: 'neutral', block: true }, '使用 GitHub 继续'),
  divider('或'),
  button({ block: true }, '使用邮箱继续'),
)

间距

spacing 设定上下的外边距，取自和其他一切相同的那套尺度。

紧凑

默认

宽松

结束

stack({ gap: 'none' },
  text({ variant: 'small', tone: 'muted' }, '紧凑'),
  divider({ spacing: 'xs' }),
  text({ variant: 'small', tone: 'muted' }, '默认'),
  divider(),
  text({ variant: 'small', tone: 'muted' }, '宽松'),
  divider({ spacing: 'xl' }),
  text({ variant: 'small', tone: 'muted' }, '结束'),
)

垂直

垂直分割线需要一个能给它高度的父元素——也就是子项会拉伸的 flex 行，而 stack() 默认就是这样。

4.1 kB

12 个页面

0 个区块

stack({ direction: 'row', gap: 'none', align: 'stretch' },
  text({ variant: 'small' }, '4.1 kB'),
  divider({ orientation: 'vertical' }),
  text({ variant: 'small' }, '12 个页面'),
  divider({ orientation: 'vertical' }),
  text({ variant: 'small' }, '0 个区块'),
)

属性

属性类型默认值说明
orientation'horizontal' | 'vertical''horizontal'线条朝哪个方向走。
spacingSpace'md'线条两侧的外边距。