swipeable-toasts

Installation & Usage

After installing the component via npm install, simply add the files to your app.module.ts

import {SwipeableToastComponent, SwipeableToastModule, SwipeableToastProvider} from "swipeable-toasts";

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...,
    SwipeableToastModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
      ...,
      SwipeableToastComponent
  ],
  providers: [
      ...,
      SwipeableToastProvider
  ]
})

Modify app.html for global usage of SwipeableToasts.

<swipeable-toast-component></swipeable-toast-component>
<ion-nav [root]="rootPage"></ion-nav>

Call the showToast() method by injecting the SwipeableToastProvider

constructor(private swipeableToastProvider: SwipeableToastProvider) { ... }

Define options and show toasts:

 let toastOptions = {
  message: "This is a very important message.",
  messageType: MessageType.SUCCESS,
  duration: 3000,
  cssClass: "custom-css",
  margin: 20
};

this.swipeableToastProvider.showToast(toastOptions);

Choose between different message types

MessageType.ERROR
MessageType.WARNING
MessageType.INFO
MessageType.SUCCESS

Options

Option	Type	Description
message	string	The displayed message
messageType	enum	Adds predefined styles to the toasts.
duration	number?	Defines, how long a Toast will be shown, before disappears
cssClass	string?	Name of a custom CSS class (e.g. for custom colors)
margin	number?	Defines a margin, which might help for adjusting the toasts in your app.