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

版本 ^2.0.5

我们刚刚为 Flux 新增了标注组件！这些组件有助于突出应用中的重要信息，并引导用户下一步该做什么。非常适合公告、警报和功能亮点。

颜色与变体

标注内置了常见的变体，用以直观表示不同的紧急程度，如成功、警告和危险。此外，我们也支持你使用任意 Tailwind 颜色。

了解更多关于变体与颜色 →

操作

标注支持操作按钮，便于用户立即执行下一步。在空间较紧凑的情况下，内联模式会将操作放在消息旁边。

这非常适用于升级提示、账户通知或新功能介绍等场景。

探索标注操作 →

灵活布局

有时你可能希望将标注图标放在标题内以节省空间。只需将图标属性添加到标题组件（而不是根标注）即可实现。

查看标注布局示例 →

可关闭

Flux 标注提供了专用的 controls 插槽，用于添加紧凑的操作按钮。这样可以轻松添加下拉菜单快捷方式或关闭图标按钮，并按需控制其行为。

了解可关闭的标注 →

自 Flux v2.0.5 起已提供标注组件。与所有 Flux 组件一样，它们即开即用，完全响应式并支持深色模式。希望对你有所帮助——我们自己也将大量使用！