ion-ripple-effect

Contents

ripple effectコンポーネントは、Material Design ink ripple interaction effectを追加します。このコンポーネントはButton以外でも使用でき、どのコンポーネントにも追加できます。

利用方法

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

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

プロパティ

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.

Attributetype
Type"bounded" | "unbounded"
Default'bounded'

メソッド

addRipple

Description

Adds the ripple effect to the parent element.

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