Skip to content

docs(toast): add playgrounds #2516

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 12 commits into from
Sep 2, 2022
Merged
466 changes: 84 additions & 382 deletions docs/api/toast.md

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion static/code/stackblitz/html/index.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { defineCustomElements } from '@ionic/core/loader';

import { loadingController, modalController, pickerController } from '@ionic/core';
import { loadingController, modalController, pickerController, toastController } from '@ionic/core';

/* Core CSS required for Ionic components to work properly */
import '@ionic/core/css/core.css';
Expand All @@ -22,3 +22,4 @@ defineCustomElements();
(window as any).loadingController = loadingController;
(window as any).modalController = modalController;
(window as any).pickerController = pickerController;
(window as any).toastController = toastController;
5 changes: 5 additions & 0 deletions static/usage/toast/buttons/angular/angular_html.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
```html
<ion-button (click)="presentToast()">Click Me</ion-button>
<p>{{ handlerMessage }}</p>
<p>{{ roleMessage }}</p>
```
39 changes: 39 additions & 0 deletions static/usage/toast/buttons/angular/angular_ts.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
```ts
import { Component } from '@angular/core';
import { ToastController } from '@ionic/angular';

@Component({
selector: 'app-example',
templateUrl: 'example.component.html',
})
export class ExampleComponent {
handlerMessage = '';
roleMessage = '';

constructor(private toastController: ToastController) {}

async presentToast() {
const toast = await this.toastController.create({
message: 'Hello World!',
duration: 3000,
buttons: [
{
text: 'More Info',
role: 'info',
handler: () => { this.handlerMessage = 'More Info clicked'; }
},
{
text: 'Dismiss',
role: 'cancel',
handler: () => { this.handlerMessage = 'Dismiss clicked'; }
}
]
});

await toast.present();

const { role } = await toast.onDidDismiss();
this.roleMessage = `Dismissed with role: ${role}`;
}
}
```
75 changes: 75 additions & 0 deletions static/usage/toast/buttons/demo.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Toast</title>
<link rel="stylesheet" href="../../common.css" />
<script src="../../common.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />

<style>
.container {
flex-direction: column;
}

.container p {
margin-bottom: 0;
}
</style>
</head>

<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Toast</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="container">
<ion-button onclick="presentToast()">Click Me</ion-button>
<p id="handlerResult"></p>
<p id="roleResult"></p>
</div>
</ion-content>
</ion-app>

<script type="module">
import { toastController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/index.esm.js';
window.toastController = toastController;
</script>

<script>
const handlerOutput = document.querySelector('#handlerResult');
const roleOutput = document.querySelector('#roleResult');

async function presentToast() {
const toast = await toastController.create({
message: 'Hello World!',
duration: 3000,
buttons: [
{
text: 'More Info',
role: 'info',
handler: () => { handlerOutput.innerText = 'More Info clicked'; }
},
{
text: 'Dismiss',
role: 'cancel',
handler: () => { handlerOutput.innerText = 'Dismiss clicked'; }
}
]
});

await toast.present();

const { role } = await toast.onDidDismiss();
roleOutput.innerText = `Dismissed with role: ${role}`;
}
</script>
</body>

</html>
24 changes: 24 additions & 0 deletions static/usage/toast/buttons/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import Playground from '@site/src/components/global/Playground';

import javascript from './javascript.md';
import react from './react.md';
import vue from './vue.md';

import angularHTML from './angular/angular_html.md';
import angularTS from './angular/angular_ts.md';

<Playground
devicePreview
code={{
javascript,
react,
vue,
angular: {
files: {
'src/app/example.component.html': angularHTML,
'src/app/example.component.ts': angularTS,
},
},
}}
src="usage/toast/buttons/demo.html"
/>
34 changes: 34 additions & 0 deletions static/usage/toast/buttons/javascript.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
```html
<ion-button onclick="presentToast()">Click Me</ion-button>
<p id="handlerResult"></p>
<p id="roleResult"></p>

<script>
const handlerOutput = document.querySelector('#handlerResult');
const roleOutput = document.querySelector('#roleResult');

async function presentToast() {
const toast = await toastController.create({
message: 'Hello World!',
duration: 3000,
buttons: [
{
text: 'More Info',
role: 'info',
handler: () => { handlerOutput.innerText = 'More Info clicked'; }
},
{
text: 'Dismiss',
role: 'cancel',
handler: () => { handlerOutput.innerText = 'Dismiss clicked'; }
}
]
});

await toast.present();

const { role } = await toast.onDidDismiss();
roleOutput.innerText = `Dismissed with role: ${role}`;
}
</script>
```
41 changes: 41 additions & 0 deletions static/usage/toast/buttons/react.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
```tsx
import React, { useState } from 'react';
import { IonButton, useIonToast } from '@ionic/react';

function Example() {
const [presentToast] = useIonToast();
const [handlerMessage, setHandlerMessage] = useState('');
const [roleMessage, setRoleMessage] = useState('');

return (
<>
<IonButton
onClick={() => {
presentToast({
message: 'Hello World!',
duration: 3000,
onDidDismiss: (e: CustomEvent) => setRoleMessage(`Dismissed with role: ${e.detail.role}`),
buttons: [
{
text: 'More Info',
role: 'info',
handler: () => { setHandlerMessage('More Info clicked'); }
},
{
text: 'Dismiss',
role: 'cancel',
handler: () => { setHandlerMessage('Dismiss clicked'); }
}
]
})
}}
>
Click Me
</IonButton>
<p>{handlerMessage}</p>
<p>{roleMessage}</p>
</>
);
}
export default Example;
```
46 changes: 46 additions & 0 deletions static/usage/toast/buttons/vue.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
```html
<template>
<ion-button @click="presentToast">Click Me</ion-button>
<p>{{ handlerMessage }}</p>
<p>{{ roleMessage }}</p>
</template>

<script lang="ts">
import { IonButton, toastController } from '@ionic/vue';

export default {
components: { IonButton },
data() {
return {
handlerMessage: '',
roleMessage: '',
};
},
methods: {
async presentToast() {
const toast = await toastController.create({
message: 'Hello World!',
duration: 3000,
buttons: [
{
text: 'More Info',
role: 'info',
handler: () => { this.handlerMessage = 'More Info clicked'; }
},
{
text: 'Dismiss',
role: 'cancel',
handler: () => { this.handlerMessage = 'Dismiss clicked'; }
}
]
});

await toast.present();

const { role } = await toast.onDidDismiss();
this.roleMessage = `Dismissed with role: ${role}`;
},
},
};
</script>
```
3 changes: 3 additions & 0 deletions static/usage/toast/icon/angular/angular_html.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
```html
<ion-button (click)="presentToast()">Click Me</ion-button>
```
22 changes: 22 additions & 0 deletions static/usage/toast/icon/angular/angular_ts.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
```ts
import { Component } from '@angular/core';
import { ToastController } from '@ionic/angular';

@Component({
selector: 'app-example',
templateUrl: 'example.component.html',
})
export class ExampleComponent {
constructor(private toastController: ToastController) {}

async presentToast() {
const toast = await this.toastController.create({
message: 'Hello World!',
duration: 1500,
icon: 'globe'
});

await toast.present();
}
}
```
46 changes: 46 additions & 0 deletions static/usage/toast/icon/demo.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Toast</title>
<link rel="stylesheet" href="../../common.css" />
<script src="../../common.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
</head>

<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Toast</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="container">
<ion-button onclick="presentToast()">Click Me</ion-button>
</div>
</ion-content>
</ion-app>

<script type="module">
import { toastController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/index.esm.js';
window.toastController = toastController;
</script>

<script>
async function presentToast() {
const toast = await this.toastController.create({
message: 'Hello World!',
duration: 1500,
icon: 'globe'
});

await toast.present();
}
</script>
</body>

</html>
24 changes: 24 additions & 0 deletions static/usage/toast/icon/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import Playground from '@site/src/components/global/Playground';

import javascript from './javascript.md';
import react from './react.md';
import vue from './vue.md';

import angularHTML from './angular/angular_html.md';
import angularTS from './angular/angular_ts.md';

<Playground
devicePreview
code={{
javascript,
react,
vue,
angular: {
files: {
'src/app/example.component.html': angularHTML,
'src/app/example.component.ts': angularTS,
},
},
}}
src="usage/toast/icon/demo.html"
/>
Loading