Ng-ripple NPM | npm.io

ng-ripple

Material ripple effects directive for AngularJS, Inspired by Angular Material Design , this implementation contains the ripple animation for buttons and links

Version

1.0.2

Dependencies

AngularJs

You can also use jQuery version

Installation

NPM

$ npm install ng-ripple

or Bower

$ bower install ngRipple

Examples

Various examples: https://ng-ripple.antoniodalsie.com/

Options

Create directive with Element:

<ripple></ripple>

or with Class:

<a href="#" class="ripple"></ripple>

or with Attibute:

<a href="#" data-ripple></ripple>

<a href="#" ripple></ripple>

Add material button with box-shadow:

<ripple class="r-raised"></ripple>

Icon element:

<ripple class="r-icon"></ripple>

Fab element:

<ripple class="r-round r-raised"></ripple>

Disabled ripple

<ripple r-disabled></ripple>

or Disabled active

<ripple clas="r-int-disabled"></ripple>

or Disabled all element:

<ripple class="disabled"></ripple>

Custom light color

<ripple r-light></ripple>

Custom ripple color

<ripple r-color="#f00"></ripple>

Custom ripple opacity

<ripple r-opacity=".2"></ripple>

Ripple in-front (overink)

<ripple class="r-overink"></ripple>

Prevent ink for specific element and children

<ripple>
	<div class="r-noink">
		I hate ink
	</div>
	<div>
		I love ink
	</div>
</ripple>

Prevent ink with specific class

<ripple>
	<div class="selected" r-prevent=".selected"></div>
</ripple>

Ripple on click (only child element)

<ripple>
	<div class="r-noink-hover"></div>
</ripple>

Angular Options

    app.run(['rippleConfig', function(rippleConfig){
		rippleConfig.rippleOpacity = .2;
		rippleConfig.rippleDelay = 100;
		rippleConfig.mobileTouch = false; // False (default): Mobile use ONLY click || True: mobile use touchstart and touchend
	}]);

Ripple Opacity (rippleOpacity):

For all element

Ripple Incremental (rippleDelay):

This is the delay of exit animation of ink