Ripple effect
Beta
Add a material ripple effect on click, to any DOM element/Vue component.
#Basic usage
You can use the ripple custom directive v-ripple for creating material effect. LightVue Ripple bar is Both compatible with Vue 2.x and Vue 3.x.
#Modifying color
you can set the color of repple by overwriting a lv-ink class.
#Setup
You can import a component and register it as a local and global vue component as follows:
// import the component
import Ripple from 'lightvue/ripple';
// Register the component locally
export default {
components: {
Ripple
}
}// Register the component globally (Vue 2.x)
Vue.component('Ripple', Ripple);
// Register the component globally (Vue 3.x)
const app = Vue.createApp({
// ...
});
app.component('Ripple', Ripple);
app.mount('#app')