angular-ripple-effect-lib
TypeScript icon, indicating that this package has built-in type declarations

1.0.3 • Public • Published

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!

Package Sidebar

Install

npm i angular-ripple-effect-lib

Weekly Downloads

3

Version

1.0.3

License

ISC

Unpacked Size

140 kB

Total Files

27

Last publish

Collaborators

  • ipetrovbg