swipeable-toasts
TypeScript icon, indicating that this package has built-in type declarations

0.3.18 • Public • Published

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.

Package Sidebar

Install

npm i swipeable-toasts@0.3.18

Homepage

detim.de

Version

0.3.18

License

MIT

Unpacked Size

29.1 kB

Total Files

26

Last publish

Collaborators

  • detim-ionic-dev