data-theme = lofi
Dropdown
Alpine.js で開閉する汎用ドロップダウン。trigger を slot で差し替え可能、label prop で簡易ボタン化も可能。position (bottom-end default / bottom-start / top-end / top-start)・size (sm/md/lg)・width (任意の Tailwind w-* class) の 3 props。menu の中身は自由スロット — リンクでもボタンでも何でも入る。
default
position=bottom-end / size=md / width=w-52 / label="メニュー"
↑ クリックで開閉、外側クリック / Esc で閉じる
positions — bottom-end / bottom-start / top-end / top-start
sizes — sm / md / lg
widths — w-40 / w-52 (default) / w-72 / w-96
custom trigger — slot=trigger でアイコン / アバター等に差し替え
使い方
{{-- 1. 最小: label でボタン化 --}}
<x-dropdown label="メニュー">
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-200">プロフィール</a>
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-200">ログアウト</a>
</x-dropdown>
{{-- 2. 位置・サイズ・幅を変える --}}
<x-dropdown label="設定" position="top-start" size="sm" width="w-64">
...
</x-dropdown>
{{-- 3. trigger を自前で組む (アバター・アイコンボタン等) --}}
<x-dropdown position="bottom-start">
<x-slot:trigger>
<img src="/avatar.png" class="w-10 h-10 rounded-full cursor-pointer">
</x-slot:trigger>
<a href="#" class="block px-4 py-2">プロフィール</a>
</x-dropdown>
data-theme = night
Dropdown
Alpine.js で開閉する汎用ドロップダウン。trigger を slot で差し替え可能、label prop で簡易ボタン化も可能。position (bottom-end default / bottom-start / top-end / top-start)・size (sm/md/lg)・width (任意の Tailwind w-* class) の 3 props。menu の中身は自由スロット — リンクでもボタンでも何でも入る。
default
position=bottom-end / size=md / width=w-52 / label="メニュー"
↑ クリックで開閉、外側クリック / Esc で閉じる
positions — bottom-end / bottom-start / top-end / top-start
sizes — sm / md / lg
widths — w-40 / w-52 (default) / w-72 / w-96
custom trigger — slot=trigger でアイコン / アバター等に差し替え
使い方
{{-- 1. 最小: label でボタン化 --}}
<x-dropdown label="メニュー">
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-200">プロフィール</a>
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-200">ログアウト</a>
</x-dropdown>
{{-- 2. 位置・サイズ・幅を変える --}}
<x-dropdown label="設定" position="top-start" size="sm" width="w-64">
...
</x-dropdown>
{{-- 3. trigger を自前で組む (アバター・アイコンボタン等) --}}
<x-dropdown position="bottom-start">
<x-slot:trigger>
<img src="/avatar.png" class="w-10 h-10 rounded-full cursor-pointer">
</x-slot:trigger>
<a href="#" class="block px-4 py-2">プロフィール</a>
</x-dropdown>