Vue-Touch-Ripple

Touch ripple component for Vue.

Example

Demo Page

CDN 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 --save

Mount

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

Author

Surmon