ion-ripple-effect
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 to any component.
It's important to note that the parent should have
relative positioning because the ripple effect is absolutely positioned and will cover the closest parent with 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, as well, to avoid the ripple overflowing its container.
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, add an
"unbounded"
type.
Usage
<ion-app>
<ion-content>
<div class="ion-activatable">
A plain div with a bounded ripple effect
<ion-ripple-effect></ion-ripple-effect>
</div>
<button class="ion-activatable">
A button with a bounded ripple effect
<ion-ripple-effect></ion-ripple-effect>
</button>
<div class="ion-activatable">
A plain div with an unbounded ripple effect
<ion-ripple-effect type="unbounded"></ion-ripple-effect>
</div>
<button class="ion-activatable">
A button with an unbounded ripple effect
<ion-ripple-effect type="unbounded"></ion-ripple-effect>
</button>
</ion-content>
</ion-app>
.ion-activatable {
position: relative;
overflow: hidden;
}
<ion-app>
<ion-content>
<div class="ion-activatable">
A plain div with a bounded ripple effect
<ion-ripple-effect></ion-ripple-effect>
</div>
<button class="ion-activatable">
A button with a bounded ripple effect
<ion-ripple-effect></ion-ripple-effect>
</button>
<div class="ion-activatable">
A plain div with an unbounded ripple effect
<ion-ripple-effect type="unbounded"></ion-ripple-effect>
</div>
<button class="ion-activatable">
A button with an unbounded ripple effect
<ion-ripple-effect type="unbounded"></ion-ripple-effect>
</button>
</ion-content>
</ion-app>
.ion-activatable {
position: relative;
overflow: hidden;
}
import React from 'react';
import { IonApp, IonContent, IonRippleEffect } from '@ionic/react';
import './RippleEffectExample.css';
export const RippleExample: React.FC = () => (
<IonApp>
<IonContent>
<div className="ion-activatable">
A plain div with a bounded ripple effect
<IonRippleEffect></IonRippleEffect>
</div>
<button className="ion-activatable">
A button with a bounded ripple effect
<IonRippleEffect></IonRippleEffect>
</button>
<div className="ion-activatable">
A plain div with an unbounded ripple effect
<IonRippleEffect type="unbounded"></IonRippleEffect>
</div>
<button className="ion-activatable">
A button with an unbounded ripple effect
<IonRippleEffect type="unbounded"></IonRippleEffect>
</button>
</IonContent>
</IonApp>
);
.ion-activatable {
position: relative;
overflow: hidden;
}
<template>
<ion-app>
<ion-content>
<div class="ion-activatable">
A plain div with a bounded ripple effect
<ion-ripple-effect></ion-ripple-effect>
</div>
<button class="ion-activatable">
A button with a bounded ripple effect
<ion-ripple-effect></ion-ripple-effect>
</button>
<div class="ion-activatable">
A plain div with an unbounded ripple effect
<ion-ripple-effect type="unbounded"></ion-ripple-effect>
</div>
<button class="ion-activatable">
A button with an unbounded ripple effect
<ion-ripple-effect type="unbounded"></ion-ripple-effect>
</button>
</ion-content>
</ion-app>
</template>
<style>
.ion-activatable {
position: relative;
overflow: hidden;
}
</style>
Properties
type | |
---|---|
Description | Sets the type of ripple-effect:
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' |
Methods
addRipple | |
---|---|
Description | Adds the ripple effect to the parent element. |
Signature | addRipple(x: number, y: number) => Promise<() => void> |