Miss any of our Open RFC calls?Watch the recordings here! »

shapla-notifications

1.0.7 • Public • Published

shapla-notifications

npm npm vue2

A simple dependency-free JavaScript notification component for VueJS

Table of contents

Installation

npm install --save shapla-notifications

Usage

Add the component:

import notification from 'shapla-notifications';
 
export default {
  name: 'Hello',
 
  components: {
    notification
  },
 
  data () {
    return {
        note:{},
    };
  },
}
<notification v-model="note"></notification>
<notification ref="notify"></notification>

notification will show the notification whenever the note property is updated (normal Vue reactivity). Alternatively, by default notification listens to vm.$root for the 'show-notification' event. To show the notification, emit the event passing the notification data object

<button @click="showNotification">Show Notification</button>
<notification v-model="note"></notification>
methods: {
    showNotification() {
        this.note = {
            type: 'success',
            message: 'This is success message.',
        };
    }
}

or using global event bus

<button @click="showNotification">Show Notification</button>
<notification ref="notify"></notification>
methods: {
    showNotification() {
        vm.$root.$emit('show-notification', {
            type: 'error',
            title: 'Error!',
            message: 'This is error message.'
        });
    },
}

Alternatively, you can also use the show method to trigger the display of the snackbar.

<notification ref="notify"></notification>
vm.$refs.notify.show({ message: 'Message' })

props

props Type Default Description
options Object optional v-model when set shows notification
event String show-notification specifies the name of the event the notification listens to.
event-source Vue vm.$root specifies the source of the event. must be a vue instance or component ref
show-dismisses Boolean true If set true, a cross icon will be show to dismiss notification.
timeout Number 2750 The amount of time in milliseconds to show the notification.
position String top-right Two acceptable value top-right or bottom-left.

methods

method Description
show(data) trigger the display of a message with optional action.

notification data object

The options prop, event, and show method takes an object for notification data. The table below shows the properties and their usage.

Property Effect Remarks Type
message The text message to display. Required String
timeout The amount of time in milliseconds to show the snackbar. Optional (default 2750) Integer
type Supported types are success, info,warning, error Optional (default info) String

Install

npm i shapla-notifications

DownloadsWeekly Downloads

20

Version

1.0.7

License

MIT

Unpacked Size

1.02 MB

Total Files

15

Last publish

Collaborators

  • avatar