发送通知

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

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

<?php

namespace App\Http\Livewire;

use Filament\Notifications\Notification; // [tl! focus]
use Livewire\Component;

class EditPost extends Component
{
    public function save(): void
    {
        // ...
    
        Notification::make() // [tl! focus:start]
            ->title('Saved successfully')
            ->success()
            ->send(); // [tl! focus:end]
    }
}

标题

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

use Filament\Notifications\Notification;

Notification::make()
    ->title('Saved successfully') // [tl! focus]
    ->send();

或者使用 JavaScript:

new Notification()
    .title('Saved successfully') // [tl! focus]
    .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') // [tl! focus:start]
    ->iconColor('success') // [tl! focus:end]
    ->send();

或者使用 Javascript:

new Notification()
    .title('Saved successfully')
    .icon('heroicon-o-document-text') // [tl! focus:start]
    .iconColor('success') // [tl! focus:end]
    .send()

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

use Filament\Notifications\Notification;

Notification::make()
    ->title('Saved successfully')
    ->success() // [tl! focus]
    ->send();

或者使用 Javascript:

new Notification()
    .title('Saved successfully')
    .success() // [tl! focus]
    .send()

时长

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

use Filament\Notifications\Notification;

Notification::make()
    ->title('Saved successfully')
    ->success()
    ->duration(5000) // [tl! focus]
    ->send();

或者使用 Javascript:

new Notification()
    .title('Saved successfully')
    .success()
    .duration(5000) // [tl! focus]
    .send()

如果你偏向于使用秒来展示时长，也可以如此设置：

use Filament\Notifications\Notification;

Notification::make()
    ->title('Saved successfully')
    ->success()
    ->seconds(5) // [tl! focus]
    ->send();

或者使用 Javascript:

new Notification()
    .title('Saved successfully')
    .success()
    .seconds(5) // [tl! focus]
    .send()

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

use Filament\Notifications\Notification;

Notification::make()
    ->title('Saved successfully')
    ->success()
    ->persistent() // [tl! focus]
    ->send();

或者使用 JavaScript:

new Notification()
    .title('Saved successfully')
    .success()
    .persistent() // [tl! focus]
    .send()

Body

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

use Filament\Notifications\Notification;

Notification::make()
    ->title('Saved successfully')
    ->success()
    ->body('Changes to the **post** have been saved.') // [tl! focus]
    ->send();

或者使用 JavaScript:

new Notification()
    .title('Saved successfully')
    .success()
    .body('Changes to the **post** have been saved.') // [tl! focus]
    .send()

操作

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

use Filament\Notifications\Actions\Action; // [tl! focus]
use Filament\Notifications\Notification;

Notification::make()
    ->title('Saved successfully')
    ->success()
    ->body('Changes to the **post** have been saved.')
    ->actions([ // [tl! focus:start]
        Action::make('view')
            ->button(),
        Action::make('undo')
            ->color('secondary'),
    ]) // [tl! focus:end]
    ->send();

或者使用 JavaScript:

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

打开 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) // [tl! focus]
        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') // [tl! focus:start]
            .openUrlInNewTab(), // [tl! focus:end]
        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]), // [tl! focus]
    ])
    ->send();

也可以使用 emitSelf、emitUp 和 emitTo：

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

或者使用 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'), // [tl! focus]
    ])
    .send()

同样地，emitSelf、emitUp 和 emitTo 也是可用的：

new NotificationAction('undo')
    .color('secondary')
    .emitSelf('undoEditingPost') // [tl! focus]
new NotificationAction('undo')
    .color('secondary')
    .emitUp('undoEditingPost') // [tl! focus]
new NotificationAction('undo')
    .color('secondary')
    .emitTo('another_component', 'undoEditingPost') // [tl! focus]

关闭通知

打开 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(), // [tl! focus]
    ])
    ->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(), // [tl! focus]
    ])
    .send()

使用 JavaScript 对象

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

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

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