ion-ripple-effect
涟漪效果组件添加了 Material Design 墨水涟漪交互效果。此组件只能在 <ion-app>
内部使用,并且可以添加到任何元素内部。
在父元素上设置 相对定位 非常重要,因为涟漪效果是绝对定位的,并将覆盖其具有相对定位的最近父元素。父元素还应赋予 ion-activatable
类,它告诉涟漪效果元素是可点击的。如果涟漪溢出其容器,建议向父元素添加 overflow: hidden
。
基本用法
类型
涟漪效果有两种类型:"bounded"
和 "unbounded"
。默认类型 "bounded"
将从点击位置向外扩展涟漪效果。要添加始终从元素中心开始并以圆形扩展的涟漪效果,请将类型设置为 "unbounded"
。
自定义
可以通过 CSS 将涟漪自定义为不同的颜色。默认情况下,涟漪颜色设置为继承文本颜色,通常是正文颜色。可以通过在父元素或涟漪效果本身设置 CSS color
来更改它。
属性
type
描述 | 设置涟漪效果的类型 - bounded :涟漪效果从用户的点击位置扩展 - unbounded :涟漪效果从按钮的中心扩展并溢出容器。注意:有界涟漪的表面应该将溢出属性设置为隐藏,而无界涟漪的表面应该将其设置为可见。 |
属性 | type |
类型 | "bounded" | "unbounded" |
默认 | 'bounded' |
事件
此组件没有可用事件。
方法
addRipple
描述 | 将涟漪效果添加到父元素。 |
签名 | addRipple(x: number, y: number) => Promise<() => void> |
CSS 阴影部分
此组件没有可用 CSS 阴影部分。
CSS 自定义属性
此组件没有可用 CSS 自定义属性。
插槽
此组件没有可用插槽。