Separator
分隔内容分组。中文惯用名：分割线。设计文档原名：Divider。
稳定本期新增已接入
元信息
| 字段 | 值 |
|---|---|
| 规范 ID | component.separator |
| 名称 | Separator |
| 二级分类 | 通用（general） |
| 用途 | 分隔内容分组 |
| 描述 | 中文惯用名：分割线。设计文档原名：Divider。 |
预览
静态结构：渲染为 Base UI Separator（data-slot="separator"），始终具备可访问的 separator 角色（vendored 版不提供 decorative 开关）；horizontal 映射 h-px w-full、vertical 映射 w-px h-full（经 data-[orientation=*] 变体），底色 bg-border；垂直态依赖父容器有确定高度，预览中与条目文本并列于固定行高的 Flex 行内。
DSL 结构
{
"type": "Separator",
"props": {
"orientation": "horizontal"
}
}何时用
何时使用
- 区块之间的轻量分隔：表单分组、卡片内小节、列表项之间。
- 行内条目的并列分隔：统计数字之间、面包屑式的元信息串（垂直态）。
- 需要用语义分隔符（而非纯装饰线）表达内容边界：组件始终带 separator 角色。
何时不用
- 可拖拽调整尺寸的分割：使用 Splitter / Resizable（Separator 不可交互）。
- 需要靠间距就能区分的相邻元素：用 Space / Flex 的 gap，不必再加线。
- 页面级结构分区（头 / 侧栏 / 内容）：由 Layout 的子区域自带边框。
变体
| 变体 | 视觉形态 | 适用场景 |
|---|---|---|
| 水平 | h-px 通栏细线 | 区块、小节、列表项之间的分隔 |
| 垂直 | w-px 竖线（撑满父容器高度） | 行内条目并列分隔、元信息串 |
| 自定义线型 | 经 className / style 覆盖颜色与粗细 | 浅色分区、需要强调边界的区域 |
API 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
orientation | `'horizontal' | 'vertical'` | 'horizontal' |
className / style | string / CSSProperties | — | 通用：根节点 class 合并 / 内联样式 |
使用规范
- 分隔线只表达分组，不表达层级：层级靠标题与缩进，不靠粗细不同的线。
- 相邻元素已有足够间距时不再叠加分隔线，避免视觉噪声。
- 垂直分隔线必须置于有确定高度的容器内（Flex 行、固定行高），否则不可见。
- 带文字的中缝分隔（如「或」）用文本 + 两条水平 Separator 组合，不改造组件。
正例
- ✓ 表单分组：两组字段之间水平 Separator 划出界限。
- ✓ 统计条：三个指标数字之间用垂直 Separator 并列分隔。
反例
- ✕ 用 Separator 做可拖拽的面板分割（应使用 Splitter / Resizable）。
- ✕ 每个列表项上下各加一条线（列表本身已有行分隔，重复表达）。
Design Token 映射
不适用：组件 tokenRefs 为空：样式 Token 数据尚未接入，三层映射（Primitive → Semantic → Component）待样式 Token 接入后回填。