🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A touch-enabled click ripple component for Vue.js 1.x & 2.x, inspired by Material Design.

Animation

Documentation

GitHub stars Build Status GitHub issues GitHub forks GitHub last commit license Twitter

NPM NPM

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


You May Also Like