开始

#概述

Filament 表单不限于展示字段。你也可以使用"布局组件"，将其组织成无限嵌套结构。

布局组件类在 Filament\Forms\Components 命名空间下。他们和其他表单字段一起，存放在表单 Schema 内。

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

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

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

#可用布局组件

Filament 随带一些布局组件，适合于根据需要排列表单字段：

• Grid
• Fieldset
• Tabs
• Wizard
• Section
• Split
• Placeholder

你也可以创建自定义布局组件来排列字段。

#设置 ID

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

use Filament\Forms\Components\Section;
 
Section::make()
    ->id('main-section')
use Filament\Forms\Components\Section;

Section::make()
    ->id('main-section')

#添加额外的 HTML 属性

你可以将额外的 HTML 属性传递给组件，这些属性会与外层 DOM 元素合并。请传递属性数值给 extraAttributes() 方法，数值键是属性值，数组值为属性值：

use Filament\Forms\Components\Section;
 
Section::make()
    ->extraAttributes(['class' => 'custom-section-style'])
use Filament\Forms\Components\Section;

Section::make()
    ->extraAttributes(['class' => 'custom-section-style'])

类会合默认类合并，而且其他属性会覆盖默认属性。

#全局设置

如果你想全局改变组件的默认行为，那么你可以在服务提供者的 boot() 方法中或者中间件里调用静态 configureUsing() 方法。传入一个可以修改组件的闭包。比如，如果你想让所有 Section 组件默认拥有 2 列，你可以这样：

use Filament\Forms\Components\Section;
 
Section::configureUsing(function (Section $section): void {
    $section
        ->columns(2);
});
use Filament\Forms\Components\Section;

Section::configureUsing(function (Section $section): void {
    $section
        ->columns(2);
});

当然，你仍然可以单独对每个组件重写该行为：

use Filament\Forms\Components\Section;
 
Section::make()
    ->columns(1)
use Filament\Forms\Components\Section;

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

Edit on GitHub

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