版本 ^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 参考。

版本 ^2.2.0

我们为单选和复选组件新增了两个变体：药丸（pills）和 按钮（buttons）。

这两个变体可用于单选组与复选组，提供更紧凑的选择方式，非常适合用于筛选器、工具栏以及任何需要更简洁外观的场景。

药丸

药丸是一种紧凑、圆角的按钮，外观就像“药丸”！它们非常适合排列可选项，同时不会喧宾夺主。

<flux:checkbox.group variant="pills" label="分类">
    <flux:checkbox value="fantasy" label="奇幻" />
    <flux:checkbox value="science-fiction" label="科幻" />
    <flux:checkbox value="horror" label="恐怖" />
    <!-- ... -->
</flux:checkbox.group>

当然，如果你只需要单选，药丸同样适用于 radio.group 组件。

查看复选框的“药丸（pills）”变体 →

可选择的按钮

按钮变体提供更醒目且更可操作的工具栏风格选项，非常适合功能切换和成组控件：

<flux:radio.group variant="buttons" label="反馈类型">
    <flux:radio icon="bug-ant">错误报告</flux:radio>
    <flux:radio icon="light-bulb">建议</flux:radio>
    <flux:radio icon="question-mark-circle">问题</flux:radio>
</flux:radio.group>

查看单选的“按钮（buttons）”变体 →

与所有 Flux 组件一样，这些变体完全支持键盘可访问性，具有完善的焦点管理和屏幕阅读器支持。药丸在需要时会自然换行，而按钮则保持一致的尺寸与对齐。

两种变体都支持与标准单选和复选组件相同的所有属性——图标、禁用状态等。

版本 ^2.1.0

我们为 Flux UI 新增了一个头像组件。它很小，但很重要，我们一直等到能够给予足够的打磨才发布。来看一下。

在你的应用中添加头像非常简单：

<flux:avatar src="https://unavatar.io/x/calebporzio" />

回退方案

并非每个人都有头像，因此我们希望替代方案也同样美观。

当未提供图片时，头像组件会使用名称生成首字母：

<!-- 根据名称生成 "CP" -->
<flux:avatar name="Caleb Porzio" />

<!-- 或者精确控制显示的内容 -->
<flux:avatar initials="Ca" />

<!-- 甚至仅显示一个首字母 -->
<flux:avatar name="Caleb Porzio" initials:single />

颜色

我们提供了一些合理的配色选项，包括自动配色功能，可为用户提供一致的识别色。

<!-- 可从 17 种预设颜色中选择 -->
<flux:avatar name="Caleb Porzio" color="indigo" />

<!-- 或让 Flux 以确定性方式生成颜色 -->
<flux:avatar name="Caleb Porzio" color="auto" />

<!-- 提供种子以获得一致的颜色 -->
<flux:avatar name="Caleb Porzio" color="auto" color:seed="{{ $user->id }}" />

color="auto" 选项会基于名称生成颜色，因此同一用户始终获得相同的颜色。这一小细节有助于视觉识别。

徽章

添加状态指示或通知：

<!-- 简单的通知圆点 -->
<flux:avatar badge badge:color="green" src="https://unavatar.io/x/calebporzio" />

<!-- 通知数量 -->
<flux:avatar badge="25" src="https://unavatar.io/x/calebporzio" />

<!-- 自定义徽章内容 -->
<flux:avatar src="https://unavatar.io/x/calebporzio">
    <x-slot:badge>
        <img class="size-3" src="https://unavatar.io/github/hugosaintemarie" />
    </x-slot:badge>
</flux:avatar>

分组

在需要时将头像分组以节省水平空间：

<flux:avatar.group>

    <flux:avatar src="https://unavatar.io/x/calebporzio" />

    <flux:avatar src="https://unavatar.io/x/taylorotwell" />

    <flux:avatar src="https://unavatar.io/x/jeffrey_way" />

    <flux:avatar>3+</flux:avatar>

</flux:avatar.group>

也可在表格、下拉菜单等其他 UI 元素中使用它们：

查看头像组件文档以获取更多示例和详细的 API 参考。