Material波纹(Ripples)

Material波纹效果可以通过v-rippleQuasar指令轻松添加到任何DOM元素(或组件)。

WARNING

请勿在已经有Material波纹的组件上使用此指令(例如:QBtn)。 而是通过这些组件的ripple属性配置内部纹波。

安装

// quasar.conf.js

return {
  framework: {
    config: {
      ripple: { /* look at QUASARCONFOPTIONS from the API card (bottom of page) */ }
    }
  }
}

用法

WARNING

确保您的DOM元素或组件具有附加的CSSposition: relative或Quasar CSS辅助类relative-position

基础

Basic

着色

默认情况下,Material波纹采用文本的CSS颜色,但您可以对其进行配置:

Colored

定位

您还可以配置纹波是否总是从中心开始,而不管接触点如何:

Positioning

提前触发

默认情况下,Ripple指令是在单击或按键时触发的。但是,您可以更改它并使其在第一次用户交互(mousedown、touchstart、keydown)时提前触发。请注意,在大多数情况下,事件集可能重叠(第一次和最后一次用户交互之间的延迟很小),并且用户的感知没有差异,但在某些情况下,它可能会误导用户。

这在触摸屏上尤其明显,如果用户在触摸屏启动后意外移动手指,有时会被解释为一个非常小的滚动事件,而不是单击,因此不会触发单击事件,但仍会产生波纹。

Triggering immediately

Disable

如果由于某种原因需要禁用纹波,可以为指令分配一个布尔值:

Disable

Ripple API

Loading API...
Please wait...