Sections

#简介

你可以将多个字段分到不同的分区(Section)中，每个分区都有一个标题及描述。为此，你可以使用 Section 组件：

use Filament\Schemas\Components\Section;

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

除了允许静态值之外，make() 和 description() 方法也可以接受函数来动态计算它们的值。你可以将各种 utility 作为参数注入到该函数中。

了解更多 utility 注入详情。

Utility	类型	参数	描述
Component	Filament\Schemas\Components\Component	$component	The current component instance.
Get function	Filament\Schemas\Components\Utilities\Get	$get	A function for retrieving values from the current schema data. Validation is not run on form fields.
Livewire	Livewire\Component	$livewire	The Livewire component instance.
Eloquent model FQN	?string<Illuminate\Database\Eloquent\Model>	$model	The Eloquent model FQN for the current schema.
Operation	string	$operation	The current operation being performed by the schema. Usually create, edit, or view.
Eloquent record	?Illuminate\Database\Eloquent\Model	$record	The Eloquent record for the current schema.

你也可以使用不带标题的 Section，它只是将组件包装在一个简单的卡片中：

use Filament\Schemas\Components\Section;

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

#在 Section 标题中添加图标

使用 icon() 方法，你可以在 Section 标题中添加一个图标：

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([
        // ...
    ])

除了允许静态值之外，icon() 方法也可以接受函数来动态计算其值。你可以将各种 utility 作为参数注入到该函数中。

了解更多 utility 注入详情。

Utility	类型	参数	描述
Component	Filament\Schemas\Components\Component	$component	The current component instance.
Get function	Filament\Schemas\Components\Utilities\Get	$get	A function for retrieving values from the current schema data. Validation is not run on form fields.
Livewire	Livewire\Component	$livewire	The Livewire component instance.
Eloquent model FQN	?string<Illuminate\Database\Eloquent\Model>	$model	The Eloquent model FQN for the current schema.
Operation	string	$operation	The current operation being performed by the schema. Usually create, edit, or view.
Eloquent record	?Illuminate\Database\Eloquent\Model	$record	The Eloquent record for the current schema.

#将标题和描述放在一旁

你可以使用 aside() 将标题和描述放在左侧，将卡片内的组件放在右侧：

use Filament\Schemas\Components\Section;

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

此外，你也可以传入布尔值，用以控制 Section 是否应该放在一边：

use Filament\Schemas\Components\Section;

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

除了允许静态值之外，aside() 方法也可以接受函数来动态计算其值。你可以将各种 utility 作为参数注入到该函数中。

了解更多 utility 注入详情。

Utility	类型	参数	描述
Component	Filament\Schemas\Components\Component	$component	The current component instance.
Get function	Filament\Schemas\Components\Utilities\Get	$get	A function for retrieving values from the current schema data. Validation is not run on form fields.
Livewire	Livewire\Component	$livewire	The Livewire component instance.
Eloquent model FQN	?string<Illuminate\Database\Eloquent\Model>	$model	The Eloquent model FQN for the current schema.
Operation	string	$operation	The current operation being performed by the schema. Usually create, edit, or view.
Eloquent record	?Illuminate\Database\Eloquent\Model	$record	The Eloquent record for the current schema.

#折叠 Section

Section 可以使用 collapsible() 来选择性地隐藏长内容：

use Filament\Schemas\Components\Section;

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

使用 collapsed() 可以将 Section 设为默认折叠：

use Filament\Schemas\Components\Section;

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

可选地，collapsible() 和 collapsed() 方法可以接受布尔值来控制该 Section 是否应可折叠和折叠：

use Filament\Schemas\Components\Section;

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

除了允许静态值之外，collapsible() 和 collapsed() 方法还接受一个函数来动态计算该值。你可以将各种 utility 作为参数注入到该函数中。

了解更多 utility 注入详情。

Utility	类型	参数	描述
Component	Filament\Schemas\Components\Component	$component	The current component instance.
Get function	Filament\Schemas\Components\Utilities\Get	$get	A function for retrieving values from the current schema data. Validation is not run on form fields.
Livewire	Livewire\Component	$livewire	The Livewire component instance.
Eloquent model FQN	?string<Illuminate\Database\Eloquent\Model>	$model	The Eloquent model FQN for the current schema.
Operation	string	$operation	The current operation being performed by the schema. Usually create, edit, or view.
Eloquent record	?Illuminate\Database\Eloquent\Model	$record	The Eloquent record for the current schema.

If a collapsed section contains components that are expensive to render, you can defer the loading of its content until the section is expanded.

#在用户 Session 中持久化折叠 Section

你可以使用 persistCollapsed() 方法在本地存储中持久化某个 Section 是否处于折叠状态，这样当用户刷新页面时，该 Section 仍将保持折叠状态：

use Filament\Schemas\Components\Section;

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

为了持久化折叠状态，本地存储需要一个唯一的 ID 来存储其状态。此 ID 根据 Section 的标题生成。如果你的 Section 没有标题，或者有多个标题相同的 Section 但你不想将它们同时折叠，你可以手动指定该版块的 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() 也接受一个布尔值来控制该 Section 是否持久化折叠状态：

use Filament\Schemas\Components\Section;

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

除了允许静态值之外，persistCollapsed() 和 id() 方法也可以接受函数来动态计算它们的值。你可以将各种 utility 作为参数注入到该函数中。

了解更多 utility 注入详情。

Utility	类型	参数	描述
Component	Filament\Schemas\Components\Component	$component	The current component instance.
Get function	Filament\Schemas\Components\Utilities\Get	$get	A function for retrieving values from the current schema data. Validation is not run on form fields.
Livewire	Livewire\Component	$livewire	The Livewire component instance.
Eloquent model FQN	?string<Illuminate\Database\Eloquent\Model>	$model	The Eloquent model FQN for the current schema.
Operation	string	$operation	The current operation being performed by the schema. Usually create, edit, or view.
Eloquent record	?Illuminate\Database\Eloquent\Model	$record	The Eloquent record for the current schema.

#Deferring the loading of section content

If the content of a section is expensive to render, you can pass a Schema object to schema() and use deferLoading(). This is particularly useful for a section that is collapsed by default. The section and its header will render immediately, while its content will not be loaded until the section is expanded and the content enters the viewport:

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()

Every deferred schema must have a unique key. In this example, the child schema inherits its key from the section. You can learn more in the schema overview.

#紧凑 Section 样式

嵌套 Section 时，你可以使用更紧凑的样式：

use Filament\Schemas\Components\Section;

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

此外，compact() 也接受一个布尔值来控制该 Section 是否紧凑：

use Filament\Schemas\Components\Section;

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

除了允许静态值之外，compact() 方法也可以接受函数来动态计算其值。你可以将各种 utility 作为参数注入到该函数中。

了解更多 utility 注入详情。

Utility	类型	参数	描述
Component	Filament\Schemas\Components\Component	$component	The current component instance.
Get function	Filament\Schemas\Components\Utilities\Get	$get	A function for retrieving values from the current schema data. Validation is not run on form fields.
Livewire	Livewire\Component	$livewire	The Livewire component instance.
Eloquent model FQN	?string<Illuminate\Database\Eloquent\Model>	$model	The Eloquent model FQN for the current schema.
Operation	string	$operation	The current operation being performed by the schema. Usually create, edit, or view.
Eloquent record	?Illuminate\Database\Eloquent\Model	$record	The Eloquent record for the current schema.

#辅助 Section 样式

默认情况下，分区（Section）有一个对比鲜明的背景色，使其在灰色背景下脱颖而出。辅助样式会让 Section 的背景对比度少一些，因此通常会略暗一些。当 Section 背后的背景色与默认 Section 背景色相同时（例如，当一个 Section 嵌套在另一个 Section 中时），这种样式会更合适。可以使用 secondary() 方法创建辅助 Section：

use Filament\Schemas\Components\Section;

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

此外，secondary() 也接受一个布尔值来控制该 Section 是否为辅助分区：

use Filament\Schemas\Components\Section;

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

#在 Section 标题中插入操作和其他组件

你可以通过将组件数组传递给 afterHeader() 方法，将 Action 和任何其他 Schema 组件（通常是 prime 组件）插入 Section 标题中：

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([
        // ...
    ])

除了允许静态值之外，afterHeader() 方法也可以接受函数来动态计算其值。你可以将各种 utility 作为参数注入到该函数中。

了解更多 utility 注入详情。

Utility	类型	参数	描述
Component	Filament\Schemas\Components\Component	$component	The current component instance.
Get function	Filament\Schemas\Components\Utilities\Get	$get	A function for retrieving values from the current schema data. Validation is not run on form fields.
Livewire	Livewire\Component	$livewire	The Livewire component instance.
Eloquent model FQN	?string<Illuminate\Database\Eloquent\Model>	$model	The Eloquent model FQN for the current schema.
Operation	string	$operation	The current operation being performed by the schema. Usually create, edit, or view.
Eloquent record	?Illuminate\Database\Eloquent\Model	$record	The Eloquent record for the current schema.

#在 Section 的 footer 中插入操作和其他组件

你可以将 Action 和任何其他 Schema 组件（通常是 prime components）插入到 Section 的 footer 中，只需将组件数组传递给 footer() 方法即可：

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

除了允许静态值之外，footer() 方法也可以接受函数来动态计算其值。你可以将各种 utility 作为参数注入到该函数中。

了解更多 utility 注入详情。

Utility	类型	参数	描述
Component	Filament\Schemas\Components\Component	$component	The current component instance.
Get function	Filament\Schemas\Components\Utilities\Get	$get	A function for retrieving values from the current schema data. Validation is not run on form fields.
Livewire	Livewire\Component	$livewire	The Livewire component instance.
Eloquent model FQN	?string<Illuminate\Database\Eloquent\Model>	$model	The Eloquent model FQN for the current schema.
Operation	string	$operation	The current operation being performed by the schema. Usually create, edit, or view.
Eloquent record	?Illuminate\Database\Eloquent\Model	$record	The Eloquent record for the current schema.

#在 Section 中使用网格列

你可以使用 columns() 方法在 Section 中轻松创建网格：

use Filament\Schemas\Components\Section;

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

除了允许静态值之外，columns() 方法也可以接受函数来动态计算其值。你可以将各种 utility 作为参数注入到该函数中。

了解更多 utility 注入详情。

Utility	类型	参数	描述
Component	Filament\Schemas\Components\Component	$component	The current component instance.
Get function	Filament\Schemas\Components\Utilities\Get	$get	A function for retrieving values from the current schema data. Validation is not run on form fields.
Livewire	Livewire\Component	$livewire	The Livewire component instance.
Eloquent model FQN	?string<Illuminate\Database\Eloquent\Model>	$model	The Eloquent model FQN for the current schema.
Operation	string	$operation	The current operation being performed by the schema. Usually create, edit, or view.
Eloquent record	?Illuminate\Database\Eloquent\Model	$record	The Eloquent record for the current schema.

Edit on GitHub

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