Divider 分隔線

區隔內容的分隔線。支援水平 / 垂直方向、虛線與自訂邊框、帶文案對齊。

分隔線

<template>
  <div class="demo-col" style="max-width: 420px">
    <p class="demo-note">水平分隔線</p>
    <LhDivider />
    <p class="demo-note">帶文案（預設置中）</p>
    <LhDivider>水墨</LhDivider>
    <LhDivider label-position="left">左對齊文案</LhDivider>
    <LhDivider label-position="right">右對齊文案</LhDivider>
    <p class="demo-note">虛線 / 自訂邊框</p>
    <LhDivider dashed />
    <LhDivider border-style="dotted">點線</LhDivider>
    <p class="demo-note">垂直分隔線</p>
    <div class="demo-row">
      <span>山水</span>
      <LhDivider direction="vertical" />
      <span>花鳥</span>
      <LhDivider direction="vertical" />
      <span>人物</span>
    </div>
  </div>
</template>

Props

屬性	說明	類型	預設值
direction	方向	'horizontal' \| 'vertical'	'horizontal'
dashed	虛線	boolean	false
labelPosition	帶文案時的對齊位置（水平方向生效，垂直恆置中）	'left' \| 'center' \| 'right'	'center'
borderStyle	邊框樣式（優先於 dashed）	string	—
sx	sx 快速佈局屬性	—	—

Slots

插槽	說明
default	分隔線文案（水平方向排在左右，垂直方向排在上下）