README

Momentum Modal 是一个 Laravel 包，允许您为 Inertia 应用实现后端驱动的模态对话框。

在后台定义模态路由，当您访问对话框路由时动态渲染它们。

查看演示应用，以了解 Modal 包的实际应用。

安装
设置
- Vite
- Laravel Mix
用法
高级 Inertia
Momentum

安装

Laravel

将包安装到您的 Laravel 应用中。

composer require based/momentum-modal

Vue 3

安装前端包。

npm i momentum-modal
# or
yarn add momentum-modal

警告该包在底层使用 axios。如果您的应用已经将 axios 作为依赖项使用，请确保将其锁定到 Inertia 所使用的相同版本。
npm i axios@1.2.0

React

安装前端包。

npm i momentum-modal-react
# or
yarn add momentum-modal-react

警告该包在底层使用 axios。如果您的应用已经将 axios 作为依赖项使用，请确保将其锁定到 Inertia 所使用的相同版本。
npm i axios@1.6.0

设置

Modal 是一个无头组件，这意味着您对其外观有完全控制权，无论是模态对话框还是滑动面板。您可以自由使用任何第三方解决方案来驱动您的模态，例如 Headless UI。

将 Modal 组件放置在布局中的任何位置。

Vue 3 设置

<script setup>
import { Modal } from 'momentum-modal'
</script>

<template>
    <div>
        <!-- layout -->
        <Modal />
    </div>
</template>

React 设置

import {Modal} from 'momentum-modal-react';

export function Layout({children}) {
  return (
    <>
      {children}
      <Modal />
    </>
  );
}

使用您用于渲染 Inertia 页面的相同组件解析器设置一个 modal 插件。

Vite

// Vue
import { modal } from "momentum-modal"

createInertiaApp({
  resolve: (name) => resolvePageComponent(name, import.meta.glob("./Pages/**/*.vue")),
  setup({ el, app, props, plugin }) {
    createApp({ render: () => h(app, props) })
      .use(modal, {
        resolve: (name) => resolvePageComponent(name, import.meta.glob("./Pages/**/*.vue")),
      })
      .use(plugin)
      .mount(el)
  }
})

// React
globalThis.resolveMomentumModal = (name) => {
  const pages = import.meta.glob('./Pages/**/*.jsx', {eager: true});
  return pages[`./Pages/${name}.jsx`];
};

createInertiaApp({
  resolve: (name) => {
    const pages = import.meta.glob('./Pages/**/*.jsx', {eager: true});
    return pages[`./Pages/${name}.jsx`];
  },
  setup({el, App, props}) {
    createRoot(el).render(<App {...props} />);
  },
});

Laravel Mix

// Vue
import { modal } from "momentum-modal"

createInertiaApp({
  resolve: (name) => require(`./Pages/${name}`),
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(modal, {
        resolve: (name) => import(`./Pages/${name}`),
      })
      .use(plugin)
      .mount(el)
  }
})

// React
globalThis.resolveMomentumModal = (name) => require(`./Pages/${name}`);

createInertiaApp({
  resolve: (name) => require(`./Pages/${name}`),
  setup({el, App, props}) {
    createRoot(el).render(<App {...props} />);
  },
});

用法

模态有自己的路由，让您可以通过直接 URL 访问它们。为您的模态页面定义路由。

// background context / base page
Route::get('{user}', ShowUser::class)
    ->name('users.show');

// modal route
Route::get('{user}/{tweet}', ShowTweet::class)
    ->name('users.tweets.show');

从控制器中渲染模态。指定 base 路由以在直接访问模态时渲染背景。

class ShowTweet extends Controller
{
    public function __invoke(User $user, Tweet $tweet)
    {
        return Inertia::modal('Tweets/Show')
            ->with([
                'user' => $user,
                'tweet' => $tweet,
            ])
            ->baseRoute('users.show', $user);
    }
}

在此处找到 Vue 3 的示例实现。

高级 Inertia

通过我的书 Advanced Inertia 将您的 Inertia.js 技能提升到下一个层次。学习高级概念，并使用 Laravel 和 Inertia.js 创建易于构建和维护的应用。

Momentum

Momentum 是一系列旨在改善您构建 Inertia 驱动应用体验的包。

Modal — 为 Inertia 应用构建动态模态对话框
Preflight — Inertia 应用的实时后端驱动验证
Paginator — Laravel 分页的无头包装器
Trail — 使用 Inertia 的前端包来使用 Laravel 路由
Lock — 使用 Inertia 的前端包来使用 Laravel 权限
Layout — Vue 3 应用的持久布局
Vite Plugin Watch — Vite 插件，在文件更改时运行 shell 命令

致谢

许可证

MIT 许可证 (MIT)。请参阅许可证文件以获取更多信息。

基于 / 动量模态

维护者

详情