ディバイダーコンポーネント
最終更新日:
CSS のみの Tailwind CSS ディバイダー — 水平および垂直、オプションの中央ラベル付き。色とサイズのバリエーション。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
ディバイダー コンポーネントは、コンテンツ セクション間に視覚的な分離を作成します。軽量でセマンティックな分割線は、情報を階層的に構造化し、読みやすさを向上させるのに役立ちます。 Frutjam ディバイダー システムは、セクション間をラベル付きで区切るために、オプションのテキスト コンテンツを使用して水平方向と垂直方向をサポートします。
CSS のみ。JavaScript は必要ありません。 WCAG AA にアクセス可能で、フレームワークに依存しない - Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
| クラス | タイプ | 説明 |
|---|---|---|
| divider | ベース | オプションで中央揃えのラベルテキストを含む水平罫線 |
| divider-horizontal | 修飾子 | 水平方向 (デフォルト) |
| divider-vertical | 修飾子 | 縦向き |
| divider-start | 修飾子 | ラベルのテキストを先頭に揃えます |
| divider-end | 修飾子 | ラベルのテキストを最後に揃えます |
| divider-solid | スタイル | 実線スタイル |
| divider-dashed | スタイル | 破線のスタイル |
| divider-dotted | スタイル | 点線のスタイル |
| divider-primary | 色 | 主要なテーマカラー |
| divider-secondary | 色 | 二次テーマカラー |
| divider-accent | 色 | アクセントのテーマカラー |
| divider-neutral | 色 | ニュートラルなテーマカラー |
| divider-info | 色 | 情報セマンティックカラー |
| divider-success | 色 | 成功のセマンティックカラー |
| divider-warning | 色 | 警告セマンティックカラー |
| divider-error | 色 | エラー セマンティック カラー |
基本的な使い方
<div class="divider"></div> |
<div className="divider"></div> |
ディバイダーの方向
水平分割線
html
<div class="divider divider-horizontal"></div> |
垂直ディバイダー
html
1 2 3 4 5 6 7 8 9 | <div class="flex gap-4 w-full"> <div class="card card-outline w-full"> <div class="card-content">content 1</div> </div> <div class="divider divider-vertical"></div> <div class="card card-outline w-full"> <div class="card-content">content 2</div> </div> </div> |
テキスト付きの区切り線
横文字とテキスト
html
<div class="divider divider-horizontal">OR</div> |
縦書きでテキストあり
html
1 2 3 4 5 6 7 8 9 | <div class="flex gap-4 w-full"> <div class="card card-outline w-full"> <div class="card-content">content 1</div> </div> <div class="divider divider-vertical">OR</div> <div class="card card-outline w-full"> <div class="card-content">content 2</div> </div> </div> |
区切り線の色
html
1 2 3 4 5 6 7 8 9 10 11 | <div class="flex flex-col gap-8 w-full"> <div class="divider">Default</div> <div class="divider divider-neutral">Neutral</div> <div class="divider divider-primary">Primary</div> <div class="divider divider-secondary">Secondary</div> <div class="divider divider-accent">Accent</div> <div class="divider divider-success">Success</div> <div class="divider divider-warning">Warning</div> <div class="divider divider-info">Info</div> <div class="divider divider-error">Error</div> </div> |
ディバイダーコンテンツの位置
区切り線内のテキストを行の先頭、中央 (デフォルト)、または行の末尾に揃えることができます。
水平位置
html
1 2 3 4 5 | <div class="flex w-full gap-8 flex-col"> <div class="divider divider-start">Start</div> <div class="divider">Default</div> <div class="divider divider-end">End</div> </div> |
垂直位置
html
1 2 3 4 5 | <div class="flex justify-center w-full h-64 gap-12"> <div class="divider divider-vertical divider-start">Start</div> <div class="divider divider-vertical">Default</div> <div class="divider divider-vertical divider-end">End</div> </div> |