Empty State Blade 组件

简介

空状态（empty state）可用于说明尚无可显示的内容，并引导用户进行下一步操作。标题为必填：

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

为空状态添加描述

可使用 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>

为空状态添加图标

可使用 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>

更改空状态图标的尺寸

默认情况下，空状态图标的尺寸为「大」。可使用 icon-size 属性将其改为「小」或「中」：

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

为空状态添加页脚操作

可使用 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>

移除空状态容器

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

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