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