Material Design Ripple for Vue

A configurable directive-based Ripple effect for Vue.

Notable features:

• Ability to change options and turn on/off dynamically
• Ripple resizes correctly if target size changes mid-effect
• Unbounded option

Live demo

Installation

npm install vue-ripplify --save

Usage

// in builds
import VueRipplify from 'vue-ripplify'

Vue.directive('ripple', VueRipplify)

<!-- when using a <script> tag -->
<script type="text/javascript" src="https://unpkg.com/vue-ripplify"></script>

<!-- application -->
<div v-ripple class="button">A button with ripple</div>

Options

The directive can be configured by assigning an object with the following optional keys.

Key	Type	Default Value	Description
isDisabled	Boolean	false	Disables the ripple effect.
isUnbounded	Boolean	false	Unbounded ripple variant for icons, action buttons, etc.
duration	Number	250	Effect duration in ms. Does not include fade time.
color	String	'rgba(0, 0, 0, 0.26)'	A CSS-valid color value. RGBA with low opacity recommended.
zIndex	Number	20	Effect z-index.

Examples

A custom colored ripple.

<div v-ripple="{ color: 'rgba(44, 221, 0, .36)' }">Custom Ripple</div>

Variables can be used for dynamic control. vue-ripplify will reconfigure the effect when either of this.isRippleDisabled or this.rippleColor changes.

<div v-ripple="{ isDisabled: isRippleDisabled, color: rippleColor }">Dynamically Configured Ripple</div>

Global Options

Default values can be set thus:

import Ripplify from 'vue-ripplify'

Ripplify.isUnbounded = false
Ripplify.duration = 125
Ripplify.color = 'rgba(255, 255, 255, 0.26)'
Ripplify.zIndex = 150

Vue.directive('ripple', Ripplify)