ionic-swipeable-toasts v1.1.3

Ionic Swipeable Toasts

Installation

Install this Package via npm i ionic-swipeable-toasts

Make it all work

To make everything work, you have to install hammerjs and init your Module like this:

import {IonicHammerJsConfig, IonicSwipeAbleToastsModule} from "ionic-swipeable-toasts";
 
 @NgModule({
   declarations: [
     ...
   ],
   imports: [
     ...,
     IonicSwipeAbleToastsModule.forRoot()
   ],
   bootstrap: [IonicApp],
   ],
   providers: [
       ...,
       {provide: HAMMER_GESTURE_CONFIG, useClass: IonicHammerJsConfig}
   ]
 })

Add the following Line wherever you want, preferably in the app.html:

<ionic-swipeable-toasts-component></ionic-swipeable-toasts-component>

To send a Toast, inject the IonicSwipeableToastsProvider in your constructor like this: constructor(private ionicSwipeableToastsProvider: IonicSwipeableToastsProvider) { ... }

and than call the toast Method on it:

this.ionicSwipeableToastsProvider.toast({
         message: 'Hallo'
       });

Options

The message is required! Default Value for duration is 3000.

SwipeAbleToastPosition

Specifies where the Toast will be shown. Default: TOP

Enum. Values: TOP, BOTTOM

SwipeAbleToastType

Specifies a general Background-Color.

Enum. Values are: SUCCESS, INFO, WARNING, DANGER

SwipeAbleToastDirection

Specifies in which direction the toast can be swiped away.

Enum. Values are: TOP, LEFT, RIGHT, DOWN

Notify: Top only works, when the Position is Top and Down only works when the Position is BOTTOM.

Example

A example of a Toast, that can be send:

this.ionicSwipeableToastsProvider.toast({
      message: 'Das ist ein Toast',
      type: SwipeAbleToastType.DANGER,
      duration: 5000,
      icon: 'add',
      cssClass: 'my-class',
      position: SwipeAbleToastPosition.BOTTOM,
      swipeDirections: [SwipeAbleToastDirection.DOWN, SwipeAbleToastDirection.LEFT]
    });