向用户提供关于操作或事件反馈的消息，通常是临时的且可关闭的。
要使用 Livewire 的 Toast 组件，您必须在页面某处包含它；通常在您的布局文件中：
<body> <!-- ... --> <flux:toast /></body>如果您使用 wire:navigate 在页面间导航，您可能希望持久化 toast 组件，以便 toast 消息在离开页面时不会突然消失。
<body> <!-- ... --> @persist('toast') <flux:toast /> @endpersist</body>一旦 toast 组件在页面上存在，您就可以使用 Flux::toast() 方法从您的 Livewire 组件中触发 toast 消息：
<?phpnamespace App\Livewire;use Livewire\Component;use Flux\Flux;class EditPost extends Component{ public function save() { // ... Flux::toast('Your changes have been saved.'); }}您也可以使用 Flux 的魔法方法直接从 Alpine 触发 toast：
<button x-on:click="$flux.toast('Your changes have been saved.')"> Save changes</button>或者您可以使用 window.Flux 全局对象从应用程序中的任何 JavaScript 触发 toast：
<script> let button = document.querySelector('...') button.addEventListener('alpine:init', () => { Flux.toast('Your changes have been saved.') })</script>$flux 和 window.Flux 都支持以下方法参数签名：
Flux.toast('Your changes have been saved.')// Or...Flux.toast({ heading: 'Changes saved', text: 'Your changes have been saved.', variant: 'success',})使用标题为 toast 提供额外的上下文。
Flux::toast( heading: 'Changes saved.', text: 'You can always update this in your settings.',);使用 variant 属性来更改 toast 的视觉样式。
Flux::toast(variant: 'success', ...);Flux::toast(variant: 'warning', ...);Flux::toast(variant: 'danger', ...);默认情况下，toast 将出现在页面右下角。您可以使用 position 属性来自定义此位置。
<flux:toast position="top end" /><!-- Customize top padding for things like navbars... --><flux:toast position="top end" class="pt-24" />默认情况下，toast 将在5秒后自动消失。您可以通过向 duration 属性传递毫秒数来自定义此持续时间。
// 1 second...Flux::toast(duration: 1000, ...);要显示堆叠的 toast，您可以将 flux:toast 组件包装在 flux:toast.group 组件中。默认情况下，堆叠中的 toast 会重叠，并在悬停时展开以垂直显示每个 toast。
<flux:toast.group> <flux:toast /></flux:toast.group>使用 expanded 属性始终以展开状态显示 toast 堆叠，使所有 toast 一次性可见。
<flux:toast.group expanded> <flux:toast /></flux:toast.group>组组件还接受 position 属性来控制 toast 堆叠在屏幕上的显示位置。
<flux:toast.group position="top end"> <flux:toast /></flux:toast.group>|
属性
|
描述
|
|---|---|
| position |
toast 在屏幕上的位置。选项：bottom end (默认), bottom center, bottom start, top end, top center, top start。
|
|
属性
|
描述
|
|---|---|
| position |
toast 组在屏幕上的位置。选项：bottom end (默认), bottom center, bottom start, top end, top center, top start。
|
| expanded |
如果为 true，始终以展开状态显示 toast 堆叠，使所有 toast 一次性可见。默认：false。
|
用于从 Livewire 组件触发 toast 的 PHP 方法。
|
参数
|
描述
|
|---|---|
| heading |
toast 的可选标题文本。
|
| text |
toast 的主要内容文本。
|
| variant |
视觉样式。选项：success, warning, danger。
|
| duration |
持续时间（毫秒）。使用 0 表示永久 toast。默认：5000。
|
用于从 Alpine 组件触发 toast 的 Alpine.js 魔法方法。它可以以两种方式使用：
// Simple usage with just a message...$flux.toast('Your changes have been saved')// Advanced usage with full configuration...$flux.toast({ heading: 'Success!', text: 'Your changes have been saved', variant: 'success', duration: 3000})|
参数
|
描述
|
|---|---|
| message |
包含 toast 消息的字符串。使用这种简单形式时，消息成为 toast 的文本内容。
|
| options |
或者，一个包含以下内容的对象：
- heading: 可选标题文本 - text: 主要消息文本 - variant: 视觉样式 (success, warning, danger) - duration: 显示时间（毫秒） |