Ripple directive adds ripple effect to the host element.
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 });
Ripple describes how to use it with your own components and standard elements 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);
To start with, Ripple needs to be enabled globally. See the Configuration API for details.
mounted() {
this.$primevue.config.ripple = true;
}
Ripple is enabled by adding add p-ripple class to the target and attach the directive with the v- prefix.
<div v-ripple class="p-ripple bg-primary flex select-none justify-content-center align-items-center border-round p-6 font-bold">Default</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
v-ripple="{
pt: {
root: { style: 'background: rgba(75, 175, 80, 0.3)' }
}
}"
class="p-ripple box"
style="border: 1px solid rgba(75, 175, 80, 0.3)"
>
Green
</div>
<div
v-ripple="{
pt: {
root: { style: 'background: rgba(255, 193, 6, 0.3)' }
}
}"
class="p-ripple box"
style="border: 1px solid rgba(255, 193, 6, 0.3)"
>
Orange
</div>
<div
v-ripple="{
pt: {
root: { style: 'background: rgba(156, 39, 176, 0.3)' }
}
}"
class="p-ripple box"
style="border: 1px solid rgba(156, 39, 176, 0.3)"
>
Purple
</div>
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.