水波效果组件
水波效果组件用于添加 Material Design 墨水涟漪交互效果。该组件只能在 <ion-app> 内部使用，并且可以添加到任何元素中。
在父元素上设置 相对定位 非常重要，因为水波效果采用绝对定位，会覆盖其最近一个具有相对定位的父元素。父元素还应添加 ion-activatable 类，该类告知水波效果该元素是可点击的。如果水波效果溢出其容器，建议在父元素上添加 overflow: hidden。
基本用法
类型
水波效果有两种类型："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.
插槽
No slots available for this component.