Divider
Section divider wrapping daisyUI 5 divider class. Bare <x-divider> for a line; add text in a slot for a label. direction=vertical makes it a vertical line inside flex.
default ラベルなし — ただの仕切り線
上のセクション
下のセクション
<x-divider />with label — slot にテキスト
ログインフォーム
OR
ソーシャルログイン
<x-divider>OR</x-divider>position variants — center (default) / start / end
center (default)
start
end
<x-divider>center (default)</x-divider>
<x-divider position="start">start</x-divider>
<x-divider position="end">end</x-divider>color variants — null (default) / primary / secondary / accent / info / success / warning / error / neutral
default (no color)
primary
secondary
accent
info
success
warning
error
neutral
<x-divider color="primary">primary</x-divider>
<x-divider color="success">success</x-divider>
<x-divider color="error">error</x-divider>vertical divider — flex 内に置く縦線
Left
OR
Right
A
B
VS
C
<div class="flex w-full">
<div>Left</div>
<x-divider direction="vertical">OR</x-divider>
<div>Right</div>
</div>real-world examples — ログイン分割 / card section
ログイン
または
プロフィール
アカウント情報を編集できます。
基本情報
名前: tatun55
メール: tatun@example.com
通知設定
メール通知: ON
プッシュ通知: OFF
使い方
{{-- ただの仕切り線 --}}
<x-divider />
{{-- ラベル付き --}}
<x-divider>OR</x-divider>
{{-- color --}}
<x-divider color="primary">Primary</x-divider>
{{-- ラベル位置 (center / start / end) --}}
<x-divider position="start">Section</x-divider>
{{-- 縦線 (flex 内に置く) --}}
<div class="flex">
<div>Left</div>
<x-divider direction="vertical">OR</x-divider>
<div>Right</div>
</div>