javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 04:14:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(ripple-effect): update usage to include styling

Browse Source 
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
2019-09-11 15:06:01 -04:00
parent 1cbb52c55c
commit 151548b0bc
5 changed files with 247 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
core/src/components/ripple-effect/readme.md
View File

@ -1,25 +1,129 @@
# ion-ripple-effect # 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 --> <!-- Auto Generated Below -->
## Usage ## Usage
### Javascript ### Angular / javascript
```html ```html
<div> <ion-app>
<ion-ripple-effect></ion-ripple-effect> <ion-content>
A plain div with a ripple effect <div class="ion-activatable">
</div> A plain div with a bounded ripple effect
<ion-ripple-effect></ion-ripple-effect>
</div>
<button> <button class="ion-activatable">
<ion-ripple-effect></ion-ripple-effect> A button with a bounded ripple effect
Button <ion-ripple-effect></ion-ripple-effect>
</button> </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
View 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;
}
```

37
core/src/components/ripple-effect/usage/javascript.md
View File

@ -1,11 +1,32 @@
```html ```html
<div> <ion-app>
<ion-ripple-effect></ion-ripple-effect> <ion-content>
A plain div with a ripple effect <div class="ion-activatable">
</div> A plain div with a bounded ripple effect
<ion-ripple-effect></ion-ripple-effect>
</div>
<button> <button class="ion-activatable">
<ion-ripple-effect></ion-ripple-effect> A button with a bounded ripple effect
Button <ion-ripple-effect></ion-ripple-effect>
</button> </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
View 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
View 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>
```