swipeable-toasts/readme.md

Swipeable Toasts for the Ionic-Framework

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