DOCS
DOCS

Languages

Version

Theme

通知

概述

简介

通知通过 Fluent API 构建的 Notification 对象发送。调用 Notification 对象的 send() 方法将调度通知并将其显示在你的应用中。由于会话用于闪烁通知，因此它们可以从代码中的任何位置发送，包括 JavaScript，而不仅仅是 Livewire 组件。

<?php

namespace App\Livewire;

use Filament\Notifications\Notification;
use Livewire\Component;

class EditPost extends Component
{
    public function save(): void
    {
        // ...

        Notification::make()
            ->title('Saved successfully')
            ->success()
            ->send();
    }
}
Success notification

设置标题

通知的主要信息显示在标题中。你可以按如下方式设置标题：

use Filament\Notifications\Notification;

Notification::make()
    ->title('Saved successfully')
    ->send();

标题文本可以包含基本的、安全的 HTML 元素。要使用 Markdown 生成安全的 HTML，可以使用 Str::markdown() 辅助函数: title(Str::markdown('Saved **successfully**'))

或者使用 JavaScript：

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

设置图标

可选地，通知可以有一个图标，显示在内容前面。你还可以设置图标的颜色，默认为灰色：

use Filament\Notifications\Notification;

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

或者使用 JavaScript：

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

通知通常具有诸如 success、warning、danger 或 info 之类的状态。无需手动设置相应的图标和颜色，你可以使用 status() 方法传递状态。你也可以使用专用的 success()、warning()、danger() 和 info() 方法。因此，可以将上述示例整理如下：

use Filament\Notifications\Notification;

Notification::make()
    ->title('Saved successfully')
    ->success()
    ->send();

或者使用 JavaScript:

new FilamentNotification()
    .title('Saved successfully')
    .success()
    .send()
Notifications with various statuses

设置背景颜色

默认情况下，通知没有背景颜色。你可能需要通过设置颜色来为通知提供额外的上下文，如下所示：

use Filament\Notifications\Notification;

Notification::make()
    ->title('Saved successfully')
    ->color('success')
    ->send();

或者使用 JavaScript:

new FilamentNotification()
    .title('Saved successfully')
    .color('success')
    .send()
Notification with background color

设置持续时间

默认情况下，通知会显示 6 秒，然后自动关闭。你可以指定自定义持续时间值(以毫秒为单位)，如下所示：

use Filament\Notifications\Notification;

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

或者使用 JavaScript：

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

如果你想要将持续时间设置为秒而不是毫秒，可以这样：

use Filament\Notifications\Notification;

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

或者使用 JavaScript：

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

你可能希望某些通知不要自动关闭，而是需要用户手动关闭。这可以通过将通知设置为持久化来实现：

use Filament\Notifications\Notification;

Notification::make()
    ->title('Saved successfully')
    ->success()
    ->persistent()
    ->send();

或者使用 JavaScript：

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

设置正文

其他通知文本可以在 body() 中显示：

use Filament\Notifications\Notification;

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

正文可以包含基本的、安全的 HTML 元素。要使用 Markdown 生成安全的 HTML，可以使用 Str::markdown() 辅助函数: body(Str::markdown('Changes to the **post** have been saved.'))

或者使用 JavaScript：

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

将 Action 添加到通知

通知支持 Action，这些按钮会在通知内容下方渲染。它们可以打开 URL 或调度 Livewire 事件。Action 可以按如下方式定义：

use Filament\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('gray'),
    ])
    ->send();

或者使用 JavaScript：

new FilamentNotification()
    .title('Saved successfully')
    .success()
    .body('Changes to the post have been saved.')
    .actions([
        new FilamentNotificationAction('view')
            .button(),
        new FilamentNotificationAction('undo')
            .color('gray'),
    ])
    .send()
Notification with actions

你可以在这里了解有关如何设置操作按钮样式的更多信息。

从通知 Action 中打开 URL

点击操作(Action)时，你可以选择在新标签页中打开 URL：

use Filament\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('gray'),
    ])
    ->send();

或者使用 JavaScript：

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

通过通知 Action 调度 Livewire 事件

有时你希望在单击通知操作(Action)时执行其他代码。这可以通过设置 Livewire 事件来实现，该事件应在点击该操作(Action)时触发。你可以选择传递一个数据数组，该数组将作为 Livewire 组件事件监听器的参数使用：

use Filament\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('gray')
            ->dispatch('undoEditingPost', [$post->id]),
    ])
    ->send();

你也可以使用 dispatchSelf 和 dispatchTo：

Action::make('undo')
    ->color('gray')
    ->dispatchSelf('undoEditingPost', [$post->id])

Action::make('undo')
    ->color('gray')
    ->dispatchTo('another_component', 'undoEditingPost', [$post->id])

或者使用 JavaScript：

new FilamentNotification()
    .title('Saved successfully')
    .success()
    .body('Changes to the post have been saved.')
    .actions([
        new FilamentNotificationAction('view')
            .button()
            .url('/view')
            .openUrlInNewTab(),
        new FilamentNotificationAction('undo')
            .color('gray')
            .dispatch('undoEditingPost'),
    ])
    .send()

类似地，dispatchSelf 和 dispatchTo 也可以在 JavaScript 中使用：

new FilamentNotificationAction('undo')
    .color('gray')
    .dispatchSelf('undoEditingPost')

new FilamentNotificationAction('undo')
    .color('gray')
    .dispatchTo('another_component', 'undoEditingPost')

在 Action 中关闭通知

打开 URL 或从操作(Action)中调度事件后，你可能希望立即关闭通知：

use Filament\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('gray')
            ->dispatch('undoEditingPost', [$post->id])
            ->close(),
    ])
    ->send();

或者使用 JavaScript：

new FilamentNotification()
    .title('Saved successfully')
    .success()
    .body('Changes to the post have been saved.')
    .actions([
        new FilamentNotificationAction('view')
            .button()
            .url('/view')
            .openUrlInNewTab(),
        new FilamentNotificationAction('undo')
            .color('gray')
            .dispatch('undoEditingPost')
            .close(),
    ])
    .send()

使用 JavaScript 对象

JavaScript 对象（FilamentNotification 和 FilamentNotificationAction）已分配给 window.FilamentNotification 和 window.FilamentNotificationAction，因此它们可在页面脚本中使用。

你也可以将它们导入到捆绑的 JavaScript 文件中：

import { Notification, NotificationAction } from '../../vendor/filament/notifications/dist/index.js'

// ...

使用 JavaScript 关闭通知

通知发送后，你可以通过在窗口上调度名为 close-notification 的浏览器事件来按需关闭通知。

该事件需要包含你发送的通知的 ID。要获取该 ID，你可以使用 Notification 对象上的 getId() 方法：

use Filament\Notifications\Notification;

$notification = Notification::make()
    ->title('Hello')
    ->persistent()
    ->send()

$notificationId = $notification->getId()

要关闭通知，你可以从 Livewire 调度事件：

$this->dispatch('close-notification', id: $notificationId);

或者使用 JavaScript，本例使用了 Alpine.js：

<button x-on:click="$dispatch('close-notification', { id: notificationId })" type="button">
    Close Notification
</button>

如果你能够检索通知 ID，将其持久化，然后使用它来关闭通知，那么推荐使用这种方法，因为 ID 是唯一生成的，不会有关闭错误通知的风险。但是，如果无法持久化随机 ID，你可以在发送通知时传入自定义 ID：

use Filament\Notifications\Notification;

Notification::make('greeting')
    ->title('Hello')
    ->persistent()
    ->send()

在这种情况下，你可以通过使用自定义 ID 调度事件来关闭通知：

<button x-on:click="$dispatch('close-notification', { id: 'greeting' })" type="button">
    Close Notification
</button>

请注意，如果你使用同一个 ID 发送多个通知，可能会遇到意外的副作用，因此建议使用随机 ID。

通知位置

你可以在服务提供者或中间件中通过调用 Notifications::alignment() 和 Notifications::verticalAlignment() 来配置通知的对齐方式。你可以传递 Alignment::Start、Alignment::Center、Alignment::End、VerticalAlignment::Start、VerticalAlignment::Center 或 VerticalAlignment::End 作为参数：

use Filament\Notifications\Livewire\Notifications;
use Filament\Support\Enums\Alignment;
use Filament\Support\Enums\VerticalAlignment;

Notifications::alignment(Alignment::Start);
Notifications::verticalAlignment(VerticalAlignment::End);
Edit on GitHub

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

Next
数据库通知
Your logo here? 💖