FluxUI 中文网 · 官方 Livewire UI 库

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

单选卡片已上线