Separator 分隔线
在相邻内容或操作组之间提供可感知的视觉与语义分隔。
使用概览
适合使用
- 同一区域内的内容需要分组，但不值得增加标题层级时。
不建议使用
- 仅为装饰页面而没有真实内容分组关系时。
真实示例
装饰性水平分隔线
在视觉上分组内容但不重复暴露语义。
账户设置通知设置
安装
本地候选警告Registry 地址仅指向当前本地文档站；npm 包也只用于本地候选验证，尚未公开发布。
pnpm dlx shadcn@4.16.0 add http://127.0.0.1:3000/r/separator.json基础用法
导入
import { Separator } from "@richardqiu/quartz/separator";JSX
<Separator orientation="horizontal" decorative />状态与控制摘要
默认
label · textactive · booleanAPI 参考
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" | 设置分隔线与周围布局一致的方向。 |
decorative | boolean | false | 声明分隔线是否只承担视觉装饰作用。 |
组合结构
- 01
Separator
键盘约定
- Separator 不可交互，也不进入键盘焦点顺序。
可访问性契约
- 装饰性分隔线默认从可访问性树中隐藏。
- 表达语义边界时将 decorative 设为 false，并提供正确的 orientation。