版本 ^1.0.20

Flux 默认内置完整的 Heroicons 图标集。和 Tailwind 团队的一贯作风一样，质量很高。

不过，约 400 个图标相较其他替代方案仍略显有限。

如果你项目中需要的图标在 Heroicons 里没有，很可能可以在 Lucide 中找到。

在 Flux v1.0.20 中，我们提供了一个新命令，可轻松将单个 Lucide 图标导入到你的项目：

php artisan flux:icon

运行后会提示你输入需要的图标名称，并会将图标本地导入到项目中，格式化为可与 Flux 一起使用的 Blade 组件。

如果 Lucide 仍没有你需要的图标，你也可以将自定义图标手动添加到项目中的以下目录：

resources/views/flux/icon/your-custom-icon.blade.php

了解更多关于添加自定义图标 ->

自定义文件输入

浏览器默认的文件输入元素几乎无法样式化，而且坦白说看起来已经过时。

我们为原生文件输入提供了一个简单封装，并通过输入组件的 type="file" 对外提供：

<flux:input type="file" />

当然，我们确保该封装与原生输入一样，对键盘、鼠标和读屏器都工作良好。

了解更多关于文件输入 ->

点击外部关闭模态框

Flux 的模态框使用浏览器较新的 <dialog> 元素。这带来了很多好处，但也有一些小问题。其中之一是 <dialog> 元素不支持通过点击外部来关闭模态框；只能使用 Esc 键或关闭按钮。

通过少量自定义 JavaScript，我们已在 Flux 中实现了该行为。现在默认所有 <flux:modal> 组件都会支持点击外部关闭。

可清除的输入与选择

本次发布的另一个小改进是：当填充内容时，Flux 中任何可搜索的输入都会显示清除按钮。

对于默认不显示清除按钮的输入，我们也提供了可配置：

<flux:input clearable />

<flux:select variant="listbox" clearable>

    ...

</flux:select>

<flux:command>

    <flux:command.input placeholder="搜索..." />

    

    ...

</flux:command>

完整更新日志

• 添加 flux:icon 命令，用于从 Lucide 导入 Heroicons 缺失的第三方图标

• 为 listbox、可搜索输入与 command 输入支持清除按钮

• 将已弃用的 'color-adjust' CSS 属性替换为 'print-color-adjust'

• 修复侧边栏布局中个人资料名称未被截断的问题

• 修复复选框、单选与开关在 wire:model 下因异常 input/change 事件触发导致的问题

• 修复 dynamic-component 属性被双重转义的问题

• 修复复选框组初始值为 null 的问题

• 当已选项元素被移除时，保留选中项的展示事件

• 支持通过点击外部关闭模态框

• 新增自定义文件输入组件

在 GitHub 查看完整发布说明

版本 ^1.0.19

你知道在配置新笔记本时用到的那些大块开关吗？没错，那就是“单选卡片”：简单、有边框的方块，行为类似单选按钮——一次只能选择一个。

现在 Flux 已支持它们，使用方法很简单：给单选组添加 variant="cards" 即可：

<flux:radio.group wire:model="shipping" variant="cards">

    <flux:radio value="standard" label="Standard" description="4-10 business days" />

    ...

</flux:radio.group>

默认卡片横向排列，你也可以用简单的 Flex 工具类（如 .flex-col）控制方向；配合响应式工具类（如 .max-sm:flex-col）即可在移动端轻松切换布局：

<flux:radio.group variant="cards" class="max-sm:flex-col">

给卡片添加一个立方体图标，只需传递 icon="cube" 属性：

<flux:radio icon="cube" ... />

如果想要更简洁的样式，可以在单选组上设置 :indicator="false" 移除指示器。

<flux:radio.group variant="cards" :indicator="false">

    ...

</flux:radio.group>

大多数情况下，上述自定义已足够，但有时你可能需要对每张卡片的内容拥有完全的控制权。

这种情况下，你可以使用完整语法自行组合这些单选卡片：

<flux:radio.group variant="cards">

    <flux:radio>

        <div>

            <flux:heading>Standard</flux:heading>

            <flux:subheading size="sm">4-10 business days</flux:subheading>

        </div>

        <flux:radio.indicator />

    </flux:radio>

</flux:radio.group>

阅读单选卡片文档 ->

虽然不太常见，但有时你可能希望拥有卡片的外观，却需要复选框的行为。Flux 也为复选框提供了 variant="cards":

<flux:checkbox.group variant="cards">

    <flux:checkbox label="Newsletter" description="Stay up to date" />

    ...

</flux:checkbox.group>

当然，上述属性与自定义同样适用于复选卡片。

阅读复选卡片文档 ->

在新增单选变体的同时，我们也加入了另一个常见需求：分段式单选按钮（Segmented）。

与卡片类似，你可以通过 variant="segmented" 使用分段式按钮：

<flux:radio.group variant="segmented">

    <flux:radio label="Light" icon="sun" />

    <flux:radio label="Dark" icon="moon" />

    <flux:radio label="System" icon="computer-desktop" />

</flux:radio.group>

阅读分段式单选文档 ->

打造上述单选与复选变体绝不仅仅是外观。这些组件均可通过键盘完整操控，使用 roving-tabindex 模式模拟原生复选框与单选按钮的焦点行为，并提供正确的属性与角色，使读屏器将其识别为标准表单控件。

这些细节正是 Flux 区别于其他组件库的原因之一。我们致力于提供世界级的 UI 组件：在浏览器中观感出色、在编辑器中使用顺手，并尽可能兼容更多用户的可访问性需求。

完整更新日志

新增单选卡片变体

新增复选卡片变体

新增分段式单选组变体

分段式选项卡与单选按钮改用实心图标

为单选、复选与开关添加 2px 的焦点轮廓偏移，以匹配原生样式

修复可排序列在移动端背景被裁剪的问题

翻译组合框与列表框中的“No results found”字符串

修复 :href 属性被转义导致带 & 的链接格式错误

支持 as="div" 将按钮渲染为 div

在 GitHub 查看完整发布说明

自定义导航徽章颜色

现在您可以使用 badge-color 属性来自定义导航列表项中徽章的颜色：

<flux:navlist.item badge="专业版" badge-color="lime">
    日历
</flux:navlist.item>

查看导航徽章颜色文档 ->

模态框关闭监听器

现在，当 Flux 模态框因任何原因（按 ESC 键、取消按钮、关闭按钮等）关闭时，您可以执行任何 Livewire 操作：

<flux:modal @close="someLivewireAction">

    <!-- ... -->

</flux:modal>

解更多关于模态框关闭事件的信息 ->

更智能的可搜索选择框

Flux 中所有可搜索的输入框（包括可搜索选择框、组合框、命令面板）现在将使用 JavaScript 的 .includes(...) 方法替代 .startsWith(...) 来匹配结果，使搜索更加全面。

这一改进使搜索行为与浏览器原生的 <datalist> 元素的自动补全行为保持一致。