跳到正文
GitHub

展示

Separator

一条线,三种粗细——单色页面需要它们。

什么时候用它

细线分行,边线分块,实线压在报头下面。

示例

weights

hairline — between rows

edge — between blocks

hard — under a masthead

说明

一条线。

在单色系统里,线承担了本来该由颜色承担的活,所以它有三种粗细而不是一种:行与行之间用细线,块与块之间用边线,报头下面用硬线。按名字挑,能让一个页面不至于漂成五种手调的灰。

属性

Separator props
属性类型默认值说明
decorativebooleantrue只在视觉上把东西归拢的线是装饰,不该被播报。当这条线确实分隔了两个读屏软件应该听出区别的区块时,设成 `false`。
orientation'horizontal' | 'vertical''horizontal'
weight'hairline' | 'edge' | 'hard''hairline'`hairline` 分隔同一块里的各行;`edge` 分隔一块和下一块。

同时接受 HTMLAttributes<HTMLDivElement> 里的全部属性,它们会直接透传给底层元素,不再逐条列出。

无障碍

  • 默认 role="none"。只是把东西在视觉上分组的线,不应该被念出来。