vue-roaster

toasters

Toast alerts/notifications (initially developed for Vue.js with a material-design style)

Installation

npm install --save --production toasters

Usage

HTML:

<div id="toasts-container" class="position-right position-bottom">
  <div id="toasts-content">
    <!-- toasts will be added or removed from here -->
  </div>
</div>

JS:

import Toast from "toasters";

// example
new Toast({
  content: "Hello World",
  interactable: false
});

// or
new Toast("Hello World");

// or
new Toast("Hello World", { persistent: true, timeout: 9000 });

Preview:

Options

Option	Type	Default	Description
content	String	""	The notification message.
persistent	Boolean	false	Whether or not the toast is persistent.
interactable	Boolean	true	If the toast can be manually closed or not.
timeout	Number	6000	How long till the toast disappears. Note: will be ignored if the toast is persistent.
visible	Boolean	true	If the toast will be visible when instantiated.

Potential future additions

• Error handling (i.e. you haven't provided any content for the toast)
• Ability to parse markdown or html

Contributing

# install dependencies
npm install

# watch files for changes with webpack
npm run dev

# build for production with minification
npm run build