Ripple directive adds ripple effect to the host element.
import { RippleModule } from 'primeng/ripple';
Default Demo Content.
<div pRipple class="ripple-box">Default</div>
Styling Demo Content.
<div pRipple class="box" style="border: 1px solid rgba(75, 175, 80, 0.3); --p-ripple-background: rgba(75, 175, 80, 0.3)">
Green
</div>
<div pRipple class="box" style="border: 1px solid rgba(255, 193, 6, 0.3); --p-ripple-background: rgba(255, 193, 6, 0.3)">
Orange
</div>
<div pRipple class="box" style="border: 1px solid rgba(156, 39, 176, 0.3); --p-ripple-background: 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.