空状态

简介

你可以在 schema 中显示空状态，表明尚无内容可展示，并引导用户进行下一步操作。空状态需要有标题，也可包含 description()、icon() 与 footer()：

use Filament\Actions\Action;
use Filament\Schemas\Components\EmptyState;
use Filament\Support\Icons\Heroicon;

EmptyState::make('No users yet')
    ->description('Get started by creating a new user.')
    ->icon(Heroicon::OutlinedUser)
    ->footer([
        Action::make('createUser')
            ->icon(Heroicon::Plus),
    ])

TIP

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

为空状态添加图标

可使用 icon() 方法为空状态添加 图标：

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

EmptyState::make('No users yet')
    ->description('Get started by creating a new user.')
    ->icon(Heroicon::OutlinedUser)

TIP

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

在空状态页脚中插入操作及其他组件

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

use Filament\Actions\Action;
use Filament\Schemas\Components\EmptyState;

EmptyState::make('No users yet')
    ->description('Get started by creating a new user.')
    ->footer([
        Action::make('createUser')
            ->icon(Heroicon::Plus),
    ])

TIP

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

移除空状态容器

默认情况下，空状态带有背景色、阴影和边框。你可以使用 contained(false) 移除这些样式，仅渲染空状态内容而不带容器：

use Filament\Schemas\Components\EmptyState;

EmptyState::make('No users yet')
    ->description('Get started by creating a new user.')
    ->contained(false)

TIP

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