Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including mk-toast with all npm packages installed. Try it out:

var mkToast = require("mk-toast")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

mk-toast v1.2.0

Library agnostic notifier with Vue.js connector. Mobile friendly and compact. Smooth CSS animation with no twitching.

mk-toast

Library agnostic notifier with Vue.js connector. Mobile friendly and compact. Smooth CSS animation with no twitching.

screenshot

Demo and details

Installation

 npm install --save mk-toast 

Inclusion

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"></script>

Build systems

var mktoast = require('mk-toast');
// or 
import mktoast from 'mk-toast';

Don't forget to include css styles

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

mktoast.echo(message [,title] [,options]);
mktoast.success(message [,title] [,options]);
mktoast.danger(message [,title] [,options]);
mktoast.warning(message [,title] [,options]);
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(). Types 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.

Demo and details

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free