Section Blade component

#简介

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>

#在标题末尾添加内容

你可以使用 afterHeader 插槽在标题末尾(标题和描述旁边)渲染附加内容：

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

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

#将 Section 标题添加到内容旁边，而不是内容上方

你可以使用 aside 属性将 Section 标题的位置更改为内容旁边，而不是内容上方：

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

Edit on GitHub

Still need help? Join our Discord community or open a GitHub discussion