Notifier. Library agnostic. Smooth CSS animation with no twitching.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
dist
src
vue
.gitignore
README.md
gulpfile.js
package-lock.json
package.json
remarks.txt

README.md

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

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(). 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 and details