A Vue component to display notifications on a page. https://wingsline.net/docs/vue-notifier/

Arpad Olasz 9fac290725 Update 'README.md' 9 months ago
dist 4f9f676afb Option to remove the notification after shown 1 year ago
docs 4f9f676afb Option to remove the notification after shown 1 year ago
src 4f9f676afb Option to remove the notification after shown 1 year ago
.babelrc 6cd61c78f2 intial commit 3 years ago
.eslintrc 8c64d327b1 updated eslint config 3 years ago
.gitignore 9a801d9ea1 add dist 2 years ago
CHANGELOG.md 4f9f676afb Option to remove the notification after shown 1 year ago
CONTRIBUTING.md 6cd61c78f2 intial commit 3 years ago
LICENSE.md 6cd61c78f2 intial commit 3 years ago
README.md 9fac290725 Update 'README.md' 9 months ago
package-lock.json 4f9f676afb Option to remove the notification after shown 1 year ago
package.json 4f9f676afb Option to remove the notification after shown 1 year ago
webpack.config.js 4f9f676afb Option to remove the notification after shown 1 year ago

README.md

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

License

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