Skip to main content
Version: v7

ion-ripple-effect

shadow

ripple effectコンポーネントは、Material Design ink ripple interaction effectを追加します。このコンポーネントは <ion-app> の内部でのみ使用でき、任意の要素の内部に追加できます。

親要素に relative position を設定することが重要です。波紋エフェクトはabsolute positionであり、相対位置決めされた最も近い親要素をカバーするからです。また、親要素には ion-activatable クラスを設定します。これは、波及効果にその要素がクリック可能であることを伝えるものです。波紋がコンテナからはみ出す場合は、親要素に overflow: hidden を追加することを推奨します。

基本的な使い方

タイプ

リップル効果には2つのタイプがある: "bounded""unbounded" です。デフォルトのタイプである "bounded" は、クリック位置から外側に波及効果を広げます。常に要素の中心から始まり、円形に広がる波及効果を追加するには、タイプを "unbounded" に設定します。

カスタマイズ

リップルはCSSで別の色にカスタマイズできます。デフォルトでは、波紋の色はテキストの色を継承するように設定されています。これはCSSの color を親または波紋エフェクト自体に設定することで変更できます。

プロパティ

type

Descriptionリップル効果の種類を設定します: - bounded:リップル効果はユーザーのクリック位置から拡大します - unbounded:リップル効果はボタンの中心から拡大し、コンテナを溢れさせます。 注:境界のある波紋のサーフェスは、overflowプロパティをhiddenに設定し、境界のない波紋のサーフェスは、visibleに設定する必要があります。
Attributetype
Type"bounded" | "unbounded"
Default'bounded'

イベント

No events available for this component.

メソッド

addRipple

Description親要素に波及効果を付加します。
SignatureaddRipple(x: number, y: number) => Promise<() => void>

CSS Shadow Parts

No CSS shadow parts available for this component.

CSSカスタムプロパティ

No CSS custom properties available for this component.

Slots

No slots available for this component.