Separator 分隔线
分隔相关内容或内容分组。
用法
分隔内容区域
账户设置
管理个人资料与登录方式。
通知设置选择需要接收的消息。
组件结构
加粗的是必需部件。
data-scope="separator"：root · line · content
示例
垂直分隔线
分隔行内内容
概览分析报告
分组标题
在分隔线中显示标题
变体
设置分隔线强度和线型
默认弱化强调虚线
设计指引
何时使用
- 分隔菜单、列表、工具栏或表单区域。
- 在分隔线中显示分组标题。
何时不用
- 只需留白时使用间距。
- 每项都需要分隔时优先调整列表结构。
特性
- 支持水平和垂直方向。
- 支持默认、弱化、强调和虚线样式。
- 支持居中或靠边的分组标题。
decorative可将纯视觉分隔线移出无障碍树。
组合
最佳实践
- 纯视觉分隔线使用
decorative。 - 垂直分隔线的父容器应有明确高度。
反模式
- 不要用分隔线替代语义标题。
- 不要在同一区域堆叠过多分隔线。
API 参考
产物
| 层 | 值 |
|---|---|
| 自定义元素 | <xh-separator> |
| Vue 组件 | XhSeparator XhSeparatorContent XhSeparatorLine XhSeparatorRoot |
| 状态机 | 无，connect 直接由 props 算属性 |
| 皮肤 | @xihan-ui/styles/separator.css |
Props
| 属性 | 类型 | 必填 | 说明 |
|---|---|---|---|
align | SeparatorAlign | 分节文字的位置，默认居中；默认档不输出 data-align。 | |
dashed | boolean | 绘制为虚线；实线段与空白段的长度使用 --xh-separator-dash-length / -dash-gap 两个槽。 | |
decorative | boolean | 装饰性分隔：仅视觉分组，root 通过 role=none + aria-hidden 完整退出无障碍树。 | |
orientation | 'horizontal' | 'vertical' | ||
variant | SeparatorVariant | 线的绘制方式，默认 default；默认档不输出 data-variant。 |
connect API
getXxxProps() 返回对应部件的宿主属性。
| 成员 | 类型 | 说明 |
|---|---|---|
getRootProps | () => T['element'] | |
getLineProps | () => T['element'] | |
getContentProps | () => T['element'] |
无障碍
键盘
规格出处：W3C APG
无键盘交互（不接收焦点，或焦点行为完全由原生元素提供）。
ARIA
以下属性由 connect 生成。
| 部件 | 属性 | 值 |
|---|---|---|
root | aria-hidden | 'true' | undefined |
root | aria-orientation | 'vertical' | undefined |
root | role | 'none' | 'separator' |
line | role | 'none' |
样式参考
皮肤
@xihan-ui/styles/separator.css 使用 [data-scope="separator"][data-part="root"] 部件选择器，位于 xihan.components 层。覆盖样式使用 xihan.overrides。
数据属性
由 connect 生成；条件不成立时不输出无值属性。
| 部件 | 属性 | 值 |
|---|---|---|
root | data-align | props.align |
root | data-dashed | ''（条件成立时才出现） |
root | data-orientation | props.orientation |
root | data-variant | props.variant |
line | data-orientation | props.orientation |
CSS 变量
本组件公开覆盖槽由独立皮肤的实际消费位生成；默认来源、作用部件和状态均与 CSS 同源。
| 变量 | 部件 | CSS 属性 | 状态 | 默认来源 | 说明 |
|---|---|---|---|---|---|
--xh-separator-align-length | lineroot | flex | align=endalign=startfirst-childlast-child | --xh-space-6 | separator 的 line、root 部件 flex 覆盖槽。 |
--xh-separator-color | lineroot | background | dasheddefaultorientation=horizontalorientation=verticalvariant=strongvariant=subtle | --xh-border-strong--xh-material-frosted-separator--xh-material-soft-separator | separator 的 line、root 部件 background 覆盖槽。 |
--xh-separator-content-fg | content | color | default | --xh-fg-muted | separator 的 content 部件 color 覆盖槽。 |
--xh-separator-content-font-size | content | font-size | default | --xh-text-secondary-size | separator 的 content 部件 font-size 覆盖槽。 |
--xh-separator-dash-gap | lineroot | background | dashedorientation=horizontalorientation=vertical | --xh-space-1_5 | separator 的 line、root 部件 background 覆盖槽。 |
--xh-separator-dash-length | lineroot | background | dashedorientation=horizontalorientation=vertical | --xh-space-1_5 | separator 的 line、root 部件 background 覆盖槽。 |
--xh-separator-gap | root | gap | has([data-part='content']) | --xh-space-3 | separator 的 root 部件 gap 覆盖槽。 |
--xh-separator-radius | lineroot | border-radius | default | --xh-shape-pill | separator 的 line、root 部件 border-radius 覆盖槽。 |
--xh-separator-thickness | lineroot | block-sizeinline-size | orientation=horizontalorientation=vertical | --xh-stroke-thin | separator 的 line、root 部件 block-size、inline-size 覆盖槽。 |
动效
本组件皮肤不含过渡与关键帧，也没有脚本驱动的动效：状态一变，外观立即到位。