Toast
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.
Repo: https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin
Installation
- Install the Cordova and Ionic Native plugins:
$ ionic cordova plugin add cordova-plugin-x-toast $ npm install --save @ionic-native/toast@4 - Add this plugin to your app's module
Supported platforms
- Android
- BlackBerry 10
- iOS
- Windows
- Windows Phone 8
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) |