ionic-framework/core/src/components/ripple-effect

ion-ripple-effect

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

Property	Attribute	Description	Type	Default
type	type	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.	"bounded" | "unbounded"	'bounded'

Methods

addRipple(x: number, y: number) => Promise<() => void>

Adds the ripple effect to the parent element.

Parameters

Name	Type	Description
x	number	The horizontal coordinate of where the ripple should start.
y	number	The vertical coordinate of where the ripple should start.

Returns

Type: Promise<() => void>

---

Built with StencilJS