🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Material Design inspired performant ripple click effect for Vue.js.

Animation

Documentation

fi-ripple

Usage

Install with npm install fi-ripple.

You will also need to install dom4 if you want IE 10/11 support.

With Vue

import 'dom4'; // for IE 10 support – import it once in your app entry import Ripple from '../fi-ripple.js'; // import the library  export default {   directives: {     Ripple,   }, }

Now you can use the directive in your component template:

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

With plain JS

// import the Ripple constructor import { FiRipple } from 'fi-ripple';  const rippleContainer = document.getElementById('test'); // listen for clicks inside the given container new FiRipple(rippleContainer);

You May Also Like