跳到主要内容
版本：3.0

Modal Blade 组件

概述​

模态框组件可以打开包括任何内容的对话框或者 SlideOver：

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

现在，你可以传入模态框 ID 派发一个 open-modal 或者 close-modal 的浏览器事件，用以打开或者关闭模态框。比如，在 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 属性，你可以为模态框添加[图标]https://blade-ui-kit.com/blade-icons?set=1#search)：

<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 插槽为模态框添加 footer：

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

此外，你可以使用 footerActions 插件在 footer 中加入 Action：

<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 代替模态框​

你可以使用 slide-over 属性将模态框替换成 "slide-over" 对话框：

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

模态框粘性 header​

如果模态框中的内容超出模态框大小，模态框的头部会随着视图滚出视图。不过， Slide-Over 有一个总是可见的 header。你可以使用 sticky-header 属性控制该行为：

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

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

默认情况下，模态框的 footer 在内容之后行内渲染。而 Slider-Over 有一个内容滚动时，总是显示的粘性 footer。你可以使用 sticky-footer 属性也为模态框启用粘性 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>

通过 Click Away 关闭模态框​

默认情况下，当你点击模态框外面时，模态框会自己关闭。如果你想禁用该行为，你可以使用 close-by-clicking-away 属性：

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

隐藏模态框关闭按钮​

默认情况下，模态框在右上角有一个关闭按钮。你可以使用 close-button 属性将该关闭按钮从模态框中移除：

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