按钮

Quasar有一个名为QBtn的组件,它是一个带有一些额外有用功能的按钮。 例如,它有两种形状:矩形(默认)和圆形。 它还具有内嵌的material波纹效果(可以禁用)。

按钮组件还带有一个旋转器或者加载效果。 当应用程序执行可能会导致延迟时,您可能会使用它,并且您希望向用户提供关于该延迟的一些反馈。 使用时,只要用户单击按钮,该按钮将显示旋转动画。

当不是禁用状态或旋转时,一旦点击或轻击,QBtn就会发出“@click”事件。

安装

/*
 * No installation step is necessary.
 * It gets installed by default by @quasar/app v2+.
 */

用法

标准

Standard buttons

自定义颜色

Custom colors

带图标

With icon

圆形

Round buttons

自定义内容

Custom content
Truncate label

设计

Button design

对齐

Button alignment

大小

Button size

填充(padding)

默认填充为“xs md”。但是,您可以使用padding属性自定义它:

Button padding

进度相关

一些按钮动作涉及与服务器联系,因此是异步响应。 最好通知用户正在进行的后台处理,直到异步响应准备就绪为止。 QBtn通过loading属性提供了这种可能性。 此属性将显示QSpinner(默认情况下),而不显示按钮的图标和/或标签。 还可以使用自定义加载内容(不仅是文本或)。

Indeterminate progress

如果您愿意,还可以通过使用附加的percentage属性以及您对进度按钮的了解,在按钮内显示确定的进度:

Deterministic progress

自定义波纹

Custom ripple

以下两个示例不适用于UMD版本(因此在Codepen/jsFiddle中也是如此),因为它依赖于Vue Router的存在。

对于更复杂的用例,您还可以直接使用原生的Vue<router-link>组件包装QBtn。 这也使您有机会根据应用程序的当前路径来控制状态:

其它选项

Other options

Disable

Disable

控制表单提交按钮

当您有一个将表单输入提交到服务器的按钮(例如“保存”按钮)时,您通常会希望使用户能够通过按Enter键来提交表单。 如果您还希望向用户提供有关正在进行的保存过程的反馈,并防止用户反复按下该按钮,则需要该按钮显示加载微调器,并禁止其单击事件。 如果配置,QBtn允许此行为。

WARNING

当将类型为“submit”的QBtn放置在QField、QInput或QSelect的“before”、“after”、“prepend”或“append”插槽之一中时,您还应该在有问题的QBtn上添加@click侦听器。 该侦听器应调用提交表单的方法。 此类插槽中的所有“点击”事件均不会传播到其父元素。

Form Submission

QBtn API

Loading API...
Please wait...