Skip to content

surmon-china/vue-touch-ripple

Repository files navigation

vue-touch-ripple

vue   GitHub stars   npm   Test Codecov   license

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


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 { defineComponent } from 'vue'
  import { TouchRipple } from 'vue-touch-ripple'
  import 'vue-touch-ripple/style.css'

  export default defineComponent({
    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.