cb-toast v1.0.3

cb-toast

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.2/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-left', //default
          type: 'success', //default
        });

      });

</script>

Positions

'top' 'bottom' 'top-left' 'top-right' 'top-right' 'top-right'

type

'success' 'info' 'warning' 'error' 'top-right'