A touch-enabled click ripple component for Vue 3 and Vue 2 applications, inspired by Material Design.
Supports any content such as images, buttons, text, and anything you can imagine.
How to use it:
1. Import and register the component.
// Global
import { createApp } from 'vue'
import VueTouchRipple from 'vue-touch-ripple'
import 'vue-touch-ripple/style.css'
const app = createApp()
app.use(VueTouchRipple, {
// options here
})
// Local
import { defineComponent, reactive } from 'vue'
import { TouchRipple } from 'vue-touch-ripple'
import 'vue-touch-ripple/style.css'
export default defineComponent({
// ...
components: {
TouchRipple
},
// ...
})
2. Wrap any content into the touch-ripple component.
<touch-ripple class="touch-ripple" > Any Content Here </touch-ripple>
3. Available props to customize the touch ripple effect.
id: {
type: Number,
required: true
},
size: {
type: Number,
required: true
},
top: {
type: Number,
required: true
},
left: {
type: Number,
required: true
},
color: {
type: String,
required: true
},
opacity: {
type: Number,
required: true
},
transition: {
type: String,
required: true
},
duration: {
type: Number,
required: true
}
4. Available options.
app.use(VueTouchRipple, {
color: '#fff',
opacity: 0.3,
duration: 380,
transition: 'ease-out',
keepLastRipple: true
})
5. Event handlers.
- @touch(event: MouseEvent)
- @click(event: MouseEvent)
- @start (id: number)
- @end(id: number)
Preview:
Changelog:
v4.1.1 (07/27/2022)
- fix: global component name
v4.1.0 (07/23/2022)
- feat: refactoring component.
- feat: export Props Events DEFAULT_CONFIG.
- chore: upgrade deps and upgrade vite to v3.
v4.0.2 (05/11/2022)
- Fix CSS z-index for :not(:last-child)
Download Details:
Author: surmon-china
Live Demo: https://surmon-china.github.io/vue-touch-ripple/
Download Link: https://github.com/surmon-china/vue-touch-ripple/archive/master.zip
Official Website: https://github.com/surmon-china/vue-touch-ripple
Install & Download:
npm install vue-touch-ripple