README

此包允许您通过 Laravel Livewire 组件动态显示 Bootstrap 弹窗。

文档

要求
安装
使用
- 显示弹窗
- 触发事件
发布资源
- 自定义配置
- 自定义视图

要求

Bootstrap 5 必须首先通过 webpack 安装

安装

需要此包

composer require pleshkovpa/toasts-livewire

将 livewire:toasts 组件添加到您的应用布局视图

<livewire:toasts/>
<livewire:scripts/>
<script src="{{ asset('js/app.js') }}"></script>

在您的应用 JavaScript 文件中要求 ../../vendor/pleshkovpa/toasts-livewire/resources/js/toasts

require('@popperjs/core');
require('bootstrap');
require('../../vendor/pleshkovpa/toasts-livewire/resources/js/toasts');

使用

显示弹窗

通过触发 showToast 事件并带有颜色和消息来显示弹窗

public function save()
{
    $this->validate();

    $this->user->update([
        'name' => $this->name,
        'email' => $this->email,
    ]);

    $this->emit('showToast', 'success', __('User updated!'));
}

颜色应该是 Bootstrap 颜色名称，例如 success、danger、info。

触发事件

您可以在视图中触发事件

<button type="button" wire:click="$emit('showToast', 'danger', 'Closing!')">
    {{ __('Close') }}
</button>

或在您的组件中，就像任何正常的 Livewire 事件一样

public function save()
{
    $this->validate();

    // save the record

    $this->emit('showToast', 'info', __('Record saved!'));
}

发布资源

自定义配置

通过发布配置文件来自定义弹窗配置

php artisan vendor:publish --tag=toasts-livewire:config

现在您可以轻松地更改诸如隐藏延迟和错误消息之类的设置。

自定义视图

通过发布视图文件使用您自己的弹窗视图

php artisan vendor:publish --tag=toasts-livewire:views

现在编辑 resources/views/vendor/toasts-livewire 内部的视图文件。包将使用此视图来渲染组件。

pleshkovpa / toasts-livewire

维护者

详细信息