https://github.com/pioug/angular-whimsical-ripple

Angular directive to create ripple effect
https://github.com/pioug/angular-whimsical-ripple

angular material-design

Last synced: 4 months ago
JSON representation

Angular directive to create ripple effect

• Host: GitHub
• URL: https://github.com/pioug/angular-whimsical-ripple
• Owner: pioug
• License: mit
• Created: 2015-05-04T15:12:43.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2016-07-18T02:19:39.000Z (over 8 years ago)
• Last Synced: 2024-09-08T01:06:44.140Z (5 months ago)
• Topics: angular, material-design
• Language: JavaScript
• Homepage: http://pioug.github.io/angular-whimsical-ripple
• Size: 6.84 KB
• Stars: 12
• Watchers: 5
• Forks: 7
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
**angular-whimsical-ripple** is a Angular directive to create a ripple effect.

Preview

---

[http://pioug.github.io/angular-whimsical-ripple](http://pioug.github.io/angular-whimsical-ripple)

Usage

---

1. Install package via `bower`:

  ```sh

    bower install --save angular-whimsical-ripple

  ```

2. Embed the script in your HTML file:

  ```html

    

  ```

3. Load `whimsicalRipple` as a module dependency of your Angular application:

  ```js

    angular.module('demoRipple', ['whimsicalRipple']);

  ```

4. Use the HTML class `ripple` (and `ripple-light`) to create a ripple effect on a clickable element:

  ```html

    Link #1

    Link #2

  ```

Browser compatibility

---

- Chrome

- Firefox

- Safari 8

- Internet Explorer 11