分隔线 separator

通用组件。三层同源：无头内核给出解剖与状态机，Vue 组件与自定义元素只是它的两层外壳，行为完全一致。

示例

方向

竖向分隔线需要父容器有确定高度

上一段

下一段

左

右

<script setup lang="ts">
import { XhSeparator } from "@xihan-ui/vue";
</script>

<template>
  <div style="width: 100%">
    <p>上一段</p>
    <XhSeparator />
    <p>下一段</p>
  </div>
  <div style="display: flex; align-items: center; gap: 12px; height: 24px">
    <span>左</span>
    <XhSeparator orientation="vertical" />
    <span>右</span>
  </div>
</template>

纯装饰

decorative 开启后读屏跳过它；只是排版用的横线应该这么写

语义分隔：读屏会念出一条分隔线

装饰分隔：读屏跳过

末段

<script setup lang="ts">
import { XhSeparator } from "@xihan-ui/vue";
</script>

<template>
  <div style="width: 100%">
    <p>语义分隔：读屏会念出一条分隔线</p>
    <XhSeparator />
    <p>装饰分隔：读屏跳过</p>
    <XhSeparator decorative />
    <p>末段</p>
  </div>
</template>

分节标题

分隔线自己不排版：一行里放两条、中间留出标题，两侧各自撑开；语义由标题文字给，线只是装饰

基本信息

姓名、部门、入职时间

联系方式

邮箱、电话

<script setup lang="ts">
import { XhSeparator } from "@xihan-ui/vue";
</script>

<template>
  <div style="width: 100%; display: grid; gap: 12px">
    <!-- 标题居中：两侧各一条，等分剩下的宽度 -->
    <div style="display: flex; align-items: center; gap: 12px">
      <XhSeparator decorative style="flex: 1" />
      <span style="font-size: 13px">基本信息</span>
      <XhSeparator decorative style="flex: 1" />
    </div>

    <p style="margin: 0">姓名、部门、入职时间</p>

    <!-- 标题靠左：只在右边留一条 -->
    <div style="display: flex; align-items: center; gap: 12px">
      <span style="font-size: 13px">联系方式</span>
      <XhSeparator decorative style="flex: 1" />
    </div>

    <p style="margin: 0">邮箱、电话</p>
  </div>
</template>

线型、粗细与颜色

线是拿背景画出来的：颜色槽位收的是背景值，填一段重复渐变就是虚线；粗细是另一个槽位

实线（缺省）

虚线

点线

加粗并换色

左

右

<script setup lang="ts">
import { XhSeparator } from "@xihan-ui/vue";

// 实线段与空白段交替：横线沿 to right 铺，竖线换成 to bottom
const dashed = "repeating-linear-gradient(to right, var(--xh-border-default) 0 6px, transparent 6px 12px)";
const dotted = "repeating-linear-gradient(to right, var(--xh-border-default) 0 2px, transparent 2px 6px)";
const dashedVertical = "repeating-linear-gradient(to bottom, var(--xh-border-default) 0 6px, transparent 6px 12px)";
</script>

<template>
  <div style="width: 100%; display: grid; gap: 10px">
    <span style="font-size: 13px">实线（缺省）</span>
    <XhSeparator decorative />

    <span style="font-size: 13px">虚线</span>
    <XhSeparator decorative :style="{ '--xh-separator-color': dashed }" />

    <span style="font-size: 13px">点线</span>
    <XhSeparator decorative :style="{ '--xh-separator-color': dotted }" />

    <span style="font-size: 13px">加粗并换色</span>
    <XhSeparator
      decorative
      style="--xh-separator-thickness: 3px; --xh-separator-color: var(--xh-color-brand-500)"
    />

    <!-- 竖向同样成立，只把渐变方向换成 to bottom -->
    <div style="display: flex; align-items: center; gap: 12px; height: 32px">
      <span style="font-size: 13px">左</span>
      <XhSeparator
        orientation="vertical"
        decorative
        :style="{ '--xh-separator-color': dashedVertical }"
      />
      <span style="font-size: 13px">右</span>
    </div>
  </div>
</template>

产物

层	值
自定义元素	<xh-separator>
Vue 组件	XhSeparator
状态机	无，connect 直接由 props 算属性
皮肤	@xihan-ui/styles/separator.css

解剖

部件名即 data-part 属性值，也是皮肤的选择器。加粗的是必备部件，不渲染它组件不工作（Web Components 适配器会在诊断通道上报 wc.missing-part）。

data-scope="separator"：root

Props

属性	类型	必填	说明
decorative	boolean		装饰性分隔：仅视觉分组，不进无障碍树（role=none，无 aria-orientation）。
orientation	'horizontal' | 'vertical'

connect API

connect 产出的对象。getXxxProps() 铺到对应部件的宿主元素上，其余是可读状态与操作入口。

成员	类型	说明
getRootProps	() => T['element']

键盘

规格出处：W3C APG

无键盘交互（不接收焦点，或焦点行为完全由原生元素提供）。