ion-ripple

A pure javascript (no polymer, no jQuery) Ionic directive that adds a Google Material Design ripple effect when clicked or touched based on angular-ripple.

Bower

bower install --save ion-ripple

NPM

npm install --save ion-ripple

Usage

Include the script in your HTML

<link href="lib/ion-ripple/ion-ripple.css" rel="stylesheet">
<script src="lib/ion-ripple/ion-ripple.min.js"></script>

Also you can import ripple scss file into your app styles

@import '../lib/ion-ripple/ion-ripple';

There are some default SASS variables available that can be overriden:

$ion-ripple-color: #fff !default;
$ion-ripple-duration: .45s !default;

Then include ionMDRipple in your module dependencies

angular.module('app', ['ionMDRipple']);

Then add the ion-ripple attribute to elements

<button ion-ripple>Ripple!</button>

Also you can specify ripple effect color with ion-ripple-color attribute.

<button ion-ripple ion-ripple-color="#ff0000">Ripple!</button>