About

<divclass="toast-header"><svgclass="rounded me-2"width="20"height="20"xmlns="http://www.w3.org/2000/svg"preserveAspectRatio="xMidYMid slice"focusable="false"role="img"><rectfill="#007aff"width="100%"height="100%"/></svg>  ...</div>

Usage

<scriptsrc="src/toast.js"></script>

Globals (Not 100% Implemented)

$.toastDefaults={position:'top-right',/** top-left/top-right/top-center/bottom-left/bottom-right/bottom-center - Where the toast will show up **/dismissible:true,/** true/false - If you want to show the button to dismiss the toast manually **/stackable:true,/** true/false - If you want the toasts to be stackable **/pauseDelayOnHover:true,/** true/false - If you want to pause the delay of toast when hovering over the toast **/style:{toast:'',/** Classes you want to apply separated my a space to each created toast element (.toast) **/info:'',/** Classes you want to apply separated my a space to modify the "info" type style  **/success:'',/** Classes you want to apply separated my a space to modify the "success" type style  **/warning:'',/** Classes you want to apply separated my a space to modify the "warning" type style  **/error:'',/** Classes you want to apply separated my a space to modify the "error" type style  **/}};

Snack

$.snack(type,content,delay)

Toast (Not 100% Implemented)

$.toast({type:'info',title:'Notice!',subtitle:'11 mins ago',content:'Hello, world! This is a toast message.',delay:5000,img:{src:'https://via.placeholder.com/20',class:'rounded-0',/**  Classes you want to apply separated my a space to modify the image **/alt:'Image'}});

Contributing