mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 19:21:34 +08:00
docs(ripple-effect): update usage to avoid style conflicts with Ionic components (#20331)
closes ionic-team/ionic-docs#1154
This commit is contained in:
Brandy Carney
@ -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.
|
||||
|
||||
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 -->
|
||||
|
||||
@ -16,22 +16,22 @@ The default type, `"bounded"`, will expand the ripple effect from the click posi
|
||||
```html
|
||||
<ion-app>
|
||||
<ion-content>
|
||||
<div class="ion-activatable">
|
||||
<div class="ion-activatable ripple-parent">
|
||||
A plain div with a bounded ripple effect
|
||||
<ion-ripple-effect></ion-ripple-effect>
|
||||
</div>
|
||||
|
||||
<button class="ion-activatable">
|
||||
<button class="ion-activatable ripple-parent">
|
||||
A button with a bounded ripple effect
|
||||
<ion-ripple-effect></ion-ripple-effect>
|
||||
</button>
|
||||
|
||||
<div class="ion-activatable">
|
||||
<div class="ion-activatable ripple-parent">
|
||||
A plain div with an unbounded ripple effect
|
||||
<ion-ripple-effect type="unbounded"></ion-ripple-effect>
|
||||
</div>
|
||||
|
||||
<button class="ion-activatable">
|
||||
<button class="ion-activatable ripple-parent">
|
||||
A button with an unbounded ripple effect
|
||||
<ion-ripple-effect type="unbounded"></ion-ripple-effect>
|
||||
</button>
|
||||
@ -40,7 +40,7 @@ The default type, `"bounded"`, will expand the ripple effect from the click posi
|
||||
```
|
||||
|
||||
```css
|
||||
.ion-activatable {
|
||||
.ripple-parent {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -57,22 +57,22 @@ import './RippleEffectExample.css';
|
||||
export const RippleExample: React.FC = () => (
|
||||
<IonApp>
|
||||
<IonContent>
|
||||
<div className="ion-activatable">
|
||||
<div className="ion-activatable ripple-parent">
|
||||
A plain div with a bounded ripple effect
|
||||
<IonRippleEffect></IonRippleEffect>
|
||||
</div>
|
||||
|
||||
<button className="ion-activatable">
|
||||
<button className="ion-activatable ripple-parent">
|
||||
A button with a bounded ripple effect
|
||||
<IonRippleEffect></IonRippleEffect>
|
||||
</button>
|
||||
|
||||
<div className="ion-activatable">
|
||||
<div className="ion-activatable ripple-parent">
|
||||
A plain div with an unbounded ripple effect
|
||||
<IonRippleEffect type="unbounded"></IonRippleEffect>
|
||||
</div>
|
||||
|
||||
<button className="ion-activatable">
|
||||
<button className="ion-activatable ripple-parent">
|
||||
A button with an unbounded ripple effect
|
||||
<IonRippleEffect type="unbounded"></IonRippleEffect>
|
||||
</button>
|
||||
@ -82,7 +82,7 @@ export const RippleExample: React.FC = () => (
|
||||
```
|
||||
|
||||
```css
|
||||
.ion-activatable {
|
||||
.ripple-parent {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -95,22 +95,22 @@ export const RippleExample: React.FC = () => (
|
||||
<template>
|
||||
<ion-app>
|
||||
<ion-content>
|
||||
<div class="ion-activatable">
|
||||
<div class="ion-activatable ripple-parent">
|
||||
A plain div with a bounded ripple effect
|
||||
<ion-ripple-effect></ion-ripple-effect>
|
||||
</div>
|
||||
|
||||
<button class="ion-activatable">
|
||||
<button class="ion-activatable ripple-parent">
|
||||
A button with a bounded ripple effect
|
||||
<ion-ripple-effect></ion-ripple-effect>
|
||||
</button>
|
||||
|
||||
<div class="ion-activatable">
|
||||
<div class="ion-activatable ripple-parent">
|
||||
A plain div with an unbounded ripple effect
|
||||
<ion-ripple-effect type="unbounded"></ion-ripple-effect>
|
||||
</div>
|
||||
|
||||
<button class="ion-activatable">
|
||||
<button class="ion-activatable ripple-parent">
|
||||
A button with an unbounded ripple effect
|
||||
<ion-ripple-effect type="unbounded"></ion-ripple-effect>
|
||||
</button>
|
||||
@ -119,7 +119,7 @@ export const RippleExample: React.FC = () => (
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.ion-activatable {
|
||||
.ripple-parent {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@ -1,22 +1,22 @@
|
||||
```html
|
||||
<ion-app>
|
||||
<ion-content>
|
||||
<div class="ion-activatable">
|
||||
<div class="ion-activatable ripple-parent">
|
||||
A plain div with a bounded ripple effect
|
||||
<ion-ripple-effect></ion-ripple-effect>
|
||||
</div>
|
||||
|
||||
<button class="ion-activatable">
|
||||
<button class="ion-activatable ripple-parent">
|
||||
A button with a bounded ripple effect
|
||||
<ion-ripple-effect></ion-ripple-effect>
|
||||
</button>
|
||||
|
||||
<div class="ion-activatable">
|
||||
<div class="ion-activatable ripple-parent">
|
||||
A plain div with an unbounded ripple effect
|
||||
<ion-ripple-effect type="unbounded"></ion-ripple-effect>
|
||||
</div>
|
||||
|
||||
<button class="ion-activatable">
|
||||
<button class="ion-activatable ripple-parent">
|
||||
A button with an unbounded ripple effect
|
||||
<ion-ripple-effect type="unbounded"></ion-ripple-effect>
|
||||
</button>
|
||||
@ -25,7 +25,7 @@
|
||||
```
|
||||
|
||||
```css
|
||||
.ion-activatable {
|
||||
.ripple-parent {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@ -1,22 +1,22 @@
|
||||
```html
|
||||
<ion-app>
|
||||
<ion-content>
|
||||
<div class="ion-activatable">
|
||||
<div class="ion-activatable ripple-parent">
|
||||
A plain div with a bounded ripple effect
|
||||
<ion-ripple-effect></ion-ripple-effect>
|
||||
</div>
|
||||
|
||||
<button class="ion-activatable">
|
||||
<button class="ion-activatable ripple-parent">
|
||||
A button with a bounded ripple effect
|
||||
<ion-ripple-effect></ion-ripple-effect>
|
||||
</button>
|
||||
|
||||
<div class="ion-activatable">
|
||||
<div class="ion-activatable ripple-parent">
|
||||
A plain div with an unbounded ripple effect
|
||||
<ion-ripple-effect type="unbounded"></ion-ripple-effect>
|
||||
</div>
|
||||
|
||||
<button class="ion-activatable">
|
||||
<button class="ion-activatable ripple-parent">
|
||||
A button with an unbounded ripple effect
|
||||
<ion-ripple-effect type="unbounded"></ion-ripple-effect>
|
||||
</button>
|
||||
@ -25,7 +25,7 @@
|
||||
```
|
||||
|
||||
```css
|
||||
.ion-activatable {
|
||||
.ripple-parent {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@ -6,22 +6,22 @@ import './RippleEffectExample.css';
|
||||
export const RippleExample: React.FC = () => (
|
||||
<IonApp>
|
||||
<IonContent>
|
||||
<div className="ion-activatable">
|
||||
<div className="ion-activatable ripple-parent">
|
||||
A plain div with a bounded ripple effect
|
||||
<IonRippleEffect></IonRippleEffect>
|
||||
</div>
|
||||
|
||||
<button className="ion-activatable">
|
||||
<button className="ion-activatable ripple-parent">
|
||||
A button with a bounded ripple effect
|
||||
<IonRippleEffect></IonRippleEffect>
|
||||
</button>
|
||||
|
||||
<div className="ion-activatable">
|
||||
<div className="ion-activatable ripple-parent">
|
||||
A plain div with an unbounded ripple effect
|
||||
<IonRippleEffect type="unbounded"></IonRippleEffect>
|
||||
</div>
|
||||
|
||||
<button className="ion-activatable">
|
||||
<button className="ion-activatable ripple-parent">
|
||||
A button with an unbounded ripple effect
|
||||
<IonRippleEffect type="unbounded"></IonRippleEffect>
|
||||
</button>
|
||||
@ -31,7 +31,7 @@ export const RippleExample: React.FC = () => (
|
||||
```
|
||||
|
||||
```css
|
||||
.ion-activatable {
|
||||
.ripple-parent {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@ -2,22 +2,22 @@
|
||||
<template>
|
||||
<ion-app>
|
||||
<ion-content>
|
||||
<div class="ion-activatable">
|
||||
<div class="ion-activatable ripple-parent">
|
||||
A plain div with a bounded ripple effect
|
||||
<ion-ripple-effect></ion-ripple-effect>
|
||||
</div>
|
||||
|
||||
<button class="ion-activatable">
|
||||
<button class="ion-activatable ripple-parent">
|
||||
A button with a bounded ripple effect
|
||||
<ion-ripple-effect></ion-ripple-effect>
|
||||
</button>
|
||||
|
||||
<div class="ion-activatable">
|
||||
<div class="ion-activatable ripple-parent">
|
||||
A plain div with an unbounded ripple effect
|
||||
<ion-ripple-effect type="unbounded"></ion-ripple-effect>
|
||||
</div>
|
||||
|
||||
<button class="ion-activatable">
|
||||
<button class="ion-activatable ripple-parent">
|
||||
A button with an unbounded ripple effect
|
||||
<ion-ripple-effect type="unbounded"></ion-ripple-effect>
|
||||
</button>
|
||||
@ -26,7 +26,7 @@
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.ion-activatable {
|
||||
.ripple-parent {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user