弹出层

版本 ^2.2.0

认识全新的 Popover 组件。这是一个下拉组件，但将“菜单”部分替换为一个通用的 <div>，你可以在里面放任何你想要的内容。

它非常适合自定义筛选器和悬浮卡片等场景。

<flux:dropdown>
    <flux:button>...</flux:button>
    <flux:popover>
        <!-- Put whatever you want in here... -->
    </flux:popover>
</flux:dropdown>

悬停显示

想在用户悬停元素时显示更多信息？只需添加 hover 属性即可。这非常适合用户资料预览、可交互的工具提示，或任何你希望在悬停时显示的上下文信息。

了解更多悬停触发器 →

所有。细节。都不遗漏。

与 Flux 中的其他组件一样，我们对每一个细节都精益求精，绝不放过任何一个角落。

编程式控制：将打开/关闭状态绑定到 Livewire 属性，完全掌控弹出层的显示与隐藏。

<flux:dropdown wire:model="showProfile">
    <flux:button>个人资料</flux:button>
    <flux:popover>...</flux:popover>
</flux:dropdown>

开箱即用的无障碍：如 aria-expanded 等 ARIA 属性将为你自动管理。屏幕阅读器可获得关于弹出层状态及其与触发器关系的完整上下文。

原生浏览器行为：由于我们在底层使用原生的 popover 属性，你将获得随之而来的所有优势——按 Esc 关闭、回车打开、正确的 Tab 顺序，并且当你 Tab 离开时弹出层会自动关闭。

锚点定位：弹出层会智能地定位在触发元素旁。你可以通过 offset、gap、position 和 align 等属性微调一切。

智能边缘检测：如果弹出层在屏幕底部附近打开，它会自动翻转到上方；左/右边缘同理。

溢出处理：当没有足够空间显示完整内容时，弹出层会自动变为可滚动，从而避免内容被裁剪。你的用户始终可以访问其中的全部内容。

所有这些复杂性对开发者来说都是透明的。只需放入组件，它就能在任何地方优雅工作。

查看 Popover 文档以获取更多示例和详细的 API 参考。