Ion Ripple

Ion Ripple

Directive to add material design ripple effect.

$0.00

Vitaliy Bobrov

Vitaliy Bobrov

Member since 2014

Details

Version:
1.1.0
Ionic:
1.x  
Platforms:
iOS, Android  
Released:
5 years ago
Updated:
4 years ago
Category:
Plugins
Tags:
,

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

bash bower install --save ion-ripple

NPM

bash npm install --save ion-ripple

Usage

Include the script in your HTML

```html

```

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

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

Then add the ion-ripple attribute to elements

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

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

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