dom-notifications
Have a look at the example page.
usage
Install with npm install dom-notifications --save
and use something like
browserify to create a bundle for the browser.
var domNotifications = var notifications = documentbody notifications // defaults to `info`notificationsnotifications
By default this uses octicons icon classes that are not included automatically. Here's a CDN link that serves octicons that you can include in your HTML:
Have a look at the options to replace them with your own icon classes.
options
{
repo: null, // Can be set to a GitHub url: 'http://github.com/finnp/notifications'
icons: {
error: 'octicon octicon-flame',
warning: 'octicon octicon-alert',
info: 'octicon octicon-info',
success: 'octicon octicon-check',
close: 'octicon octicon-x'
}
Setting the options.repo
to a GitHub repository will add an Create an issue for this error
button to the error notifications.
If you need more customization, instead of using the message
property, you
can also specify an element
property and set it to DOMElement
that will be the content.
For example with nanohtml:
notifications
Notifications extends Nanocomponent.
notifications.render(state?)
Creates the root element for the component. Call this ones to append it to the DOM. Optionally state is an array of notifications
notifications.add(notification)
Add and show a notification. notification
should be an object with a message
property and optionally one of the types 'error', 'warning', 'info', 'success'
(defaults to 'info'
).
If notification
is a string it will use this as a message and default to 'info'.
notifications.info(message)
Shortcut for .add({type: 'info', message: message})
notifications.error(message)
Shortcut for .add({type: 'error', message: message})
notifications.warning(message)
Shortcut for .add({type: 'warning', message: message})
notifications.success(message)
Shortcut for .add({type: 'success', message: message})
Use without styles
If you don't want the styles to be used (or applied automatically), you can also use the module like this:
var Notifications = var notifications = // optionally apply styles yourselfvar styles = var insertCss =
Notes
The styles for the notifications were adapted from ember-cli-notifications and atom.