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'