vue-notif
v2.0.0
Published
vue v2 notification component which can be used either through js or html
Downloads
345
Readme
Installation
npm install vue-notif --save
Usage
register the component "we use Bulma for styling the notification cards".
import Vue from 'vue' window.EventHub = require('vuemit') Vue.component('MyNotification', require('vue-notif').default)
add the component to your page
<div class="notif-container"> <my-notification></my-notification> </div>
now call it either
from html
<div class="notif-container"> <my-notification title="title" body="body" type="success/error/primary/warning" :icon="false" :duration="1/2/etc.." :on-close="somefunction()"> </my-notification> </div>
or from js
EventHub.fire('showNotif', { title: 'title', body: 'body', type: 'success', duration: 1, icon: false, onClose(){ // what happen when notification is closed } });
| prop | required | type | default | | -------- | -------- | -------- | -------------------------------------------- | | title | :x: | string | null | | body | :x: | string | null | | type | :x: | string | info | | duration | :x: | number | in seconds / null "card will remain visible" | | icon | :x: | bool | true | | onClose | :x: | function | null |
clicking the card itself will dismiss the notification as well.