模态组件能够打开一个对话框或侧滑面板，并包含任何内容：
<x-filament::modal>
<x-slot name="trigger">
<x-filament::button>
Open modal
</x-filament::button>
</x-slot>
{{-- Modal content --}}
</x-filament::modal>您可以使用 trigger slot 来渲染一个打开模态框的按钮。然而，这不是必需的。您可以完全控制模态框何时通过 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>默认情况下, 图标的颜色是"主色". 你可以将其更改为 danger, gray, info, success 或 warning 通过使用 icon-color 属性:
<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 的最大宽度比例。选项包括 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>默认情况下，当你在一个模态框上按下 Esc 键时，它会自动关闭。如果你想针对某个特定的操作禁用此行为，你可以使用 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>默认情况下， 即使触发按钮被禁用，它也会打开模态框， 因为点击事件监听器注册在按钮自身的包装元素上。 如果你想阻止模态框打开， 你应该在触发槽上使用 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>