跳到主要内容
版本:3.x

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 属性,将其改成 dangerinfoprimarysuccesswarning

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

将内容放置到 Header 前面

使用 content-before 属性,你可以把原本在后面的内容改成为在其 header 前面:

<x-filament::section
aside
content-before
>
<x-slot name="heading">
User details
</x-slot>

{{-- Content --}}
</x-filament::section>