MNotes (.MNOTES)

An easy-to-use, responsive and functional notifications vue component.

Preview

Attributes

Name	type	optional	description
timeout	number \| string	true	use it to specify the default timeout for all notifications (ms.)
animation	string	true	use this attribute to specify a custom animation for notifications (Vue animations)
position	"top" \| "right" \| "bottom" \| "left"	true	Decide the position and style of your notifications (comes with default animation for each)
math	boolean	true	Add mathjax support for the note message
autoDirection	boolean	true	Add auto direction support for the note message

Usage

Start by giving your MNotes a ref then call the add method on it.

The add method takes one object as a parameter with the properties explained in the example below:

<template>
  <MButton @click="pushNotification()">
    Click to push a new notification
  </MButton>
  <MNotes ref="mnotes" />
</template>
<script>
export default {
  methods: {
    pushNotification() {
      this.$refs.mnotes.add({
        icon: "fas fa-circle-check", // provide icon to your title
        title: "This is MNotes",
        message: "Awesome, isn't it ?",
        handler: () => this.$router.push("/get-started"), // provide a handler function when clicking the notification
        status: "safe", // color the notification with status color
        timeout: 2000;
      });
    },
  },
};
</script>