自定义通知

#概述

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

#通知样式

通知有一些专有 CSS 类，用于将你自己的样式应用到其中。你可以打开浏览器开发者工具，查找发现哪些类是你需要的。

#定位通知

通过调用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);
use Filament\Notifications\Livewire\Notifications;
use Filament\Support\Enums\Alignment;
use Filament\Support\Enums\VerticalAlignment;

Notifications::alignment(Alignment::Start);
Notifications::verticalAlignment(VerticalAlignment::End);

#使用自定义通知视图

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

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

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

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

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

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

<x-filament-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-filament-notifications::notification>
<x-filament-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-filament-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($data)->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($data)->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