ion-ripple-effect
涟漪效应组件添加了 材质设计墨迹波纹交互效果。该组件只能在 <ion-app> 内部使用，并且可以添加到任何元素内部。
¥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.
在父元素上设置 相对定位 非常重要，因为涟漪效果是绝对定位的，并且将覆盖具有相对定位的最接近的父元素。父元素还应该被赋予 ion-activatable 类，它告诉连锁反应该元素是可点击的。如果波纹溢出其容器，建议将 overflow: hidden 添加到父元素。
¥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.
基本用法
¥Basic Usage
类型
¥Type
连锁反应有两种类型："bounded" 和 "unbounded"。默认类型 "bounded" 会将波纹效果从点击位置向外扩展。要添加始终从元素中心开始并以圆形扩展的波纹效果，请将类型设置为 "unbounded"。
¥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
可以通过 CSS 将波纹自定义为不同的颜色。默认情况下，波纹颜色设置为继承文本颜色，通常是正文颜色。这可以通过在父级上设置 CSS color 或波纹效果本身来更改。
¥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.
属性
¥Properties
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' |
事件
¥Events
No events available for this component.
方法
¥Methods
addRipple
| Description | Adds the ripple effect to the parent element. |
| Signature | addRipple(x: number, y: number) => Promise<() => void> |
CSS 阴影部分
¥CSS Shadow Parts
No CSS shadow parts available for this component.
CSS 自定义属性
¥CSS Custom Properties
No CSS custom properties available for this component.
插槽
¥Slots
No slots available for this component.