材质波纹效果可以通过 v-ripple Quasar 指令轻松添加到任何 DOM 元素（或组件）。

// quasar.config file

return {
  framework: {
    config: {
      ripple: /* look at QuasarConfOptions from the API card */
    }
  }
}

用法

基本用法

颜色设置

默认情况下，Material Ripple 使用文本的 CSS 颜色，但您可以对其进行配置。

位置设置

您还可以配置涟漪是否始终从中心开始，而不管触摸点在哪里。

提前触发

默认情况下，Ripple 指令在点击或按键抬起时触发。但是，您可以更改此行为，使其更早触发，在第一次用户交互（鼠标按下、触摸开始、按键按下）时触发。请注意，在大多数情况下，事件集可能会重叠（第一次和最后一次用户交互之间有很小的延迟），并且用户感知没有区别，但在某些情况下，这可能会导致误导用户。

这在触摸屏上尤其明显，如果用户在触摸开始后意外移动手指，有时会被解释为非常小的滚动事件而不是点击事件，因此不会触发点击事件，但仍然会有涟漪效果。

禁用

如果出于某种原因，您遇到需要禁用涟漪效果的场景，则可以为指令分配一个布尔值。