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	区切り線のテキスト（水平方向は左右に、垂直方向は上下に配置）