Toast

A simple JavaScript toast for web.

Install with npm, Bower, or Yarn:

npm:

npm install toast-xu --save

Bower:

bower install toast-xu --save

Yarn (note that yarn add automatically saves the package to the dependencies in package.json):

yarn add toast-xu

Use with Node.js, Browserify, or webpack:

Examples

Hello World!:

let myToast = new Toast('hello world!');
myToast.show();

New Hello World!:

let myToast = new Toast('hello world!');
myToast.show('new hello world!');

setTimeout:

let myToast = new Toast();
myToast.show('new hello world!');
setTimeout(function () {
	myToast.hide();
}, 2000);

destory():

let myToast = new Toast();
myToast.show('new hello world!');
setTimeout(function () {
	myToast.destory();
}, 2000);

custom style:

let myToast = new Toast({
	text: 'hello world!',
	class: {
		toast: 'm-toast',
		toastInner: 'm-toast-inner',
		toastText: 'm-toast-text'
	}
});

myToast.show();

html str content:

let myToast = new Toast({
  html: '<div style="line-height:100px;font-size:50px; color:#f66f0c;">Toast</div>'
});
myToast.show();

dom content:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,height=device-height">
  <title>demo07(dom_content)</title>
  <style>
  </style>
</head>
<body>
<div id="m-toast" style="line-height:100px;font-size:50px; color:#f66f0c;">Toast</div>
<script src="../dist/bundle.js"></script>
<script>
let dom = document.getElementById('m-toast');
let myToast = new Toast({
  html: dom
});
myToast.show();
</script>
</body>
</html>

tpl content:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,height=device-height">
  <title>demo08(tpl_content)</title>
  <style>
  </style>
</head>
<body>
<script type="text/html" id="m-toast-tpl">
	<div style="line-height:100px;font-size:50px; color:#f66f0c;">Toast</div>	
</script>
<script src="../dist/bundle.js"></script>
<script>
let dom = document.getElementById('m-toast-tpl').innerHTML;
let myToast = new Toast({
  html: dom
});
myToast.show();
</script>
</body>
</html>

xutongbao / npm-toast

Toast

Examples

License

About