Skip to content
Adds API-like functionality for rendering and managing flash messages in your Ember CLI apps
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
addon
app
config
tests
vendor
.bowerrc
.editorconfig
.ember-cli
.gitignore
.gitmodules
.jshintrc
.npmignore
.travis.yml
.watchmanconfig
LICENSE.md
README.md
bower.json
ember-cli-build.js
index.js
package.json
testem.js
testem.json

README.md

Ember Flash Messages Build Status npm

Ember Flash Messages (ember-flash-messages) adds API-like functionality to your Ember CLI app for rendering and managing flash messages.

The primary goal of this addon is to manage functionality in your JS whilst getting out of the way for styling and templating, allowing you to match your styleguide and mockups precisely.

Stylesheets for a basic flash message layout may be optionally imported.

Contents

Examples

Simple JS usage in any route, component, controller, or view:

// app/controllers/index.js

export default Ember.Controller.extend({

  afterSomeEvent: function() {
    this.flashMessage('success', 'Content saved!');
  },

});

Firing an action when the message is clicked:

// app/components/index.js

export default Ember.Component.extend({

  actions: {
    undo(message) {
      console.log(message);
    }
  }

  afterSomeEvent: function() {
    this.flashMessage({
      type: 'warning',
      action: 'undo', // Run when message is
      content: '<strong>Click here</strong> to cancel', // Pass HTML
      duration: 5000, // Milliseconds to show the message for
    });
  },

});

Adding as a standalone component in a template:

{{#flash-message type='some-event'}}
  Welcome to your new account!. {{#link-to 'tutorial'}}Click here to repeat the tutorial{{/link-to}}.
{{/flash-message}}

Showing a message in perpetuity:

// app/routes/index.js

export default Ember.Route.extend({

  afterSomeEvent: function() {
    this.flashMessage({
      type: 'success',
      content: 'This will show forever!',
      duration: 0, // Pass zero duration
    });
  },

});

Installation

Users of older version of Ember (e.g. 1.10) should use release v0.5.2.

ember install ember-flash-messages

Now add the flash message queue to your template. Usually this is the application template.

{{flash-message-queue}}

Documentation

Documentation including installation, usage, and customizable options is available in the wiki.

Issues

If you have any issues or feature requests, please open an issue or submit a PR.

Development

git clone https://github.com/sir-dunxalot/ember-flash-messages.git
cd ember-flash-messages
ember install
ember s

Tests can be run with ember test or by navigating to the /tests route.

Working on wiki documentation:

You can edit the documentation directly on Github - it's a wiki!

You can’t perform that action at this time.