interstellar-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.
Module contents
Classes
Services
Widgets
Alert
class
Alert
object represents single alert notification which can be attached to an AlertGroup
.
; let 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
Alert
s 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.
AlertGroup
class
AlertGroup
represents a place in your UI where alerts are displayed. Your application/widget can have multiple AlertGroup
s.
Once you create a new alert group and register in Alerts
service you can show your first Alert
.
; let alertGroup = ;Alerts; let 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:
alertGroupclear;
To display your alert group in your UI use <interstellar-ui-messages-alerts>
widget.
Toast
class
Toast
object represents single toast message that can be displayed using Toast
service.
let toast = 'Transaction sent!';
You can pass a second parameter with number of miliseconds your toast should be visible:
let toast = 'Transaction sent!' 5000; // 5 seconds
Toast will be visible for 2 seconds by default.
interstellar-ui-messages.Alerts
service
Alerts
service allows you to register your AlertGroup
.
; let alertGroup = ;Alerts;
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:
let alertGroup = Alerts;
interstellar-ui-messages.Toasts
service
Use Toasts
service to show your Toast
:
;@@ { thisToasts = Toasts; } { // Send transaction let toast = 'Transaction sent!'; thisToasts; }
Remember you have to place <interstellar-ui-messages-toast>
widget somewhere in you application. Otherwise your Toast
won't appear.
<interstellar-ui-messages-alerts>
widget
Use <interstellar-ui-messages-alerts>
widget to display AlertGroup
in your UI. This widget accepts one parameter: group
which represents AlertGroup
object you want to display.
; @@ { thisalertGroup = ; Alerts; }
<interstellar-ui-messages-toast>
widget
Use <interstellar-ui-messages-toast>
widget to display toasts in your UI. There should be only one, global toast widget in your application.