跳到主要内容
版本：5.x

空状态 Blade 组件

简介​

“空状态”可用于告知用户尚无内容可显示，并引导其进行下一步操作。必须包含标题：

<x-filament::empty-state>
    <x-slot name="heading">
        No users yet
    </x-slot>
</x-filament::empty-state>
An empty state with icon, description and action button

为空状态添加描述​

你可以使用 description 插槽，在空状态的标题下方添加描述：

<x-filament::empty-state>
    <x-slot name="heading">
        No users yet
    </x-slot>

    <x-slot name="description">
        Get started by creating a new user.
    </x-slot>
</x-filament::empty-state>
An empty state with a description

为空状态添加图标​

你可以使用 icon 属性为空状态添加图标：

<x-filament::empty-state
    icon="heroicon-o-user"
>
    <x-slot name="heading">
        No users yet
    </x-slot>
</x-filament::empty-state>

更改空状态图标的颜色​

默认情况下，空状态图标的颜色为 primary。你可以使用 icon-color 属性将其更改为 gray、danger、info、success 或 warning：

<x-filament::empty-state
    icon="heroicon-o-user"
    icon-color="info"
>
    <x-slot name="heading">
        No users yet
    </x-slot>
</x-filament::empty-state>
An empty state with a colored icon

更改空状态图标的大小​

默认情况下，空状态图标的大小为“大”（large）。你可以使用 icon-size 属性将其更改为“小”（small）或“中”（medium）：

<x-filament::empty-state
    icon="heroicon-m-user"
    icon-size="sm"
>
    <x-slot name="heading">
        No users yet
    </x-slot>
</x-filament::empty-state>

<x-filament::empty-state
    icon="heroicon-m-user"
    icon-size="md"
>
    <x-slot name="heading">
        No users yet
    </x-slot>
</x-filament::empty-state>
Empty states with different icon sizes

你可以使用 footer 插槽在描述下方添加操作。这非常适合放置按钮，例如 <x-filament::button> 组件：

<x-filament::empty-state>
    <x-slot name="heading">
        No users yet
    </x-slot>

    <x-slot name="footer">
        <x-filament::button icon="heroicon-m-plus">
            Create user
        </x-filament::button>
    </x-slot>
</x-filament::empty-state>
An empty state with footer actions

移除空状态容器​

默认情况下，空状态具有背景颜色、阴影和边框。你可以删除这些样式，只需使用 :contained 属性渲染空状态的内容，而无需容器：

<x-filament::empty-state :contained="false">
    <x-slot name="heading">
        No users yet
    </x-slot>
</x-filament::empty-state>
An empty state without a container