Notification

Simple modals for providing users with notifications much like the JavaScript alert() method. Basic markdown may be used for links and formatting.

The success notification demands no user interaction.

ts.ui.Notification.success('You did it!');

The info, warning and error notification must be accepted by the user.

ts.ui.Notification.info('You can do it.');
ts.ui.Notification.warning('You will fail.');
ts.ui.Notification.error('You are wrong.');

An optional second argument specifies the button text.

ts.ui.Notification.warning('Beware', 'Understood');

You can configure a callback for when the Notification gets accepted.

ts.ui.Notification.info('You must accept it.', {
	onaccept: function() {
		ts.ui.Notification.success('We knew you would.');
	}
});

Notifications support basic markdown for formatting and links.

  • Markdown for **bold text** and *italic text* and `source code`
    Markdown for a [hyperlink](http://www.example.com/)

When a link is clicked, the URL will be passed along to the onlink method. As you can see below, the URL can be just a key, it doesn't have to be real URL.

var text = 'Choose link [one](ONE) or [two](TWO) or [three](THREE).';
ts.ui.Notification.info(text, {
	onlink: function(url) {
		this.accept().then(function onfadeout() {
			ts.ui.Notification.success(url);
		});
	}
});

If the link should indeed link to something, make sure to provide the full protocol http(s)://

ts.ui.Notification.info(
	'Please visit [Tradeshift](http://www.tradeshift.com)'
);

Note that all links will open in a new tab (or window, depending on the browser settings), so you should not use links in Notifications for internal navigation, at least not just yet.

You can config those callbacks for Notification. such as onopen, onopened , onclose, onclosed.

ts.ui.Notification.success('You did it!', {
	onopen: function() {
		console.log('The Notification is going to open!');
	},
	onopened: function() {
		console.log('The Notification is opened!');
	},
	onclose: function() {
		console.log('The Notification is going to close!');
	},
	onclosed: function() {
		console.log('The Notification is closed!');
	},
});

If you find a bug or need a feature…

  • Create GitHub Issue…