inertia-modal-development

Inertia モーダル開発

概要

inertiaui/modal を使用すると、既存のルートやコントローラーを変更せずに、任意の Laravel ルートをモーダルまたはスライドオーバーで開けます。React と Vue の両方に対応し、ネストされたモーダル、プリフェッチ、ローカルモーダル、ヘッドレスモード、TypeScript をサポートします。

有効にするタイミング

• Laravel + Inertia.js アプリケーションでモーダルまたはスライドオーバーを扱う場合に有効にします。
• コードで ModalLink、Modal、HeadlessModal、ModalRoot、useModal、useModalStack、visitModal、Inertia::modal() が参照されている場合に有効にします。
• ユーザーがルートをモーダルで開く、モーダルの動作を設定する、プリフェッチを使用する、ネストされたモーダルを設定する、またはモーダル間でやり取りすることを希望する場合に有効にします。
• インポートで @inertiaui/modal-vue または @inertiaui/modal-react が参照されている場合に有効にします。

対象範囲

• 対象：モーダルルート、ModalLink、Modal コンポーネント、設定、プリフェッチ、ローカルモーダル、ネストされたモーダル、イベントバス、再読み込みする props、遅延 props、ヘッドレスモード、ベースルート／URL、スタイル設定。
• 対象外：モーダルを使用しない一般的な Inertia.js ルーティング、Laravel 以外のバックエンド。

ワークフロー

1. タスクを特定します（モーダルを開く、動作を設定する、通信を設定するなど）。
2. references/inertia-modal-guide.md を読み、関連するセクションを確認します。
3. 適切なフレームワーク（React または Vue）を使い、リファレンスのパターンを適用します。

基本概念

バックエンド：ルートをモーダルとして開く

コントローラーで Inertia::render() の代わりに Inertia::modal() を使用します。

return Inertia::modal('EditUser', [
    'user' => $user,
    'roles' => Role::pluck('name', 'id'),
]);

ベースルートを指定する場合（URL の変更とブラウザー履歴が有効になります）：

return Inertia::modal('EditUser', ['user' => $user])
    ->baseRoute('users.index');

フロントエンド：アプリのセットアップ

app.js／app.jsx で renderApp を使用します。

// Vue
import { renderApp } from '@inertiaui/modal-vue'
createInertiaApp({
    setup({ el, App, props, plugin }) {
        createApp({ render: renderApp(App, props) })
            .use(plugin)
            .mount(el)
    }
})

// React
import { renderApp } from '@inertiaui/modal-react'
createInertiaApp({
    setup({ el, App, props }) {
        const root = createRoot(el);
        root.render(renderApp(App, props));
    }
});

フロントエンド：ModalLink コンポーネント

<ModalLink href="/users/create">Create User</ModalLink>

// React
<ModalLink href="/users/create">Create User</ModalLink>

フロントエンド：Modal コンポーネント

<Modal>
    <h1>Create User</h1>
    <form></form>
</Modal>

// React
<Modal>
    <h1>Create User</h1>
    <form>{/* ... */}</form>
</Modal>

プログラムからの使用

// Vue
import { visitModal } from '@inertiaui/modal-vue'
visitModal('/users/create')

// React
const { visitModal } = useModalStack()
visitModal('/users/create')

設定

import { putConfig } from '@inertiaui/modal-vue' // or modal-react

putConfig({
    type: 'modal',
    navigate: false,
    useNativeDialog: true,
    appElement: '#app',
    modal: {
        closeButton: true,
        closeExplicitly: false,
        closeOnClickOutside: true,
        maxWidth: '2xl',
        paddingClasses: 'p-4 sm:p-6',
        panelClasses: 'bg-white rounded',
        position: 'center',
    },
    slideover: {
        closeButton: true,
        closeExplicitly: false,
        closeOnClickOutside: true,
        maxWidth: 'md',
        paddingClasses: 'p-4 sm:p-6',
        panelClasses: 'bg-white min-h-screen',
        position: 'right',
    },
})

推奨事項と禁止事項

推奨事項：

• ルートをモーダルとして開く場合は、必ず Inertia::modal() を使用します（Inertia::render() は使用しません）。
• アプリのエントリーポイントで、必ず renderApp を呼び出すか、ModalRoot／ModalStackProvider を設定します。
• URL の変更とブラウザー履歴を有効にする場合は、ModalLink の navigate prop（またはグローバル設定）を使用します。
• 背景のクリックだけを無効にするには closeOnClickOutside を使用し、背景のクリックと Esc キーの両方を無効にするには closeExplicitly を使用します。
• ネストされたモーダルでフォームを送信する場合は、スタック全体が閉じないように Axios を使用します。
• モーダル内で使用する場合は、Deferred と WhenVisible を Inertia ではなくモーダルパッケージからインポートします。

禁止事項：

• renderApp ヘルパーまたは ModalRoot コンポーネントのセットアップを忘れないでください。設定しないとモーダルは動作しません。
• モーダルルートに Inertia::render() を使用しないでください。Inertia::modal() を使用します。
• ネストされたモーダルで router.post()（Inertia の router）を使用しないでください。ベースルートに移動して、すべてのモーダルを閉じてしまいます。代わりに Axios を使用します。
• モーダル内では、Deferred または WhenVisible を @inertiajs/vue3 または @inertiajs/react からインポートしないでください。モーダルパッケージのものを使用します。
• closeOnClickOutside と closeExplicitly の両方で、変換名を指定しないでください。closeExplicitly が closeOnClickOutside より優先されます。

リファレンス

• references/inertia-modal-guide.md