<< 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 mktoastVue from 'mk-toast/vue';
// if you want non-default theme insert it here:
// import "mk-toast/dist/mk-toast-alt.css";
Vue.use(mktoastVue);
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);

Themes

Theme
(Material design colors)

New York fashion week colors
Corners


You only need to include default styles from mk-toast/dist/mk-toast.css

Customization

Styles are follows BEM methodology and named in a way .mktoast-message__{element}, .mktoast-message_{modifier}. Just put your styles after default styles mk-toast/dist/mk-toast.css As an example you can take mk-toast/dist/mk-toast-alt.css.

/* basic styles for all messages */
.mktoast-message {
  background-color: #e3dfec;
  border: 4px double #b9b0cf;
  color: #000000;
  border-radius: 5px;
}
.mktoast-message .mktoast-message__title {
  background-color: #39304f;
  color: #ffffff;
}

default message

mktoast.echo(message [,title] [,options]);
/* danger message */
.mktoast-message_danger {
  background-color: #F48FB1;
  border-color: #F06292;
  color: #000;
}
.mktoast-message_danger .mktoast-message__title {
  background-color: #F06292;
}

danger message

mktoast.danger(message [,title] [,options]);
Other style modifiers:
.mktoast-message_success
.mktoast-message_warning
.mktoast-message_info

Options

option type default comment
position string 'right bottom' Positioning of mktoast: left|center|right top|bottom
duration milliseconds 5000 Time to keep toast message on screen
container DOMElement 'empty' Parent DOMElement of toast messages, default is body
type string 'default' Used only in mktoast.print(). Type of message: default|info|danger|success|warning.
message string 'empty' Used only in mktoast.print(). String or html code of message.
title string undefined Used only in mktoast.print(). String of toast title.