A Vue component to display notifications on a page. https://wingsline.net/docs/vue-notifier/
|
3 years ago | |
---|---|---|
dist | 4 years ago | |
docs | 4 years ago | |
src | 4 years ago | |
.babelrc | 5 years ago | |
.eslintrc | 5 years ago | |
.gitignore | 5 years ago | |
CHANGELOG.md | 4 years ago | |
CONTRIBUTING.md | 5 years ago | |
LICENSE.md | 5 years ago | |
README.md | 3 years ago | |
package-lock.json | 4 years ago | |
package.json | 4 years ago | |
webpack.config.js | 4 years ago |
A Vue component to display notifications on a page.
<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>
For the demo please visit wingsline-vue-notifier.
You can install the package via yarn:
yarn add wingsline-vue-notifications
or npm:
npm install wingsline-vue-notifications --save
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.
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": "..."});
Please see CHANGELOG for more information what has changed recently.
Coming soon
Please see CONTRIBUTING for details.
If you discover any security related issues, please contact Arpad Olasz instead of using the issue tracker.
The MIT License (MIT). Please see License File for more information.