diff --git a/core/src/components/ripple-effect/readme.md b/core/src/components/ripple-effect/readme.md index 4b676b6dbd..b685dd452b 100644 --- a/core/src/components/ripple-effect/readme.md +++ b/core/src/components/ripple-effect/readme.md @@ -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 `` 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. ## Usage -### Javascript +### Angular / javascript ```html -
- - A plain div with a ripple effect -
+ + +
+ A plain div with a bounded ripple effect + +
- + + +
+ A plain div with an unbounded ripple effect + +
+ + + + +``` + +```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 = () => ( + + +
+ A plain div with a bounded ripple effect + +
+ + + +
+ A plain div with an unbounded ripple effect + +
+ + + + +); +``` + +```css +.ion-activatable { + position: relative; + overflow: hidden; +} +``` + + +### Vue + +```html + + + ``` diff --git a/core/src/components/ripple-effect/usage/angular.md b/core/src/components/ripple-effect/usage/angular.md new file mode 100644 index 0000000000..22b154f5fd --- /dev/null +++ b/core/src/components/ripple-effect/usage/angular.md @@ -0,0 +1,32 @@ +```html + + +
+ A plain div with a bounded ripple effect + +
+ + + +
+ A plain div with an unbounded ripple effect + +
+ + + + +``` + +```css +.ion-activatable { + position: relative; + overflow: hidden; +} +``` \ No newline at end of file diff --git a/core/src/components/ripple-effect/usage/javascript.md b/core/src/components/ripple-effect/usage/javascript.md index ba22ef1e84..22b154f5fd 100644 --- a/core/src/components/ripple-effect/usage/javascript.md +++ b/core/src/components/ripple-effect/usage/javascript.md @@ -1,11 +1,32 @@ ```html -
- - A plain div with a ripple effect -
+ + +
+ A plain div with a bounded ripple effect + +
- + + +
+ A plain div with an unbounded ripple effect + +
+ + + + +``` + +```css +.ion-activatable { + position: relative; + overflow: hidden; +} ``` \ No newline at end of file diff --git a/core/src/components/ripple-effect/usage/react.md b/core/src/components/ripple-effect/usage/react.md new file mode 100644 index 0000000000..c37be4b254 --- /dev/null +++ b/core/src/components/ripple-effect/usage/react.md @@ -0,0 +1,38 @@ +```tsx +import React from 'react'; +import { IonApp, IonContent, IonRippleEffect } from '@ionic/react'; +import './RippleEffectExample.css'; + +export const RippleExample: React.FC = () => ( + + +
+ A plain div with a bounded ripple effect + +
+ + + +
+ A plain div with an unbounded ripple effect + +
+ + + + +); +``` + +```css +.ion-activatable { + position: relative; + overflow: hidden; +} +``` \ No newline at end of file diff --git a/core/src/components/ripple-effect/usage/vue.md b/core/src/components/ripple-effect/usage/vue.md new file mode 100644 index 0000000000..041e41d839 --- /dev/null +++ b/core/src/components/ripple-effect/usage/vue.md @@ -0,0 +1,34 @@ +```html + + + +``` \ No newline at end of file