选项卡

简介

有些 schema 可能又长又复杂。你可能希望使用选项卡来减少一次可见的组件数量：

php

use Filament\Schemas\Components\Tabs;
use Filament\Schemas\Components\Tabs\Tab;

Tabs::make('Tabs')
    ->tabs([
        Tab::make('Tab 1')
            ->schema([
                // ...
            ]),
        Tab::make('Tab 2')
            ->schema([
                // ...
            ]),
        Tab::make('Tab 3')
            ->schema([
                // ...
            ]),
    ])

TIP

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

设置默认活动选项卡

默认打开第一个选项卡。可使用 activeTab() 方法更改默认打开的选项卡：

php

use Filament\Schemas\Components\Tabs;
use Filament\Schemas\Components\Tabs\Tab;

Tabs::make('Tabs')
    ->tabs([
        Tab::make('Tab 1')
            ->schema([
                // ...
            ]),
        Tab::make('Tab 2')
            ->schema([
                // ...
            ]),
        Tab::make('Tab 3')
            ->schema([
                // ...
            ]),
    ])
    ->activeTab(2)

TIP

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

设置选项卡图标

选项卡可有图标，可使用 icon() 方法设置：

php

use Filament\Schemas\Components\Tabs;
use Filament\Schemas\Components\Tabs\Tab;
use Filament\Support\Icons\Heroicon;

Tabs::make('Tabs')
    ->tabs([
        Tab::make('Notifications')
            ->icon(Heroicon::Bell)
            ->schema([
                // ...
            ]),
        // ...
    ])

TIP

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

设置选项卡图标位置

可使用 iconPosition() 方法将选项卡图标置于标签之前或之后：

php

use Filament\Schemas\Components\Tabs;
use Filament\Schemas\Components\Tabs\Tab;
use Filament\Support\Enums\IconPosition;
use Filament\Support\Icons\Heroicon;

Tabs::make('Tabs')
    ->tabs([
        Tab::make('Notifications')
            ->icon(Heroicon::Bell)
            ->iconPosition(IconPosition::After)
            ->schema([
                // ...
            ]),
        // ...
    ])

TIP

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

设置选项卡徽章

选项卡可有徽章，可使用 badge() 方法设置：

php

use Filament\Schemas\Components\Tabs;
use Filament\Schemas\Components\Tabs\Tab;

Tabs::make('Tabs')
    ->tabs([
        Tab::make('Notifications')
            ->badge(5)
            ->schema([
                // ...
            ]),
        // ...
    ])

TIP

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

若要更改徽章的颜色，可使用 badgeColor() 方法：

php

use Filament\Schemas\Components\Tabs;
use Filament\Schemas\Components\Tabs\Tab;

Tabs::make('Tabs')
    ->tabs([
        Tab::make('Notifications')
            ->badge(5)
            ->badgeColor('info')
            ->schema([
                // ...
            ]),
        // ...
    ])

TIP

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

延迟加载选项卡徽章

若选项卡徽章由昂贵查询驱动，初始页面加载可能较慢。可使用 deferBadge() 方法延迟加载选项卡徽章，它会在页面渲染后异步加载徽章值：

php

use Filament\Schemas\Components\Tabs;
use Filament\Schemas\Components\Tabs\Tab;

Tabs::make('Tabs')
    ->key('notifications-tabs')
    ->tabs([
        Tab::make('Notifications')
            ->badge(static fn (): int => Notification::query()->where('unread', true->count())
            ->deferBadge()
            ->schema([
                // ...
            ]),
        // ...
    ])

WARNING

使用 deferBadge() 时，badge() 的值必须由函数返回。若传入原始值如 badge(Notification::query()->count())，查询会在构建选项卡时立即运行，从而失去延迟的意义。

使用 deferBadge() 时，Tabs 组件必须设置 key()。没有 key 时，延迟徽章请求无法在服务器上识别正确的组件。

TIP

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

徽章加载时，每个延迟徽章的位置会显示小型加载指示器。数据获取后，加载指示器会替换为实际徽章值。

延迟加载选项卡内容

若选项卡内容渲染成本较高，可向其 schema() 方法传入 Schema 对象并使用 deferLoading()。活动选项卡的内容会在进入视口时加载。未激活选项卡的内容在被选中之前不会加载：

php

use Filament\Forms\Components\TextInput;
use Filament\Schemas\Components\Tabs;
use Filament\Schemas\Components\Tabs\Tab;
use Filament\Schemas\Schema;

Tabs::make('Settings')
    ->key('settingsTabs')
    ->tabs([
        Tab::make('Profile')
            ->key('profileTab')
            ->schema(
                Schema::make()
                    ->components([
                        TextInput::make('name'),
                    ])
                    ->deferLoading(),
            ),
        Tab::make('Notifications')
            ->key('notificationsTab')
            ->schema(
                Schema::make()
                    ->components([
                        // ...
                    ])
                    ->deferLoading(),
            ),
    ])

每个延迟的 schema 都必须有唯一 key。本例中，选项卡上的 key 由其子 schema 继承，而 Tabs 组件上的 key 则将其与同一 schema 中的其他选项卡命名空间隔离。更多信息见 schema 概览。

在选项卡中使用网格列

可使用 columns() 方法自定义选项卡内的网格：

php

use Filament\Schemas\Components\Tabs;
use Filament\Schemas\Components\Tabs\Tab;

Tabs::make('Tabs')
    ->tabs([
        Tab::make('Tab 1')
            ->schema([
                // ...
            ])
            ->columns(3),
        // ...
    ])

TIP

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

禁用可滚动选项卡

选项卡默认水平渲染，超出可用宽度时可滚动。

可使用 scrollable(false) 方法禁用滚动：

php

use Filament\Schemas\Components\Tabs;

Tabs::make('Tabs')
    ->tabs([
        // ...
    ])
    ->scrollable(false)

当选项卡不可滚动时，组件会自动检测可用宽度。若无法容纳全部选项卡，会出现下拉按钮。超出可用宽度的选项卡会自动归入该下拉菜单。

使用垂直选项卡

可使用 vertical() 方法垂直渲染选项卡：

php

use Filament\Schemas\Components\Tabs;
use Filament\Schemas\Components\Tabs\Tab;

Tabs::make('Tabs')
    ->tabs([
        Tab::make('Tab 1')
            ->schema([
                // ...
            ]),
        Tab::make('Tab 2')
            ->schema([
                // ...
            ]),
        Tab::make('Tab 3')
            ->schema([
                // ...
            ]),
    ])
    ->vertical()

也可向 vertical() 方法传入布尔值，以控制选项卡是否垂直渲染：

php

use Filament\Schemas\Components\Tabs;

Tabs::make('Tabs')
    ->tabs([
        // ...
    ])
    ->vertical(FeatureFlag::active())

TIP

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

移除带样式的容器

默认情况下，选项卡及其内容包裹在卡片样式的容器中。可使用 contained() 移除带样式的容器：

php

use Filament\Schemas\Components\Tabs;
use Filament\Schemas\Components\Tabs\Tab;

Tabs::make('Tabs')
    ->tabs([
        Tab::make('Tab 1')
            ->schema([
                // ...
            ]),
        Tab::make('Tab 2')
            ->schema([
                // ...
            ]),
        Tab::make('Tab 3')
            ->schema([
                // ...
            ]),
    ])
    ->contained(false)

TIP

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

在用户会话中持久化当前选项卡

默认情况下，当前选项卡不会持久化到浏览器的 local storage。可使用 persistTab() 方法更改此行为。还必须为选项卡组件传入唯一的 id()，以与应用中其他选项卡组区分。该 ID 将作为 local storage 中存储当前选项卡的键：

php

use Filament\Schemas\Components\Tabs;

Tabs::make('Tabs')
    ->tabs([
        // ...
    ])
    ->persistTab()
    ->id('order-tabs')

persistTab() 方法也可接受布尔值，以控制活动选项卡是否持久化：

php

use Filament\Schemas\Components\Tabs;

Tabs::make('Tabs')
    ->tabs([
        // ...
    ])
    ->persistTab(FeatureFlag::active())
    ->id('order-tabs')

TIP

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

在 URL 查询字符串中持久化当前选项卡

默认情况下，当前选项卡不会持久化到 URL 的查询字符串中。可使用 persistTabInQueryString() 方法更改此行为：

php

use Filament\Schemas\Components\Tabs;
use Filament\Schemas\Components\Tabs\Tab;

Tabs::make('Tabs')
    ->tabs([
        Tab::make('Tab 1')
            ->schema([
                // ...
            ]),
        Tab::make('Tab 2')
            ->schema([
                // ...
            ]),
        Tab::make('Tab 3')
            ->schema([
                // ...
            ]),
    ])
    ->persistTabInQueryString()

启用后，当前选项卡会使用 tab 键持久化到 URL 查询字符串中。可通过向 persistTabInQueryString() 方法传入键名来更改：

php

use Filament\Schemas\Components\Tabs;
use Filament\Schemas\Components\Tabs\Tab;

Tabs::make('Tabs')
    ->tabs([
        Tab::make('Tab 1')
            ->schema([
                // ...
            ]),
        Tab::make('Tab 2')
            ->schema([
                // ...
            ]),
        Tab::make('Tab 3')
            ->schema([
                // ...
            ]),
    ])
    ->persistTabInQueryString('settings-tab')

TIP

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

选项卡 ​

简介 ​

设置默认活动选项卡 ​

设置选项卡图标 ​

设置选项卡图标位置 ​

设置选项卡徽章 ​

延迟加载选项卡徽章 ​

延迟加载选项卡内容 ​

在选项卡中使用网格列 ​

禁用可滚动选项卡 ​

使用垂直选项卡 ​

移除带样式的容器 ​

在用户会话中持久化当前选项卡 ​

在 URL 查询字符串中持久化当前选项卡 ​

选项卡

简介