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'

基本的な使い方​

Divider Props​

スタイル​

基本的な使い方

Divider Props

スタイル