Source: https://primeng.org/ripple

• Primary

  Surface

  PresetsAuraMaterialLaraNora

  Ripple

  RTL

• v20

  • v20

  • v19

  • v18

  • v17

• FEATURES

• THEMING

Ripple

Ripple directive adds ripple effect to the host element.

Import #

import { RippleModule } from 'primeng/ripple';

Default #

Default Demo Content.

Ripple option at the configurator needs to be turned on for the demo.

Default

<div pRipple class="ripple-box">Default</div>

Custom #

Styling Demo Content.

Ripple option at the configurator needs to be turned on for the demo.

Green

Orange

Purple

<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>

Accessibility #

Screen Reader

Ripple element has the aria-hidden attribute as true so that it gets ignored by the screen readers.

Keyboard Support

Component does not include any interactive elements.

• Import

• Default

• Custom

• Accessibility

Templates

Highly customizable application templates to get started in no time with style. Designed and implemented by PrimeTek.

PrimeNG 20.3.0 by PrimeTek