Material Design Ripple Click/Tap Effect In Vue

Description:

A Vue directive that applies a Material Design inspired ripple effect to components when clicked.

Basic Usage:

1. Import and register the directive.

import Vue from "vue";
import Ripple from "vue-material-design-ripple";
import "vue-material-design-ripple/dist/vue-material-design-ripple.css";

Vue.directive("ripple", Ripple);

2. Add a ripple click/tap effect to your element.

<template>
  <div class="clickme" :style="{color}" v-ripple="{center,class: rippleClass}">
    ...
  </div>
</template>

Preview:

Download Details:

Author: partyka1

Live Demo: https://codesandbox.io/s/vue-template-2f18v?fontsize=14

Download Link: https://github.com/partyka1/vue-material-design-ripple/archive/master.zip

Official Website: https://github.com/partyka1/vue-material-design-ripple

Install & Download:

You Might Be Interested In: