API 浏览器
按钮切换

QBtnToggle 组件是另一个用于用户输入的基本元素,类似于 QRadio,但带有按钮。你可以使用它们为用户提供一种从多个选项中选择一个选项的方式。

¥The QBtnToggle component is another basic element for user input, similar to QRadio but with buttons. You can use this to supply a way for the user to pick an option from multiple choices.

Loading QBtnToggle API...

用法(Usage)

¥Usage

基本(Basic)

¥Basic

Basic



设计(Design)

¥Design

提示

由于 QBtnToggle 使用 QBtn,因此你可以使用 QBtn 的设计相关属性来设置此组件的样式。

¥Since QBtnToggle uses QBtn, you can use design related props of QBtn to style this component.

Some design examples



Spread horizontally



自定义内容(Custom content)

¥Custom content

下面第一个 QBtnToggle 的每个按钮上都有工具提示。第二个 QBtnToggle 已自定义内容。注意 options 对象定义中的 slot 属性。使用此 slot 属性时,你不需要 options 中的 label / icon 属性。

¥First QBtnToggle below has tooltips on each button. Second QBtnToggle has customized the content. Notice the slot prop in the options Object definition. When you use this slot prop, you don’t necessary need the label / icon props in options.

Custom buttons content



禁用并只读(Disable and readonly)

¥Disable and readonly

Disable and readonly



原生表单提交(Native form submit)

¥Native form submit

处理具有 actionmethod 的原生表单时(例如,将 Quasar 与 ASP.NET 控制器结合使用时),你需要在 QBtnToggle 上指定 name 属性,否则 formData 将不会包含该属性(如果应该包含的话)。 - 所有值都将转换为字符串(原生行为,因此请勿使用对象值):

¥When dealing with a native form which has an action and a method (eg. when using Quasar with ASP.NET controllers), you need to specify the name property on QBtnToggle, otherwise formData will not contain it (if it should) - all value are converted to string (native behaviour, so do not use Object values):

Native form