vue-notifier

Wingsline vue-notifier

A Vue component to display notifications on a page.

Usage

<notifications>

  <notification title="Hello">
    I am a notification!
  </notification>
  <notification>
    Who needs titles? You can also use <strong>markup</strong> in the content.
  </notification>

</notifications>

In order to remove the notification after it was shown, use the remove-after-shown prop:

<notifications remove-after-shown>

  <notification title="Hello">
    I am a notification!
  </notification>
  <notification>
    Who needs titles? You can also use <strong>markup</strong> in the content.
  </notification>

</notifications>

Demo

For the demo please visit wingsline-vue-notifier.

Installation

You can install the package via yarn:

yarn add wingsline-vue-notifications

or npm:

npm install wingsline-vue-notifications --save

Usage

import Vue from "vue";
import {  Notification, Notifications } from "wingsline-vue-notifications";

window.notifications = new Vue({
  el: "#app",
  components: { Notification, Notifications },
  methods: {
    // Optional:
    // in order to add notifications programatically add this function
    add(data) {
      this.$children[0].appended.push(data);
    }
  }
});

// then in your code, just add the notification like this:
notifications.add({title: "hello", "content": "I am a notification"});
// The newly added notification will be added to queue if other notification 
// is visible on the page, otherwise will be shown instantly.

Notification types

Adding a type attribute, you can append a notification--[type] classname to the notification:

<notification title="I am a green notification" type="positive">
  Set my <code>type</code> attribute to change my color!
</notification>

Will be compiled to:

<li class="notification notification--positive">
    <div class="notification__title">
        I am a green notification
    </div>
    <div class="notification__body">
        Set my <code>type</code> attribute to change my color!
    </div>
</li>

Type attribute is also supported on programatically added notifications:

notifications.add({type: "negative", title: "Oops!", "content": "..."});

Change log

Please see CHANGELOG for more information what has changed recently.

Testing

Coming soon

Contributing

Please see CONTRIBUTING for details.

Security

If you discover any security related issues, please contact Arpad Olasz instead of using the issue tracker.

Credits

• Arpad Olasz

License

The MIT License (MIT). Please see License File for more information.