toast-xu
v1.0.7
Published
A simple JavaScript toast for web.
Downloads
10
Maintainers
Readme
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>
License
MIT. Copyright (c) 2018 Xu Tongbao.