ion-ripple-effect
リップル効果コンポーネントは、マテリアルデザインのインクのリップルインタラクション効果を追加します。このコンポーネントは、<ion-app>内でのみ使用でき、任意の要素内に追加できます。
リップル効果は絶対位置指定され、相対位置指定されている最も近い親要素を覆うため、親要素に相対位置指定を設定することが重要です。親要素には、要素がクリック可能であることをリップル効果に伝えるion-activatableクラスも付与する必要があります。リップルがコンテナからはみ出している場合は、親要素にoverflow: hiddenを追加することをお勧めします。
基本的な使用方法
タイプ
リップル効果には、"bounded"と"unbounded"の2つのタイプがあります。デフォルトのタイプである"bounded"は、クリック位置から外側にリップル効果を展開します。常に要素の中央から始まり、円状に展開するリップル効果を追加するには、タイプを"unbounded"に設定します。
カスタマイズ
リップルはCSSで異なる色にカスタマイズできます。デフォルトでは、リップルの色はテキストの色（一般的にはボディの色）を継承するように設定されています。これは、親またはリップル効果自体にCSSのcolorを設定することで変更できます。
プロパティ
type
| 説明 | リップル効果のタイプを設定します - bounded: ユーザーのクリック位置からリップル効果が展開します - unbounded: リップル効果はボタンの中央から展開し、コンテナからはみ出します。注記: バウンドリップルのサーフェスにはoverflowプロパティをhiddenに設定する必要がありますが、アンバウンドリップルのサーフェスにはvisibleに設定する必要があります。 |
| 属性 | type |
| 型 | "bounded" ｜ "unbounded" |
| デフォルト | 'bounded' |
イベント
このコンポーネントで使用できるイベントはありません。
メソッド
addRipple
| 説明 | 親要素にリップル効果を追加します。 |
| シグネチャ | addRipple(x: number, y: number) => Promise<() => void> |
CSSシャドウパーツ
このコンポーネントで使用できるCSSシャドウパーツはありません。
CSSカスタムプロパティ
このコンポーネントで使用できるCSSカスタムプロパティはありません。
スロット
このコンポーネントで使用できるスロットはありません。