公告: 旧版文档请移步 -> http://v2.laravel-filament.cn/docs

Languages

Version

Theme

表单构造器 - 布局

开始

概述

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

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

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

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

可用布局组件

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

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

设置 ID

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

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'])

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

全局设置

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

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

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

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

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

下一页
Grid