ember-notify displays wee little notification messages down the bottom of your Ember.js app.
ember-notify is compatible with the following presentation frameworks:
- Zurb Foundation 6 (default)
- Zurb Foundation 5:
<EmberNotify @messageStyle="foundation-5" /> - Thoughtbot Refills:
<EmberNotify @messageStyle="refills" /> - Twitter Bootstrap:
<EmberNotify @messageStyle="bootstrap" /> - Semantic-UI:
<EmberNotify @messageStyle="semantic-ui" /> - UIKit:
<EmberNotify @messageStyle="uikit" />
The CSS animations are inspired by CSS from alertify.js. You can also customize the positioning and animations by overriding the default ember-notify CSS class. For usage, see the animations example.
- Add
<EmberNotify />to one of your templates, usually inapplication.hbs - Inject the
notifyservice - Display messages using the
info,success,warning,alertanderrormethods
import Component from '@glimmer/component';
import { inject as service } from '@ember/service';
import { action } from '@ember/object';
export default class MyComponent extends Component {
@service notify;
@action
sayHello() {
this.notify.info('Hello there!');
}
}By default the notifications close after 2.5 seconds, although you can control this in your template:
Or you can control when each message is closed:
let message = this.notify.alert('You can control how long it is displayed', {
closeAfter: 10000 // or set to null to disable auto-hiding
});...and you can hide messages programmatically:
message.close();You can specify raw HTML:
this.notify.info({ html: '<div class="my-div">Hooray!</div>' });Rounded corners, if that's your thing:
this.notify.alert(`This one's got rounded corners.`, {
radius: true
});Include custom classNames on your message:
this.notify.alert('Custom CSS class', {
classNames: ['my-class']
});Include an identifier to avoid duplicate messages being displayed:
this.notify.alert('Unique Message', { id: 'some-unique-identifier' });If you want to have separate notifications and control where they're inserted into the DOM you can have multiple <EmberNotify /> components, but only one of them can be accessed using the injected service.
The others you will need to provide a source property, so secondary containers should be used as follows:
import Component from '@glimmer/component';
import Notify from 'ember-notify';
import { action } from '@ember/object';
export default class MyComponent extends Component {
alternativeNotify = Notify.create();
@action
clicked() {
this.alternativeNotify.success('Hello from the controller');
}
}You can pass a block with template you want to use for each message (instead of using the default one). It may look like this:
Two arguments are passed to the block: message object, and close action. Make sure
you are using Closure Actions syntax passing the action (e. g. <a {{action close}} or
<YourComponent @close={{action close}} />.
By default, the ember-notify message will appear in the bottom right corner of the screen. You may want to control the positioning or the animation. To do so, you need to pass a CSS class using the defaultClass option. This will render the top level ember-notify element with the class you pass in.
Then you need to add custom styling for each of the elements within the ember-notify structure.
The following snippet summarizes rules needed for a custom look. For a complete example that you can drop into your project, see examples/custom-position-animations.css
/* Main container */
.custom-notify {
position: fixed;
top: 10px;
right: 0;
left: 0;
}
/* Message box */
.custom-notify .callout {
position: relative;
overflow: hidden;
}
/* Classes applied for animating in/out */
.custom-notify .ember-notify-show {}
.custom-notify .ember-notify-hide {}If you want to use the addon without loading the CSS themes (because you have your own CSS) add this to
your ember-cli-build.js file:
let app = new EmberApp({
emberNotify: {
importCss: false
}
});
This module is an ember-cli addon, so installation is easy as pie.
ember install ember-notifySee the CHANGELOG.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent