Toast

Improve this doc

$ ionic plugin add cordova-plugin-x-toast
$ npm install --save @ionic-native/toast

Repo: https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin

This plugin allows you to show a native Toast (a little text popup) on iOS, Android and WP8. It's great for showing a non intrusive native notification which is guaranteed always in the viewport of the browser.

Requires Cordova plugin: cordova-plugin-x-toast. For more info, please see the Toast plugin docs.

Supported platforms

Usage

import { Toast } from '@ionic-native/toast';

constructor(private toast: Toast) { }

...

this.toast.show("I'm a toast", '5000', 'center').subscribe(
  toast => {
    console.log(toast);
  }
);

Instance Members

show(message, duration, position)

Show a native toast for the given duration at the specified position.

Param Type Details
message string

The message to display.

duration string

Duration to show the toast, either 'short', 'long' or any number of milliseconds: '1500'.

position string

Where to position the toast, either 'top', 'center', or 'bottom'.

Returns: Observable<any> Returns an Observable that notifies first on success and then when tapped, rejects on error.

hide()

Manually hide any currently visible toast.

Returns: Promise<any> Returns a Promise that resolves on success.

showWithOptions(options)

Show a native toast with the given options.

Param Type Details
options Object

Options for showing a toast. Available options: message The message to display. duration Duration to show the toast, either 'short', 'long' or any number of milliseconds: '1500'. position Where to position the toast, either 'top', 'center', or 'bottom'. addPixelsY Offset in pixels to move the toast up or down from its specified position.

Returns: Observable<any> Returns an Observable that notifies first on success and then when tapped, rejects on error.

showShortTop(message)

Shorthand for show(message, 'short', 'top').

Param Type Details
message string

Returns: Observable<any> Returns an Observable that notifies first on success and then when tapped, rejects on error.

showShortCenter(message)

Shorthand for show(message, 'short', 'center').

Param Type Details
message string

Returns: Observable<any> Returns an Observable that notifies first on success and then when tapped, rejects on error.

showShortBottom(message)

Shorthand for show(message, 'short', 'bottom').

Param Type Details
message string

Returns: Observable<any> Returns an Observable that notifies first on success and then when tapped, rejects on error.

showLongTop(message)

Shorthand for show(message, 'long', 'top').

Param Type Details
message string

Returns: Observable<any> Returns an Observable that notifies first on success and then when tapped, rejects on error.

showLongCenter(message)

Shorthand for show(message, 'long', 'center').

Param Type Details
message string

Returns: Observable<any> Returns an Observable that notifies first on success and then when tapped, rejects on error.

showLongBottom(message)

Shorthand for show(message, 'long', 'bottom').

Param Type Details
message string

Returns: Observable<any> Returns an Observable that notifies first on success and then when tapped, rejects on error.

ToastOptions

Param Type Details
message string

Message to display

(optional)
duration number

Duration in ms to show

(optional)
position string

Position

(optional)
addPixelsY number

Add negative value to move it up a bit

(optional)
data any

Pass JSON object to be sent back in success callback

(optional)
styling { opacity?: number; backgroundColor?: string; textColor?: string; cornerRadius?: number; horizontalPadding?: number; verticalPadding?: number; }

Styling

(optional)

API

Native

General