Miss any of our Open RFC calls?Watch the recordings here! »

mk-toast

1.5.0 • Public • Published

mk-toast

Library agnostic notifier with Vue.js connector. Mobile friendly and compact. Smooth CSS animation with no twitching. Typings are included for TypeScript integration and better IDE experience.

screenshot

Demo and details

Installation

 npm install --save mk-toast

Inclusion

Build systems

import mktoast from 'mk-toast';
// Don't forget to include css styles from 'mk-toast/dist/mk-toast.css'

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>

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

Vue.js

To use it anywhere inside components (without inclusion in every file), add in main.js:

import mktoastVue from 'mk-toast/vue';
Vue.use(mktoastVue);

You don't have to include styles in this case, 'cos styles are already included in Vue connector.

Then inside vue component you can use this.$mktoast:

this.$mktoast.echo(message);

To use it outside of componets (in vuex actions, for example), use regular es6 approach:

import mktoast from 'mk-toast';
mktoast.echo('your message');

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 HTMLElement null Parent HTMLElement of toast messages, default is document.body
type string 'default' Used only in mktoast.print(). Types 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.

Demo with playground

Install

npm i mk-toast

DownloadsWeekly Downloads

265

Version

1.5.0

License

MIT

Unpacked Size

1.55 MB

Total Files

23

Last publish

Collaborators

  • avatar