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：

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

使模态框标题呈粘性状态

当模态框标题超出模态框尺寸时，标题会随模态框内容一起滚动出视图。但是，滑行模式(Slide-Over)有一个始终可见的粘性模态框。你可以使用 sticky-header 属性控制此行为：

<x-filament::modal sticky-header>
    <x-slot name="heading">
        Modal heading
    </x-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>

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

禁用模态框触发按钮

默认情况下，即使触发器按钮被禁用，它也会打开模态框，因为点击事件监听器是在按钮本身的包裹元素上注册的。如果你想阻止模态框打开，你还应该在触发器插槽上使用 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>

Edit on GitHub

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

#简介

#用 JavaScript 控制模态框

#添加模态框标题

#添加模态框描述

#添加模态框图标

#为模态框添加 footer

#修改模态框对齐方式

#使用 Slide-Over 代替模态框

#使模态框标题呈粘性状态

#模态框粘性 footer

#修改模态框宽度

#通过 Click Away 关闭模态框

#通过 escape 键关闭模态框

#隐藏模态框关闭按钮

#防止模态框自动聚焦

#禁用模态框触发按钮

简介