ion-ripple-effect
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 | 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. |
Attribute | type |
Type | "bounded" | "unbounded" |
Default | 'bounded' |
イベント
No events available for this component.
メソッド
addRipple
Description | Adds the ripple effect to the parent element. |
Signature | addRipple(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.