<< Demos MKant.ru View at GIT Hub View at NPM

mktoast

Notifier to display different types of stacked messages at the side of screen

Library agnosticVue.js connector - you can use it anywhere in components and in vue-router and vuex • Compact • Smooth css animation without jumps on manual close

Try it:

position: duration:

Installation

 npm install --save mk-toast 

Inclusion

CommonJS

 var mktoast = require('mk-toast'); 

Browser

<link  href="nodes_modules/mk-toast/dist/mk-toast.min.css" rel="stylesheet">
<script src="nodes_modules/mk-toast/dist/mk-toast.min.js">

Vue.js

To use it anywhere inside components (without inclusion in every file), add in main.js
import mktoast from 'mk-toast/vue';
Vue.use(mktoast);
In App.vue, in "styles" section:
@import "../node_modules/mk-toast/dist/mk-toast.css";
Inside vue components use this.$mktoast instead of mktoast:
this.$mktoast.echo('your message');
To use it in a router or vuex, which does not have vue context, use es6 approach:
import mktoast from 'mk-toast';

mktoast.echo('your message');

Usage

default message

mktoast.echo(message [,title] [,options]);

success message

mktoast.success(message [,title] [,options]);

danger message

mktoast.danger(message [,title] [,options]);

warning message

mktoast.warning(message [,title] [,options]);

info message

mktoast.info(message [,title] [,options]);

most universal usage

mktoast.print(options);

Options

optiontypedefaultcomment
positionstring'right bottom'Positioning of mktoast: left|center|right top|bottom
durationmilliseconds5000Time to keep toast message on screen
containerDOMElement'empty'Parent DOMElement of toast messages, default is body
typestring'default'Used only in mktoast.print(). Type of message: default|info|danger|success|warning.
messagestring'empty'Used only in mktoast.print(). String or html code of message.
titlestringundefinedUsed only in mktoast.print(). String of toast title.