Section Blade 组件
概述
Section 可用于将内容分组到一起,并且可以选择使用标题:
<x-filament::section>
<x-slot name="heading">
User details
</x-slot>
{{-- Content --}}
</x-filament::section>
添加描述到 Section
使用 description
插槽,你可以在 Section 的标题下面添加描述:
<x-filament::section>
<x-slot name="heading">
User details
</x-slot>
<x-slot name="description">
This is all the information we hold about the user.
</x-slot>
{{-- Content --}}
</x-filament::section>
添加图标到 Section 头部
使用 icon
属性,你可以为 Section 添加一个图标:
<x-filament::section icon="heroicon-o-user">
<x-slot name="heading">
User details
</x-slot>
{{-- Content --}}
</x-filament::section>
修改 Section 图标的颜色
默认情况下,Section 图标的颜色是 "primary"。你可以使用 icon-color
属性,将其改成 danger
、info
、primary
、success
或 warning
。
<x-filament::section
icon="heroicon-o-user"
icon-color="info"
>
<x-slot name="heading">
User details
</x-slot>
{{-- Content --}}
</x-filament::section>
修改 Section 图标大小
默认情况下,Section 图标的大小为 "large"。使用 icon-size
属性,你可以将其改为 "small" 或者 "medium":
<x-filament::section
icon="heroicon-m-user"
icon-size="sm"
>
<x-slot name="heading">
User details
</x-slot>
{{-- Content --}}
</x-filament::section>
<x-filament::section
icon="heroicon-m-user"
icon-size="md"
>
<x-slot name="heading">
User details
</x-slot>
{{-- Content --}}
</x-filament::section>
在头部末尾添加内容
使用 headerEnd
插槽,你可以在头部的末尾渲染任何内容,在标题和描述旁边:
<x-filament::section>
<x-slot name="heading">
User details
</x-slot>
<x-slot name="headerEnd">
{{-- Input to select the user's ID --}}
</x-slot>
{{-- Content --}}
</x-filament::section>
使 Section 可折叠
使用 collapsible
属性,你可以将 Section 内容设为可折叠:
<x-filament::section collapsible>
<x-slot name="heading">
User details
</x-slot>
{{-- Content --}}
</x-filament::section>
将 Section 设为默认折叠
使用 collapsed
属性,你可以将 Section 设为默认折叠:
<x-filament::section
collapsible
collapsed
>
<x-slot name="heading">
User details
</x-slot>
{{-- Content --}}
</x-filament::section>
持久化折叠 Section
使用 persist-collapsed
属性,你可以对是否在本地存储中折叠 Section 进行持久化,使之在用户刷新页面时保持折叠。同时需要一个唯一的 id
属性,以区分于其他 Section,使得每个 Section 都能持久化自己的折叠状态:
<x-filament::section
collapsible
collapsed
persist-collapsed
id="user-details"
>
<x-slot name="heading">
User details
</x-slot>
{{-- Content --}}
</x-filament::section>
在 Setion Header 改为在内容旁边而非在其上面
使用 aside
属性,你可以将 Section Header 的位置该为在内容 旁边,而不是在其上面:
<x-filament::section aside>
<x-slot name="heading">
User details
</x-slot>
{{-- Content --}}
</x-filament::section>