Divider 分割線

區隔內容的分割線。

基礎用法

基礎用法

春水碧於天，畫船聽雨眠。

壚邊人似月，皓腕凝霜雪。

置左對齊分組

置右對齊分組

垂直

分割

上

水墨

下

import { LhDivider } from '@lh-ui/react'

export default function Demo() {
  return (
    <>
      <span>春水碧于天，画船听雨眠。</span>
      <LhDivider />
      <span>垆边人似月，皓腕凝霜雪。</span>
      <LhDivider dashed />
      <LhDivider labelPosition="left">左对齐分组</LhDivider>
    </>
  )
}

Divider Props

屬性	說明	型別	可選值	預設值
direction	方向	'horizontal' | 'vertical'	—	'horizontal'
dashed	是否虛線	boolean	—	false
labelPosition	文案位置（水平方向生效，垂直恆置中）	'left' | 'center' | 'right'	—	'center'
borderStyle	邊框樣式（顯式指定時優先於 dashed）	string	'solid' | 'dashed' | 'dotted' …	—
sx	快速版面配置屬性	SxProps	—	—

無障礙

帶文案的分割線渲染為 role="separator"（真分組語意）；純裝飾的為 role="presentation"，移出無障礙樹。僅「帶文案且垂直」時輸出 aria-orientation="vertical"。

已知行為

borderStyle="dotted" 會輸出 lh-divider--dotted 修飾符，但樣式層目前只實作了 --dashed，會回退為實線 —— 與 lh-ui-plus 行為一致。

樣式

import '@lh-ui/react/style/divider'