Vue-Touch-Ripple
Touch ripple component for Vue.
Example
Install
CDN
<script type="text/javascript" src="path/to/vue.min.js"></script> <script type="text/javascript" src="path/to/dist/vue-touch-ripple.js"></script> <link rel="stylesheet" href="path/to/dist/vue-touch-ripple.css"/> <script type="text/javascript"> Vue.use(window.VueTouchRipple, /* { default global options } */) </script>NPM
npm install vue-touch-ripple --saveMount
mount with global
import Vue from 'vue' import VueTouchRipple from 'vue-touch-ripple' // import styles import 'vue-touch-ripple/dist/vue-touch-ripple.css' // mount with global Vue.use(VueTouchRipple, /* { // default global options color: '#fff', opacity: 0.3, speed: 1, transition: 'ease' } */)mount with component
import { touchRipple } from 'vue-touch-ripple' // import styles import 'vue-touch-ripple/dist/vue-touch-ripple.css' export default { components: { touchRipple } }Component
<template> <touch-ripple :speed="1" :opacity="0.3" color="#fff" transition="ease"> <!-- your element... --> <h1>it's a h1 title</h1> <div>it's a div block</div> </touch-ripple> </template>Options
| prop | type | default |
|---|---|---|
| speed | Number | 1 |
| color | String | #fff |
| opacity | Number | 0.3 |
| transition | String | ease-out |
