展示
Separator
一条线,三种粗细——单色页面需要它们。
什么时候用它
细线分行,边线分块,实线压在报头下面。
示例
weights
说明
一条线。
在单色系统里,线承担了本来该由颜色承担的活,所以它有三种粗细而不是一种:行与行之间用细线,块与块之间用边线,报头下面用硬线。按名字挑,能让一个页面不至于漂成五种手调的灰。
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| decorative | boolean | true | 只在视觉上把东西归拢的线是装饰,不该被播报。当这条线确实分隔了两个读屏软件应该听出区别的区块时,设成 `false`。 |
| orientation | 'horizontal' | 'vertical' | 'horizontal' | — |
| weight | 'hairline' | 'edge' | 'hard' | 'hairline' | `hairline` 分隔同一块里的各行;`edge` 分隔一块和下一块。 |
同时接受 HTMLAttributes<HTMLDivElement> 里的全部属性,它们会直接透传给底层元素,不再逐条列出。
无障碍
- 默认 role="none"。只是把东西在视觉上分组的线,不应该被念出来。