Material Ripple Effect as Vue Directive.
This directive it's meant to be used in any element in which you like to achieve such ripple effect.
npm install vue-ripple-directive --save
Optional parameter to pass to the directive.
Parameter | Type | Values |
---|---|---|
color-value |
String | Default: 'rgba(0, 0, 0, 0.35)'. Accepts either HEX, RGB & RGBA values. For optimal look use RGBA with low opacity. |
By default this directive attaches a click handler to the element as well as the transition is set for 600ms. For those who wants to modify the same, just pass modifiers to the directive:
v-ripple.mouseover.500
Can also modify only one
v-ripple.mouseover
First you need to import the directive and add it to Vue.
import Ripple from 'vue-ripple-directive'
Vue.directive('ripple', Ripple);
Then use on any element you want to achieve the effect.
<div v-ripple class="button is-primary">This is a button</div>
If you want a custom color just pass a color parameter as string
. It's best if you use RGBA colors to achieve a greater effect.
<div v-ripple="'rgba(255, 255, 255, 0.35)'" class="button">I have different color</div>