Skip to content

Commit

Permalink
Update readme.md
Browse files Browse the repository at this point in the history
  • Loading branch information
v-trof authored May 17, 2017
1 parent 49001be commit 72eb471
Showing 1 changed file with 6 additions and 5 deletions.
11 changes: 6 additions & 5 deletions readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ Proper Material Design ripple effect for the web, that wouldn't interfere your e

## How to get Ripple.js

**Like vendor lib**
**Like a vendor lib**

CSS & JS file

Expand All @@ -34,7 +34,7 @@ Make sure to include it in your webpack (npm/yarn usage) (uses babel-loader with

## Usage

Adding listener to element
This is how you can add a listener to an element \ array of elements (DOM nodes)
```javascript
var yourElement = document.querySelector('.login-button')
var manyNodes = document.querySelectorAll('button')
Expand All @@ -43,21 +43,21 @@ ripple.bindTo(yourElement) //will trigger on your element
ripple.bindTo(manyNodes) //will trigger on any of these
```

Or watching all elements matching a selector
This is how you can tell Ripple.js to watch any element matching a selector
```javascript
//will trigger on any element mathching given selector
ripple.watch('button')
ripple.watch('#demo-2 button')
```

Unbinding
This is how you can remove all listeners (rippleBind is the same for ripple.bindTo)
```javascript
var rippleBind = ripple.watch('#demo-2 button')
rippleBind.remove()
```

## Customization
#### Full set of props
### Full set of props
```javascript
{
color: "#fafafa", //{string} background color (like in CSS)
Expand All @@ -70,6 +70,7 @@ rippleBind.remove()
constant: false //{bool} enlarging speed is constant on any element size
}
```
### Changing props
#### Way A
```javascript
var rippleBind = ripple.watch('#demo-2 button')
Expand Down

0 comments on commit 72eb471

Please sign in to comment.