Ripple effect for elements

1kb gzipped vue-directive for enabling ripple effect on elements.

How to install?

npm install vue-rip

How to use?

import { ripple } from "vue-rip";

export default {
    directives: {
        ripple
    }
}

Now just bind it to your element:

<div v-ripple>Click me</div>

You can declare it global aswell

import { ripple } from "vue-rip";

Vue.directive("ripple", ripple);

Options

You can pass an color:

<div v-ripple="{ color: 'red' }">Click me</div>

Or the time of the ripple transition in milliseconds:

<div v-ripple="{ time: 2000 }">Click me</div>

The default ripple color is: rgba( 0, 0, 0, 0.3)