Skip to content

Commit bf5cd92

Browse files
averyjohnstonliamdebeasi
averyjohnston
and
liamdebeasi
authored
docs(toast): add playgrounds (#2516)
Co-authored-by: Liam DeBeasi <[email protected]>
1 parent 9f35d78 commit bf5cd92

32 files changed

+971
-383
lines changed

‎docs/api/toast.md

Lines changed: 84 additions & 382 deletions
Large diffs are not rendered by default.

‎static/code/stackblitz/html/index.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { defineCustomElements } from '@ionic/core/loader';
22

3-
import { loadingController, modalController, pickerController } from '@ionic/core';
3+
import { loadingController, modalController, pickerController, toastController } from '@ionic/core';
44

55
/* Core CSS required for Ionic components to work properly */
66
import '@ionic/core/css/core.css';
@@ -22,3 +22,4 @@ defineCustomElements();
2222
(window as any).loadingController = loadingController;
2323
(window as any).modalController = modalController;
2424
(window as any).pickerController = pickerController;
25+
(window as any).toastController = toastController;

‎static/usage/toast/buttons/angular/angular_html.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
```html
2+
<ion-button (click)="presentToast()">Click Me</ion-button>
3+
<p>{{ handlerMessage }}</p>
4+
<p>{{ roleMessage }}</p>
5+
```

‎static/usage/toast/buttons/angular/angular_ts.md

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
import { ToastController } from '@ionic/angular';
4+
5+
@Component({
6+
selector: 'app-example',
7+
templateUrl: 'example.component.html',
8+
})
9+
export class ExampleComponent {
10+
handlerMessage = '';
11+
roleMessage = '';
12+
13+
constructor(private toastController: ToastController) {}
14+
15+
async presentToast() {
16+
const toast = await this.toastController.create({
17+
message: 'Hello World!',
18+
duration: 3000,
19+
buttons: [
20+
{
21+
text: 'More Info',
22+
role: 'info',
23+
handler: () => { this.handlerMessage = 'More Info clicked'; }
24+
},
25+
{
26+
text: 'Dismiss',
27+
role: 'cancel',
28+
handler: () => { this.handlerMessage = 'Dismiss clicked'; }
29+
}
30+
]
31+
});
32+
33+
await toast.present();
34+
35+
const { role } = await toast.onDidDismiss();
36+
this.roleMessage = `Dismissed with role: ${role}`;
37+
}
38+
}
39+
```

‎static/usage/toast/buttons/demo.html

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Toast</title>
8+
<link rel="stylesheet" href="../../common.css" />
9+
<script src="../../common.js"></script>
10+
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
11+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
12+
13+
<style>
14+
.container {
15+
flex-direction: column;
16+
}
17+
18+
.container p {
19+
margin-bottom: 0;
20+
}
21+
</style>
22+
</head>
23+
24+
<body>
25+
<ion-app>
26+
<ion-header>
27+
<ion-toolbar>
28+
<ion-title>Toast</ion-title>
29+
</ion-toolbar>
30+
</ion-header>
31+
<ion-content>
32+
<div class="container">
33+
<ion-button onclick="presentToast()">Click Me</ion-button>
34+
<p id="handlerResult"></p>
35+
<p id="roleResult"></p>
36+
</div>
37+
</ion-content>
38+
</ion-app>
39+
40+
<script type="module">
41+
import { toastController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/index.esm.js';
42+
window.toastController = toastController;
43+
</script>
44+
45+
<script>
46+
const handlerOutput = document.querySelector('#handlerResult');
47+
const roleOutput = document.querySelector('#roleResult');
48+
49+
async function presentToast() {
50+
const toast = await toastController.create({
51+
message: 'Hello World!',
52+
duration: 3000,
53+
buttons: [
54+
{
55+
text: 'More Info',
56+
role: 'info',
57+
handler: () => { handlerOutput.innerText = 'More Info clicked'; }
58+
},
59+
{
60+
text: 'Dismiss',
61+
role: 'cancel',
62+
handler: () => { handlerOutput.innerText = 'Dismiss clicked'; }
63+
}
64+
]
65+
});
66+
67+
await toast.present();
68+
69+
const { role } = await toast.onDidDismiss();
70+
roleOutput.innerText = `Dismissed with role: ${role}`;
71+
}
72+
</script>
73+
</body>
74+
75+
</html>

‎static/usage/toast/buttons/index.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
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+
7+
import angularHTML from './angular/angular_html.md';
8+
import angularTS from './angular/angular_ts.md';
9+
10+
<Playground
11+
devicePreview
12+
code={{
13+
javascript,
14+
react,
15+
vue,
16+
angular: {
17+
files: {
18+
'src/app/example.component.html': angularHTML,
19+
'src/app/example.component.ts': angularTS,
20+
},
21+
},
22+
}}
23+
src="usage/toast/buttons/demo.html"
24+
/>

‎static/usage/toast/buttons/javascript.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
```html
2+
<ion-button onclick="presentToast()">Click Me</ion-button>
3+
<p id="handlerResult"></p>
4+
<p id="roleResult"></p>
5+
6+
<script>
7+
const handlerOutput = document.querySelector('#handlerResult');
8+
const roleOutput = document.querySelector('#roleResult');
9+
10+
async function presentToast() {
11+
const toast = await toastController.create({
12+
message: 'Hello World!',
13+
duration: 3000,
14+
buttons: [
15+
{
16+
text: 'More Info',
17+
role: 'info',
18+
handler: () => { handlerOutput.innerText = 'More Info clicked'; }
19+
},
20+
{
21+
text: 'Dismiss',
22+
role: 'cancel',
23+
handler: () => { handlerOutput.innerText = 'Dismiss clicked'; }
24+
}
25+
]
26+
});
27+
28+
await toast.present();
29+
30+
const { role } = await toast.onDidDismiss();
31+
roleOutput.innerText = `Dismissed with role: ${role}`;
32+
}
33+
</script>
34+
```

‎static/usage/toast/buttons/react.md

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
```tsx
2+
import React, { useState } from 'react';
3+
import { IonButton, useIonToast } from '@ionic/react';
4+
5+
function Example() {
6+
const [presentToast] = useIonToast();
7+
const [handlerMessage, setHandlerMessage] = useState('');
8+
const [roleMessage, setRoleMessage] = useState('');
9+
10+
return (
11+
<>
12+
<IonButton
13+
onClick={() => {
14+
presentToast({
15+
message: 'Hello World!',
16+
duration: 3000,
17+
onDidDismiss: (e: CustomEvent) => setRoleMessage(`Dismissed with role: ${e.detail.role}`),
18+
buttons: [
19+
{
20+
text: 'More Info',
21+
role: 'info',
22+
handler: () => { setHandlerMessage('More Info clicked'); }
23+
},
24+
{
25+
text: 'Dismiss',
26+
role: 'cancel',
27+
handler: () => { setHandlerMessage('Dismiss clicked'); }
28+
}
29+
]
30+
})
31+
}}
32+
>
33+
Click Me
34+
</IonButton>
35+
<p>{handlerMessage}</p>
36+
<p>{roleMessage}</p>
37+
</>
38+
);
39+
}
40+
export default Example;
41+
```

‎static/usage/toast/buttons/vue.md

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
```html
2+
<template>
3+
<ion-button @click="presentToast">Click Me</ion-button>
4+
<p>{{ handlerMessage }}</p>
5+
<p>{{ roleMessage }}</p>
6+
</template>
7+
8+
<script lang="ts">
9+
import { IonButton, toastController } from '@ionic/vue';
10+
11+
export default {
12+
components: { IonButton },
13+
data() {
14+
return {
15+
handlerMessage: '',
16+
roleMessage: '',
17+
};
18+
},
19+
methods: {
20+
async presentToast() {
21+
const toast = await toastController.create({
22+
message: 'Hello World!',
23+
duration: 3000,
24+
buttons: [
25+
{
26+
text: 'More Info',
27+
role: 'info',
28+
handler: () => { this.handlerMessage = 'More Info clicked'; }
29+
},
30+
{
31+
text: 'Dismiss',
32+
role: 'cancel',
33+
handler: () => { this.handlerMessage = 'Dismiss clicked'; }
34+
}
35+
]
36+
});
37+
38+
await toast.present();
39+
40+
const { role } = await toast.onDidDismiss();
41+
this.roleMessage = `Dismissed with role: ${role}`;
42+
},
43+
},
44+
};
45+
</script>
46+
```

‎static/usage/toast/icon/angular/angular_html.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
```html
2+
<ion-button (click)="presentToast()">Click Me</ion-button>
3+
```

‎static/usage/toast/icon/angular/angular_ts.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
import { ToastController } from '@ionic/angular';
4+
5+
@Component({
6+
selector: 'app-example',
7+
templateUrl: 'example.component.html',
8+
})
9+
export class ExampleComponent {
10+
constructor(private toastController: ToastController) {}
11+
12+
async presentToast() {
13+
const toast = await this.toastController.create({
14+
message: 'Hello World!',
15+
duration: 1500,
16+
icon: 'globe'
17+
});
18+
19+
await toast.present();
20+
}
21+
}
22+
```

‎static/usage/toast/icon/demo.html

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Toast</title>
8+
<link rel="stylesheet" href="../../common.css" />
9+
<script src="../../common.js"></script>
10+
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
11+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
12+
</head>
13+
14+
<body>
15+
<ion-app>
16+
<ion-header>
17+
<ion-toolbar>
18+
<ion-title>Toast</ion-title>
19+
</ion-toolbar>
20+
</ion-header>
21+
<ion-content>
22+
<div class="container">
23+
<ion-button onclick="presentToast()">Click Me</ion-button>
24+
</div>
25+
</ion-content>
26+
</ion-app>
27+
28+
<script type="module">
29+
import { toastController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/index.esm.js';
30+
window.toastController = toastController;
31+
</script>
32+
33+
<script>
34+
async function presentToast() {
35+
const toast = await this.toastController.create({
36+
message: 'Hello World!',
37+
duration: 1500,
38+
icon: 'globe'
39+
});
40+
41+
await toast.present();
42+
}
43+
</script>
44+
</body>
45+
46+
</html>

‎static/usage/toast/icon/index.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
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+
7+
import angularHTML from './angular/angular_html.md';
8+
import angularTS from './angular/angular_ts.md';
9+
10+
<Playground
11+
devicePreview
12+
code={{
13+
javascript,
14+
react,
15+
vue,
16+
angular: {
17+
files: {
18+
'src/app/example.component.html': angularHTML,
19+
'src/app/example.component.ts': angularTS,
20+
},
21+
},
22+
}}
23+
src="usage/toast/icon/demo.html"
24+
/>

0 commit comments

Comments
 (0)