自定义通知

通知样式开箱即用。不过，如果你想使用自己的样式或自定义视图，渲染通知，也有多种选择。

#通知样式

通知使用了一些专门的CSS类，让你可以载入自己的样式：

• filament-notifications
• filament-notifications-notification
• filament-notifications-icon
• filament-notifications-title
• filament-notifications-close-button
• filament-notifications-date
• filament-notifications-body
• filament-notifications-actions

#自定义通知视图

如果你的自定义不能通过以上的 CSS 类实现，你也可以创建自定义视图渲染通知。要配置通知视图，可以在服务提供者 boot() 方法中调用静态 configureUsing() 方法，指定使用的视图：

use Filament\Notifications\Notification;
 
Notification::configureUsing(function (Notification $notification): void {
    $notification->view('notifications.notification');
});
use Filament\Notifications\Notification;

Notification::configureUsing(function (Notification $notification): void {
    $notification->view('notifications.notification');
});

接下来，新建视图，比如此例中的 resources/views/notifications/notification.blade.php。该视图应该使用包的基础通知组件，通过 notification 属性传入 $notification 变量。本例是创建自定义通知视图的最低要求：

<x-notifications::notification :notification="$notification">
    {{-- Notification content --}}
</x-notifications::notification>
<x-notifications::notification :notification="$notification">
    {{-- Notification content --}}
</x-notifications::notification>

所有通知属性的 Getter 在视图中可用。因此，自定义通知视图可能长这样子：

<x-notifications::notification
    :notification="$notification"
    class="flex w-80 rounded-lg transition duration-200"
    x-transition:enter-start="opacity-0"
    x-transition:leave-end="opacity-0"
>
    <h4>
        {{ $getTitle() }}
    </h4>
    
    <p>
        {{ $getDate() }}
    </p>
    
    <p>
        {{ $getBody() }}
    </p>
    
    <span x-on:click="close">
        Close
    </span>
</x-notifications::notification>
<x-notifications::notification
    :notification="$notification"
    class="flex w-80 rounded-lg transition duration-200"
    x-transition:enter-start="opacity-0"
    x-transition:leave-end="opacity-0"
>
    <h4>
        {{ $getTitle() }}
    </h4>
    
    <p>
        {{ $getDate() }}
    </p>
    
    <p>
        {{ $getBody() }}
    </p>
    
    <span x-on:click="close">
        Close
    </span>
</x-notifications::notification>

#自定义通知对象

你的通知中可能需要 Notification 类中没有定义的额外功能。如果是这样，你可用创建自己的 Notification 类，继承包中的 Notification 类。比如，你的通知设计需要 size 属性。

你在 app/Notifications/Notification.php 中自定义 Notification 类可能包含：

<?php
 
namespace App\Notifications;
 
use Filament\Notifications\Notification as BaseNotification;
 
class Notification extends BaseNotification
{
    protected string $size = 'md';
 
    public function toArray(): array
    {
        return [
            ...parent::toArray(),
            'size' => $this->getSize(),
        ];
    }
 
    public static function fromArray(array $data): static
    {
        return parent::fromArray()->size($data['size']);
    }
 
    public function size(string $size): static
    {
        $this->size = $size;
 
        return $this;
    }
 
    public function getSize(): string
    {
        return $this->size;
    }
}
<?php

namespace App\Notifications;

use Filament\Notifications\Notification as BaseNotification;

class Notification extends BaseNotification
{
    protected string $size = 'md';

    public function toArray(): array
    {
        return [
            ...parent::toArray(),
            'size' => $this->getSize(),
        ];
    }

    public static function fromArray(array $data): static
    {
        return parent::fromArray()->size($data['size']);
    }

    public function size(string $size): static
    {
        $this->size = $size;

        return $this;
    }

    public function getSize(): string
    {
        return $this->size;
    }
}

下一步，你需要在服务提供者的 boot() 方法中将自定义 Notification 类绑定到容器中：

use App\Notifications\Notification;
use Filament\Notifications\Notification as BaseNotification;
 
$this->app->bind(BaseNotification::class, Notification::class);
use App\Notifications\Notification;
use Filament\Notifications\Notification as BaseNotification;

$this->app->bind(BaseNotification::class, Notification::class);

现在你就可以像默认的 Notification 那样使用自定义类了。

Edit on GitHub

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