ion-ripple-effect
涟漪效果组件添加了 Material Design 墨水涟漪交互效果。此组件只能在 <ion-app> 内部使用，并且可以添加到任何元素内部。
为父元素设置相对定位很重要，因为涟漪效果是绝对定位的，它会覆盖其最近的具有相对定位的父元素。父元素还应该被赋予 ion-activatable 类，这告诉涟漪效果该元素是可点击的。如果涟漪效果溢出其容器，建议在父元素上添加 overflow: hidden。
基本用法
类型
有两种类型的涟漪效果："bounded"（有界）和 "unbounded"（无界）。默认类型 "bounded" 会从点击位置向外扩展涟漪效果。要添加一个始终从元素中心开始并以圆形扩展的涟漪效果，请将类型设置为 "unbounded"。
自定义
涟漪效果可以通过 CSS 自定义为不同的颜色。默认情况下，涟漪颜色设置为继承文本颜色，通常就是正文颜色。可以通过在父元素或涟漪效果本身上设置 CSS color 来改变。
属性
type
| 说明 | 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. |
| 属性 | type |
| 类型 | "bounded" ｜ "unbounded" |
| 默认值 | 'bounded' |
事件
该组件没有可用的事件。
方法
addRipple
| 说明 | Adds the ripple effect to the parent element. |
| 签名 | addRipple(x: number, y: number) => Promise<() => void> |
| 参数 | x: The horizontal coordinate of where the ripple should start. y: The vertical coordinate of where the ripple should start. |
CSS Shadow Parts
该组件没有可用的 CSS 阴影部分。
CSS 自定义属性
该组件没有可用的 CSS 自定义属性。
插槽
该组件没有可用的插槽。