data-theme = lofi
Dropdown
Alpine.js 驱动的通用下拉菜单。trigger 可通过 slot 自定义，label prop 可快速变为按钮。position（底端右对齐默认 / 底端左 / 顶端右 / 顶端左）、size（sm/md/lg）、width（任意 Tailwind w-* class）3 个 prop。菜单内容自由 — 可放链接、按钮或任何元素。
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（底端右对齐默认 / 底端左 / 顶端右 / 顶端左）、size（sm/md/lg）、width（任意 Tailwind w-* class）3 个 prop。菜单内容自由 — 可放链接、按钮或任何元素。
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>