Skip to page content

单选框

QRadio 组件是采集用户输入的一个基本元素。您可以使用它为用户提供一种从多个选项中选择选项的方法。

TIP

关于创建一组单选框的其他可能性,请参阅 QOptionGroup

QRadio API

用法

标准用法

带自定义图标
v2.5+

紧凑模式

着色

在下面的示例中,第二行使用了 keep-color 属性来保持单选框在未选中状态下的颜色。

着色



强制暗色模式

禁用状态

左侧标签

尺寸

除了标准尺寸外,您还可以通过 size 属性定义自己的尺寸(最后一个示例是自定义尺寸)。

搭配 QOptionGroup

TIP

您也可以使用 QOptionGroup,它简化了处理单选框组的使用方式,如下面的示例所示。

搭配 QItem

在下面的示例中,我们渲染了一个 <label> 标签(注意 tag="label"),这样 QRadio 就能响应 QItem 的点击来改变选中状态。

原生表单提交

当处理一个带有 actionmethod 的原生表单时(如:使用 Quasar 和 ASP.NET 控制器时),您需要为 QRadio 声明 name 属性,否则表单数据中不会包含它(如果应该包含的话) - 所有值都会被转换为字符串(原生行为,所以不要使用对象值):

Dense



无障碍访问
v2.25+

QRadio 暴露 role="radio" 并通过 aria-checked 反映其状态。label 属性提供无障碍名称(aria-label),禁用的单选按钮暴露 aria-disabled="true"。它可通过 Tab 到达(参见 tabindex 属性),并通过 EnterSpace 选中。

独立的 QRadio 不知道其兄弟元素的存在:每个都是独立的 Tab 焦点,且没有包裹的 radiogroup。要获得完整的 WAI-ARIA 单选分组模式——整个分组作为一个 Tab 焦点,方向键移动焦点和选择(漫游 tabindex)——请将单选按钮包裹在 QOptionGroup 中。