vj-toaster
Version:
Toaster vanilla js web component
29 lines (27 loc) • 1.06 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Toaster Web Component</title>
<!-- Loding Google Font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap" />
<!-- Loading Web component loader -->
<script src="webcomponents/webcomponents-loader.js"></script>
<link href="styles.css" rel="stylesheet"><script type="text/javascript" src="vj-toaster.js"></script></head>
<body>
<button id="btn">Show Toaster</button>
<vj-toaster id="toasterId1" type="warning">
<div slot="message">
Toaster Warning Message
</div>
</vj-toaster>
<script>
window.addEventListener('load', e => {
document.getElementById('btn').addEventListener('click', e => {
document.getElementById('toasterId1').visible = !document.getElementById('toasterId1').visible;
});
});
</script>
</body>
</html>