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**'))

NOTE

Filament’s built-in HTML sanitizer permits inline style attributes in order to support rich text formatting features such as font colors, text highlighting, and image sizing. This means that CSS properties like background: url(...) or position: fixed will not be stripped from sanitized HTML. If your content comes from untrusted users, you should consider restricting the default configuration. See the security documentation for details on how to customize the sanitizer.

或者使用 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()

NOTE

If you are passing user-controlled data to the url() method, you should validate that the URL does not use a dangerous scheme such as javascript: or data:. Failing to do so could expose your application to XSS attacks. The simplest way to guard against this is to wrap the value in Filament’s Str::sanitizeUrl() helper, which returns null for any URL that does not use http/https (or a relative path).

通过通知 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);
Notification positioned at the bottom start of the page
Edit on GitHub

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

Next
数据库通知
Your logo here? 💖