メインコンテンツまでスキップ
バージョン: 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>
Parametersx: The horizontal coordinate of where the ripple should start.
y: The vertical coordinate of where the ripple should start.

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.