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-ripplenpm install vue-touch-ripple --saveLocal 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.