README

👉 对于喜欢后端编码的朋友们 😉

使用 laravel 项目和 livewire 3 + Alpinejs 轻松创建模态对话框，并作为 livewire 组件管理模态对话框。

目前仍处于测试版

• 安装
• 设置
  • 发布配置
  • 主题
    • Bootstrap 安装
    • Tailwind 安装
    • 更改主题
• 用法
  • 创建模态框
  • 显示模态框
  • 隐藏模态框
  • 选项
    • 可用选项
  • 方法
  • 添加表单
• 定制化
• 动画
• 不工作？

安装

composer require larawire-garage/larawire-modals

设置

发布配置

php artisan vendor:publish --tag=larawire-modals-configs

主题

目前支持 2 个主题。

• Bootstrap
• Tailwind

Bootstrap 安装

您可以使用 CDN 链接应用 Bootstrap。
如果您使用像 npm 这样的包管理器，请使用 Bootstrap 文档 安装。当 导入 Bootstrap 时，将以下代码添加到 app.js 文件中。

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'

window.bootstrap = bootstrap; // 👈 required 

Tailwind 安装

您可以使用 CDN 链接应用 Tailwindcss。
如果您使用像 npm 这样的包管理器，请使用 Tailwindcss 文档 安装。然后，将以下代码添加到 tailwind.config.js 文件中。

/** @type {import('tailwindcss').Config} */
module.exports = { 
    content: [
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
        "./resources/**/*.vue",
        "./vendor/larawire-garage/larawire-modals/**/*.blade.php", // 👈 Add this line
    ], 
    //...
}

如果不起作用？ 请查看此处

更改主题

您可以在 larawire-modals 配置文件中添加您项目使用的主题。

// configs/larawire-modals.php
return [
    'theme' => 'bootstrap',
    // OR
    'theme' => 'tailwind',

    // ....
];

您还可以在模态组件中的模态变量内更改主题。

// app/Livewire/MODAL_PATH/MYMODAL.php

class MYMODAL extends ModalComponent{
    public array $modal = [
        'theme' => 'bootstrap',
        // OR
        'theme' => 'tailwind',
        //...
    ];
}

用法

使用以下命令创建模态组件。

php artisan make:modal MyModal

现在您可以使用模态组件，就像使用常规 livewire 组件一样。默认情况下，此命令创建组件

• 类 : app/Livewire/Modals
• 视图 : resources/views/livewire/modals

目录。您可以在 larawire-modals 配置文件中更改它。

// configs/larawire-modals.php
return [
    'class_namespace' => 'App\\Livewire\\Modals',
     
    'view_path' => resource_path('views/livewire/modals'),

    // ....
];

要显示模态对话框

$this->dispatch('show')->to(MyModal::class);

要关闭模态对话框

• 从其他组件

$this->dispatch('close')->to(MyModal::class);

• 从模态组件

$this->dispatch('close')->self();
//or
$this->closeModal();

选项

模态组件有一个包含模态选项的公共变量 $modal。

public array $modal = [
    'id' => 'my-modal',
    'title' => 'My Modal',
    //...
];

可用选项

• id - 模态 ID
• title - 标题栏上的模态标题文本
• theme - 项目中使用的主题（bootstrap 或 tailwind）。可以在 larawire-modals 配置文件中定义
• resetBeforeShow - 如果这是 true，则模态组件的公共变量在显示模态框之前自动重置。可以在 larawire-modals 配置文件中定义
• resetValidationBeforeShow - 如果这是 true，则在显示模态框之前自动重置模态组件的验证错误包。可以在 larawire-modals 配置文件中定义

方法

• showModal() - 显示模态对话框
• closeModal() - 关闭模态对话框

您可以定义

• beforeShow() - 在显示模态对话框之前运行
• beforeClose() - 在关闭模态对话框之前运行

添加表单

如果您的模态包含表单，请向模态组件添加 formSubmit 属性。当 formSubmit 属性定义时，模态 body 和 footer 插槽会自动由具有 wire:submit="[form-submit-value]" 属性的表单标签覆盖。

<x-larawire::modal :modal="$modal" formSubmit="createNewUser"> 
                                    <!-- 👆 Add form submit parameter here -->
    <x-slot name="body">
        <!-- Modal body content -->

         <!-- Add form content here -->
          <input type="text" class="" name="name" id="name-input" wire:model="name">
    </x-slot>

    <x-slot name="footer" :defaultClose="true">
        <!-- Modal footer content -->
        
        <!-- 👇 Add button for submit the form -->
        <button type="submit" wire:loading.attr="disabled" wire:target='createNewUser'>
            <span wire:loading.class="d-none hidden">Create</span>
            <span wire:loading wire:target="createNewUser">Creating...</span>
        </button> 

    </x-slot>

</x-larawire::modal>

定制化

在 larawire-modals 配置文件中，您可以更改模态容器类的类。也可以在模态组件的模态变量中更改。

// configs/larawire-modals.php

return [
    // ...
     'theme-classes'             => [
        'bootstrap' => [
            'backdropClasses'       => '',
            'containerClasses'      => '',
            'windowClasses'         => '',
            'headerClasses'         => '',
            'headerCloseBtnClasses' => '',
            'bodyClasses'           => '',
            'footerClasses'         => '',
            'footerCloseBtnClasses' => '',
        ],
        'tailwind'  => [
            'backdropClasses'       => '',
            'containerClasses'      => '',
            'windowClasses'         => '',
            'headerClasses'         => '',
            'headerCloseBtnClasses' => '',
            'bodyClasses'           => '',
            'footerClasses'         => '',
            'footerCloseBtnClasses' => '',
        ],
    ],
];

// app/Livewire/MODAL_PATH/MYMODAL.php

class MYMODAL extends ModalComponent{
    public array $modal = [
        /** available if needs to customize */
        'backdropClasses'       => '',
        'containerClasses'      => '',
        'windowClasses'         => '',
        'headerClasses'         => '',
        'headerCloseBtnClasses' => '',
        'bodyClasses'           => '',
        'footerClasses'         => '',
        'footerCloseBtnClasses' => '',
        //...
    ];
}

如果更改类仍然不起作用？
要自定义模态框的样式，您可以发布视图并进行编辑。

php artisan vendor:publish --tag=larawire-modals-views

动画

您还可以更改模态框的动画效果。

Bootstrap 主题 :
在 Bootstrap 中，根据 Bootstrap 文档更改模态框动画。

Tailwind 主题 :
在 Tailwind 主题下，在 them larawire-modals 配置文件的 animation 键中更改它。您还可以在模态组件的模态变量中更改它。

// app/Livewire/MODAL_PATH/MYMODAL.php

class MYMODAL extends ModalComponent{
    public array $modal = [
        /** Only for tailwind */
        'animation' => 'slide-down', // <==  slide-down, scale-up
        //...
    ];
}

要深入了解自定义动画类，请检查 larawire-modals 配置文件中的 animation-classes 键。在 Tailwind 主题中，模态框使用 alpinejs 和 tailwindcss 动画类来动画化模态框。

功能不正常

Tailwind

如果模态框功能不正常，例如

• 模态框渲染不正确
• 动画不工作

将以下类数组添加到 safelist 数组中

如果您在配置文件或类模态变量中更改了类，这些类也需要包含在这里

/** @type {import('tailwindcss').Config} */
module.exports = { 
    content: [
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
        "./resources/**/*.vue",
        "./vendor/larawire-garage/larawire-modals/**/*.blade.php", // 👈 Add this line
    ], 

    /**
     * ⚠️⚠️⚠️ If in-case (content path) 👆 not working.⚠️⚠️⚠️ 
     * 👇 Add this block
     */ 
    safelist: [ 
        'backdrop-blur-sm',
        'bg-white', 'bg-gray-400', 'bg-gray-800/30', 'bg-red-300',
        'border', 'border-b', 'border-t',
        'dark:bg-gray-900', 'dark:text-gray-100',
        'duration-200', 'duration-300',
        'ease-in', 'ease-out',
        'fixed', 'inset-0',
        'flex', 'flex-none', 'grow', 'items-center', 'justify-between', 'self-end',
        'font-bold', 
        'h-fit', 'h-screen',
        'hover:bg-gray-800', 'hover:text-gray-100', 'hover:text-red-600',
        'opacity-0', 'opacity-100',
        'overflow-y-auto', 'overflow-y-hidden',
        'p-5', 'px-2', 'px-5', 'py-1', 'py-2', 'py-3', 'md:p-14',
        'rounded-b-lg', 'rounded-lg', 'rounded-t-lg',
        'sm:scale-100', 'sm:scale-95',
        'text-3xl', 'text-black', 'text-end', 'text-gray-900',
        'transform',
        'transition', 'transition-all',
        'translate-y-0', 'translate-y-4', 'sm:translate-y-0', '-translate-y-8',
        'w-full', 'w-3/5',
        'z-50',
    ]
    //...
}

!!! 🎉🎉🎉 欢乐 🎉🎉🎉 !!!