一个章节可用于将内容组合在一起,并带有一个可选的标题:
<x-filament::section>
<x-slot name="heading">
User details
</x-slot>
{{-- Content --}}
</x-filament::section>您可以通过使用 description 插槽,在标题下方为该小节添加描述:
<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>您可以添加一个 图标 到一个部分,通过使用 icon 属性:
<x-filament::section icon="heroicon-o-user">
<x-slot name="heading">
User details
</x-slot>
{{-- Content --}}
</x-filament::section>默认情况下,节图标的颜色是“灰色”。您可以通过使用 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>默认情况下,节图标的大小为"大"。您可以通过使用icon-size属性将其更改为"小"或"中":
<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>您可以在页眉末尾、标题和描述旁边,使用 afterHeader slot 渲染额外内容:
<x-filament::section>
<x-slot name="heading">
User details
</x-slot>
<x-slot name="afterHeader">
{{-- Input to select the user's ID --}}
</x-slot>
{{-- Content --}}
</x-filament::section>您可以使某个部分的内容可折叠,通过使用 collapsible 属性:
<x-filament::section collapsible>
<x-slot name="heading">
User details
</x-slot>
{{-- Content --}}
</x-filament::section>您可以使用 collapsed 属性,使某个部分默认处于折叠状态:
<x-filament::section
collapsible
collapsed
>
<x-slot name="heading">
User details
</x-slot>
{{-- Content --}}
</x-filament::section>您可以使用 persist-collapsed 属性将某个节的折叠状态持久化到本地存储中,这样当用户刷新页面时,它将保持折叠状态。您还需要一个唯一的 id 属性来区分各个节,以便每个节都能持久化其自身的折叠状态:
<x-filament::section
collapsible
collapsed
persist-collapsed
id="user-details"
>
<x-slot name="heading">
User details
</x-slot>
{{-- Content --}}
</x-filament::section>您可以通过使用 aside 属性,将节标题的位置更改为位于内容旁边而非上方:
<x-filament::section aside>
<x-slot name="heading">
User details
</x-slot>
{{-- Content --}}
</x-filament::section>您可以通过使用content-before属性,将内容的位置更改为位于标题之前,而非之后:
<x-filament::section
aside
content-before
>
<x-slot name="heading">
User details
</x-slot>
{{-- Content --}}
</x-filament::section>