FluxUI 中文网 · 弹出框组件

显示侧边栏

Flux Pro 组件

此组件仅在 Flux 的 Pro 版本中提供。

升级到 Pro 升级到 Pro

在点击或悬停时以弹出窗口显示额外内容。

此组件用于通用弹出框内容。仅当下拉菜单组件不符合您的需求时才使用它。

排序方式

悬停触发

在下拉框上使用 hover 属性来在悬停在触发元素上时显示弹出框。

目前，您只能使用 button 元素作为触发元素。

Caleb Porzio

@calebporzio

关注了你

775

正在关注

50.2k

关注者

<flux:dropdown hover position="bottom" align="start" offset="-16" gap="10">    <button type="button" class="flex items-center gap-3">        <flux:avatar size="sm" name="Caleb Porzio" src="https://unavatar.io/x/calebporzio" />        <flux:heading>Caleb Porzio</flux:heading>    </button>    <flux:popover class="flex flex-col gap-3 rounded-xl shadow-xl">        <flux:avatar size="xl" name="Caleb Porzio" src="https://unavatar.io/x/calebporzio" />        <div>            <flux:heading size="lg">Caleb Porzio</flux:heading>            <div class="flex items-center gap-2">                <flux:text size="lg">@calebporzio</flux:text>                <flux:badge>Follows you</flux:badge>            </div>        </div>        <div class="flex items-center gap-4">            <flux:text class="flex gap-1"><flux:heading>775</flux:heading> following</flux:text>            <flux:text class="flex gap-1"><flux:heading>50.2k</flux:heading> followers</flux:text>        </div>        <div class="flex gap-2">            <flux:button variant="outline" size="sm" icon="check" icon:class="opacity-75" class="flex-1">Following</flux:button>            <flux:button variant="primary" size="sm" icon="chat-bubble-left-right" icon:class="opacity-75" class="flex-1">Message</flux:button>        </div>    </flux:popover></flux:dropdown>

位置

使用下拉框组件上的 position 和 align 属性来控制弹出框的位置。

<flux:dropdown position="top" align="start">    <flux:button>...</flux:button>    <flux:popover>...</flux:popover></flux:dropdown><flux:dropdown position="right" align="center">    <flux:button>...</flux:button>    <flux:popover>...</flux:popover></flux:dropdown><flux:dropdown position="left" align="center">    <flux:button>...</flux:button>    <flux:popover>...</flux:popover></flux:dropdown><flux:dropdown position="bottom" align="end">    <flux:button>...</flux:button>    <flux:popover>...</flux:popover></flux:dropdown>

间隙和偏移

gap 属性控制触发器和弹出框之间的距离，而 offset 沿着对齐轴移动弹出框。

<!-- Gap --><flux:dropdown gap="16">    <flux:button>Gap: 16px</flux:button>    <flux:popover>...</flux:popover></flux:dropdown><!-- Offset --><flux:dropdown offset="32">    <flux:button>Offset: 32px</flux:button>    <flux:popover>...</flux:popover></flux:dropdown>

示例

分类选择器

可选择的分类列表。

奇幻

科幻小说

恐怖

悬疑

爱情

自传

惊悚

诗歌

儿童

<flux:dropdown>    <flux:button        icon="tag"        icon:variant="micro"        icon:class="text-zinc-400"    >        Categories        <x-slot name="iconTrailing">            <flux:badge size="sm" class="-mr-1">                <span x-text="$wire.categories.length" class="tabular-nums">&nbsp;</span>            </flux:badge>        </x-slot>    </flux:button>    <flux:popover class="max-w-[18rem] flex flex-col gap-4">        <flux:checkbox.group variant="pills" wire:model="categories">            <flux:checkbox value="fantasy" label="Fantasy" />            <flux:checkbox value="science-fiction" label="Science fiction" />            <flux:checkbox value="horror" label="Horror" />            <flux:checkbox value="mystery" label="Mystery" />            <flux:checkbox value="romance" label="Romance" />            <flux:checkbox value="autobiography" label="Autobiography" />            <flux:checkbox value="thriller" label="Thriller" />            <flux:checkbox value="poetry" label="Poetry" />            <flux:checkbox value="children" label="Children" />        </flux:checkbox.group>        <flux:separator variant="subtle" />        <flux:button            variant="subtle"            size="sm"            class="justify-start -m-2 !px-2"            wire:click="$set('categories', [])"        >            Clear all        </flux:button>    </flux:popover></flux:dropdown>

反馈

带有单选选项和文本输入的反馈表单。

错误报告

建议

问题

<flux:dropdown>    <flux:button icon="chat-bubble-oval-left" icon:variant="micro" icon:class="text-zinc-300">        Feedback    </flux:button>    <flux:popover class="min-w-[30rem] flex flex-col gap-4">        <flux:radio.group variant="buttons" class="*:flex-1">            <flux:radio icon="bug-ant" checked>Bug report</flux:radio>            <flux:radio icon="light-bulb">Suggestion</flux:radio>            <flux:radio icon="question-mark-circle">Question</flux:radio>        </flux:radio.group>        <div class="relative">            <flux:textarea                rows="8"                class="dark:bg-transparent!"                placeholder="Please include reproduction steps. You may attach images or video files."            />            <div class="absolute bottom-3 left-3 flex items-center gap-2">                <flux:button variant="filled" size="xs" icon="face-smile" icon:variant="outline" icon:class="text-zinc-400 dark:text-zinc-300" />                <flux:button variant="filled" size="xs" icon="paper-clip" icon:class="text-zinc-400 dark:text-zinc-300" />            </div>        </div>        <div class="flex gap-2 justify-end">            <flux:button variant="filled" size="sm" kbd="esc" class="w-28">Cancel</flux:button>            <flux:button size="sm" kbd="⏎" class="w-28">Submit</flux:button>        </div>    </flux:popover></flux:dropdown>

事件详情

关于事件的详细信息。

团队同步

让我们回顾上周取得的进展并确定下一步的优先事项

参加

不参加

可能

来宾

邀请

1 人可能参加，1 人待确认

上午 10:00

上午 11:00

编辑

2025年5月29日

每个工作日

位置

编辑

巴黎总部，13 rue de la Prairie 75018

<flux:dropdown position="bottom center">    <button type="button" class="w-54 rounded-lg p-2 flex items-center gap-2 bg-zinc-100 hover:bg-zinc-200">        <div class="self-stretch w-0.5 bg-zinc-800 rounded-full"></div>        <div>            <flux:heading>Team sync</flux:heading>            <flux:text class="mt-1">10:00 AM</flux:text>        </div>    </button>    <flux:popover class="w-80 p-0 data-open:flex flex-col">        <div class="p-4">            <flux:heading>Team sync</flux:heading>            <flux:text class="mt-2">Let's review the progress made last week and define the priorities for the next</flux:text>            <flux:radio.group variant="segmented" class="mt-3">                <flux:radio value="going" label="Going" checked />                <flux:radio value="not-going" label="Not going" />                <flux:radio value="maybe" label="Maybe" />            </flux:radio.group>        </div>        <flux:separator />        <div class="p-4 flex gap-2">            <flux:icon.users variant="micro" class="text-zinc-400" />            <div class="flex-1">                <div class="flex items-center justify-between">                    <div class="flex gap-2">                        <flux:heading>Guests</flux:heading>                    </div>                    <flux:text><flux:link href="#" variant="subtle">Invite</flux:link></flux:text>                </div>                <div class="flex items-center gap-3 mt-2">                    <flux:avatar.group>                        <flux:avatar size="xs" circle src="https://unavatar.io/x/calebporzio" />                        <flux:avatar size="xs" circle src="https://unavatar.io/github/hugosaintemarie" />                        <flux:avatar size="xs" circle src="https://unavatar.io/github/joshhanley" />                    </flux:avatar.group>                    <flux:text>1 maybe, 1 awaiting</flux:text>                </div>            </div>        </div>        <flux:separator />        <div class="p-4 flex gap-2">            <flux:icon.clock variant="micro" class="text-zinc-400" />            <div class="flex-1">                <div class="flex items-center justify-between">                    <div class="flex gap-2">                        <flux:heading>10:00 AM</flux:heading>                        <flux:icon.arrow-right variant="micro" class="text-zinc-400" />                        <flux:heading>11:00 AM</flux:heading>                    </div>                    <flux:text><flux:link href="#" variant="subtle">Edit</flux:link></flux:text>                </div>                <div class="flex gap-3 mt-2">                    <flux:text>May 29 2025</flux:text>                    <flux:text>·</flux:text>                    <flux:text class="flex items-center gap-1.5">                        <flux:icon.arrow-path-rounded-square variant="micro" class="text-zinc-400" />                        Every weekday                    </flux:text>                </div>            </div>        </div>        <flux:separator />        <div class="p-4 flex gap-2">            <flux:icon.map-pin variant="micro" class="text-zinc-400" />            <div class="flex-1">                <div class="flex items-center justify-between">                    <flux:heading>Location</flux:heading>                    <flux:text><flux:link href="#" variant="subtle">Edit</flux:link></flux:text>                </div>                <flux:text class="mt-2">Paris HQ, 13 rue de la Prairie 75018</flux:text>            </div>        </div>    </flux:popover></flux:dropdown>

下拉菜单

使用按钮和菜单项创建下拉菜单

工具提示

在悬停在元素上时显示提示性工具提示

参考

管理弹出框定位和交互的容器组件。所有弹出框的必需包装器。

属性	描述
position	弹出框相对于触发元素的位置。选项：top、right、bottom（默认）、left。
align	弹出框相对于触发元素的对齐方式。选项：start（默认）、center、end。
hover	如果存在，弹出框将在悬停时打开而不是点击。对工具提示和快速预览很有用。
wire:model	将打开/关闭状态绑定到 Livewire 属性以实现编程控制。

插槽	描述
default	必须包含恰好一个触发元素（按钮、链接等），后跟一个 flux:popover 组件。

属性	描述
data-flux-dropdown	应用于根元素以进行样式设置和识别。
data-open	当弹出框当前打开时应用。

flux:popover

在浮动覆盖层中显示内容的容器组件。必须在 flux:dropdown 组件中使用以实现定位和交互。

属性	描述
class	应用于弹出框容器的额外 CSS 类。对于设置宽度约束很有用，如 max-w-sm 或 w-80。

插槽	描述
default	要在弹出框内显示的内容。可以包含任何 HTML 或 Flux 组件。

属性	描述
data-flux-popover	应用于根元素以进行样式设置和识别。

弹出框

示例

相关组件

参考