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.

    Install

    npm i vue-notif

    DownloadsWeekly Downloads

    107

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    13.7 kB

    Total Files

    10

    Last publish

    Collaborators

    • avatar