mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 19:57:22 +08:00
docs(ripple-effect): update usage to include styling
includes documentation on the different types and styles required for ripple to work properly closes ionic-team/ionic-docs#699 references #17477
This commit is contained in:
Brandy Carney
@ -1,25 +1,129 @@
|
||||
# ion-ripple-effect
|
||||
|
||||
The ripple effect component adds the [Material Design ink ripple interaction effect](https://material.io/develop/web/components/ripples/). This component can be used without a button and can be added to any component.
|
||||
The ripple effect component adds the [Material Design ink ripple interaction effect](https://material.io/develop/web/components/ripples/). 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](https://developer.mozilla.org/en-US/docs/Web/CSS/position) 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.
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
### Javascript
|
||||
### Angular / javascript
|
||||
|
||||
```html
|
||||
<div>
|
||||
<ion-ripple-effect></ion-ripple-effect>
|
||||
A plain div with a ripple effect
|
||||
</div>
|
||||
<ion-app>
|
||||
<ion-content>
|
||||
<div class="ion-activatable">
|
||||
A plain div with a bounded ripple effect
|
||||
<ion-ripple-effect></ion-ripple-effect>
|
||||
</div>
|
||||
|
||||
<button>
|
||||
<ion-ripple-effect></ion-ripple-effect>
|
||||
Button
|
||||
</button>
|
||||
<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>
|
||||
```
|
||||
|
||||
```css
|
||||
.ion-activatable {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### React
|
||||
|
||||
```tsx
|
||||
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>
|
||||
);
|
||||
```
|
||||
|
||||
```css
|
||||
.ion-activatable {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### Vue
|
||||
|
||||
```html
|
||||
<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>
|
||||
```
|
||||
|
||||
|
||||
|
||||
32
core/src/components/ripple-effect/usage/angular.md
Normal file
32
core/src/components/ripple-effect/usage/angular.md
Normal file
@ -0,0 +1,32 @@
|
||||
```html
|
||||
<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>
|
||||
```
|
||||
|
||||
```css
|
||||
.ion-activatable {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
```
|
||||
@ -1,11 +1,32 @@
|
||||
```html
|
||||
<div>
|
||||
<ion-ripple-effect></ion-ripple-effect>
|
||||
A plain div with a ripple effect
|
||||
</div>
|
||||
<ion-app>
|
||||
<ion-content>
|
||||
<div class="ion-activatable">
|
||||
A plain div with a bounded ripple effect
|
||||
<ion-ripple-effect></ion-ripple-effect>
|
||||
</div>
|
||||
|
||||
<button>
|
||||
<ion-ripple-effect></ion-ripple-effect>
|
||||
Button
|
||||
</button>
|
||||
<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>
|
||||
```
|
||||
|
||||
```css
|
||||
.ion-activatable {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
```
|
||||
38
core/src/components/ripple-effect/usage/react.md
Normal file
38
core/src/components/ripple-effect/usage/react.md
Normal file
@ -0,0 +1,38 @@
|
||||
```tsx
|
||||
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>
|
||||
);
|
||||
```
|
||||
|
||||
```css
|
||||
.ion-activatable {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
```
|
||||
34
core/src/components/ripple-effect/usage/vue.md
Normal file
34
core/src/components/ripple-effect/usage/vue.md
Normal file
@ -0,0 +1,34 @@
|
||||
```html
|
||||
<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>
|
||||
```
|
||||
Reference in New Issue
Block a user