Toast

Improve this doc

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 first argument of the create method: Toast.create(opts). 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 create method below for all available options.

Positioning

Toasts can be positioned at the top, bottom or middle of the view port. The position can be passed to the Toast.create(opts) method. The position option is a string, and the values accepted are top, bottom and middle. If the position is not specified, the toast will be displayed at the bottom of the view port.

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 Toast instance. The onDismiss function can be called to perform an action after the toast is dismissed.

Usage

constructor(nav: NavController) {
  this.nav = nav;
}

presentToast() {
  let toast = Toast.create({
    message: 'User was added successfully',
    duration: 3000,
    position: 'top'
  });

  toast.onDismiss(() => {
    console.log('Dismissed toast');
  });

  this.nav.present(toast);
}

Static Members

create(opts)

Toast options

Property Type Default Description
message string - The message for the toast. Long strings will wrap and the toast container will expand.
duration number - How many milliseconds to wait before hiding the toast. By default, it will show until dismiss() is called.
position string “bottom” The position of the toast on the screen. Accepted values: “top”, “middle”, “bottom”.
cssClass string - Any additional class for custom styles.
showCloseButton boolean false Whether or not to show a button to close the toast.
closeButtonText string “Close” Text to display in the close button.
dismissOnPageChange boolean false Whether to dismiss the toast when navigating to a new page.
Param Type Details
opts object

Toast options. See the above table for available options.

Instance Members

setMessage(message)

Param Type Details
message string

Toast message content

API

Native

General