1.1.6 • Published 3 years ago
codethereal-toastr v1.1.6
toast
Made quickly without having worked on it, sorry
Module for Javascript toast messages
Import via cdn
<script src='https://unpkg.com/codethereal-toastr@1.1.1/dist/toast.js'></script>
Import via npm
npm i codethereal-toastr
Use
<style>
#toast-container .close {
position: absolute;
right: 10px;
top: 5px;
cursor: pointer;
opacity: 0.8;
color: #fff;
font-size: 1.25rem;
}
#toast-container .close:hover {
color: #000;
}
</style>
<div id="toast-container"></div>
<script src="../dist/toast.js"></script>
<script>
// toast-container id is a must
const toastr = new Toast(document.querySelector('#toast-container'), {
layout: `<div>
<h3>{{title}}</h3>
<p>{{message}}</p>
</div>
<span class="close" onclick="clearToast({{id}})">×</span>`,
})
toastr.run({
status: 1,
title: 'hello',
message: 'hello world'
})
</script>
All options
<script>
toastr.run({
status: 1, // {1: 'success', 2: 'info', 3: 'warning', 0: 'error'},
title: '',
message: '',
transition: 'zoom', // ['zoom', 'fade', 'slide'],
timeout: 3500,
progress: true,
addition: 'any string that will shown under message'
})
</script>