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