README

这是一个简单且灵活的 Laravel Livewire 模态包，可以无缝与任何设计框架（如 Bootstrap、Tailwind CSS 或自定义样式）协同工作。此包允许您快速将模态集成到 Livewire 项目中，而无需受特定 CSS 库的约束。

特性

框架无关性：与 Bootstrap、Tailwind CSS 或自定义设计一起使用。
动态模态：使用 Livewire 事件打开和关闭模态。
可定制：使用您偏好的 CSS 轻松自定义模态。

安装

您可以通过 Composer 安装此包。

composer require sagor110090/livewire-modal

设置

将以下内容添加到您的 app.blade.php 布局中，以在应用程序中启用模态：

<livewire:modals/>

在您的 resources/js/app.js 中包含所需的 JavaScript 和 CSS 文件。

import '../../vendor/sagor110090/livewire-modal/resources/js/loader.js';
import '../../vendor/sagor110090/livewire-modal/resources/css/loader.css';

使用

打开模态

要打开模态，您可以从任何按钮或操作处触发 Livewire 事件。

<button wire:click="$dispatch('openModal', { component: 'edit-user', data: { id: {{ $user->id }} } })">
    Open Modal
</button>

component：您要加载的 Livewire 组件名称。
data：您要传递到组件中的数据（例如，用户 ID）。

关闭模态

要关闭模态，只需触发关闭事件即可。

<button type="button" wire:click="$dispatch('closeModal')">
    Cancel
</button>

示例 Livewire 组件

以下是一个您可能想要与该包一起使用的 Livewire 组件示例。

<?php

namespace App\Livewire;

use App\Models\User;
use Livewire\Component;

class EditUser extends Component
{
    public $user;

    public function mount($id)
    {
        $this->user = User::find($id);
    }

    public function render()
    {
        return view('livewire.edit-user');
    }
}

Blade 视图示例

模态内容可以完全在您的 Livewire 组件视图文件中进行自定义。

<!-- resources/views/livewire/edit-user.blade.php -->
<div>
    <h2>Edit User: {{ $user->name }}</h2>
    <!-- Your form or content here -->
</div>

您可以在此视图中使用任何 CSS 框架或自定义样式。此包不对任何特定设计进行限制。

样式示例

您可以使用任何框架来设计模态。以下是一个使用 Tailwind CSS 的示例。

<div class="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-50">
    <div class="bg-white rounded-lg shadow-lg p-6">
        <!-- Modal Content -->
    </div>
</div>

或者，使用 Bootstrap 或任何其他 CSS 框架。

为什么使用此包？

灵活性：与许多模态包不同，此包不强制使用特定的 CSS 框架，让您完全控制设计。
易于使用：仅通过几个 Livewire 事件即可轻松实现。
动态数据处理：无缝将数据传递到模态中，使它们完全动态。

SEO 考虑

此 Laravel Livewire 模态包设计轻巧且灵活，为开发者提供了一种简单的方法，在多种设计框架中实现可定制的模态。无论是使用 Bootstrap、Tailwind CSS 还是自定义样式，此包都会根据您的需求进行适配，而不会将您锁定在特定的 CSS 库中。采用模块化和框架无关的方法，增强您的 Laravel 项目。

支持

对于任何问题或功能请求，请随时创建一个问题。

许可证

此包是开源软件，根据 MIT 许可证许可。

sagor110090 / livewire-modal

维护者

详细信息