1 | # vue-rippler 🎉
|
2 |
|
3 | > Simple Vue.js plugin for custom ripple effect
|
4 |
|
5 | [![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)
|
6 | [![Version](https://img.shields.io/npm/v/vue-rippler.svg)](https://www.npmjs.com/package/vue-rippler)
|
7 | [![Gzipsize](https://img.badgesize.io/spemer/vue-rippler/master/src/vue-rippler.js?compression=gzip)](https://www.npmjs.com/package/vue-rippler)
|
8 | [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/vuejs/awesome-vue#miscellaneous)
|
9 | [![License](https://img.shields.io/npm/l/vue-rippler.svg)](https://github.com/spemer/vue-rippler)
|
10 | [![Hits](https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2Fspemer%2Fvue-rippler&count_bg=%2379C83D&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=hits&edge_flat=false)](https://github.com/spemer/vue-rippler)
|
11 | [![stargazers](https://img.shields.io/github/stars/spemer/vue-rippler?style=social)](https://github.com/spemer/vue-rippler)
|
12 |
|
13 | [Live Demo](https://spemer.github.io/vue-rippler/)
|
14 |
|
15 | <img src="https://github.com/spemer/vue-rippler/blob/master/docs/src/assets/vue-rippler.gif?raw=true" height="25%" width="25%">
|
16 |
|
17 | ## Installation
|
18 |
|
19 | ```bash
|
20 | npm i vue-rippler --save
|
21 | ```
|
22 |
|
23 | ```bash
|
24 | yarn add vue-rippler
|
25 | ```
|
26 |
|
27 | ### CDNs
|
28 |
|
29 | [jsDelivr](https://cdn.jsdelivr.net/npm/vue-rippler/),
|
30 | [UNPKG](https://unpkg.com/vue-rippler/),
|
31 | [bundle.run](https://bundle.run/vue-rippler)
|
32 |
|
33 | ## Usage
|
34 |
|
35 | ### main.js
|
36 |
|
37 | ```javascript
|
38 | // main.js
|
39 | import Vue from "vue";
|
40 | import VueRippler from "vue-rippler";
|
41 |
|
42 | Vue.use(VueRippler);
|
43 | ```
|
44 |
|
45 | ### Use in component
|
46 |
|
47 | ```javascript
|
48 | // .vue template
|
49 | <template>
|
50 | <my-component ripple />
|
51 | </template>
|
52 | ```
|
53 |
|
54 | ### Set ripple style, and customize as you want(Optional)
|
55 |
|
56 | ```css
|
57 | <style>
|
58 | /*
|
59 | play with some lines below
|
60 | */
|
61 | [ripple] .ripple--container .ripple--body {
|
62 | opacity: 0.5 !important;
|
63 | background-color: rgba(0, 0, 0, 0.1) !important;
|
64 | -webkit-animation: rippler 1000ms;
|
65 | animation: rippler 1000ms;
|
66 | }
|
67 | </style>
|
68 | ```
|
69 |
|
70 | ## Author
|
71 |
|
72 | [Hyouk Seo(Spemer)](https://github.com/spemer)
|