UNPKG

2.08 kBMarkdownView Raw
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
20npm i vue-rippler --save
21```
22
23```bash
24yarn 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
39import Vue from "vue";
40import VueRippler from "vue-rippler";
41
42Vue.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/*
59play 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)