docs(toast): add playgrounds (#2516)

Co-authored-by: Liam DeBeasi <[email protected]>
ionic-team · Sep 2, 2022 · bf5cd92 · bf5cd92 · vercel · Sep 2, 2022
1 parent 9f35d78
commit bf5cd92
Show file tree

Hide file tree

Showing 32 changed files with 971 additions and 383 deletions.
diff --git a/docs/api/toast.md b/docs/api/toast.md
diff --git a/static/code/stackblitz/html/index.ts b/static/code/stackblitz/html/index.ts
@@ -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';
@@ -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;
diff --git a/static/usage/toast/buttons/angular/angular_html.md b/static/usage/toast/buttons/angular/angular_html.md
@@ -0,0 +1,5 @@
+```html
+<ion-button (click)="presentToast()">Click Me</ion-button>
+<p>{{ handlerMessage }}</p>
+<p>{{ roleMessage }}</p>
+```
diff --git a/static/usage/toast/buttons/angular/angular_ts.md b/static/usage/toast/buttons/angular/angular_ts.md
@@ -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}`;
+  }
+}
+```
diff --git a/static/usage/toast/buttons/demo.html b/static/usage/toast/buttons/demo.html
@@ -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>
diff --git a/static/usage/toast/buttons/index.md b/static/usage/toast/buttons/index.md
@@ -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"
+/>
diff --git a/static/usage/toast/buttons/javascript.md b/static/usage/toast/buttons/javascript.md
@@ -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>
+```
diff --git a/static/usage/toast/buttons/react.md b/static/usage/toast/buttons/react.md
@@ -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;
+```
diff --git a/static/usage/toast/buttons/vue.md b/static/usage/toast/buttons/vue.md
@@ -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>
+```
diff --git a/static/usage/toast/icon/angular/angular_html.md b/static/usage/toast/icon/angular/angular_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-button (click)="presentToast()">Click Me</ion-button>
+```
diff --git a/static/usage/toast/icon/angular/angular_ts.md b/static/usage/toast/icon/angular/angular_ts.md
@@ -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();
+  }
+}
+```
diff --git a/static/usage/toast/icon/demo.html b/static/usage/toast/icon/demo.html
@@ -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>
diff --git a/static/usage/toast/icon/index.md b/static/usage/toast/icon/index.md
@@ -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"
+/>