Material Ripples

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

WARNING

Do not use this directive on components that already have material ripples baked in (example: QBtn). Rather configure the internal ripples through those component’s ripple property.

Installing

// quasar.conf.js

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

Usage

WARNING

Make sure that your DOM element or component has CSS position: relative or Quasar CSS helper class relative-position attached to it.

Basic

Basic

Coloring

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

Colored

Positioning

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

Positioning

Triggering early

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.

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.

Triggering immediately

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:

Disable

Ripple API

Loading API...
Please wait...