Neapolitan Pasta Maker

    ember-notify

    6.0.3 • Public • Published

    Build Status

    ember-notify

    ember-notify displays wee little notification messages down the bottom of your Ember.js app.

    Compatibility

    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.

    Usage

    1. Add <EmberNotify /> to one of your templates, usually in application.hbs
    2. Inject the notify service
    3. Display messages using the info, success, warning, alert and error methods

    Examples

    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:

    <EmberNotify @closeAfter={{4000}} />

    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' });

    Multiple Containers

    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:

     <EmberNotify @source={{this.alternativeNotify}} />
    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');
      }
    }

    Custom message template

    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:

      <EmberNotify as |message close|>
        <a {{on "click" (action close)}} class="close">
          close from block
        </a>
        <span class="message-from-block">
          {{message.text}}
        </span>
      </EmberNotify>

    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}} />.

    Custom Animations

    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.

    <!-- Gives class="custom-notify"> to top level element -->
    <EmberNotify @defaultClass="custom-notify" />

    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 {}

    Turn off loading CSS

    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
      }
    });
    

    Installation

    This module is an ember-cli addon, so installation is easy as pie.

    ember install ember-notify

    Upgrading from a previous version

    See the CHANGELOG.

    Keywords

    Install

    npm i ember-notify

    DownloadsWeekly Downloads

    4,268

    Version

    6.0.3

    License

    MIT

    Unpacked Size

    26.7 kB

    Total Files

    20

    Last publish

    Collaborators

    • alonbukai
    • melsumner
    • btecu
    • aexmachina