Rendering an infolist in a Blade view - 组件

NOTE

继续之前，请确保项目中已经安装了 filament/infolists。你可以运行如下命令检查是否已安装：

composer show filament/infolists

如果还未安装，请转到安装指南，并根据指示配置单个组件。

设置 Livewire 组件

首先，生成一个新的 Livewire 组件：

php artisan make:livewire ViewProduct

然后，在页面上渲染你的 Livewire 组件：

@livewire('view-product')

另外，你也可以使用全页面 Livewire 组件：

use App\Livewire\ViewProduct;
use Illuminate\Support\Facades\Route;

Route::get('products/{product}', ViewProduct::class);

你必须在你的 Livewire 组件类中使用 InteractsWithSchemas trait 并实现 HasSchemas 接口：

use Filament\Schemas\Concerns\InteractsWithSchemas;
use Filament\Schemas\Concerns\RestrictsFileUploadsToSchemaComponents;
use Filament\Schemas\Contracts\HasSchemas;
use Livewire\Component;

class ViewProduct extends Component implements HasSchemas
{
    use InteractsWithSchemas;
    use RestrictsFileUploadsToSchemaComponents;

    // ...
}

添加信息列表

接下来添加一个方法到 Livewire 组件，使其接收 $infolist 对象，修改并返回该对象。

use Filament\Schemas\Schema;

public function productInfolist(Schema $schema): Schema
{
    return $schema
        ->record($this->product)
        ->components([
            // ...
        ]);
}

最后，在 Livewire 组件视图中渲染信息列表：

{{ $this->productInfolist }}

NOTE

filament/infolists 也包含以下这些包：

filament/actions
filament/schemas
filament/support

这些包允许你在 Livewire 组件中使用它们的组件。

比如，如果你在信息列表中使用了 Action，请记住实现 HasActions 接口并在 Livewire 组件类中使用 InteractsWithActions trait。

如果你在信息列表中使用其他 Filament 组件，请确保同时安装并集成对应的包。

传递数据到信息列表中

你可以通过两种方式将数据传递给信息列表：

将 Eloquent 模型实例传递给信息列表的 record() 方法，以自动将所有模型属性和关联映射到信息列表 Schema 中的条目：

use Filament\Infolists\Components\TextEntry;
use Filament\Schemas\Schema;

public function productInfolist(Schema $schema): Schema
{
    return $schema
        ->record($this->product)
        ->components([
            TextEntry::make('name'),
            TextEntry::make('category.name'),
            // ...
        ]);
}

或者，你也可以将数据数组传递给信息列表的 state() 方法，以手动将数据映射到信息列表 Schema 中的条目：

use Filament\Infolists\Components\TextEntry;
use Filament\Schemas\Schema;

public function productInfolist(Schema $schema): Schema
{
    return $schema
        ->constantState([
            'name' => 'MacBook Pro',
            'category' => [
                'name' => 'Laptops',
            ],
            // ...
        ])
        ->components([
            TextEntry::make('name'),
            TextEntry::make('category.name'),
            // ...
        ]);
}

Edit on GitHub

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

#设置 Livewire 组件

#添加信息列表

#传递数据到信息列表中

设置 Livewire 组件

添加信息列表

传递数据到信息列表中