docs(toast): add layout demos (#2768)

ionic-team · Feb 16, 2023 · e369a87 · e369a87
1 parent 5a4381c
commit e369a87
Show file tree

Hide file tree

Showing 16 changed files with 456 additions and 1 deletion.
diff --git a/docs/api/toast.md b/docs/api/toast.md
@@ -55,12 +55,19 @@ The following example demonstrates how to use the `buttons` property to add a bu
 import ButtonsPlayground from '@site/static/usage/v7/toast/buttons/index.md';
 
 <ButtonsPlayground />
-
 
 ## Positioning
 
 Toasts can be positioned at the top, bottom or middle of the viewport. The position can be passed upon creation. The possible values are `top`, `bottom` and `middle`. If the position is not specified, the toast will be displayed at the bottom of the viewport.
 
+## 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.
+
+import StackedPlayground from '@site/static/usage/v7/toast/layout/index.md';
+
+<StackedPlayground />
+
 ## Icons
 
 An icon can be added next to the content inside of the toast. In general, icons in toasts should be used to add additional style or context, not to grab the user's attention or elevate the priority of the toast. If you wish to convey a higher priority message to the user or guarantee a response, we recommend using an [Alert](alert.md) instead.

diff --git a/static/usage/v6/toast/layout/angular/example_component_html.md b/static/usage/v6/toast/layout/angular/example_component_html.md
@@ -0,0 +1,4 @@
+```html
+<ion-button (click)="presentBaselineToast()">Open Baseline Layout Toast</ion-button>
+<ion-button (click)="presentStackedToast()">Click Stacked Layout Toast</ion-button>
+```
diff --git a/static/usage/v6/toast/layout/angular/example_component_ts.md b/static/usage/v6/toast/layout/angular/example_component_ts.md
@@ -0,0 +1,41 @@
+```ts
+import { Component } from '@angular/core';
+import { ToastController } from '@ionic/angular';
+import type { ToastOptions } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+
+  constructor(private toastController: ToastController) {}
+
+  async presentToast(opts: ToastOptions) {
+    const toast = await this.toastController.create(opts);
+
+    await toast.present();
+  }
+
+  async presentBaselineToast() {
+    await this.presentToast({
+      duration: 3000,
+      message: "This is a toast with a long message and a button that appears on the same line.",
+      buttons: [
+        { text: 'Action With Long Text'}
+      ]
+    });
+  }
+
+  async presentStackedToast() {
+    await this.presentToast({
+      duration: 3000,
+      message: "This is a toast with a long message and a button that appears on the next line.",
+      buttons: [
+        { text: 'Action With Long Text'}
+      ],
+      layout: "stacked"
+    });
+  }
+}
+```
diff --git a/static/usage/v6/toast/layout/demo.html b/static/usage/v6/toast/layout/demo.html
@@ -0,0 +1,62 @@
+<!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 class="ion-padding">
+      <ion-button onclick="presentBaselineToast()">Open Baseline Layout Toast</ion-button>
+      <ion-button onclick="presentStackedToast()">Click Stacked Layout Toast</ion-button>
+    </ion-content>
+  </ion-app>
+
+  <script type="module">
+    import { toastController } from 'https://cdn.jsdelivr.net/npm/@ionic/[email protected]/dist/ionic/index.esm.js';
+    window.toastController = toastController;
+  </script>
+
+  <script>
+    async function presentToast(opts) {
+      const toast = await toastController.create(opts);
+
+      await toast.present();
+    }
+
+    async function presentBaselineToast() {
+      await presentToast({
+        duration: 3000,
+        message: "This is a toast with a long message and a button that appears on the same line.",
+        buttons: [
+          { text: 'Action With Long Text'}
+        ]
+      });
+    }
+
+    async function presentStackedToast() {
+      await presentToast({
+        duration: 3000,
+        message: "This is a toast with a long message and a button that appears on the next line.",
+        buttons: [
+          { text: 'Action With Long Text'}
+        ],
+        layout: "stacked"
+      });
+    }
+  </script>
+</body>
+
+</html>
diff --git a/static/usage/v6/toast/layout/index.md b/static/usage/v6/toast/layout/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 angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  devicePreview
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v6/toast/layout/demo.html"
+/>
diff --git a/static/usage/v6/toast/layout/javascript.md b/static/usage/v6/toast/layout/javascript.md
@@ -0,0 +1,33 @@
+```html
+<ion-button onclick="presentBaselineToast()">Open Baseline Layout Toast</ion-button>
+<ion-button onclick="presentStackedToast()">Click Stacked Layout Toast</ion-button>
+
+<script>
+  async function presentToast(opts) {
+    const toast = await toastController.create(opts);
+  
+    await toast.present();
+  }
+  
+  async function presentBaselineToast() {
+    await presentToast({
+      duration: 3000,
+      message: "This is a toast with a long message and a button that appears on the same line.",
+      buttons: [
+        { text: 'Action With Long Text'}
+      ]
+    });
+  }
+  
+  async function presentStackedToast() {
+    await presentToast({
+      duration: 3000,
+      message: "This is a toast with a long message and a button that appears on the next line.",
+      buttons: [
+        { text: 'Action With Long Text'}
+      ],
+      layout: "stacked"
+    });
+  }
+</script>
+```
diff --git a/static/usage/v6/toast/layout/react.md b/static/usage/v6/toast/layout/react.md
@@ -0,0 +1,41 @@
+```tsx
+import React from 'react';
+import { IonButton, useIonToast } from '@ionic/react';
+
+function Example() {
+  const [presentToast] = useIonToast();
+
+  return (
+    <>
+      <IonButton
+        onClick={() => {
+          presentToast({
+            duration: 3000,
+            message: "This is a toast with a long message and a button that appears on the next line.",
+            buttons: [
+              { text: 'Action With Long Text'}
+            ]
+          })
+        }}
+      >
+        Open Baseline Layout Toast
+      </IonButton>
+      <IonButton
+        onClick={() => {
+          presentToast({
+            duration: 3000,
+            message: "This is a toast with a long message and a button that appears on the next line.",
+            buttons: [
+              { text: 'Action With Long Text'}
+            ],
+            layout: "stacked"
+          })
+        }}
+      >
+        Open Stacked Layout Toast
+      </IonButton>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v6/toast/layout/vue.md b/static/usage/v6/toast/layout/vue.md
@@ -0,0 +1,46 @@
+```html
+<template>
+  <ion-button @click="presentBaselineToast()">Open Baseline Layout Toast</ion-button>
+  <ion-button @click="presentStackedToast()">Click Stacked Layout Toast</ion-button>
+</template>
+
+<script lang="ts">
+  import { IonButton, toastController } from '@ionic/vue';
+  import type { ToastOptions } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonButton },
+    setup() {
+      const presentToast = async (opts: ToastOptions) => {
+        const toast = await toastController.create(opts);
+      
+        await toast.present();
+      }
+      
+      const presentBaselineToast = async () => {
+        await presentToast({
+          duration: 3000,
+          message: "This is a toast with a long message and a button that appears on the same line.",
+          buttons: [
+            { text: 'Action With Long Text'}
+          ]
+        });
+      }
+      
+      const presentStackedToast = async () => {
+        await presentToast({
+          duration: 3000,
+          message: "This is a toast with a long message and a button that appears on the next line.",
+          buttons: [
+            { text: 'Action With Long Text'}
+          ],
+          layout: "stacked"
+        });
+      }
+      
+      return { presentBaselineToast, presentStackedToast }
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/toast/layout/angular/example_component_html.md b/static/usage/v7/toast/layout/angular/example_component_html.md
@@ -0,0 +1,17 @@
+```html
+<ion-button id="open-inline-toast">Open Baseline Layout Toast</ion-button>
+<ion-button id="open-stacked-toast">Open Stacked Layout Toast</ion-button>
+<ion-toast 
+  trigger="open-inline-toast" 
+  [duration]="3000"
+  [buttons]="toastButtons"
+  message="This is a toast with a long message and a button that appears on the same line."
+></ion-toast>
+<ion-toast
+  trigger="open-stacked-toast" 
+  [duration]="3000"
+  [buttons]="toastButtons"
+  message="This is a toast with a long message and a button that appears on the next line." 
+  layout="stacked"
+></ion-toast>
+```
diff --git a/static/usage/v7/toast/layout/angular/example_component_ts.md b/static/usage/v7/toast/layout/angular/example_component_ts.md
@@ -0,0 +1,15 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  toastButtons = [
+    {
+      text: 'Action With Long Text',
+    }
+  ];
+}
+```
diff --git a/static/usage/v7/toast/layout/demo.html b/static/usage/v7/toast/layout/demo.html
@@ -0,0 +1,42 @@
+<!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@next/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Toast</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <ion-button id="open-inline-toast">Open Baseline Layout Toast</ion-button>
+      <ion-button id="open-stacked-toast">Open Stacked Layout Toast</ion-button>
+      <ion-toast trigger="open-stacked-toast" duration="3000" message="This is a toast with a long message and a button that appears on the next line." layout="stacked"></ion-toast>
+      <ion-toast trigger="open-inline-toast" duration="3000" message="This is a toast with a long message and a button that appears on the same line."></ion-toast>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const toasts = document.querySelectorAll('ion-toast');
+
+    toasts.forEach((toast) => {
+      toast.buttons = [
+        {
+          text: 'Action With Long Text',
+        },
+      ];
+    });
+  </script>
+</body>
+
+</html>
diff --git a/static/usage/v7/toast/layout/index.md b/static/usage/v7/toast/layout/index.md
@@ -0,0 +1,25 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  devicePreview
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/toast/layout/demo.html"
+/>