QOptionGroup 组件是一个辅助组件,它让您可以更好地控制分组二进制(开或关、真或假、1 或 0)表单输入组件,如复选框、单选按钮或开关。该组件的一个很好的用途是提供一组可以打开和关闭的选项或设置。
QOptionGroup API
用法
标准
搭配 QCheckbox 或 QToggle
复选框/开关的 model 必须是一个数组。
使用标签插槽 v2.2+
有两种类型的插槽。一个是通用的(label),适用于所有选项,除非使用了更具体的基于索引的插槽(label-N,其中 N 是从 0 开始的选项索引)。两种类型的插槽都接收相应的选项作为参数。
请注意,我们为第一个选项(索引 0 处的选项)使用特定的标签插槽,我们还添加了一个 QTooltip。
标签放在左边
行内
紧凑
禁用
options 数组中的对象可以包含 QToggle、QCheckbox 或 QRadio 的任何属性,例如 disable 或 leftLabel。请参见下面的示例。
禁用特定选项
自定义 Label、Value 和 Disable 属性 v2.17+
默认情况下,QOptionGroup 会从 options 数组中每个选项对象的 label、value、disable 属性来读取数据。但您可以自定义这些属性的映射:
强制暗色模式
原生表单提交
当处理带有 action 和 method 的原生表单时(例如,在使用 Quasar 和 ASP.NET 控制器时),您需要为 QOptionGroup 指定 name 属性,否则 formData 中将不会包含它(如果应该包含的话) - 所有值都会被转换为字符串(原生行为,所以不要使用对象值):
无障碍访问 v2.25+
QOptionGroup 在 type 为 radio 时用 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 方向。
键盘导航
当 type 为 radio(默认值)时,QOptionGroup 遵循 WAI-ARIA 单选分组模式:整个分组是一个单独的 Tab 焦点(按 Tab 将焦点移入分组——移到选中的单选项上——再次按则移出),方向键在分组内移动焦点并选中新聚焦的单选项,到达边界时循环并跳过禁用的选项。
独立的 QRadio 组件(不在 QOptionGroup 中使用时)不知道其兄弟元素的存在,因此无法提供方向键导航——每个都是独立的 Tab 焦点。
对于 checkbox 和 toggle,每个控件保持为独立的 Tab 焦点,因为它们各自独立切换。