ion-ripple-effect

概要(CONTENTS)

Ionic4项目中我们可以使用Ionic4按钮组件ion-ripple-effect对项目进行布局。

ion-ripple-effect官方文档地址:https://ionicframework.com/docs/api/ripple-effect

The ripple effect component adds the Material Design ink ripple interaction effect. This component can be used without a button and can be added to any component.

ion-ripple-effect 用法(Usage)

<div>
  <ion-ripple-effect>ion-ripple-effect>
  A plain div with a ripple effect
div>

<button>
  <ion-ripple-effect>ion-ripple-effect>
  Button
button>

ion-ripple-effect 属性(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'

ion-ripple-effect 内置方法(Methods)

addRipple

Description

Adds the ripple effect to the parent element.

Signature addRipple(x: number, y: number) => Promise<() => void>