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:
or with Class:
or with Attibute:
or
Add material button with box-shadow:
Icon element:
Fab element:
Disabled ripple
or Disabled active
or Disabled all element:
Custom light color
Custom ripple color
Custom ripple opacity
Ripple in-front (overink)
Prevent ink for specific element and children
I hate inkI love ink
Prevent ink with specific class
Ripple on click (only child element)
Angular Options
app;
Ripple Opacity (rippleOpacity):
For all element
Ripple Incremental (rippleDelay):
This is the delay of exit animation of ink
Changelog
Version 1.0.2:
Fix duplication ng-* directive
Version 1.0.1:
Fix and new options
Version 1.0.0:
Fix standalone, recreate ripple effects
Version 0.9.6:
Fix for Safari and Chrome 51 (Animation Bug)
Version 0.9.5:
Re-created animation of ink and general fix
Version 0.9.4:
Added r-overink for big element, added r-noink (prevent ink generation when you click a specific element)
Version 0.9.3:
Fix overflow ink problem
Version 0.9.1:
Fix disabled option.
Version 0.9.0:
Add standalone version.
Version 0.5.1:
Add Fab option.