Divider 分割线

区隔内容的分割线。带文案时具备分组语义（role="separator"），纯装饰时不进入无障碍树。

基础用法

基础用法

上面一段内容

下面一段内容

<script setup lang="ts">
</script>

<template>
  <LhDivider />
</template>

<script>
export default {}
</script>

<template>
  <LhDivider />
</template>

垂直分割线

垂直分割线

首页

列表

详情

<script setup lang="ts">
</script>

<template>
  <!-- 垂直分割线 -->
  <div>
    <span>首页</span>
    <LhDivider direction="vertical" />
    <span>列表</span>
    <LhDivider direction="vertical" />
    <span>详情</span>
  </div>
</template>

<script>
export default {}
</script>

<template>
  <!-- 垂直分割线 -->
  <div>
    <span>首页</span>
    <LhDivider direction="vertical" />
    <span>列表</span>
    <LhDivider direction="vertical" />
    <span>详情</span>
  </div>
</template>

带文案

文案支持水平与垂直方向：水平方向通过 label-position 控制左右对齐，垂直方向文案恒居中。

带文案

少年听雨歌楼上

壮年听雨客舟中

而今听雨僧庐下

<script setup lang="ts">
</script>

<template>
  <LhDivider label-position="left">少年听雨歌楼上</LhDivider>
  <LhDivider>壮年听雨客舟中</LhDivider>
  <LhDivider label-position="right">而今听雨僧庐下</LhDivider>
</template>

<script>
export default {}
</script>

<template>
  <LhDivider label-position="left">少年听雨歌楼上</LhDivider>
  <LhDivider>壮年听雨客舟中</LhDivider>
  <LhDivider label-position="right">而今听雨僧庐下</LhDivider>
</template>

虚线

虚线

虚线与文案可组合

自定义边框样式（dotted）

<script setup lang="ts">
</script>

<template>
  <LhDivider dashed />
  <LhDivider dashed>虚线与文案可组合</LhDivider>
  <LhDivider border-style="dotted">自定义边框样式（dotted）</LhDivider>
</template>

<script>
export default {}
</script>

<template>
  <LhDivider dashed />
  <LhDivider dashed>虚线与文案可组合</LhDivider>
  <LhDivider border-style="dotted">自定义边框样式（dotted）</LhDivider>
</template>

Divider API

Props

属性	说明	类型	默认值
direction	分割线方向	"horizontal" | "vertical"	'horizontal'
dashed	是否虚线	boolean	false
labelPosition	带文案时的对齐位置（水平方向生效，垂直恒居中）	"left" | "center" | "right"	'center'
borderStyle	边框样式（如 'dotted'），预留	string	—
sx	快速布局属性（如 { mt: 2, w: '50%' }），转内联样式作用于根元素	LhSxProps	—

Slots

插槽	说明	默认内容
default	分割线文案（水平方向排在左右，垂直方向排在上下）	—

无障碍

• 带文案：role="separator"，屏幕阅读器感知分组边界；垂直方向额外声明 aria-orientation="vertical"
• 纯装饰：role="presentation"，从无障碍树移除
• 不可聚焦、无键盘交互

类型定义

本组件对外导出的 TypeScript 类型结构如下（自动提取自 packages/components/divider/src/types.ts 与 @lh-ui/share/core/* 源码，点击各条目展开查看完整定义；属性说明见上方 Props 表）：

LhDividerProps

export interface LhDividerProps {
  /** 分割线方向 */
  direction?: LhDividerDirection
  /** 是否虚线 */
  dashed?: boolean
  /** 带文案时的对齐位置 */
  labelPosition?: LhDividerLabelPosition
  /** 边框样式（如 'solid' / 'dashed' / 'dotted'），优先于 dashed */
  borderStyle?: string
  /** sx 快速布局属性 */
  sx?: LhSxProps
}

LhDividerLabelPosition _{（来自 @lh-ui/share/core/divider）}

/** 带文案时的对齐位置 */
export type LhDividerLabelPosition = 'left' | 'center' | 'right'

LhDividerDirection _{（来自 @lh-ui/share/core/divider）}

/** 分割线方向 */
export type LhDividerDirection = 'horizontal' | 'vertical'