ion-ripple-effect

Contents

The ripple effect component adds the Material Design ink ripple interaction effect. This component can be used without a button and can be added to any component.

Usage

javascript
<div>
  <ion-ripple-effect></ion-ripple-effect>
  A plain div with a ripple effect
</div>

<button>
  <ion-ripple-effect></ion-ripple-effect>
  Button
</button>

Properties

type

Description

Sets the type of ripple-effect:

  • bounded: the ripple effect expands from the user's click position
  • unbounded: the ripple effect expands from the center of the button and overflows the container.

NOTE: Surfaces for bounded ripples should have the overflow property set to hidden, while surfaces for unbounded ripples should have it set to visible.

Attribute type
Type "bounded" | "unbounded"
Default 'bounded'

Methods

addRipple

Description

Adds the ripple effect to the parent element

Signature addRipple(pageX: number, pageY: number) => Promise<() => void>