ion-ripple-effect

概要(CONTENTS)

Ionic4项目中我们可以使用Ionic4按钮组件ion-ripple-effect对项目进行布局。ion-ripple-effect中有ionic ion-ripple-effect 用法(Usage) ,ionic ion-ripple-effect 属性(Properties) ,ionic ion-ripple-effect 内置方法(Methods)等

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)

javascript
<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"

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

addRipple

Description

Adds the ripple effect to the parent element

Signature addRipple(pageX: number, pageY: number) => Promise<() => void>