分区

简介

你可能希望将字段分成多个分区，每个分区带有标题与描述。为此可使用 section 组件：

use Filament\Schemas\Components\Section;

Section::make('Rate limiting')
    ->description('Prevent abuse by limiting the number of requests per period')
    ->schema([
        // ...
    ])

TIP

除了接受静态值外，make() 与 description() 方法也接受函数以动态计算。你可以将各种工具作为参数注入该函数。

也可使用无标题的分区，仅将组件包裹在简单卡片中：

use Filament\Schemas\Components\Section;

Section::make()
    ->schema([
        // ...
    ])

在分区标题中添加图标

可使用 icon() 方法在分区标题中添加 图标：

use Filament\Schemas\Components\Section;
use Filament\Support\Icons\Heroicon;

Section::make('Cart')
    ->description('The items you have selected for purchase')
    ->icon(Heroicon::ShoppingBag)
    ->schema([
        // ...
    ])

TIP

除了接受静态值外，icon() 方法也接受函数以动态计算。你可以将各种工具作为参数注入该函数。

将标题与描述置于侧边

可使用 aside() 将标题与描述对齐到左侧，并将组件放在右侧卡片中：

use Filament\Schemas\Components\Section;

Section::make('Rate limiting')
    ->description('Prevent abuse by limiting the number of requests per period')
    ->aside()
    ->schema([
        // ...
    ])

也可传入布尔值，以控制分区是否侧边布局：

use Filament\Schemas\Components\Section;

Section::make('Rate limiting')
    ->description('Prevent abuse by limiting the number of requests per period')
    ->aside(FeatureFlag::active())
    ->schema([
        // ...
    ])

TIP

除了接受静态值外，aside() 方法也接受函数以动态计算。你可以将各种工具作为参数注入该函数。

可折叠分区

分区可设为 collapsible()，以便按需隐藏较长内容：

use Filament\Schemas\Components\Section;

Section::make('Cart')
    ->description('The items you have selected for purchase')
    ->schema([
        // ...
    ])
    ->collapsible()

分区也可默认 collapsed()：

use Filament\Schemas\Components\Section;

Section::make('Cart')
    ->description('The items you have selected for purchase')
    ->schema([
        // ...
    ])
    ->collapsed()

collapsible() 与 collapsed() 方法也可接受布尔值，以控制分区是否可折叠以及是否默认折叠：

use Filament\Schemas\Components\Section;

Section::make('Cart')
    ->description('The items you have selected for purchase')
    ->schema([
        // ...
    ])
    ->collapsible(FeatureFlag::active())
    ->collapsed(FeatureFlag::active())

TIP

除了接受静态值外，collapsible() 与 collapsed() 方法也接受函数以动态计算。你可以将各种工具作为参数注入该函数。

若已折叠的分区包含渲染成本较高的组件，可 延迟加载其内容，直到分区展开。

在用户会话中持久化折叠状态

可使用 persistCollapsed() 方法将分区是否折叠持久化到 local storage，以便用户刷新页面后仍保持折叠：

use Filament\Schemas\Components\Section;

Section::make('Cart')
    ->description('The items you have selected for purchase')
    ->schema([
        // ...
    ])
    ->collapsible()
    ->persistCollapsed()

要持久化折叠状态，local storage 需要唯一 ID 来存储状态。该 ID 根据分区标题生成。若分区没有标题，或有多个相同标题的分区且不希望一起折叠，可手动指定该分区的 id() 以避免 ID 冲突：

use Filament\Schemas\Components\Section;

Section::make('Cart')
    ->description('The items you have selected for purchase')
    ->schema([
        // ...
    ])
    ->collapsible()
    ->persistCollapsed()
    ->id('order-cart')

persistCollapsed() 方法也可接受布尔值，以控制分区是否持久化折叠状态：

use Filament\Schemas\Components\Section;

Section::make('Cart')
    ->description('The items you have selected for purchase')
    ->schema([
        // ...
    ])
    ->collapsible()
    ->persistCollapsed(FeatureFlag::active())

TIP

除了接受静态值外，persistCollapsed() 与 id() 方法也接受函数以动态计算。你可以将各种工具作为参数注入该函数。

延迟加载分区内容

若分区内容渲染成本较高，可向 schema() 传入 Schema 对象并使用 deferLoading()。这对默认 折叠 的分区尤其有用。分区及其标题会立即渲染，而其内容在分区展开且内容进入视口之前不会加载：

use Filament\Forms\Components\TextInput;
use Filament\Schemas\Components\Section;
use Filament\Schemas\Schema;

Section::make('Customer details')
    ->key('customerDetails')
    ->schema(
        Schema::make()
            ->components([
                TextInput::make('name'),
                TextInput::make('email')
                    ->email(),
            ])
            ->deferLoading(),
    )
    ->collapsed()

每个延迟的 schema 都必须有唯一 key。本例中，子 schema 从分区继承其 key。更多信息见 schema 概览。

紧凑分区样式

嵌套分区时可使用更紧凑的样式：

use Filament\Schemas\Components\Section;

Section::make('Rate limiting')
    ->description('Prevent abuse by limiting the number of requests per period')
    ->schema([
        // ...
    ])
    ->compact()

compact() 方法也可接受布尔值，以控制分区是否紧凑：

use Filament\Schemas\Components\Section;

Section::make('Rate limiting')
    ->description('Prevent abuse by limiting the number of requests per period')
    ->schema([
        // ...
    ])
    ->compact(FeatureFlag::active())

TIP

除了接受静态值外，compact() 方法也接受函数以动态计算。你可以将各种工具作为参数注入该函数。

次要分区样式

默认情况下，分区具有对比背景色，使其在灰色背景上更突出。次要样式为分区提供对比度较低的背景，通常略深。当分区背后的背景色与默认分区背景色相同时（例如分区嵌套在另一个分区中），这种样式更合适。可使用 secondary() 方法创建次要分区：

use Filament\Schemas\Components\Section;

Section::make('Notes')
    ->schema([
        // ...
    ])
    ->secondary()
    ->compact()

secondary() 方法也可接受布尔值，以控制分区是否为次要样式：

use Filament\Schemas\Components\Section;

Section::make('Notes')
    ->schema([
        // ...
    ])
    ->secondary(FeatureFlag::active())

在分区标题中插入操作及其他组件

可通过向 afterHeader() 方法传入组件数组，在分区标题中插入 操作 以及任意其他 schema 组件（通常是 prime 组件）：

use Filament\Schemas\Components\Section;

Section::make('Rate limiting')
    ->description('Prevent abuse by limiting the number of requests per period')
    ->afterHeader([
        Action::make('test'),
    ])
    ->schema([
        // ...
    ])

TIP

除了接受静态值外，afterHeader() 方法也接受函数以动态计算。你可以将各种工具作为参数注入该函数。

在分区页脚中插入操作及其他组件

可通过向 footer() 方法传入组件数组，在分区页脚中插入 操作 以及任意其他 schema 组件（通常是 prime 组件）：

use Filament\Schemas\Components\Section;

Section::make('Rate limiting')
    ->description('Prevent abuse by limiting the number of requests per period')
    ->schema([
        // ...
    ])
    ->footer([
        Action::make('test'),
    ])

TIP

除了接受静态值外，footer() 方法也接受函数以动态计算。你可以将各种工具作为参数注入该函数。

在分区中使用网格列

可使用 columns() 方法在分区内轻松创建 网格：

use Filament\Schemas\Components\Section;

Section::make('Heading')
    ->schema([
        // ...
    ])
    ->columns(2)

TIP

除了接受静态值外，columns() 方法也接受函数以动态计算。你可以将各种工具作为参数注入该函数。