An Ember CLI addon that adds Atom inspired notification messages to your app.
Check out the demo.
ember install ember-cli-notifications
In v3.1.0 we simplified the API for calling notifications in your Ember application. These were not breaking changes and using the pre v3.1.0 API will still work today.
The old API documentation can be viewed here.
There are four types of notification available.
// Info
this.notifications.info('You have one unread message');
// Error
this.notifications.error('Something went wrong');
// Success
this.notifications.success('Saved successfully!');
// Warning
this.notifications.warning('You have unsaved changes');
actions: {
saveOptions() {
this.get('model').save()
.then(() => {
this.notifications.success('Successfully saved your settings', {
autoClear: true
});
}),
.catch((err) => {
this.notifications.error('Something went wrong');
});
}
}
actions: {
saveOptions() {
this.get('model').save()
.then(() => {
this.notifications.clearAll();
this.notifications.success('Successfully saved your settings');
})
}
}
This code only needs to be called in one place such as your application route.
this.notifications.setDefaultClearNotification(1000);
This code only needs to be called in one place such as your application route.
this.notifications.setDefaultAutoClear(true);
Include this snippet in your Handlebars template to display the notifications.
Font Awesome is required as part of the addon to display the message type icons on the notifications.
If Font Awesome is not already included in the consuming application, add the following to your applications config/environment.js
file as a property of the ENV
object.
var ENV = {
'ember-cli-notifications': {
includeFontAwesome: true
}
}
Alternatively, you can use Glyphicons that are packaged with Bootstrap. Glyphicons are not added to your application via this addon.
var ENV = {
'ember-cli-notifications': {
icons: 'bootstrap'
}
}
Boolean value that defines whether the notification message dismisses automatically, or whether it needs to be dismissed manually by the user.
If true, inherits the default clearDuration
value unless specified.
Default value is false
this.notifications.success('Successfully saved your settings', {
autoClear: true
});
The time in milliseconds that the notification will automatically dismiss after, if autoClear
is true
.
Default value is 3200
this.notifications.success('Successfully saved your settings', {
autoClear: true,
clearDuration: 1200
});