Vue3 Ripple directive adds ripple effect to the host element. It supports Vue 3 with PrimeVue 3 and Vue 2 with PrimeVue 2.
Setup
Refer to PrimeVue setup documentation for download and installation steps for your environment such as Vue CLI, Vite or browser.
Getting Started
Ripple Ripple is an optional animation for the supported components such as buttons. It is disabled by default and needs to be enabled at your app's entry file (e.g. main.js) during the PrimeVue setup.
import {createApp} from 'vue';
import PrimeVue from 'primevue/config';
const app = createApp(App);
app.use(PrimeVue, {ripple: true});
Note: That would be it to enable ripple on PrimeVue components, next section describes how to use it with your own components and standard elements.
Directive Ripple is a directive that needs to be imported and configured with a name of your choice. Global configuration is done with the app.directive function.
import Ripple from 'primevue/ripple';
app.directive('ripple', Ripple);
Ripple can also be configured locally using the directives property of your component.
directives: {
'ripple': Ripple
}
Once the ripple is configured, add .p-ripple class to the target and attach the directive with the v- prefix.
<div class="p-ripple" v-ripple></div>
Styling
Default styling of the animation adds a shade of white. This can easily be customized using css that changes the color of .p-ink element.
<div class="p-ripple purple" v-ripple></div>
.p-ripple.purple .p-ink {
background: rgba(256,39,176,.3);
}
Theming
Ripple supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.
Resources
Visit the PrimeVue Ripple showcase for demos and documentation.