在资源页面上使用小部件

简介

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()),

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

当在资源页面上注册小部件时，你可以使用 make() 方法来传递一个数组的 Livewire 属性给它：

php

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

这个属性数组被映射到公共 Livewire 属性的 widget 类上：

php

use Filament\Widgets\Widget;

class CustomerOverview extends Widget
{
    public string $status;

    // ...
}

现在，你可以访问 widget 类中的 status，使用 $this->status。

简介

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()),

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

当在资源页面上注册小部件时，你可以使用 make() 方法来传递一个数组的 Livewire 属性给它：

php

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

这个属性数组被映射到公共 Livewire 属性的 widget 类上：

php

use Filament\Widgets\Widget;

class CustomerOverview extends Widget
{
    public string $status;

    // ...
}

现在，你可以访问 widget 类中的 status，使用 $this->status。

文档导航

简介

创建资源小组件

在资源页面上显示小部件

访问小部件中的当前记录

访问小部件中的页表数据

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

简介

创建资源小组件

在资源页面上显示小部件

访问小部件中的当前记录

访问小部件中的页表数据

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