空状态可用于传达尚未显示任何内容,并引导用户进行下一步操作。需要一个标题:
<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>