Material Ripple effect can easily be added to any DOM element (or component) through the
v-ripple Quasar directive. Following these steps:
Make sure your DOM element or component has CSS
position: relativeor Quasar CSS helper class
relative-positionattached to it.
v-rippledirective to it.
The color of the ripples are determined by the text color (CSS ‘color’ prop) of the DOM element.
<div class="relative-position" v-ripple>
For this you need to specify
ios directive modifiers like this:
<!-- Only for Quasar Material theme -->
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.
When your Vue scope variable
rippleEnabled becomes Boolean
false then the ripple will be disabled.
You can also combine this with the