derby-ui-toast

Notification messages (toasts for Derby.

Requirements

• Node.js
• Derby

Installation

Using npm

npm install derby-ui-toast

Usage

First you have to import the base CSS:

@import '../../node_modules/derby-ui-toast/css/' 

If you want to use the default background images on the notification boxes:

@import '../../node_modules/derby-ui-toast/css/bg-images.css' 

Or if you want to use the Font Awesome icons:

@import '../../node_modules/derby-ui-toast/css/bg-fontawesome.css' 

Also you have to enable the component in JavaScript:

app.component(require('derby-ui-toast'));

And in HTML:

<view name="derby-ui-toast"></view>

Adding messages

model.toast(type, message, options);

type : string, the default possibilities are:

• 'info'
• 'success'
• 'warning'
• 'error'

message: string

options: object

options

• sticky
  default: false
• timeout
  default: 5000
• click
  default: none

Examples:

model.toast('info', 'Everything is ok!');
model.toast('success', 'It worked!');
model.toast('warning', 'Beware!');
model.toast('error', 'An error happened!', { sticky: true });
model.toast('error', 'An error happened again!', { timeout: 1000 });
model.toast('error', 'And again!', { click: myFunction });

Removing messages

Messages will disappear in 5 seconds by default. They can also be removed by clicking the message dialog box.

Beware

The namespace derby-ui-toast will be changed later to ui.