通过 v-ripple Quasar 指令，可以轻松地将 Material Ripple 效果添加到任何 DOM 元素（或组件）。

¥Material Ripple effect can easily be added to any DOM element (or component) through the v-ripple Quasar directive.

// quasar.config file

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

用法(Usage)

¥Usage

基本(Basic)

¥Basic

着色(Coloring)

¥Coloring

Material Ripple 默认采用 CSS 文本颜色，但你可以对其进行配置：

¥The Material Ripple takes the CSS color of text by default, but you can configure it:

定位(Positioning)

¥Positioning

你还可以配置波纹是否始终从中心开始，无论触摸点如何：

¥You can also configure if the ripple should always start from center or not, regardless of the touch point:

触发早期(Triggering early)

¥Triggering early

默认情况下，Ripple 指令在点击或键盘释放时触发。但是，你可以更改它，使其在第一次用户交互（鼠标按下、触摸启动、键盘按下）时更早触发。请注意，在大多数情况下，事件集可能会重叠（第一次和最后一次用户交互之间会有短暂的延迟），并且用户的感知没有差异，但在某些情况下，这可能会误导用户。

¥By default, the Ripple directive is triggered on click or keyup. However, you can change that and make it trigger earlier, on the first user interaction (mousedown, touchstart, keydown). Please note that in most situations the event sets may overlap (small delay between first and last user interaction) and there is no difference in the user perception, but in certain conditions it may lead to misleading the user.

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

¥This is especially noticeable on touchscreens where if a user accidentally moves their finger after the touchstart it can sometimes be interpreted as a very small scroll event instead of a click so the click event isn’t triggered but there is still a ripple.

禁用(Disable)

¥Disable

如果出于某种原因，你需要禁用涟漪效果，则可以为该指令分配一个布尔值作为值：

¥If for some reason you have a scenario where the ripples need to be disabled, then you can assign a Boolean as value for the directive: