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: {
    // not needed if using auto-import feature:
    directives: [
      'Ripple'
    ]
  }
}

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



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

Colored



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

Positioning



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



API