Toast 组件现已升级

版本 ^1.0.10

基于用户反馈和我们的专业判断，Flux 的 Toast 组件进行了多项改进。

更醒目的显示效果

首先，我们增加了阴影效果，使 Toast 在页面上更加突出。

我们延长了上滑动画的持续时间，让 Toast 的出现更加引人注目。

现在您可以使用三种新的变体为 Toast 消息添加上下文：

- 成功 (success)

- 危险 (danger)

- 警告 (warning)

使用方式：

Flux::toast('操作失败', variant: 'danger');

定位功能

现在您可以通过 position 属性指定 Toast 在页面上的显示位置：

<flux:toast position="top right" />

如果页面顶部有导航栏，可以添加额外的内边距：

<flux:toast position="top right" class="pt-24" />

Flux 会根据位置自动调整动画效果：

- 顶部的 Toast 会从侧面滑入

- 底部的 Toast 会从底部上滑

页面跳转时保持显示

在应用开发中，常见的做法是在重定向前显示 Toast：

Flux::toast(...);

$this->redirect('...', navigate: true);

如果希望在页面跳转后仍然显示 Toast，可以在布局中使用 @persist 指令：

@persist('toast')

    <flux:toast />

@endpersist

注意：此功能在 Livewire 3.5.10 版本中已修复了浏览器页面间处理弹窗的问题。