核心概念 - Blade 组件
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 属性，你可以为模态框添加图标：
<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 插槽为模态框添加 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 有一个总是可见的粘性模态框。你可以使用 sticky-header 属性控制该行为：
<x-filament::modal sticky-header> <x-slot name="heading"> Modal heading </x-slot> {{-- Modal content --}}</x-filament::modal>模态框粘性 footer
默认情况下，模态框的 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>通过 escape 关闭模态框
默认情况下，当你在模态上按下 escape 键时，它会自己关闭。如果你希望为特定 Action 禁用此行为，可以使用 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>Still need help? Join our Discord community or open a GitHub discussion