Skip to content

Commit 2c86917

Browse files
liamdebeasiliamdebeasi
authored
docs(toast): add swipeGesture playground (#3247)
1 parent 08300e2 commit 2c86917

File tree

7 files changed

+146
-0
lines changed

7 files changed

+146
-0
lines changed

‎docs/api/toast.md

+8
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,14 @@ import PositionAnchor from '@site/static/usage/v7/toast/position-anchor/index.md
7272

7373
<PositionAnchor />
7474

75+
## Swipe to Dismiss
76+
77+
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.
78+
79+
import SwipeGesture from '@site/static/usage/v7/toast/swipe-gesture/index.md';
80+
81+
<SwipeGesture />
82+
7583
## Layout
7684

7785
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.

‎static/usage/v7/toast/swipe-gesture/angular.md

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
```html
2+
<ion-content class="ion-padding">
3+
<ion-button id="open-toast">Open Toast</ion-button>
4+
<ion-toast
5+
message="This toast can be swiped to dismiss"
6+
trigger="open-toast"
7+
swipeGesture="vertical"
8+
position="bottom"
9+
positionAnchor="footer"
10+
></ion-toast>
11+
</ion-content>
12+
<ion-footer id="footer">
13+
<ion-toolbar>
14+
<ion-title>Footer</ion-title>
15+
</ion-toolbar>
16+
</ion-footer>
17+
```

‎static/usage/v7/toast/swipe-gesture/demo.html

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Toast</title>
7+
<link rel="stylesheet" href="../../../common.css" />
8+
<script src="../../../common.js"></script>
9+
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
11+
</head>
12+
13+
<body>
14+
<ion-app>
15+
<ion-content>
16+
<div class="container">
17+
<ion-button id="open-toast">Open Toast</ion-button>
18+
<ion-toast
19+
message="This toast can be swiped to dismiss"
20+
trigger="open-toast"
21+
swipe-gesture="vertical"
22+
position="bottom"
23+
position-anchor="footer"
24+
></ion-toast>
25+
</div>
26+
</ion-content>
27+
28+
<ion-footer id="footer">
29+
<ion-toolbar>
30+
<ion-title>Footer</ion-title>
31+
</ion-toolbar>
32+
</ion-footer>
33+
</ion-app>
34+
</body>
35+
</html>

‎static/usage/v7/toast/swipe-gesture/index.md

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import Playground from '@site/src/components/global/Playground';
2+
3+
import javascript from './javascript.md';
4+
import react from './react.md';
5+
import vue from './vue.md';
6+
import angular from './angular.md';
7+
8+
<Playground
9+
version="7"
10+
code={{
11+
javascript,
12+
react,
13+
vue,
14+
angular,
15+
}}
16+
src="usage/v7/toast/swipe-gesture/demo.html"
17+
devicePreview={true}
18+
includeIonContent={false}
19+
/>

‎static/usage/v7/toast/swipe-gesture/javascript.md

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
```html
2+
<ion-content class="ion-padding">
3+
<ion-button id="open-toast">Open Toast</ion-button>
4+
<ion-toast
5+
message="This toast can be swiped to dismiss"
6+
trigger="open-toast"
7+
swipe-gesture="vertical"
8+
position="bottom"
9+
position-anchor="footer"
10+
></ion-toast>
11+
</ion-content>
12+
<ion-footer id="footer">
13+
<ion-toolbar>
14+
<ion-title>Footer</ion-title>
15+
</ion-toolbar>
16+
</ion-footer>
17+
```

‎static/usage/v7/toast/swipe-gesture/react.md

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
```tsx
2+
import React from 'react';
3+
import { IonButton, IonContent, IonFooter, IonTitle, IonToast, IonToolbar } from '@ionic/react';
4+
5+
function Example() {
6+
return (
7+
<>
8+
<IonContent className="ion-padding">
9+
<IonButton id="open-toast">Open Toast</IonButton>
10+
<IonToast
11+
message="This toast can be swiped to dismiss"
12+
trigger="open-toast"
13+
swipeGesture="vertical"
14+
position="bottom"
15+
positionAnchor="footer"
16+
></IonToast>
17+
</IonContent>
18+
<IonFooter id="footer">
19+
<IonToolbar>
20+
<IonTitle>Footer</IonTitle>
21+
</IonToolbar>
22+
</IonFooter>
23+
</>
24+
);
25+
}
26+
export default Example;
27+
```

‎static/usage/v7/toast/swipe-gesture/vue.md

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
```html
2+
<template>
3+
<ion-content class="ion-padding">
4+
<ion-button id="open-toast">Open Toast</ion-button>
5+
<ion-toast
6+
message="This toast can be swiped to dismiss"
7+
trigger="open-toast"
8+
swipe-gesture="vertical"
9+
position="bottom"
10+
position-anchor="footer"
11+
></ion-toast>
12+
</ion-content>
13+
<ion-footer id="footer">
14+
<ion-toolbar>
15+
<ion-title>Footer</ion-title>
16+
</ion-toolbar>
17+
</ion-footer>
18+
</template>
19+
20+
<script setup lang="ts">
21+
import { IonButton, IonContent, IonFooter, IonTitle, IonToast, IonToolbar } from '@ionic/vue';
22+
</script>
23+
```

0 commit comments

Comments
 (0)