vue-touch-ripple

Make any element easily have a Material Design-style click "ink ripple" effect.

• Examples
• Legacy version (Vue2)

Usage

Install

yarn add vue-touch-ripple

npm install vue-touch-ripple --save

local component

<template>
  <touch-ripple
    color="#fff"
    :opacity="0.4"
    transition="ease-out"
    :duration="400"
    :keep-last-ripple="true"
    @touch="log('touch', $event)"
    @click="log('click', $event)"
    @start="log('ripple-start', $event)"
    @end="log('ripple-end', $event)"
  >
    <!-- your content element -->
    <div class="content">Target content</div>
  </touch-ripple>
</template>

<script>
  import { TouchRipple } from 'vue-touch-ripple'
  import 'vue-touch-ripple/style.css'

  export default {
    components: {
      TouchRipple
    },
    methods: {
      log: console.log
  }
</script>

global component

import { createApp } from 'vue'
import VueTouchRipple from 'vue-touch-ripple'
import 'vue-touch-ripple/style.css'

const app = createApp()

app.use(VueTouchRipple, {
  // optional default global options
  color: 'red',
  opacity: 0.5,
  duration: 280,
  transition: 'ease',
  keepLastRipple: false
})

Component Props

| prop | description | type | default | | :------------- | :--------------------------------------------------------------------------------------------------------------------- | :-------- | :--------- | | color | Specify the background color of the ripple layer, supporting any legal color value such as RGBA. | String | #fff | | opacity | Transparency of ripple layers, supporting numbers from 0 ~ 1. | Number | 0.3 | | duration | Duration of single ripple motion, time in milliseconds. | Number | 380 | | transition | Ripple motion animation curve with Bezier curve value support. | String | ease-out | | keepLastRipple | whether to keep the last ripple (if true, the last ripple will always be present until the mouse button is released) | Boolean | true |

Component Events

| event | description | params | | :---- | :------------------------------------------------------ | :-------------------- | | touch | When the component is pressed by the left mouse button. | (event: MouseEvent) | | click | When the component is lifted by the left mouse button. | (event: MouseEvent) | | start | When the animated animation of each ripple starts. | (id: number) | | end | When the animated motion of each ripple ends. | (id: number) |

BTW: if you expect to bind more flexible events on the component, in Vue3 you can just bind the events directly, instead of using the @xxx.native modifier in Vue2.

Changelog

Detailed changes for each release are documented in the release notes.

License

Licensed under the MIT License.