mktoast

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

• Library agnostic • Vue.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:

echo info success danger warning position: default left center right default bottom top 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

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);

this.$mktoast.echo('your message');

import mktoast from 'mk-toast';

mktoast.echo('your message');

Usage

Themes

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;
}

/* danger message */
.mktoast-message_danger {
  background-color: #F48FB1;
  border-color: #F06292;
  color: #000;
}
.mktoast-message_danger .mktoast-message__title {
  background-color: #F06292;
}

Options