Filament 中文文档

主题

全部文档

在资源页面上使用小部件 ​

简介 ​

Filament 允许你在页面中显示小部件，位置在页眉下方与页脚上方。

带页眉小部件的资源页面带页眉小部件的资源页面

你可以使用已有的 仪表盘小部件，或专门为资源创建一个。

创建资源小部件 ​

开始构建资源小部件：

bash
php artisan make:filament-widget CustomerOverview --resource=CustomerResource

该命令会创建两个文件：app/Filament/Resources/Customers/Widgets 目录下的小部件类，以及 resources/views/filament/resources/customers/widgets 目录下的视图。

你必须在资源的 getWidgets() 方法中注册新小部件：

php
use App\Filament\Resources\Customers\Widgets\CustomerOverview;

public static function getWidgets(): array
{
    return [
        CustomerOverview::class,
    ];
}

若想了解如何构建与自定义小部件，请参阅 仪表盘 文档。

在资源页面上显示小部件 ​

要在资源页面上显示小部件，请使用该页面的 getHeaderWidgets() 或 getFooterWidgets() 方法：

php
<?php

namespace App\Filament\Resources\Customers\Pages;

use App\Filament\Resources\Customers\CustomerResource;

class ListCustomers extends ListRecords
{
    public static string $resource = CustomerResource::class;

    protected function getHeaderWidgets(): array
    {
        return [
            CustomerResource\Widgets\CustomerOverview::class,
        ];
    }
}

getHeaderWidgets() 返回显示在页面内容上方的小部件数组，而 getFooterWidgets() 显示在下方。

若想自定义用于排列小部件的网格列数，请参阅 页面文档。

在小部件中访问当前记录 ​

若在 编辑 或 查看 页面上使用小部件，可在小部件类上定义 $record 属性以访问当前记录：

php
use Illuminate\Database\Eloquent\Model;

public ?Model $record = null;

在小部件中访问页面表格数据 ​

若在 列表 页面上使用小部件，可先在页面类上添加 ExposesTableToWidgets trait 以访问表格数据：

php
use Filament\Pages\Concerns\ExposesTableToWidgets;
use Filament\Resources\Pages\ListRecords;

class ListProducts extends ListRecords
{
    use ExposesTableToWidgets;

    // ...
}

然后，在小部件类上添加 InteractsWithPageTable trait，并在 getTablePage() 方法中返回页面类名：

php
use App\Filament\Resources\Products\Pages\ListProducts;
use Filament\Widgets\Concerns\InteractsWithPageTable;
use Filament\Widgets\Widget;

class ProductStats extends Widget
{
    use InteractsWithPageTable;

    protected function getTablePage(): string
    {
        return ListProducts::class;
    }

    // ...
}

在小部件类中，现在可用 $this->getPageTableQuery() 方法访问表格数据的 Eloquent 查询构建器实例：

php
use Filament\Widgets\StatsOverviewWidget\Stat;

Stat::make('Total Products', $this->getPageTableQuery()->count()),

或者，可用 $this->getPageTableRecords() 方法访问当前页记录的集合：

php
use Filament\Widgets\StatsOverviewWidget\Stat;

Stat::make('Total Products', $this->getPageTableRecords()->count()),

访问表格记录总数 ​

若需要表格查询的全部记录总数，又不必额外执行 count 查询，可使用 $tableRecordsCount 属性：

php
use Filament\Widgets\StatsOverviewWidget\Stat;

Stat::make('Total Products', $this->tableRecordsCount),

向资源页面上的小部件传递属性 ​

在资源页面注册小部件时，可用 make() 方法向其传递 Livewire 属性 数组：

php
protected function getHeaderWidgets(): array
{
    return [
        CustomerResource\Widgets\CustomerOverview::make([
            'status' => 'active',
        ]),
    ];
}

该属性数组会映射到小部件类上的 公开 Livewire 属性：

php
use Filament\Widgets\Widget;

class CustomerOverview extends Widget
{
    public string $status;

    // ...
}

现在，可在小部件类中用 $this->status 访问 status。