按钮

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

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

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

QBtn API

Loading API...
Please wait...

用法

标准

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