Languages

Version

Theme

通知生成器

发送通知

首先,必须确保该扩展包已经安装 - 并且 Blade 布局文件中应该引入 @livewire('notifications')

通知使用 fluent API 构造的 Notification 对象发送。在 Notification 对象上调用 send() 方法会发送通知,并显示在应用中。由于使用 session 来闪存通知,可以在代码中的任意位置发送通知,包括 Javascript,而不只是在 Livewire 组件中。

<?php
 
namespace App\Http\Livewire;
 
use Filament\Notifications\Notification;
use Livewire\Component;
 
class EditPost extends Component
{
public function save(): void
{
// ...
Notification::make()
->title('Saved successfully')
->success()
->send();
}
}

Notification

标题

通知的主要消息在标题(Title)中展示。你可以这样设置标题:

use Filament\Notifications\Notification;
 
Notification::make()
->title('Saved successfully')
->send();

或者使用 JavaScript:

new Notification()
.title('Saved successfully')
.send()

如果传入标题的是 Markdown 文本,也可自动渲染。

图标

可选的,通知也可以在它的内容前显示图标(Icon)。同时你也可以为图标设置颜色,默认是 tailwind.config.js 文件中指定的 secondary 颜色。图标可以是 Blade 组件名。默认安装了 Blade Heroicons v1,因此你可以使用 Heroicon v1 中的图标名。当然,你也可以自定义图标组件或者安装其他图标库。

use Filament\Notifications\Notification;
 
Notification::make()
->title('Saved successfully')
->icon('heroicon-o-document-text')
->iconColor('success')
->send();

或者使用 Javascript:

new Notification()
.title('Saved successfully')
.icon('heroicon-o-document-text')
.iconColor('success')
.send()

Notification with icon

通常,通知有像 successwarningdanger 这样的状态。你也可以使用 status() 方法传入状态,而不必手动设置图标和颜色。另外,你可以使用success()warning()danger() 这样的专有方法。因此上例也可以像这样重写:

use Filament\Notifications\Notification;
 
Notification::make()
->title('Saved successfully')
->success()
->send();

或者使用 Javascript:

new Notification()
.title('Saved successfully')
.success()
.send()

Success, warning and danger notifications

时长

默认情况下,通知会展示 6 秒。你也可以用毫秒为单位自定义展示时长:

use Filament\Notifications\Notification;
 
Notification::make()
->title('Saved successfully')
->success()
->duration(5000)
->send();

或者使用 Javascript:

new Notification()
.title('Saved successfully')
.success()
.duration(5000)
.send()

如果你偏向于使用来展示时长,也可以如此设置:

use Filament\Notifications\Notification;
 
Notification::make()
->title('Saved successfully')
->success()
->seconds(5)
->send();

或者使用 Javascript:

new Notification()
.title('Saved successfully')
.success()
.seconds(5)
.send()

有些通知,你可能不希望它自动关闭,而是让用户可以手动关闭。可以让通知持久化(persistent)实现:

use Filament\Notifications\Notification;
 
Notification::make()
->title('Saved successfully')
->success()
->persistent()
->send();

或者使用 JavaScript:

new Notification()
.title('Saved successfully')
.success()
.persistent()
.send()

Body

另外通知内容可以在 body 中显示。类似于标题,它也支持 Markdown:

use Filament\Notifications\Notification;
 
Notification::make()
->title('Saved successfully')
->success()
->body('Changes to the **post** have been saved.')
->send();

或者使用 JavaScript:

new Notification()
.title('Saved successfully')
.success()
.body('Changes to the **post** have been saved.')
.send()

Notification with Markdown body

操作

通知支持操作(Action),可通过渲染按钮或链接打开 URL 或者发出 Livewire 事件。默认操作会渲染成链接,你也可以使用 button() 方法渲染按钮。可以这样定义操作:

use Filament\Notifications\Actions\Action;
use Filament\Notifications\Notification;
 
Notification::make()
->title('Saved successfully')
->success()
->body('Changes to the **post** have been saved.')
->actions([
Action::make('view')
->button(),
Action::make('undo')
->color('secondary'),
])
->send();

或者使用 JavaScript:

new Notification()
.title('Saved successfully')
.success()
.body('Changes to the **post** have been saved.')
.actions([
new NotificationAction('view')
.button(),
new NotificationAction('undo')
.color('secondary'),
])
.send()

Notification with actions

打开 URL

点击操作打开 URL(可选新的标签页中打开),你可以这样实现:

use Filament\Notifications\Actions\Action;
use Filament\Notifications\Notification;
 
Notification::make()
->title('Saved successfully')
->success()
->body('Changes to the **post** have been saved.')
->actions([
Action::make('view')
->button()
->url(route('posts.show', $post), shouldOpenInNewTab: true)
Action::make('undo')
->color('secondary'),
])
->send();

或者使用 JavaScript:

new Notification()
.title('Saved successfully')
.success()
.body('Changes to the **post** have been saved.')
.actions([
new NotificationAction('view')
.button()
.url('/view')
.openUrlInNewTab(),
new NotificationAction('undo')
.color('secondary'),
])
.send()

发送事件

有时,你希望在点击操作发送通知时,执行一些额外代码。可以通过设置点击按钮是发送 Livewire 事件来实现。你也可以传入可选的数组, Livewire 组件事件监听器会将其作为参数获取:

use Filament\Notifications\Actions\Action;
use Filament\Notifications\Notification;
 
Notification::make()
->title('Saved successfully')
->success()
->body('Changes to the **post** have been saved.')
->actions([
Action::make('view')
->button()
->url(route('posts.show', $post), shouldOpenInNewTab: true),
Action::make('undo')
->color('secondary')
->emit('undoEditingPost', [$post->id]),
])
->send();

也可以使用 emitSelfemitUpemitTo

Action::make('undo')
->color('secondary')
->emitSelf('undoEditingPost', [$post->id])
Action::make('undo')
->color('secondary')
->emitUp('undoEditingPost', [$post->id])
Action::make('undo')
->color('secondary')
->emitTo('another_component', 'undoEditingPost', [$post->id])

或者使用 JavaScript:

new Notification()
.title('Saved successfully')
.success()
.body('Changes to the **post** have been saved.')
.actions([
new NotificationAction('view')
.button()
.url('/view')
.openUrlInNewTab(),
new NotificationAction('undo')
.color('secondary')
.emit('undoEditingPost'),
])
.send()

同样地,emitSelfemitUpemitTo 也是可用的:

new NotificationAction('undo')
.color('secondary')
.emitSelf('undoEditingPost')
 
new NotificationAction('undo')
.color('secondary')
.emitUp('undoEditingPost')
 
new NotificationAction('undo')
.color('secondary')
.emitTo('another_component', 'undoEditingPost')

关闭通知

打开 URL 或从操作中发送事件后,你可能想要马上关闭通知:

use Filament\Notifications\Actions\Action;
use Filament\Notifications\Notification;
 
Notification::make()
->title('Saved successfully')
->success()
->body('Changes to the **post** have been saved.')
->actions([
Action::make('view')
->button()
->url(route('posts.show', $post), shouldOpenInNewTab: true),
Action::make('undo')
->color('secondary')
->emit('undoEditingPost', [$post->id])
->close(),
])
->send();

或者使用 JavaScript:

new Notification()
.title('Saved successfully')
.success()
.body('Changes to the **post** have been saved.')
.actions([
new NotificationAction('view')
.button()
.url('/view')
.openUrlInNewTab(),
new NotificationAction('undo')
.color('secondary')
.emit('undoEditingPost')
.close(),
])
.send()

使用 JavaScript 对象

JavaScript 对象 (NotificationNotificationAction) 被分配给 window.Notificationwindow.NotificationAction,因此他们可用于页内脚本。

你也可以在 Javascript 捆绑文件中将其引入

import { Notification, NotificationAction } from '../../vendor/filament/notifications/dist/module.esm'
 
// ...
Edit on GitHub

Still need help? Join our Discord community or open a GitHub discussion

上一页
安装