https://github.com/vitaliy-bobrov/ion-ripple
Ripple effect for Ionic
https://github.com/vitaliy-bobrov/ion-ripple
ionic ripple
Last synced: 8 months ago
JSON representation
Ripple effect for Ionic
- Host: GitHub
- URL: https://github.com/vitaliy-bobrov/ion-ripple
- Owner: vitaliy-bobrov
- License: mit
- Created: 2016-03-15T10:45:57.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-03-03T10:48:46.000Z (over 8 years ago)
- Last Synced: 2025-03-16T01:07:22.998Z (9 months ago)
- Topics: ionic, ripple
- Language: JavaScript
- Homepage:
- Size: 15.6 KB
- Stars: 8
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
ion-ripple
==============
[](https://badge.fury.io/bo/ion-ripple)
[](https://badge.fury.io/js/ion-ripple)
[](https://github.com/vitaliy-bobrov/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](https://github.com/nelsoncash/angular-ripple).
## Bower
```bash
bower install --save ion-ripple
```
## NPM
```bash
npm install --save ion-ripple
```
## Usage
Include the script in your HTML
```html
```
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
```js
angular.module('app', ['ionMDRipple']);
```
Then add the `ion-ripple` attribute to elements
```html
Ripple!
```
Also you can specify ripple effect color with `ion-ripple-color` attribute.
```html
Ripple!
```