メインコンテンツまでスキップ
バージョン: v8

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

DescriptionSets 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'

イベント

No events available for this component.

メソッド

addRipple

DescriptionAdds the ripple effect to the parent element.
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.