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'