主题设置

选择强调色与基础色,保存后全站生效。

强调色
基础色
点击切换锁定状态
November 3, 2024

自定义图标集、文件输入、点击外部关闭模态框等

版本 ^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 查看完整发布说明

© 2025 FluxProMax™. All Rights Reserved.

备案号:皖ICP备13019729号-11

网站导航