https://github.com/fiws/fi-ripple
Performant ripples for vue or plain js
https://github.com/fiws/fi-ripple
component material-design plain-js ripple vue
Last synced: about 1 year ago
JSON representation
Performant ripples for vue or plain js
- Host: GitHub
- URL: https://github.com/fiws/fi-ripple
- Owner: fiws
- License: mit
- Created: 2017-08-27T20:32:48.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2022-01-13T11:19:28.000Z (over 4 years ago)
- Last Synced: 2025-04-12T20:55:13.578Z (about 1 year ago)
- Topics: component, material-design, plain-js, ripple, vue
- Language: JavaScript
- Homepage: https://fi-ripple.surge.sh
- Size: 22.5 KB
- Stars: 8
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# fi-ripple
Tiny (>4 KiB gzipped) no-dependencies ripple effect for plain js or vue.
## Usage
Install with `npm install fi-ripple`.
You will also need to install `dom4` if you want IE 10/11 support.
The ripple inherits the color from css. To change it, modify the `color` css property on the container.
### With Vue
```js
// dom4 is only needed for IE (10+) support – import it once
import 'dom4';
import Ripple from 'fi-ripple';
export default {
directives: {
Ripple,
},
}
```
Now you can use the directive in your component template:
```html
Click me
```
### With plain JS
```js
// import the Ripple constructor
import { FiRipple } from 'fi-ripple';
const rippleContainer = document.getElementById('test');
// listen for clicks inside the given container
new FiRipple(rippleContainer);
```