Question

Ionic4项目中我们可以使用Ionic4提示框组件ion-toast对项目进行布局。

ion-toast官方文档地址:https://ionicframework.com/docs/api/toast

A Toast is a subtle notification commonly used in modern applications. It can be used to provide feedback about an operation or to display a system message. The toast appears on top of the app's content, and can be dismissed by the app to resume user interaction with the app.

Creating

All of the toast options should be passed in the create method. The message to display should be passed in the message property. The showCloseButton option can be set to true in order to display a close button on the toast. See the properties below for all available options.

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.

Dismissing

The toast can be dismissed automatically after a specific amount of time by passing the number of milliseconds to display it in the duration of the toast options. If showCloseButton is set to true, then the close button will dismiss the toast. To dismiss the toast after creation, call the dismiss() method on the instance.

ion-toast　用法(Usage)

angularjavascriptreact

import { Component } from '@angular/core';
import { ToastController } from '@ionic/angular';

@Component({
  selector: 'toast-example',
  templateUrl: 'toast-example.html',
  styleUrls: ['./toast-example.css'],
})
export class ToastExample {

  constructor(public toastController: ToastController) {}

  async presentToast() {
    const toast = await this.toastController.create({
      message: 'Your settings have been saved.',
      duration: 2000
    });
    toast.present();
  }

  async presentToastWithOptions() {
    const toast = await this.toastController.create({
      header: 'Toast header',
      message: 'Click to Close',
      position: 'top',
      buttons: [
        {
          side: 'start',
          icon: 'star',
          text: 'Favorite',
          handler: () => {
            console.log('Favorite clicked');
          }
        }, {
          text: 'Done',
          role: 'cancel',
          handler: () => {
            console.log('Cancel clicked');
          }
        }
      ]
    });
    toast.present();
  }

}

async function presentToast() {
  const toastController = document.querySelector('ion-toast-controller');
  await toastController.componentOnReady();

  const toast = await toastController.create({
    message: 'Your settings have been saved.',
    duration: 2000
  });
  return await toast.present();
}

async function presentToastWithOptions() {
  const toastController = document.querySelector('ion-toast-controller');
  await toastController.componentOnReady();

  const toast = await toastController.create({
    header: 'Toast header',
    message: 'Click to Close',
    position: 'top',
    buttons: [
      {
        side: 'start',
        icon: 'star',
        text: 'Favorite',
        handler: () => {
          console.log('Favorite clicked');
        }
      }, {
        text: 'Done',
        role: 'cancel',
        handler: () => {
          console.log('Cancel clicked');
        }
      }
    ]
  });

  return await toast.present();
}

import React, { Component } from 'react'
import { IonToast } from '@ionic/react';

type Props = {}
type State = {
  showToast1: boolean
  showToast2: boolean
}

export class Toast extends Component {

  constructor(props: Props) {
    super(props);
    this.state = {
      showToast1: false
      showToast2: false
    };
  }

  render() {
    return (
       this.setState(() => ({ showToast1: false }))}
        message='Your settings have been saved.'
        duration={200}
      >
      

       this.setState(() => ({ showToast2: false }))}
        message='Click to Close'
        position='top'
        buttons={[{
          side: 'start',
          icon: 'star',
          text: 'Favorite',
          handler: () => {
            console.log('Favorite clicked');
          }
        }, {
          text: 'Done',
          role: 'cancel',
          handler: () => {
            console.log('Cancel clicked');
          }
        }]}
      >
      
    );
  }
}

ion-toast　属性(Properties)

animated
Description	If true, the toast will animate.
Attribute	animated
Type	boolean
Default	true
buttons
Description	An array of buttons for the toast.
Type	(string | ToastButton)[] | undefined
closeButtonText
Description	Text to display in the close button.
Attribute	close-button-text
Type	string | undefined
color
Description	The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming.
Attribute	color
Type	string | undefined
cssClass
Description	Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
Attribute	css-class
Type	string | string[] | undefined
duration
Description	How many milliseconds to wait before hiding the toast. By default, it will show until dismiss() is called.
Attribute	duration
Type	number
Default	0
enterAnimation
Description	Animation to use when the toast is presented.
Type	((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined
header
Description	Header to be shown in the toast.
Attribute	header
Type	string | undefined
keyboardClose
Description	If true, the keyboard will be automatically dismissed when the overlay is presented.
Attribute	keyboard-close
Type	boolean
Default	false
leaveAnimation
Description	Animation to use when the toast is dismissed.
Type	((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined
message
Description	Message to be shown in the toast.
Attribute	message
Type	string | undefined
mode
Description	The mode determines which platform styles to use.
Attribute	mode
Type	"ios" | "md"
position
Description	The position of the toast on the screen.
Attribute	position
Type	"bottom" | "middle" | "top"
Default	'bottom'
showCloseButton
Description	If true, the close button will be displayed.
Attribute	show-close-button
Type	boolean
Default	false
translucent
Description	If true, the toast will be translucent.
Attribute	translucent
Type	boolean
Default	false

ion-toast　事件(Events)

Name	Description
ionToastDidDismiss	Emitted after the toast has dismissed.
ionToastDidPresent	Emitted after the toast has presented.
ionToastWillDismiss	Emitted before the toast has dismissed.
ionToastWillPresent	Emitted before the toast has presented.

ion-toast　内置方法(Methods)

dismiss
Description	Dismiss the toast overlay after it has been presented.
Signature	dismiss(data?: any, role?: string | undefined) => Promise<boolean>
onDidDismiss
Description	Returns a promise that resolves when the toast did dismiss.
Signature	onDidDismiss() => Promise<OverlayEventDetail<any>>
onWillDismiss
Description	Returns a promise that resolves when the toast will dismiss.
Signature	onWillDismiss() => Promise<OverlayEventDetail<any>>
present
Description	Present the toast overlay after it has been created.
Signature	present() => Promise<void>

ion-toast中的CSS 自定义属性

Name	Description
--background	Background of the toast
--border-color	Border color of the toast
--border-radius	Border radius of the toast
--border-style	Border style of the toast
--border-width	Border width of the toast
--box-shadow	Box shadow of the toast
--button-color	Color of the button text
--color	Color of the toast text
--end	Position from the end
--height	Height of the toast
--max-height	Maximum height of the toast
--max-width	Maximum width of the toast
--min-height	Minimum height of the toast
--min-width	Minimum width of the toast
--start	Position from the start
--width	Width of the toast