https://github.com/vitaliy-bobrov/ion-ripple

Ripple effect for Ionic
https://github.com/vitaliy-bobrov/ion-ripple

ionic ripple

Last synced: 16 days 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 8 years ago)
• Default Branch: master
• Last Pushed: 2017-03-03T10:48:46.000Z (over 7 years ago)
• Last Synced: 2024-10-11T15:43:19.581Z (about 1 month 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

==============

[![Bower version](https://badge.fury.io/bo/ion-ripple.svg)](https://badge.fury.io/bo/ion-ripple)

[![npm version](https://badge.fury.io/js/ion-ripple.svg)](https://badge.fury.io/js/ion-ripple)

[![npm](https://img.shields.io/npm/dt/ion-ripple.svg)](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!

  ```