Simple, highly configurable flash messages for ember-cli.
Statistics for ember-cli-flash
This ember-cli
addon adds a simple flash message service to your app. It's injected into all Controllers
, Routes
, Views
and Components
by default (you can change this), or lazily injected with Ember.inject.service
.
You can install either with ember install:addon
:
ember install:addon ember-cli-flash
or npm
:
npm install ember-cli-flash --save
Usage is very simple. From within the factories you injected to (defaults to Controller
, Route
, View
and Component
):
You can quickly add flash messages using these methods from the service:
.success
.warning
.info
.danger
.success
.warning
.info
.alert
.secondary
These will add the appropriate classes to the flash message component for styling in Bootstrap or Foundation. For example:
// Bootstrap: the flash message component will have 'alert alert-success' classes
// Foundation: the flash message component will have 'alert-box success' classes
Ember.get(this, 'flashMessages').success('Success!');
If the convenience methods don't fit your needs, you can add custom messages with add
:
Ember.get(this, 'flashMessages').add({
message: 'Custom message'
});
You can also pass in options to custom messages:
Ember.get(this, 'flashMessages').add({
message : 'I like alpacas',
type : 'alpaca'
timeout : 500,
priority : 200,
sticky : true,
showProgress : true
});
Ember.get(this, 'flashMessages').success('This is amazing', {
timeout : 100,
priority : 100,
sticky : false,
showProgress : true
});
-
message: string
Required. The message that the flash message displays.
-
type?: string
Default:
info
This is mainly used for styling. The flash message's
type
is set as a class name on the rendered component, together with a prefix. The rendered class name depends on the message type that was passed into the component. -
timeout?: number
Default:
3000
Number of milliseconds before a flash message is automatically removed.
-
priority?: number
Default:
100
Higher priority messages appear before low priority messages. The best practise is to use priority values in multiples of
100
(100
being the lowest priority). -
sticky?: boolean
Default:
false
By default, flash messages disappear after a certain amount of time. To disable this and make flash messages permanent (they can still be dismissed by click), set
sticky
to true. -
showProgress?: boolean
Default:
false
To show a progress bar in the flash message, set this to true.
In config/environment.js
, you can override service defaults in the flashMessageDefaults
object:
module.exports = function(environment) {
var ENV = {
flashMessageDefaults: {
timeout : 5000,
priority : 200,
sticky : true,
showProgress : true,
type : 'alpaca',
types : [ 'alpaca', 'notice', 'foobar' ],
injectionFactories : [ 'route', 'controller', 'view', 'component' ]
}
}
}
See the options section for detailed option information. This lets you override defaults for various options – most notably, you can specify exactly what types you need, which means in the above example, you can do Ember.get('flashMessages').{alpaca,notice,foobar}
.
The key injectionFactories
lets you choose which factories the service injects itself into.
If you only need to access the flash message service from inside controllers
, you can do so by changing the injectionFactories
prop to [ 'controller' ]
. Note that this will also work with any valid registry name on the container, e.g. [ 'component:foo', 'controller:bar', 'route:baz' ]
.
If you're using Ember 1.10.0
or higher, you can opt to inject the service manually on any Ember.Object
registered in the container:
export default {
flashMessages: Ember.inject.service()
}
It's best practise to use flash messages sparingly, only when you need to notify the user of something. If you're sending too many messages, and need a way for your users to clear all messages from screen, you can use this method:
Ember.get(this, 'flashMessages').clearMessages();
You can take advantage of Promises, and their .then
and .catch
methods. To add a flash message after saving a model (or when it fails):
actions: {
saveFoo() {
const flashMessages = Ember.get(this, 'flashMessages');
Ember.get(this, 'model').save()
.then((res) => {
flashMessages.success('Successfully saved!');
doSomething(res);
})
.catch((err) => {
flashMessages.danger('Something went wrong!');
handleError(err);
});
}
}
Then, to display somewhere in your app, add this to your template:
It also accepts your own template:
By default, flash messages will have Bootstrap style class names. If you want to use Foundation, simply specify the messageStyle
on the component:
To display messages sorted by priority, add this to your template:
To add radius
or round
type corners in Foundation:
This addon is minimal and does not currently ship with a stylesheet. You can style flash messages by targetting the appropriate alert class (Foundation or Bootstrap) in your CSS.
Please read the Contributing guidelines for information on how to contribute.
MIT
git clone
this repositorynpm install
bower install
ember server
- Visit your app at https://localhost:4200.
ember test
ember test --server
ember build
For more information on using ember-cli, visit https://www.ember-cli.com/.