Ion Ripple

Ion Ripple

Directive to add material design ripple effect.

Free!

(2)
Vitaliy Bobrov

Vitaliy Bobrov

Member since 2014

Details

Version:
1.1.0
Size:
0mb
Ionic:
1.0 beta,1.0.x,1.3.x
Platforms:
iOS, Android, Windows Phone
Released:
8 years ago
Updated:
7 years ago
Category:
Plugins
Tags:
material design, ripple, effect

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

  bower install --save ion-ripple

NPM

  npm install --save ion-ripple

Usage

Include the script in your HTML

  <link href="lib/ion-ripple/ion-ripple.css" rel="stylesheet">
  <script src="lib/ion-ripple/ion-ripple.min.js"></script>

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

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

Then add the ion-ripple attribute to elements

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

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

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

Hey there! You'll need to log in before you can leave a comment here.

Vitaliy Bobrov

Vitaliy Bobrov   ·   8 years ago

@SrikanthSrungarapu you can post any bugs on github https://github.com/vitaliy-bobrov/ion-ripple

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Anthony Camero

Anthony Camero   ·   7 years ago

HAVE YOU GOT A VIDEO OR EXAMPLE OF THE RIPPLE EFFECT? A GIF?

Vitaliy Bobrov

Vitaliy Bobrov   ·   7 years ago

It is standard material design ripple effect, may be in the future I'll create some demo.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Anthony Camero

Anthony Camero   ·   7 years ago

HAVE YOU GOT A VIDEO OR EXAMPLE OF THE RIPPLE EFFECT? A GIF?

Vitaliy Bobrov

Vitaliy Bobrov   ·   7 years ago

It is standard material design ripple effect, may be in the future I'll create some demo.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Vitaliy Bobrov

Vitaliy Bobrov   ·   8 years ago

@SrikanthSrungarapu you can post any bugs on github https://github.com/vitaliy-bobrov/ion-ripple

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Hey there! You'll need to log in before you can leave a rating here.

Vitaliy Bobrov   ·     ·   8 years ago

Nice)

Srikanth Srungarapu   ·     ·   8 years ago

Thanks for creating this plugin. Couple of small concerns though. The ripple effect is not visible when I attach click action to butotn. So, I ended up adding 100 ms timeout delay for the click action to trigger so that user can get to see the ripple animation. And also, this is not working for lower versions of android (tested it on Android 4.3 and it didn't work) .

  ·     ·   just now

{{ rating.comment }}

  ·     ·   just now

{{ rating.comment }}

Srikanth Srungarapu    ·     ·   8 years ago

Thanks for creating this plugin. Couple of small concerns though. The ripple effect is not visible when I attach click action to butotn. So, I ended up adding 100 ms timeout delay for the click action to trigger so that user can get to see the ripple animation. And also, this is not working for lower versions of android (tested it on Android 4.3 and it didn't work) .

Vitaliy Bobrov    ·     ·   8 years ago

Nice)