Divider

コンテンツ間に視覚的な区切り線を挿入するコンポーネント。セクションの境界を明確にする際に使用します。

Basic

jui-divider の最も基本的な使用例です。

関連コンポーネント

• Card — コンテンツをグループ化して表示するコンテナコンポーネント

ブラウザ対応

このコンポーネントが使用しているブラウザ機能と対応状況です。

機能	用途	Chrome	Firefox	Safari	ステータス
全機能	—	全ver	全ver	全ver	✅ Widely Available

💡 特筆すべき Baseline 機能はありません。すべてのモダンブラウザで問題なく動作します。

アクセシビリティ

• WAI-ARIA:
  • すべての形態（垂直・水平・ラベル付き）でルート要素に role="separator" が付与され、コンテンツの区切りとして支援技術に認識されます。
  • orientation Prop に応じて aria-orientation="horizontal" または aria-orientation="vertical" が設定されます。
  • ラベル付き（label Prop または slot を指定）の場合、ラベルテキストは可視テキストとして描画され、そのまま読み上げられます。ラベルの無い水平区切りはネイティブの <hr> 要素として描画されます。
• 対話要素: このコンポーネントは表示専用で、クリックなどの対話的な振る舞いやキーボード操作は持ちません。

プロパティ

コンポーネントが受け付ける属性（Props）の一覧と詳細仕様です。

Property	Attribute	Description	Type	Default
label	label	ラベルテキスト（slot で代替可能）	string	''
labelPosition	label-position	ラベル位置	"center" | "end" | "start"	'center'
orientation	orientation	方向	"horizontal" | "vertical"	'horizontal'

スロット

コンポーネント内に子要素を挿入するためのスロット一覧です。

Slot	Description
	ラベルテキスト（label Prop より優先）

シャドウパーツ

CSSから直接スタイリング可能な内部要素（Parts）の一覧です。

Part	Description
"divider"	ルート要素
"label"	ラベル

---

Built with StencilJS