1.0.3 • Published 5 years ago

angular-ripple-effect-lib v1.0.3

Weekly downloads
15
License
ISC
Repository
-
Last release
5 years ago

Usage:

Step 1

Import the AngularRippleModule from node_modules package

import { AngularRippleModule } from 'angular-ripple-effect-lib';
@NgModule({
  imports: [..., AngularRippleModule],
  declarations: [...]
})
export class AppModule {}

Step 2

Import css in your main css file

@import "~angular-ripple-effect-lib/style.css";

Step 3

Attach ripple directive to some element

<div ripple></div> 

You can specify the animation time, color, width and height of the animation

<div ripple timeout="1500" color="gray" width="20" height="20"></div> 

Note! The element where you attach "ripple" Directive need to be visible somehow Note! Default ripple effect is white colored

<div ripple style="width:100px;height:50px;"></div> 

or

<div ripple>
Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div> 

DEMO

And that's it. Enjoy!