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> |
| Parameters | x: 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.