blocs/admin: モーダルコンポーネント

管理画面の Auto Include（resources/views/admin/autoinclude/modal.html 等）で、確認用モーダルの表示と独自モーダルの作成方法について説明します。

定義済みモーダル

ブロック名	用途
modal_logout	ログアウト確認用
modal_store	新規作成確認用
modal_update	更新確認用
modal_destroy	削除確認用
modal_copy	コピー確認用

サンプルコード

<!--
    data-include="modal_update"
    $buttonIcon="fa-solid fa-file"
    $buttonLabel="ボタンのラベル"
-->

モーダル本体のカスタマイズ変数

$modalNoValidate を true にすると HTML5 バリデーションを無効にします（削除時など）。

引数	説明
$modalName	モーダルの識別子
$modalAction	アクションの遷移先
$modalClass	モーダル全体のクラス
$modalTitle	タイトル
$modalMessage	表示メッセージ
$modalNoValidate	HTML5バリデーション無効化

モーダルを開くボタンのカスタマイズ変数

引数	説明
$buttonClass	ボタンのクラス
$buttonIcon	ボタンのアイコン
$buttonLabel	ボタンのラベル

モーダル内の「戻る」ボタン

引数	説明
$buttonModalBackClass	戻るボタンのクラス
$buttonModalBackIcon	戻るボタンのアイコン
$buttonModalBackLabel	戻るボタンのラベル

モーダル内の「実行」ボタン

引数	説明
$buttonModalClass	実行ボタンのクラス
$buttonModalIcon	実行ボタンのアイコン
$buttonModalLabel	実行ボタンのラベル

独自モーダルの作成方法

data-include="modal" で独自モーダルを作成し、各パーツを個別にカスタマイズできます。

カスタマイズ可能なブロック

ブロック名	説明
modal	モーダル全体
modalBody	本文（フォームなど）
modalFooter	フッター全体
modalFooterLeft	フッター左側（戻るボタン）
modalFooterRight	フッター右側（実行ボタン）

サンプルコード

<!-- data-bloc="modalBody" -->
$uploadMessage="ファイルをドラッグしてドロップしてください。"
$uploadDelete="削除"
file: max 2000
<!-- data-endbloc -->

<!-- data-bloc="modalFooterRight" -->
<!--
    data-include="buttonPrimaryModal"
    $buttonModalLabel="インポート"
-->
<!-- data-endbloc -->

<!--
    data-include="modal"
    $modalName="modalImport"
    $modalAction=route(prefix().".import")
    $modalTitle="インポート"
    $modalMessage="ファイルをインポートします。"
-->

モーダル内で使用できるボタン

ブロック名	説明
buttonBackModal	戻るボタン
buttonModal	通常ボタン
buttonPrimaryModal	青色の主ボタン
buttonInfoModal	水色の情報ボタン
buttonSuccessModal	緑色の成功ボタン
buttonDangerModal	赤色の警告ボタン
buttonWarningModal	黄色の注意ボタン

独自モーダルの動的呼び出し

data-modalaction 属性でモーダルの遷移先を動的に変更できます。

data-bs-toggle="modal"
data-bs-target="#modalImport"
data-modalaction=route(prefix().".import", ["id" => $user->id])