Skip to content

Commit 151548b

Browse files
brandyscarneybrandyscarney
committed
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 ionic-team#17477
1 parent 1cbb52c commit 151548b

File tree

5 files changed

+249
-20
lines changed

5 files changed

+249
-20
lines changed

‎core/src/components/ripple-effect/readme.md‎

Lines changed: 115 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,129 @@
11
# ion-ripple-effect
22

3-
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.
3+
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.
44

5+
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.
6+
7+
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.
58

69
<!-- Auto Generated Below -->
710

811

912
## Usage
1013

11-
### Javascript
14+
### Angular / javascript
15+
16+
```html
17+
<ion-app>
18+
<ion-content>
19+
<div class="ion-activatable">
20+
A plain div with a bounded ripple effect
21+
<ion-ripple-effect></ion-ripple-effect>
22+
</div>
23+
24+
<button class="ion-activatable">
25+
A button with a bounded ripple effect
26+
<ion-ripple-effect></ion-ripple-effect>
27+
</button>
28+
29+
<div class="ion-activatable">
30+
A plain div with an unbounded ripple effect
31+
<ion-ripple-effect type="unbounded"></ion-ripple-effect>
32+
</div>
33+
34+
<button class="ion-activatable">
35+
A button with an unbounded ripple effect
36+
<ion-ripple-effect type="unbounded"></ion-ripple-effect>
37+
</button>
38+
</ion-content>
39+
</ion-app>
40+
```
41+
42+
```css
43+
.ion-activatable {
44+
position: relative;
45+
overflow: hidden;
46+
}
47+
```
48+
49+
50+
### React
51+
52+
```tsx
53+
import React from 'react';
54+
import { IonApp, IonContent, IonRippleEffect } from '@ionic/react';
55+
import './RippleEffectExample.css';
56+
57+
export const RippleExample: React.FC = () => (
58+
<IonApp>
59+
<IonContent>
60+
<div className="ion-activatable">
61+
A plain div with a bounded ripple effect
62+
<IonRippleEffect></IonRippleEffect>
63+
</div>
64+
65+
<button className="ion-activatable">
66+
A button with a bounded ripple effect
67+
<IonRippleEffect></IonRippleEffect>
68+
</button>
69+
70+
<div className="ion-activatable">
71+
A plain div with an unbounded ripple effect
72+
<IonRippleEffect type="unbounded"></IonRippleEffect>
73+
</div>
74+
75+
<button className="ion-activatable">
76+
A button with an unbounded ripple effect
77+
<IonRippleEffect type="unbounded"></IonRippleEffect>
78+
</button>
79+
</IonContent>
80+
</IonApp>
81+
);
82+
```
83+
84+
```css
85+
.ion-activatable {
86+
position: relative;
87+
overflow: hidden;
88+
}
89+
```
90+
91+
92+
### Vue
1293

1394
```html
14-
<div>
15-
<ion-ripple-effect></ion-ripple-effect>
16-
A plain div with a ripple effect
17-
</div>
18-
19-
<button>
20-
<ion-ripple-effect></ion-ripple-effect>
21-
Button
22-
</button>
95+
<template>
96+
<ion-app>
97+
<ion-content>
98+
<div class="ion-activatable">
99+
A plain div with a bounded ripple effect
100+
<ion-ripple-effect></ion-ripple-effect>
101+
</div>
102+
103+
<button class="ion-activatable">
104+
A button with a bounded ripple effect
105+
<ion-ripple-effect></ion-ripple-effect>
106+
</button>
107+
108+
<div class="ion-activatable">
109+
A plain div with an unbounded ripple effect
110+
<ion-ripple-effect type="unbounded"></ion-ripple-effect>
111+
</div>
112+
113+
<button class="ion-activatable">
114+
A button with an unbounded ripple effect
115+
<ion-ripple-effect type="unbounded"></ion-ripple-effect>
116+
</button>
117+
</ion-content>
118+
</ion-app>
119+
</template>
120+
121+
<style>
122+
.ion-activatable {
123+
position: relative;
124+
overflow: hidden;
125+
}
126+
</style>
23127
```
24128

25129

‎core/src/components/ripple-effect/usage/angular.md‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
```html
2+
<ion-app>
3+
<ion-content>
4+
<div class="ion-activatable">
5+
A plain div with a bounded ripple effect
6+
<ion-ripple-effect></ion-ripple-effect>
7+
</div>
8+
9+
<button class="ion-activatable">
10+
A button with a bounded ripple effect
11+
<ion-ripple-effect></ion-ripple-effect>
12+
</button>
13+
14+
<div class="ion-activatable">
15+
A plain div with an unbounded ripple effect
16+
<ion-ripple-effect type="unbounded"></ion-ripple-effect>
17+
</div>
18+
19+
<button class="ion-activatable">
20+
A button with an unbounded ripple effect
21+
<ion-ripple-effect type="unbounded"></ion-ripple-effect>
22+
</button>
23+
</ion-content>
24+
</ion-app>
25+
```
26+
27+
```css
28+
.ion-activatable {
29+
position: relative;
30+
overflow: hidden;
31+
}
32+
```

‎core/src/components/ripple-effect/usage/javascript.md‎

Lines changed: 30 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,32 @@
11
```html
2-
<div>
3-
<ion-ripple-effect></ion-ripple-effect>
4-
A plain div with a ripple effect
5-
</div>
6-
7-
<button>
8-
<ion-ripple-effect></ion-ripple-effect>
9-
Button
10-
</button>
2+
<ion-app>
3+
<ion-content>
4+
<div class="ion-activatable">
5+
A plain div with a bounded ripple effect
6+
<ion-ripple-effect></ion-ripple-effect>
7+
</div>
8+
9+
<button class="ion-activatable">
10+
A button with a bounded ripple effect
11+
<ion-ripple-effect></ion-ripple-effect>
12+
</button>
13+
14+
<div class="ion-activatable">
15+
A plain div with an unbounded ripple effect
16+
<ion-ripple-effect type="unbounded"></ion-ripple-effect>
17+
</div>
18+
19+
<button class="ion-activatable">
20+
A button with an unbounded ripple effect
21+
<ion-ripple-effect type="unbounded"></ion-ripple-effect>
22+
</button>
23+
</ion-content>
24+
</ion-app>
25+
```
26+
27+
```css
28+
.ion-activatable {
29+
position: relative;
30+
overflow: hidden;
31+
}
1132
```

‎core/src/components/ripple-effect/usage/react.md‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
```tsx
2+
import React from 'react';
3+
import { IonApp, IonContent, IonRippleEffect } from '@ionic/react';
4+
import './RippleEffectExample.css';
5+
6+
export const RippleExample: React.FC = () => (
7+
<IonApp>
8+
<IonContent>
9+
<div className="ion-activatable">
10+
A plain div with a bounded ripple effect
11+
<IonRippleEffect></IonRippleEffect>
12+
</div>
13+
14+
<button className="ion-activatable">
15+
A button with a bounded ripple effect
16+
<IonRippleEffect></IonRippleEffect>
17+
</button>
18+
19+
<div className="ion-activatable">
20+
A plain div with an unbounded ripple effect
21+
<IonRippleEffect type="unbounded"></IonRippleEffect>
22+
</div>
23+
24+
<button className="ion-activatable">
25+
A button with an unbounded ripple effect
26+
<IonRippleEffect type="unbounded"></IonRippleEffect>
27+
</button>
28+
</IonContent>
29+
</IonApp>
30+
);
31+
```
32+
33+
```css
34+
.ion-activatable {
35+
position: relative;
36+
overflow: hidden;
37+
}
38+
```

‎core/src/components/ripple-effect/usage/vue.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
```html
2+
<template>
3+
<ion-app>
4+
<ion-content>
5+
<div class="ion-activatable">
6+
A plain div with a bounded ripple effect
7+
<ion-ripple-effect></ion-ripple-effect>
8+
</div>
9+
10+
<button class="ion-activatable">
11+
A button with a bounded ripple effect
12+
<ion-ripple-effect></ion-ripple-effect>
13+
</button>
14+
15+
<div class="ion-activatable">
16+
A plain div with an unbounded ripple effect
17+
<ion-ripple-effect type="unbounded"></ion-ripple-effect>
18+
</div>
19+
20+
<button class="ion-activatable">
21+
A button with an unbounded ripple effect
22+
<ion-ripple-effect type="unbounded"></ion-ripple-effect>
23+
</button>
24+
</ion-content>
25+
</ion-app>
26+
</template>
27+
28+
<style>
29+
.ion-activatable {
30+
position: relative;
31+
overflow: hidden;
32+
}
33+
</style>
34+
```

0 commit comments

Comments
 (0)