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.
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>
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);
}
| Name | Element |
|---|---|
| p-ripple | Host element. |
| p-ink | Ripple element. |
| p-ink-active | Ripple element during animating. |
Ripple element has the aria-hidden attribute as true so that it gets ignored by the screen readers.
Component does not include any interactive elements.
None.