版本 ^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> 元素的自动补全行为保持一致。

版本 ^1.0.10

基于用户反馈和我们的专业判断，Flux 的 Toast 组件进行了多项改进。

更醒目的显示效果

首先，我们增加了阴影效果，使 Toast 在页面上更加突出。

我们延长了上滑动画的持续时间，让 Toast 的出现更加引人注目。

现在您可以使用三种新的变体为 Toast 消息添加上下文：

- 成功 (success)

- 危险 (danger)

- 警告 (warning)

使用方式：

Flux::toast('操作失败', variant: 'danger');

定位功能

现在您可以通过 position 属性指定 Toast 在页面上的显示位置：

<flux:toast position="top right" />

如果页面顶部有导航栏，可以添加额外的内边距：

<flux:toast position="top right" class="pt-24" />

Flux 会根据位置自动调整动画效果：

- 顶部的 Toast 会从侧面滑入

- 底部的 Toast 会从底部上滑

页面跳转时保持显示

在应用开发中，常见的做法是在重定向前显示 Toast：

Flux::toast(...);

$this->redirect('...', navigate: true);

如果希望在页面跳转后仍然显示 Toast，可以在布局中使用 @persist 指令：

@persist('toast')

    <flux:toast />

@endpersist

注意：此功能在 Livewire 3.5.10 版本中已修复了浏览器页面间处理弹窗的问题。