vue-notif

2.0.0 • Public • Published

Vue Notif
npm npm

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 string null
    body string null
    type string info
    duration number in seconds / null "card will remain visible"
    icon bool true
    onClose function null
  • clicking the card itself will dismiss the notification as well.

Package Sidebar

Install

npm i vue-notif

Weekly Downloads

155

Version

2.0.0

License

MIT

Unpacked Size

13.7 kB

Total Files

10

Last publish

Collaborators

  • ctf0