Modal Blade 组件

简介

modal 组件可以打开包含任意内容的对话框或侧滑面板（slide-over）：

<x-filament::modal>
    <x-slot name="trigger">
        <x-filament::button>
            Open modal
        </x-filament::button>
    </x-slot>

    {{-- Modal content --}}
</x-filament::modal>

用 JavaScript 控制模态框

可使用 trigger 插槽渲染用于打开模态框的按钮。但这并非必需。你可以通过 JavaScript 完全控制模态框的打开与关闭。首先，为模态框设置 ID 以便引用：

<x-filament::modal id="edit-user">
    {{-- Modal content --}}
</x-filament::modal>

现在，你可以派发 open-modal 或 close-modal 浏览器事件并传入模态框 ID，以打开或关闭模态框。例如，从 Livewire 组件中：

$this->dispatch('open-modal', id: 'edit-user');

或从 Alpine.js 中：

$dispatch('open-modal', { id: 'edit-user' })

为模态框添加标题

可使用 heading 插槽为模态框添加标题：

<x-filament::modal>
    <x-slot name="heading">
        Modal heading
    </x-slot>

    {{-- Modal content --}}
</x-filament::modal>

为模态框添加描述

可使用 description 插槽在标题下方为模态框添加描述：

<x-filament::modal>
    <x-slot name="heading">
        Modal heading
    </x-slot>

    <x-slot name="description">
        Modal description
    </x-slot>

    {{-- Modal content --}}
</x-filament::modal>

为模态框添加图标

可使用 icon 属性为模态框添加图标：

<x-filament::modal icon="heroicon-o-information-circle">
    <x-slot name="heading">
        Modal heading
    </x-slot>

    {{-- Modal content --}}
</x-filament::modal>

默认情况下，图标颜色为「primary」。可使用 icon-color 属性将其改为 danger、gray、info、success 或 warning：

<x-filament::modal
    icon="heroicon-o-exclamation-triangle"
    icon-color="danger"
>
    <x-slot name="heading">
        Modal heading
    </x-slot>

    {{-- Modal content --}}
</x-filament::modal>

为模态框添加页脚

可使用 footer 插槽为模态框添加页脚：

<x-filament::modal>
    {{-- Modal content --}}
    
    <x-slot name="footer">
        {{-- Modal footer content --}}
    </x-slot>
</x-filament::modal>

或者，可使用 footerActions 插槽在页脚中添加操作：

<x-filament::modal>
    {{-- Modal content --}}

    <x-slot name="footerActions">
        {{-- Modal footer actions --}}
    </x-slot>
</x-filament::modal>

更改模态框对齐方式

默认情况下，模态框内容会左对齐；若模态框宽度为 xs 或 sm，则会居中。若要更改模态框内容的对齐方式，可使用 alignment 属性并传入 start 或 center：

<x-filament::modal alignment="center">
    {{-- Modal content --}}
</x-filament::modal>

使用侧滑面板代替模态框

可使用 slide-over 属性打开「侧滑面板」对话框，而不是模态框：

<x-filament::modal slide-over>
    {{-- Slide-over content --}}
</x-filament::modal>

使模态框标题栏固定

当内容超出模态框尺寸时，模态框标题栏会随内容滚出视野。而侧滑面板有始终可见的固定标题栏。可使用 sticky-header 属性控制此行为：

<x-filament::modal sticky-header>
    <x-slot name="heading">
        Modal heading
    </x-slot>

    {{-- Modal content --}}
</x-filament::modal>

使模态框页脚固定

默认情况下，模态框页脚紧随内容内联渲染。而侧滑面板有滚动内容时始终显示的固定页脚。也可使用 sticky-footer 属性为模态框启用此行为：

<x-filament::modal sticky-footer>
    {{-- Modal content --}}

    <x-slot name="footer">
        {{-- Modal footer content --}}
    </x-slot>
</x-filament::modal>

更改模态框宽度

可使用 width 属性更改模态框宽度。选项对应 Tailwind 的 max-width 比例。可选值为 xs、sm、md、lg、xl、2xl、3xl、4xl、5xl、6xl、7xl 和 screen：

<x-filament::modal width="5xl">
    {{-- Modal content --}}
</x-filament::modal>

点击外部关闭模态框

默认情况下，点击模态框外部会关闭它。若要为特定操作禁用此行为，可使用 close-by-clicking-away 属性：

<x-filament::modal :close-by-clicking-away="false">
    {{-- Modal content --}}
</x-filament::modal>

按 Escape 关闭模态框

默认情况下，在模态框上按 Escape 会关闭它。若要为特定操作禁用此行为，可使用 close-by-escaping 属性：

<x-filament::modal :close-by-escaping="false">
    {{-- Modal content --}}
</x-filament::modal>

隐藏模态框关闭按钮

默认情况下，带标题栏的模态框在右上角有关闭按钮。可使用 close-button 属性移除该关闭按钮：

<x-filament::modal :close-button="false">
    <x-slot name="heading">
        Modal heading
    </x-slot>

    {{-- Modal content --}}
</x-filament::modal>

阻止模态框自动聚焦

默认情况下，模态框打开时会自动聚焦到第一个可聚焦元素。若要禁用此行为，可使用 autofocus 属性：

<x-filament::modal :autofocus="false">
    {{-- Modal content --}}
</x-filament::modal>

禁用模态框触发按钮

默认情况下，即使触发按钮被禁用，点击仍会打开模态框，因为点击事件监听器注册在按钮的包裹元素上。若要阻止打开模态框，还应在 trigger 插槽上使用 disabled 属性：

<x-filament::modal>
    <x-slot name="trigger" disabled>
        <x-filament::button :disabled="true">
            Open modal
        </x-filament::button>
    </x-slot>
    {{-- Modal content --}}
</x-filament::modal>