翻译进度
2
分块数量
0
参与人数

1.11. 资源 - Widgets

这是一篇协同翻译的文章,你可以点击『我来翻译』按钮来参与翻译。


Panel Builder - Resources - Widgets

Overview

Filament allows you to display widgets inside pages, below the header and above the footer.

You can use an existing dashboard widget, or create one specifically for the resource.

Creating a resource widget

To get started building a resource widget:

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

This command will create two files - a widget class in the app/Filament/Resources/CustomerResource/Widgets directory, and a view in the resources/views/filament/resources/customer-resource/widgets directory.

You must register the new widget in your resource's getWidgets() method:

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

If you'd like to learn how to build and customize widgets, check out the Dashboard documentation section.

Displaying a widget on a resource page

To display a widget on a resource page, use the getHeaderWidgets() or getFooterWidgets() methods for that page:

<?php

namespace App\Filament\Resources\CustomerResource\Pages;

use App\Filament\Resources\CustomerResource;

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

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

getHeaderWidgets() returns an array of widgets to display above the page content, whereas getFooterWidgets() are displayed below.

If you'd like to customize the number of grid columns used to arrange widgets, check out the Pages documentation.

Accessing the current record in the widget

If you're using a widget on an Edit or View page, you may access the current record by defining a $record property on the widget class:

use Illuminate\Database\Eloquent\Model;

public ?Model $record = null;

Accessing page table data in the widget

If you're using a widget on a List page, you may access the table data by first adding the ExposesTableToWidgets trait to the page class:

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

class ListProducts extends ListRecords
{
    use ExposesTableToWidgets;

    // ...
}

Now, on the widget class, you must add the InteractsWithPageTable trait, and return the name of the page class from the getTablePage() method:

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

class ProductStats extends Widget
{
    use InteractsWithPageTable;

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

    // ...
}

In the widget class, you can now access the Eloquent query builder instance for the table data using the $this->getPageTableQuery() method:

use Filament\Widgets\StatsOverviewWidget\Stat;

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

Alternatively, you can access a collection of the records on the current page using the $this->getPageTableRecords() method:

use Filament\Widgets\StatsOverviewWidget\Stat;

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

Passing properties to widgets on resource pages

When registering a widget on a resource page, you can use the make() method to pass an array of Livewire properties to it:

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

This array of properties gets mapped to public Livewire properties on the widget class:

use Filament\Widgets\Widget;

class CustomerOverview extends Widget
{
    public string $status;

    // ...
}

Now, you can access the status in the widget class using $this->status.

本文章首发在 LearnKu.com 网站上。

本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。

《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
讨论数量: 0
发起讨论 只看当前版本


暂无话题~