Coolbrains Toast Notification Web Component - Built With Stenciljs
This is a toast notification Web Component using Stenciljs. Built with Stencil Built with TailwindCSS v3.x Demo Demo Installation npm install cb-toast Or use npm cdn <script type="module" src="https://cdn.jsdelivr.net/npm/cb-toast@1.0.3/dist/cb-toast/cb-toast.esm.js"></script> Usage The Coolbrains toast Component can be use as following: <cb-toast></cb-toast> <button id="showToastSuccess" class="bg-green-700">Success</button> <script> let cbToast = document.querySelector('cb-toast'); document.getElementById('showToastSuccess').addEventListener('click', event => { cbToast.Toast({ title: 'Success', //default description: 'success message', //default timeOut: 3000, //default position: 'top-right', //default type: 'success', //default }); }); </script> Positions 'top'; 'bottom'; 'top-left'; 'top-right'; //default 'bottom-left'; 'bottom-right'; type 'success'; //default 'info'; 'warning'; 'error'; Code Github