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

docs(ripple-effect): update usage to avoid style conflicts with Ionic components (#20331)

Browse Source 
closes ionic-team/ionic-docs#1154
This commit is contained in:
Brandy Carney
2020-01-29 14:24:45 -05:00
committed by GitHub
parent 6b2f6618f6
commit 1e2946e0f9
5 changed files with 37 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,9 +2,9 @@
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. 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. 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.
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. 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. It's recommended to add `overflow: hidden` to the parent element to avoid the ripple overflowing its container, especially with an unbounded ripple.
<!-- Auto Generated Below --> <!-- Auto Generated Below -->
@ -16,22 +16,22 @@ The default type, `"bounded"`, will expand the ripple effect from the click posi
```html ```html
<ion-app> <ion-app>
<ion-content> <ion-content>
<div class="ion-activatable"> <div class="ion-activatable ripple-parent">
A plain div with a bounded ripple effect A plain div with a bounded ripple effect
<ion-ripple-effect></ion-ripple-effect> <ion-ripple-effect></ion-ripple-effect>
</div> </div>
<button class="ion-activatable"> <button class="ion-activatable ripple-parent">
A button with a bounded ripple effect A button with a bounded ripple effect
<ion-ripple-effect></ion-ripple-effect> <ion-ripple-effect></ion-ripple-effect>
</button> </button>
<div class="ion-activatable"> <div class="ion-activatable ripple-parent">
A plain div with an unbounded ripple effect A plain div with an unbounded ripple effect
<ion-ripple-effect type="unbounded"></ion-ripple-effect> <ion-ripple-effect type="unbounded"></ion-ripple-effect>
</div> </div>
<button class="ion-activatable"> <button class="ion-activatable ripple-parent">
A button with an unbounded ripple effect A button with an unbounded ripple effect
<ion-ripple-effect type="unbounded"></ion-ripple-effect> <ion-ripple-effect type="unbounded"></ion-ripple-effect>
</button> </button>
@ -40,7 +40,7 @@ The default type, `"bounded"`, will expand the ripple effect from the click posi
``` ```
```css ```css
.ion-activatable { .ripple-parent {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
@ -57,22 +57,22 @@ import './RippleEffectExample.css';
export const RippleExample: React.FC = () => ( export const RippleExample: React.FC = () => (
<IonApp> <IonApp>
<IonContent> <IonContent>
<div className="ion-activatable"> <div className="ion-activatable ripple-parent">
A plain div with a bounded ripple effect A plain div with a bounded ripple effect
<IonRippleEffect></IonRippleEffect> <IonRippleEffect></IonRippleEffect>
</div> </div>
<button className="ion-activatable"> <button className="ion-activatable ripple-parent">
A button with a bounded ripple effect A button with a bounded ripple effect
<IonRippleEffect></IonRippleEffect> <IonRippleEffect></IonRippleEffect>
</button> </button>
<div className="ion-activatable"> <div className="ion-activatable ripple-parent">
A plain div with an unbounded ripple effect A plain div with an unbounded ripple effect
<IonRippleEffect type="unbounded"></IonRippleEffect> <IonRippleEffect type="unbounded"></IonRippleEffect>
</div> </div>
<button className="ion-activatable"> <button className="ion-activatable ripple-parent">
A button with an unbounded ripple effect A button with an unbounded ripple effect
<IonRippleEffect type="unbounded"></IonRippleEffect> <IonRippleEffect type="unbounded"></IonRippleEffect>
</button> </button>
@ -82,7 +82,7 @@ export const RippleExample: React.FC = () => (
``` ```
```css ```css
.ion-activatable { .ripple-parent {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
@ -95,22 +95,22 @@ export const RippleExample: React.FC = () => (
<template> <template>
<ion-app> <ion-app>
<ion-content> <ion-content>
<div class="ion-activatable"> <div class="ion-activatable ripple-parent">
A plain div with a bounded ripple effect A plain div with a bounded ripple effect
<ion-ripple-effect></ion-ripple-effect> <ion-ripple-effect></ion-ripple-effect>
</div> </div>
<button class="ion-activatable"> <button class="ion-activatable ripple-parent">
A button with a bounded ripple effect A button with a bounded ripple effect
<ion-ripple-effect></ion-ripple-effect> <ion-ripple-effect></ion-ripple-effect>
</button> </button>
<div class="ion-activatable"> <div class="ion-activatable ripple-parent">
A plain div with an unbounded ripple effect A plain div with an unbounded ripple effect
<ion-ripple-effect type="unbounded"></ion-ripple-effect> <ion-ripple-effect type="unbounded"></ion-ripple-effect>
</div> </div>
<button class="ion-activatable"> <button class="ion-activatable ripple-parent">
A button with an unbounded ripple effect A button with an unbounded ripple effect
<ion-ripple-effect type="unbounded"></ion-ripple-effect> <ion-ripple-effect type="unbounded"></ion-ripple-effect>
</button> </button>
@ -119,7 +119,7 @@ export const RippleExample: React.FC = () => (
</template> </template>
<style> <style>
.ion-activatable { .ripple-parent {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }

10
core/src/components/ripple-effect/usage/angular.md
View File

@ -1,22 +1,22 @@
```html ```html
<ion-app> <ion-app>
<ion-content> <ion-content>
<div class="ion-activatable"> <div class="ion-activatable ripple-parent">
A plain div with a bounded ripple effect A plain div with a bounded ripple effect
<ion-ripple-effect></ion-ripple-effect> <ion-ripple-effect></ion-ripple-effect>
</div> </div>
<button class="ion-activatable"> <button class="ion-activatable ripple-parent">
A button with a bounded ripple effect A button with a bounded ripple effect
<ion-ripple-effect></ion-ripple-effect> <ion-ripple-effect></ion-ripple-effect>
</button> </button>
<div class="ion-activatable"> <div class="ion-activatable ripple-parent">
A plain div with an unbounded ripple effect A plain div with an unbounded ripple effect
<ion-ripple-effect type="unbounded"></ion-ripple-effect> <ion-ripple-effect type="unbounded"></ion-ripple-effect>
</div> </div>
<button class="ion-activatable"> <button class="ion-activatable ripple-parent">
A button with an unbounded ripple effect A button with an unbounded ripple effect
<ion-ripple-effect type="unbounded"></ion-ripple-effect> <ion-ripple-effect type="unbounded"></ion-ripple-effect>
</button> </button>
@ -25,7 +25,7 @@
``` ```
```css ```css
.ion-activatable { .ripple-parent {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }

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

@ -1,22 +1,22 @@
```html ```html
<ion-app> <ion-app>
<ion-content> <ion-content>
<div class="ion-activatable"> <div class="ion-activatable ripple-parent">
A plain div with a bounded ripple effect A plain div with a bounded ripple effect
<ion-ripple-effect></ion-ripple-effect> <ion-ripple-effect></ion-ripple-effect>
</div> </div>
<button class="ion-activatable"> <button class="ion-activatable ripple-parent">
A button with a bounded ripple effect A button with a bounded ripple effect
<ion-ripple-effect></ion-ripple-effect> <ion-ripple-effect></ion-ripple-effect>
</button> </button>
<div class="ion-activatable"> <div class="ion-activatable ripple-parent">
A plain div with an unbounded ripple effect A plain div with an unbounded ripple effect
<ion-ripple-effect type="unbounded"></ion-ripple-effect> <ion-ripple-effect type="unbounded"></ion-ripple-effect>
</div> </div>
<button class="ion-activatable"> <button class="ion-activatable ripple-parent">
A button with an unbounded ripple effect A button with an unbounded ripple effect
<ion-ripple-effect type="unbounded"></ion-ripple-effect> <ion-ripple-effect type="unbounded"></ion-ripple-effect>
</button> </button>
@ -25,7 +25,7 @@
``` ```
```css ```css
.ion-activatable { .ripple-parent {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }

10
core/src/components/ripple-effect/usage/react.md
View File

@ -6,22 +6,22 @@ import './RippleEffectExample.css';
export const RippleExample: React.FC = () => ( export const RippleExample: React.FC = () => (
<IonApp> <IonApp>
<IonContent> <IonContent>
<div className="ion-activatable"> <div className="ion-activatable ripple-parent">
A plain div with a bounded ripple effect A plain div with a bounded ripple effect
<IonRippleEffect></IonRippleEffect> <IonRippleEffect></IonRippleEffect>
</div> </div>
<button className="ion-activatable"> <button className="ion-activatable ripple-parent">
A button with a bounded ripple effect A button with a bounded ripple effect
<IonRippleEffect></IonRippleEffect> <IonRippleEffect></IonRippleEffect>
</button> </button>
<div className="ion-activatable"> <div className="ion-activatable ripple-parent">
A plain div with an unbounded ripple effect A plain div with an unbounded ripple effect
<IonRippleEffect type="unbounded"></IonRippleEffect> <IonRippleEffect type="unbounded"></IonRippleEffect>
</div> </div>
<button className="ion-activatable"> <button className="ion-activatable ripple-parent">
A button with an unbounded ripple effect A button with an unbounded ripple effect
<IonRippleEffect type="unbounded"></IonRippleEffect> <IonRippleEffect type="unbounded"></IonRippleEffect>
</button> </button>
@ -31,7 +31,7 @@ export const RippleExample: React.FC = () => (
``` ```
```css ```css
.ion-activatable { .ripple-parent {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }

10
core/src/components/ripple-effect/usage/vue.md
View File

@ -2,22 +2,22 @@
<template> <template>
<ion-app> <ion-app>
<ion-content> <ion-content>
<div class="ion-activatable"> <div class="ion-activatable ripple-parent">
A plain div with a bounded ripple effect A plain div with a bounded ripple effect
<ion-ripple-effect></ion-ripple-effect> <ion-ripple-effect></ion-ripple-effect>
</div> </div>
<button class="ion-activatable"> <button class="ion-activatable ripple-parent">
A button with a bounded ripple effect A button with a bounded ripple effect
<ion-ripple-effect></ion-ripple-effect> <ion-ripple-effect></ion-ripple-effect>
</button> </button>
<div class="ion-activatable"> <div class="ion-activatable ripple-parent">
A plain div with an unbounded ripple effect A plain div with an unbounded ripple effect
<ion-ripple-effect type="unbounded"></ion-ripple-effect> <ion-ripple-effect type="unbounded"></ion-ripple-effect>
</div> </div>
<button class="ion-activatable"> <button class="ion-activatable ripple-parent">
A button with an unbounded ripple effect A button with an unbounded ripple effect
<ion-ripple-effect type="unbounded"></ion-ripple-effect> <ion-ripple-effect type="unbounded"></ion-ripple-effect>
</button> </button>
@ -26,7 +26,7 @@
</template> </template>
<style> <style>
.ion-activatable { .ripple-parent {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }