diff --git a/docs/api/toast.md b/docs/api/toast.md index 3ecf502a043..6e49ee25bdc 100644 --- a/docs/api/toast.md +++ b/docs/api/toast.md @@ -72,6 +72,14 @@ import PositionAnchor from '@site/static/usage/v7/toast/position-anchor/index.md +## Swipe to Dismiss + +Toasts can be swiped to dismiss by using the `swipeGesture` property. This feature is position-aware, meaning the direction that users need to swipe will change based on the value of the `position` property. Additionally, the distance users need to swipe may be impacted by the `positionAnchor` property. + +import SwipeGesture from '@site/static/usage/v7/toast/swipe-gesture/index.md'; + + + ## Layout Button containers within the toast can be displayed either on the same line as the message or stacked on separate lines using the `layout` property. The stacked layout should be used with buttons that have long text values. Additionally, buttons in a stacked toast layout can use a `side` value of either `start` or `end`, but not both. diff --git a/static/usage/v7/toast/swipe-gesture/angular.md b/static/usage/v7/toast/swipe-gesture/angular.md new file mode 100644 index 00000000000..146007d0391 --- /dev/null +++ b/static/usage/v7/toast/swipe-gesture/angular.md @@ -0,0 +1,17 @@ +```html + + Open Toast + + + + + Footer + + +``` diff --git a/static/usage/v7/toast/swipe-gesture/demo.html b/static/usage/v7/toast/swipe-gesture/demo.html new file mode 100644 index 00000000000..f3080326619 --- /dev/null +++ b/static/usage/v7/toast/swipe-gesture/demo.html @@ -0,0 +1,35 @@ + + + + + + Toast + + + + + + + + + +
+ Open Toast + +
+ + + + + Footer + + + + + diff --git a/static/usage/v7/toast/swipe-gesture/index.md b/static/usage/v7/toast/swipe-gesture/index.md new file mode 100644 index 00000000000..59e7afcab70 --- /dev/null +++ b/static/usage/v7/toast/swipe-gesture/index.md @@ -0,0 +1,19 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v7/toast/swipe-gesture/javascript.md b/static/usage/v7/toast/swipe-gesture/javascript.md new file mode 100644 index 00000000000..2b7f79e79d4 --- /dev/null +++ b/static/usage/v7/toast/swipe-gesture/javascript.md @@ -0,0 +1,17 @@ +```html + + Open Toast + + + + + Footer + + +``` diff --git a/static/usage/v7/toast/swipe-gesture/react.md b/static/usage/v7/toast/swipe-gesture/react.md new file mode 100644 index 00000000000..09bbd89e3fd --- /dev/null +++ b/static/usage/v7/toast/swipe-gesture/react.md @@ -0,0 +1,27 @@ +```tsx +import React from 'react'; +import { IonButton, IonContent, IonFooter, IonTitle, IonToast, IonToolbar } from '@ionic/react'; + +function Example() { + return ( + <> + + Open Toast + + + + + Footer + + + + ); +} +export default Example; +``` diff --git a/static/usage/v7/toast/swipe-gesture/vue.md b/static/usage/v7/toast/swipe-gesture/vue.md new file mode 100644 index 00000000000..8aaf3583a98 --- /dev/null +++ b/static/usage/v7/toast/swipe-gesture/vue.md @@ -0,0 +1,23 @@ +```html + + + +```