跳到主要内容
版本：3.0

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>

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