README

为 Livewire 提供美观的 toast 通知

Toast 为在 Livewire 驱动的 Laravel 应用中显示 toast 通知提供无缝体验。

与其他许多 toast 实现不同，Toaster 使得从标准 Controller 或 Livewire Component 发送 toast 通知变得轻松。您无需考虑将“闪光”内容发送到会话或从 Livewire 组件“派发浏览器事件”。只需发送 toast，Toaster 就会相应地路由消息。

展示

内容

安装
使用方法
视图定制
测试
更新日志
安全
致谢
许可

安装

您可以通过 composer 安装此包

composer require masmerise/livewire-toaster

您可以发布包的配置文件

php artisan vendor:publish --tag=toaster-config

这是 toaster.php 配置文件的内容

return [

    /**
     * Add an additional second for every 100th word of the toast messages.
     *
     * Supported: true | false
     */
    'accessibility' => true,

    /**
     * The vertical alignment of the toast container.
     *
     * Supported: "bottom" or "top"
     */
    'alignment' => 'bottom',

    /**
     * Allow users to close toast messages prematurely.
     *
     * Supported: true | false
     */
    'closeable' => true,

    /**
     * The on-screen duration of each toast.
     *
     * Minimum: 3000 (in milliseconds)
     */
    'duration' => 3000,

    /**
     * The horizontal position of each toast.
     *
     * Supported: "center", "left" or "right"
     */
    'position' => 'right',

    /**
     * Whether messages passed as translation keys should be translated automatically.
     *
     * Supported: true | false
     */
    'translate' => true,
];

准备模板

接下来，您需要在主模板中使用 <x-toaster-hub /> 组件

<!DOCTYPE html>
<html>
<head>
    <!-- ... -->
</head>

<body>
    <!-- Application content -->

    <x-toaster-hub /> <!-- 👈 -->
</body>
</html>

配置脚本

之后，您需要将 Toaster 插件与您的 resources/js/app.js 包注册，以开始监听传入的 toast

import Alpine from 'alpinejs';
import Toaster from '../../vendor/masmerise/livewire-toaster/resources/js'; // 👈

Alpine.plugin(Toaster); // 👈

window.Alpine = Alpine;
Alpine.start();

Tailwind 样式

注意如果您要自定义 Toaster 的默认视图，请跳过此步骤。

Toaster 提供了一个使用 Tailwind CSS 默认设置的极简视图。

如果您对默认的 toast 外观感到满意，您需要将其与 Tailwind 的 purge 列表一起注册

module.exports = {
    content: [
        './resources/**/*.blade.php',
        './vendor/masmerise/livewire-toaster/resources/views/*.blade.php', // 👈
    ],
}

否则，请参阅视图定制。

使用方法

从后端发送 toast

注意 Toaster 支持一次派发多个 toast，您不必局限于派发单个 toast。

Toaster

派发 toast 消息的标准推荐方式是通过 Toaster 门面。

use Masmerise\Toaster\Toaster;

final class RegistrationForm extends Component
{
    public function submit(): void
    {
        $this->validate();
        
        User::create($this->form);
        
        Toaster::success('User created!'); // 👈
    }
}

如果您需要更精细的控制，您始终可以直接使用 PendingToast 类，Toaster 通过它来代理其调用

use Masmerise\Toaster\PendingToast;

final class RegistrationForm extends Component
{
    public function submit(): void
    {
        $this->validate();
        
        $user = User::create($this->form);
        
        // 👇
        PendingToast::create()
            ->when($user->isAdmin(),
                fn (PendingToast $toast) => $toast->message('Admin created')
            )
            ->unless($user->isAdmin(),
                fn (PendingToast $toast) => $toast->message('User created')
            )
            ->success();
    }
}

Toastable

您可以使任何类 Toastable 来派发 toast

use Masmerise\Toaster\Toastable;

final class ProductListing extends Component
{
    use Toastable; // 👈

    public function check(): void
    {
        $result = Product::query()
            ->tap(new Available())
            ->count();
            
        if ($result < 5) {
            $this->warning('The quantity on hand is critically low.'); // 👈
        }
    }
}

重定向

无论您在哪里从您的应用返回 RedirectResponse，您都可以将任何 Toaster 方法链接起来以派发 toast 消息

final class CompanyController extends Controller
{
    /** @throws ValidationException */
    public function store(Request $request): RedirectResponse
    {
        $validator = Validator::make($request->all(), [...]);
        
        if ($validator->fails()) {
            return Redirect::back()
                ->error('The form contains several errors'); // 👈
        }
    
        Company::create($validator->validate());
        
        return Redirect::route('dashboard')
            ->info('Company created!'); // 👈
    }
}

当然，这不仅仅限于 Controller，您也可以在 Livewire Component 中重定向。

依赖注入

如果您想保持“纯净”，您还可以注入 Collector 合约并使用 ToastBuilder 来派发 toast

use Masmerise\Toaster\Collector;
use Masmerise\Toaster\ToasterConfig;
use Masmerise\Toaster\ToastBuilder;

final readonly class SendEmailVerifiedNotification
{
    public function __construct(
        private ToasterConfig $config,
        private Collector $toasts,
    ) {}
    
    public function handle(Verified $event): void
    {
        $toast = ToastBuilder::create()
            ->duration($this->config->duration)
            ->success()
            ->message("Thank you, {$event->user->name}!")
            ->get();
            
        $this->toasts->collect($toast);
    }
}

从前端发送 toast

您可以从任何地方调用全局可用的 Toaster 实例来派发任何 toast 消息

<button @click="Toaster.success('Form submitted!')">
    Submit
</button>

可用方法： error、info、warning 和 success

消息自动翻译

注意必须将 translate 配置值设置为 true。

而不是这样做

Toaster::success(
    Lang::get('path.to.translation', ['replacement' => 'value'])
);

Toaster 使您能够这样做

Toaster::success('path.to.translation', ['replacement' => 'value']);

您可以随意混合搭配，没有任何问题

Toaster::info('user.created', ['name' => $user->full_name]);
Toaster::info('You now have full access!');

您可以在任何时候做任何您想做的事情

无障碍性

注意必须将 accessibility 配置值设置为 true。

Toaster 会为 toast 的每 100 个单词额外添加一秒钟的屏幕持续时间。这样，您的用户将有足够的时间阅读比通常稍大的 toast。

因此，如果您的基准持续时间值为3秒，并且您的通知包含223个单词，通知的总屏幕持续时间将为3 + 2 = 5秒

单元测试

注意如果您使用消息的自动翻译，您应该确认是否正确传递了翻译键，而不是由Laravel的翻译器替换的易读消息。否则，您的测试将失败，因为单元测试期间消息没有翻译。

Toaster提供了一些测试功能，以便您构建健壮的应用程序

use Masmerise\Toaster\Toaster;

final class RegisterUserControllerTest extends TestCase
{
    #[Test]
    public function users_can_register(): void
    {
        // Arrange
        Toaster::fake();
        Toaster::assertNothingDispatched();
        
        // Act
        $response = $this->post('users', [ ... ]);
        
        // Assert
        $response->assertRedirect('profile');
        Toaster::assertDispatched('Welcome!');
    }
}

视图定制

警告您必须保留x-data和x-init指令，并且您必须继续使用x-for循环。否则，为Toaster提供动力的Alpine组件将开始出现故障。

尽管默认的通知很漂亮，但它们可能不适合您的设计，您可能想自定义它们。

您可以通过发布Toaster的视图来实现这一点

php artisan vendor:publish --tag=toaster-views

hub.blade.php视图将被发布到您的应用程序的resources/views/vendor/toaster目录。请随意修改任何您喜欢的内容。

可用的`viewData`

$alignment - 可以用于根据配置垂直对齐通知容器
$closeable - 是否应由Blade组件渲染关闭按钮
$config - 默认配置值，由Alpine组件使用
$position - 可以根据配置定位通知
$toasts - Toaster通过会话闪现的通知，由Alpine组件使用

测试

composer test

更新日志

请参阅变更日志了解最近有哪些变化。

安全

如果您发现任何与安全相关的问题，请通过电子邮件support@muhammedsari.me联系，而不是使用问题跟踪器。

致谢

许可

MIT许可（MIT）。请参阅许可文件获取更多信息。

ingress-it-solutions / livewire-toaster

维护者

详细信息

README

为 Livewire 提供美观的 toast 通知

展示

内容

安装

准备模板

配置脚本

Tailwind 样式

使用方法

从后端发送 toast

Toaster

Toastable

重定向

依赖注入

从前端发送 toast

消息自动翻译

无障碍性

单元测试

视图定制

可用的`viewData`

测试

更新日志

安全

致谢

许可

ingress-it-solutions / livewire-toaster

维护者

详细信息

README

为 Livewire 提供美观的 toast 通知

展示

内容

安装

准备模板

配置脚本

Tailwind 样式

使用方法

从后端发送 toast

Toaster

Toastable

重定向

依赖注入

从前端发送 toast

消息自动翻译

无障碍性

单元测试

视图定制

可用的viewData

测试

更新日志

安全

致谢

许可

可用的`viewData`