Skip to page content

选项组

QOptionGroup 组件是一个辅助组件,它让您可以更好地控制分组二进制(开或关、真或假、1 或 0)表单输入组件,如复选框、单选按钮或开关。该组件的一个很好的用途是提供一组可以打开和关闭的选项或设置。

QOptionGroup API

用法

标准

标准



搭配 QCheckbox 或 QToggle

WARNING

复选框/开关的 model 必须是一个数组。

使用标签插槽
v2.2+

有两种类型的插槽。一个是通用的(label),适用于所有选项,除非使用了更具体的基于索引的插槽(label-N,其中 N 是从 0 开始的选项索引)。两种类型的插槽都接收相应的选项作为参数。

请注意,我们为第一个选项(索引 0 处的选项)使用特定的标签插槽,我们还添加了一个 QTooltip。

标签放在左边

行内

行内



紧凑

禁用

禁用



TIP

options 数组中的对象可以包含 QToggle、QCheckbox 或 QRadio 的任何属性,例如 disableleftLabel。请参见下面的示例。

禁用特定选项

自定义 Label、Value 和 Disable 属性
v2.17+

默认情况下,QOptionGroup 会从 options 数组中每个选项对象的 labelvaluedisable 属性来读取数据。但您可以自定义这些属性的映射:

强制暗色模式

原生表单提交

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

无障碍访问
v2.25+

QOptionGroup 在 typeradio 时用 role="radiogroup" 的容器包裹其选项,为 checkbox 和 toggle 使用通用的 role="group",并在整组禁用时在容器上设置 aria-disabled="true"。各选项的语义(radio/checkbox/switch role、aria-checked、标签)来自底层的 QRadio/QCheckbox/QToggle 组件。分组本身默认没有无障碍名称——请为 QOptionGroup 传入 aria-label(或 aria-labelledby)属性,以便屏幕阅读器能播报该分组的用途。

对于 radio 分组,以下键盘交互实现了漫游 tabindex;水平方向键会感知 RTL 方向。

键盘导航

typeradio(默认值)时,QOptionGroup 遵循 WAI-ARIA 单选分组模式:整个分组是一个单独的 Tab 焦点(按 Tab 将焦点移入分组——移到选中的单选项上——再次按则移出),方向键在分组内移动焦点并选中新聚焦的单选项,到达边界时循环并跳过禁用的选项。

独立的 QRadio 组件(不在 QOptionGroup 中使用时)不知道其兄弟元素的存在,因此无法提供方向键导航——每个都是独立的 Tab 焦点。

对于 checkbox 和 toggle,每个控件保持为独立的 Tab 焦点,因为它们各自独立切换。