vue-ripplify v2.1.0

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.

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

Setting 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)