ion-ripple-effect
The ripple effect component adds the Material Design ink ripple interaction effect. This component can only be used inside of an <ion-app> and can be added inside of any element.
It's important to set relative positioning on the parent element because the ripple effect is absolutely positioned and will cover its closest parent that has relative positioning. The parent element should also be given the ion-activatable class, which tells the ripple effect that the element is clickable. It's recommended to add overflow: hidden to the parent element if the ripple is overflowing its container.
基本的な使い方
Type
There are two types of ripple effects: "bounded" and "unbounded". The default type, "bounded", will expand the ripple effect from the click position outwards. To add a ripple effect that always starts in the center of the element and expands in a circle, set the type to "unbounded".
Customizing
The ripple can be customized to a different color through CSS. By default the ripple color is set to inherit the text color, which is generally the body color. This can be changed by setting the CSS color on the parent or the ripple effect itself.
プロパティ
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> |
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.