Flutter教程

ion-toast

概要(CONTENTS)

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)

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<Props, State> {

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

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

      <IonToast
        isOpen={this.state.showToast2}
        onDidDismiss={() => 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');
          }
        }]}
      >
      IonToast>
    );
  }
}

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) | 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) | 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

onDidDismiss

Description

Returns a promise that resolves when the toast did dismiss.

Signature onDidDismiss() => Promise>

onWillDismiss

Description

Returns a promise that resolves when the toast will dismiss.

Signature onWillDismiss() => Promise>

present

Description

Present the toast overlay after it has been created.

Signature present() => Promise

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