Modal
Alpine x-data 駆動のオーバーレイダイアログ。trigger slot に置いた要素をクリックで開く、または別所から $dispatch("open-modal-{id}") で開く。size (sm/md/lg/xl/full)・title・showClose・closeOnBackdrop の 5 props。背景 click / Escape / × ボタンで閉じる。x-trap で focus trap、x-teleport で body 直下に描画。
default size=md / showClose=true / closeOnBackdrop=true — trigger slot をクリックで開く。title はオプションだが、ヘッダー左に見出しが出るので付けるのが一般的
Confirm
これは最小構成の modal です。close button 有り、背景クリック・Escape で閉じます。
title を省略した場合 — ヘッダーは × ボタンのみになる (title が必須でないことを確認)
title を渡さない modal。シンプルな確認 / イメージギャラリー / Lightbox のような用途。
size variants — sm / md / lg / xl / full
Small modal
最小サイズ。確認ダイアログや短い通知向け。
Medium modal (default)
デフォルトサイズ。一般的なフォームや詳細表示。
Large modal
複数列のフォームや長文の確認画面向け。
Extra-large modal
テーブル表示やプレビュー画面に。
Full-width modal
viewport いっぱい (左右 mx-4 マージン)。エディタや大型プレビュー向け。
title — header の有無 (showClose と独立)
title が無くても showClose=true なら × ボタンだけ右上に出ます。
設定を保存しますか？
title 有りなら左に見出し、右に × ボタンが並びます。aria-labelledby も自動付与。
showClose — × ボタンの表示制御
× ボタン無し
× ボタン無し。Escape または背景 click、または actions 内の専用ボタンで閉じる前提。
× ボタン有り (default)
右上に × ボタンが表示されます。
closeOnBackdrop — 背景クリック挙動
背景 click で閉じる (default)
背景 (半透明黒の外側) をクリックで閉じます。Escape も有効。
背景 click では閉じない
背景クリックでは閉じません。誤操作を防ぎたいフォーム用。× か Escape、actions ボタンで閉じる。
actions slot — フッターの操作ボタン
削除の確認
このアイテムを削除します。この操作は取り消せません。
新規プロジェクト
id + dispatch — 別所から開く (trigger slot 不要)
id="welcome" を渡しておき、別の任意のボタンから
$dispatch('open-modal-welcome') で開きます。
閉じるのは $dispatch('close-modal-welcome')。
ようこそ
これは id="welcome" 付きの modal で、ページ内の任意の場所から
$dispatch('open-modal-welcome') で開けます。
設定をリセット
すべての設定をデフォルトに戻します。よろしいですか？
使い方
{{-- 1. 最小: trigger slot 付き --}}
<x-modal>
<x-slot:trigger>
<x-button>Open</x-button>
</x-slot:trigger>
<p>本文</p>
</x-modal>
{{-- 2. title + size + actions slot (確認ダイアログ典型) --}}
<x-modal title="削除の確認" size="sm" :closeOnBackdrop="false">
<x-slot:trigger>
<x-button color="error">削除…</x-button>
</x-slot:trigger>
<p>本当に削除しますか？</p>
<x-slot:actions>
<x-button appearance="ghost" @click="open = false">キャンセル</x-button>
<x-button color="error" @click="open = false">削除</x-button>
</x-slot:actions>
</x-modal>
{{-- 3. × ボタン無し + 背景 click で閉じない (フォーム入力中の誤閉じ防止) --}}
<x-modal title="新規作成" :showClose="false" :closeOnBackdrop="false">
<x-slot:trigger><x-button>＋ 作成</x-button></x-slot:trigger>
<!-- form... -->
<x-slot:actions>
<x-button appearance="ghost" @click="open = false">キャンセル</x-button>
<x-button color="primary" @click="open = false">保存</x-button>
</x-slot:actions>
</x-modal>
{{-- 4. id を渡して別所の任意のボタンから dispatch で開く --}}
<x-modal id="welcome" title="ようこそ">
<p>本文</p>
</x-modal>
<button x-on:click="$dispatch('open-modal-welcome')">開く</button>
<!-- 閉じるのは $dispatch('close-modal-welcome') -->
{{-- size: sm / md (default) / lg / xl / full --}}
{{-- props: id, title, size, showClose=true, closeOnBackdrop=true --}}
{{-- 背景 click / Escape / × / actions の @click="open = false" で閉じる --}}
{{-- x-trap で focus trap、x-teleport で body 直下に描画 --}}