开始

#概述

信息列表不仅限于是展示条目(Entry)。你也可以使用"布局组件"将其组织成无限嵌套结构。

布局组件类可以在 "Filament\Infolists\Components" 命名空间中找到。它们与其他 Entry 一起放在信息列表的 Schema 中。

组件可以使用静态 make() 方法创建。通常，接下来你需要定义子组件的 schema() 以在其内部展示：

use Filament\Infolists\Components\Grid;
 
Grid::make(2)
    ->schema([
        // ...
    ])
use Filament\Infolists\Components\Grid;

Grid::make(2)
    ->schema([
        // ...
    ])

#可用布局组件

Filament 附带了一些布局组件，适于按需排列表单字段：

• Grid
• Fieldset
• Tabs
• Section
• Card
• Split

你也可以创建自定义布局组件，按你希望的方式组织字段。

#设置 ID

你可以使用 id() 方法为组件定义 ID：

use Filament\Infolists\Components\Card;
 
Card::make()
    ->id('main-card')
use Filament\Infolists\Components\Card;

Card::make()
    ->id('main-card')

#添加额外的 HTML 属性

你可以将额外的 HTML 属性传递给组件，这些属性将合并到外部 DOM 元素上。将属性数组传递给 extraAttributes() 方法，其中数组键是属性名称，值是属性值：

use Filament\Infolists\Components\Group;
 
Card::make()
    ->extraAttributes(['class' => 'custom-card-style'])
use Filament\Infolists\Components\Group;

Card::make()
    ->extraAttributes(['class' => 'custom-card-style'])

这些类会与默认类合并，且任何其他属性都将覆盖默认属性。

#全局设置

如果希望全局更改组件的默认行为，那么可以在服务提供者的 boot() 方法中调用静态的 configureUsing() 方法，向该方法传入闭包修改使用的组件。例如，如果希望默认情况下所有 Card 组件都有 2 列，可以这样做：

use Filament\Infolists\Components\Card;
 
Card::configureUsing(function (Card $card): void {
    $card
        ->columns(2);
});
use Filament\Infolists\Components\Card;

Card::configureUsing(function (Card $card): void {
    $card
        ->columns(2);
});

当然，你仍然可以单独在每个字段上重写覆盖：

use Filament\Infolists\Components\Card;
 
Card::make()
    ->columns(1)
use Filament\Infolists\Components\Card;

Card::make()
    ->columns(1)

Edit on GitHub

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