FluxUI 中文网 · 模态框组件

显示侧边栏

在主页面上方的层中显示内容。适用于确认、警告和表单。

<flux:modal.trigger name="edit-profile">    <flux:button>Edit profile</flux:button></flux:modal.trigger><flux:modal name="edit-profile" class="md:w-96">    <div class="space-y-6">        <div>            <flux:heading size="lg">Update profile</flux:heading>            <flux:text class="mt-2">Make changes to your personal details.</flux:text>        </div>        <flux:input label="Name" placeholder="Your name" />        <flux:input label="Date of birth" type="date" />        <div class="flex">            <flux:spacer />            <flux:button type="submit" variant="primary">Save changes</flux:button>        </div>    </div></flux:modal>

如果您在循环中放置模态框，请确保动态生成唯一的模态框名称。否则，一个模态框触发器将触发页面上所有同名的模态框，导致意外行为。

@foreach ($users as $user)    <flux:modal :name="'edit-profile-'.$user->id">        ...    </flux:modal>@endforeach

Livewire 方法

除了在 Blade 模板中触发模态框外，您还可以直接从 Livewire 控制它们。

考虑在您的 Blade 模板中有一个"确认"模态框，如下所示：

<flux:modal name="confirm">    <!-- ... --></flux:modal>

现在您可以使用以下方法从 Livewire 组件中打开和关闭此模态框：

<?phpclass ShowPost extends \Livewire\Component {    public function delete() {        // Control "confirm" modals anywhere on the page...        Flux::modal('confirm')->show();        Flux::modal('confirm')->close();        // Control "confirm" modals within this Livewire component...        $this->modal('confirm')->show();        $this->modal('confirm')->close();        // 关闭页面上的所有模态框。..        Flux::modals()->close();    }}

JavaScript 方法

您也可以使用 Flux 的魔术方法直接从 Alpine 控制模态框：

<button x-on:click="$flux.modal('confirm').show()">    Open modal</button><button x-on:click="$flux.modal('confirm').close()">    Close modal</button><button x-on:click="$flux.modals().close()">    Close all modals</button>

或者您可以使用 window.Flux 全局对象从应用程序中的任何 JavaScript 控制模态框：

// Control "confirm" modals anywhere on the page...Flux.modal('confirm').show()Flux.modal('confirm').close()// 关闭页面上的所有模态框。..Flux.modals().close()

数据绑定

如果您愿意，可以将 Livewire 属性直接绑定到模态框，以从 Livewire 组件控制其状态。

考虑在您的 Blade 模板中有一个确认模态框，如下所示：

<flux:modal wire:model.self="showConfirmModal">    <!-- ... --></flux:modal>

重要的是要在 wire:model 属性中添加 .self 修饰符，以防止嵌套元素派发输入事件干扰模态框的状态。

现在您可以通过切换 wire:model 属性从 Livewire 组件中打开和关闭此模态框。

<?phpclass ShowPost extends \Livewire\Component {    public $showConfirmModal = false;    public function delete() {        $this->showConfirmModal = true;    }}

这种方法的一个优点是能够直接从浏览器控制模态框的状态，而无需进行服务器往返：

<flux:button x-on:click="$wire.showConfirmModal = true">Delete post</flux:button>

关闭事件

如果您需要在模态框关闭后执行一些逻辑，可以像这样注册一个关闭监听器：

<flux:modal @close="someLivewireAction">    <!-- ... --></flux:modal>

您也可以使用 wire:close 或 x-on:close，如果您更喜欢这些语法。

取消事件

如果您需要在模态框被取消后执行一些逻辑，可以像这样注册一个取消监听器：

<flux:modal @cancel="someLivewireAction">    <!-- ... --></flux:modal>

您也可以使用 wire:cancel 或 x-on:cancel，如果您更喜欢这些语法。

禁用外部点击

默认情况下，点击模态框外部会关闭它。如果您想禁用此行为，可以使用 :dismissible="false" 属性。

<flux:modal :dismissible="false">    <!-- ... --></flux:modal>

确认

在执行危险操作之前提示用户确认。

<flux:modal.trigger name="delete-profile">    <flux:button variant="danger">Delete</flux:button></flux:modal.trigger><flux:modal name="delete-profile" class="min-w-[22rem]">    <div class="space-y-6">        <div>            <flux:heading size="lg">Delete project?</flux:heading>            <flux:text class="mt-2">                You're about to delete this project.<br>                This action cannot be reversed.            </flux:text>        </div>        <div class="flex gap-2">            <flux:spacer />            <flux:modal.close>                <flux:button variant="ghost">Cancel</flux:button>            </flux:modal.close>            <flux:button type="submit" variant="danger">Delete project</flux:button>        </div>    </div></flux:modal>

使用"弹出层"变体来创建更固定和长表单的对话框。

<flux:modal.trigger name="edit-profile">    <flux:button>Edit profile</flux:button></flux:modal.trigger><flux:modal name="edit-profile" variant="flyout">    <div class="space-y-6">        <div>            <flux:heading size="lg">Update profile</flux:heading>            <flux:text class="mt-2">Make changes to your personal details.</flux:text>        </div>        <flux:input label="Name" placeholder="Your name" />        <flux:input label="Date of birth" type="date" />        <div class="flex">            <flux:spacer />            <flux:button type="submit" variant="primary">Save changes</flux:button>        </div>    </div></flux:modal>

默认情况下，弹出层将从右侧打开。您可以通过将"left"或"bottom"传递给 position 属性来改变此行为。

<flux:modal variant="flyout" position="left">    <!-- ... --></flux:modal>

下拉菜单

显示可展开的操作或导航菜单

命令面板

用于应用程序导航的键盘命令面板

参考

属性	描述
name	模态框的唯一标识符。使用触发器时必需。
variant	模态框的视觉样式。选项： default、flyout、bare。
position	对于弹出层模态框，它们打开的方向。选项： right（默认）、left、bottom。
dismissible	如果为 false，防止通过点击外部关闭模态框。默认值： true。
closable	如果为 false，隐藏关闭按钮。默认值： true。
wire:model	可选的 Livewire 属性，用于绑定模态框的打开状态。

事件	描述
close	当模态框以任何方式关闭时触发。
cancel	当通过点击外部或按 Escape 键关闭模态框时触发。

插槽	描述
default	模态框内容。

类	描述
w-*	常用用法：md:w-96 设置宽度。

属性	描述
name	要触发的模态框名称。必须与模态框的名称匹配。
shortcut	打开模态框的键盘快捷键（例如：cmd.k）。

插槽	描述
default	触发元素（例如按钮）。

插槽	描述
default	关闭触发元素（例如按钮）。

用于从 Livewire 组件控制模态框的 PHP 方法。

参数	描述
default\|name	要控制的模态框名称。

方法	描述
close()	关闭模态框。

Flux::modals()

用于控制页面上所有模态框的 PHP 方法。

方法	描述
close()	关闭页面上的所有模态框。

用于控制模态框的 Alpine.js 魔术方法。

参数	描述
default\|name	要控制的模态框名称。

方法	描述
show()	显示模态框。
close()	关闭模态框。

模态框

弹出层定位

相关组件

参考