ion-ripple-effect
波纹效果组件添加了Material Design墨水波纹交互效果。该组件只能用于<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> |
| Parameters | x: The horizontal coordinate of where the ripple should start. y: The vertical coordinate of where the ripple should start. |
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.