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 | リップル効果の種類を設定します： - bounded：リップル効果はユーザーのクリック位置から拡大します - unbounded：リップル効果はボタンの中心から拡大し、コンテナを溢れさせます。 注：境界のある波紋のサーフェスは、overflowプロパティをhiddenに設定し、境界のない波紋のサーフェスは、visibleに設定する必要があります。 |
| Attribute | type |
| Type | "bounded" ｜ "unbounded" |
| Default | 'bounded' |
イベント
No events available for this component.
メソッド
addRipple
| Description | 親要素に波及効果を付加します。 |
| 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.