Skip to page content

切换按钮

QBtnToggle 组件是另一个基础的用户输入元素,类似于 QRadio 但以按钮形式呈现。您可以用它来让用户从多个选项中进行选择。

用法

基础用法

样式设计

TIP

由于 QBtnToggle 内部使用了 QBtn,您可以使用 QBtn 的样式相关属性来定制该组件的外观。

自定义内容

下面第一个 QBtnToggle 在每个按钮上添加了工具提示。第二个 QBtnToggle 自定义了按钮内容。注意 options 对象定义中的 slot 属性。当您使用了 slot 属性时,options 中的 label / icon 属性就不是必需的了。

禁用和只读

原生表单提交

当处理具有 actionmethod 的原生表单时(例如在 Quasar 配合 ASP.NET 控制器使用时),您需要为 QBtnToggle 指定 name 属性,否则 formData 中将不会包含它(如果需要的话)——所有值都会被转换为字符串(这是原生行为,因此不要使用 Object 类型的值):

无障碍访问
v2.25+

每个选项渲染为一个按钮,并通过 aria-pressed 反映其是否为当前选中值,屏幕阅读器会播报选中状态。对于纯图标选项,请通过选项的 attrs 属性提供无障碍名称(例如 attrs: { 'aria-label': '左对齐' })。

注意 QBtnToggle 不暴露分组语义:包裹元素不带任何 role 或无障碍名称,选项之间没有方向键导航——每个启用的选项都是独立的 Tab 焦点。