核心概念 - Blade 组件
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>将内容放置到 Header 前面
使用 content-before 属性，你可以把原本在后面的内容改成为在其 header 前面：
<x-filament::section aside content-before> <x-slot name="heading"> User details </x-slot> {{-- Content --}}</x-filament::section>Still need help? Join our Discord community or open a GitHub discussion