`interstellar-ui-messages` ==========================
npm install interstellar-ui-messagesinterstellar-ui-messages
==========================
The interstellar-ui-messages module is part of the Interstellar Module System.
This module provides common UI components.
> Quick start to developing in the Interstellar eco-system:
>
> * Read Getting started doc.
> * Install interstellar-workspace.
> * Contribute to our open-source modules or develop your own.
#### Classes
* Alert
* AlertGroup
* Toast
#### Services
* interstellar-ui-messages.Alerts
* interstellar-ui-messages.Toasts
Alert classAlert object represents single alert notification which can be attached to an AlertGroup.
``js
import {Alert} from 'interstellar-ui-messages';
let alert = new Alert({
title: 'Password is incorrect',
text: 'Make sure you are using a correct password to login.,
type: Alert.TYPES.ERROR,
dismissible: false // default true
});
``
There are 4 possible Alert.TYPES:Alert.TYPES.SUCCESS
* Alert.TYPES.INFO
* Alert.TYPES.WARNING
* Alert.TYPES.ERROR
*
Alerts with dismissible parameter set to true will show a little × icon to allow user to dismiss an alert.
Check AlertGroup docs for information on how to display an Alert.
TODO
* Sample alert screenshots.
* Alert/AlertGroup/widget graphic.
* Solar styling tips.
classAlertGroup represents a place in your UI where alerts are displayed. Your application/widget can have multiple AlertGroups.
Once you create a new alert group and register in Alerts service you can show your first Alert.
`js
import {Alert, AlertGroup} from 'interstellar-ui-messages';
let alertGroup = new AlertGroup();
Alerts.registerGroup(alertGroup);
let alert = new Alert({
title: 'Password is incorrect',
text: 'Make sure you are using a correct password to login.,
type: Alert.TYPES.ERROR,
dismissible: false // default true
});
alertGroup.show(alert);
``
You can clear all alerts in existing group using clear method:
`js`
alertGroup.clear();
To display your alert group in your UI use widget
classToast object represents single toast message that can be displayed using Toast service.
`js`
let toast = new Toast('Transaction sent!');
You can pass a second parameter with number of miliseconds your toast should be visible:
`js`
let toast = new Toast('Transaction sent!', 5000); // 5 seconds
Toast will be visible for 2 seconds by default.
serviceAlerts service allows you to register your AlertGroup.
`js
import {AlertGroup} from 'interstellar-ui-messages';
let alertGroup = new AlertGroup();
Alerts.registerGroup(alertGroup);
`
You must register your alert group before you can use it within your application or widget.
You can also get previously registered group by it's ID:
`js`
let alertGroup = Alerts.getGroup(groupId);
serviceUse Toasts service to show your Toast:
`js
import {Toast} from 'interstellar-ui-messages';
@Widget('send', 'SendWidgetController', 'interstellar-network-widgets/send-widget')
@Inject('interstellar-ui-messages.Toasts')
export default class SendWidgetController {
constructor(Toasts) {
this.Toasts = Toasts;
}
send() {
// Send transaction
let toast = new Toast('Transaction sent!');
this.Toasts.show(toast);
}
}
`
Remember you have to place widget won't appear.
widgetUse widget to display AlertGroup in your UI. This widget accepts one parameter: group which represents AlertGroup object you want to display.
`js
import {AlertGroup} from 'interstellar-ui-messages';
@Widget('send', 'SendWidgetController', 'interstellar-network-widgets/send-widget')
@Inject('interstellar-ui-messages.Alerts')
export default class SendWidgetController {
constructor(Alerts) {
this.alertGroup = new AlertGroup();
Alerts.registerGroup(this.alertGroup);
}
}
``html`
widgetUse widget to display toasts in your UI. There should be only one, global toast widget in your application.
`html``