From e96c467814536619fc17b99e2b4ff83786b417ca Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 13 Nov 2023 12:34:18 -0500 Subject: [PATCH 1/2] docs(toast): add swipeGesture playground --- docs/api/toast.md | 8 +++++ .../usage/v7/toast/swipe-gesture/angular.md | 17 +++++++++ static/usage/v7/toast/swipe-gesture/demo.html | 35 +++++++++++++++++++ static/usage/v7/toast/swipe-gesture/index.md | 19 ++++++++++ .../v7/toast/swipe-gesture/javascript.md | 17 +++++++++ static/usage/v7/toast/swipe-gesture/react.md | 27 ++++++++++++++ static/usage/v7/toast/swipe-gesture/vue.md | 35 +++++++++++++++++++ 7 files changed, 158 insertions(+) create mode 100644 static/usage/v7/toast/swipe-gesture/angular.md create mode 100644 static/usage/v7/toast/swipe-gesture/demo.html create mode 100644 static/usage/v7/toast/swipe-gesture/index.md create mode 100644 static/usage/v7/toast/swipe-gesture/javascript.md create mode 100644 static/usage/v7/toast/swipe-gesture/react.md create mode 100644 static/usage/v7/toast/swipe-gesture/vue.md 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..ef66431b16a --- /dev/null +++ b/static/usage/v7/toast/swipe-gesture/vue.md @@ -0,0 +1,35 @@ +```html + + + +``` From cce5dc81420162d9adbbc6a8d37d2a2a58f59315 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 15 Nov 2023 11:18:17 -0500 Subject: [PATCH 2/2] chore: use script setup --- static/usage/v7/toast/swipe-gesture/vue.md | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) diff --git a/static/usage/v7/toast/swipe-gesture/vue.md b/static/usage/v7/toast/swipe-gesture/vue.md index ef66431b16a..8aaf3583a98 100644 --- a/static/usage/v7/toast/swipe-gesture/vue.md +++ b/static/usage/v7/toast/swipe-gesture/vue.md @@ -17,19 +17,7 @@ - ```