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.

Returns

Type: Promise<() => void>

Dependencies

Used by

Graph

graph TD;
  ion-action-sheet --> ion-ripple-effect
  ion-alert --> ion-ripple-effect
  ion-back-button --> ion-ripple-effect
  ion-button --> ion-ripple-effect
  ion-card --> ion-ripple-effect
  ion-chip --> ion-ripple-effect
  ion-fab-button --> ion-ripple-effect
  ion-item --> ion-ripple-effect
  ion-item-option --> ion-ripple-effect
  ion-menu-button --> ion-ripple-effect
  ion-segment-button --> ion-ripple-effect
  ion-tab-button --> ion-ripple-effect
  ion-toast --> ion-ripple-effect
  style ion-ripple-effect fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS