Material Ripples
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: relative
or Quasar CSS helper classrelative-position
attached to it.Add
v-ripple
directive to it.
The color of the ripples are determined by the text color (CSS ‘color’ prop) of the DOM element.
Installing
Edit /quasar.conf.js
:framework: {
directives: ['Ripple']
}
Basic Usage
<div class="relative-position" v-ripple> |
Trigger only for one Quasar theme
For this you need to specify mat
or ios
directive modifiers like this:<!-- Only for Quasar Material theme -->
<div v-ripple.mat class="relative-position">...</div>
<!-- Only for Quasar iOS theme -->
<div v-ripple.ios class="relative-position">...</div>
Dynamic 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.<template>
<div
v-ripple="rippleEnabled"
class="relative-position"
>
<q-checkbox
v-model="rippleEnabled"
label="Enable Ripples"
/>
.....
</div>
</template>
<script>
export default {
data () {
return {
rippleEnabled: true
}
}
}
</script>
When your Vue scope variable rippleEnabled
becomes Boolean false
then the ripple will be disabled.
You can also combine this with the mat
and ios
modifiers.