Touch Ripple Component For Vue.js

Install & Download:

npm install vue-touch-ripple

Description:

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)