Separator
Stablev0.3.0コンテンツを視覚的に分離するための区切り線。水平・垂直両方に対応します。
基本的な使い方
シンプルな水平区切り線
上のコンテンツ
下のコンテンツ
tsx
class="token keyword">import { Separator } class="token keyword">from class="token keyword">class="token string">"@/components/ui";
<class="token tag">p>上のコンテンツ</class="token tag">p>
<class="token tag">Separator class="token keyword">class=class="token keyword">class="token string">"my-class="token number">4" />
<class="token tag">p>下のコンテンツ</class="token tag">p>方向
水平と垂直の区切り線
水平（デフォルト）
上
下
垂直
左右
テキスト付き
中央にテキストを配置した区切り線
または
続きを読む
セクション終わり
tsx
class="token keyword">import { SeparatorWithText } class="token keyword">from class="token keyword">class="token string">"@/components/ui";
<class="token tag">SeparatorWithText>または</class="token tag">SeparatorWithText>
<class="token tag">SeparatorWithText>続きを読む</class="token tag">SeparatorWithText>実際の使用例
ログインフォームでの区切り
ログイン
または
ナビゲーションでの使用
垂直セパレーターでリンクを区切る
Props API
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" | 区切り線の方向 |
decorative | boolean | true | 装飾的な要素かどうか（aria-hidden） |
Accessibility
- role='separator' を使用
- decorative=true の場合、aria-hidden='true' を設定
- 垂直の場合、aria-orientation='vertical' を設定
- 意味的な区切りには decorative=false を使用