radh-ui
Version:
Stencil Component Starter
1 lines • 1.75 kB
JavaScript
import{r as t,h as o,g as i}from"./p-1a9f3501.js";class e{constructor(o){t(this,o)}async launchToast(t){this.desc=t;var o=this.element.querySelector("#toast");o.className="show",setTimeout((function(){o.className=o.className.replace("show","")}),5e3)}render(){return o("div",{id:"toast"},o("div",{id:"img"},"Icon"),o("div",{id:"desc"},this.desc))}get element(){return i(this)}}e.style="#toast{visibility:hidden;max-width:50px;height:50px;margin:auto;background-color:#333;color:#fff;text-align:center;border-radius:2px;position:fixed;z-index:1;left:0;right:0;bottom:30px;font-size:17px;white-space:nowrap}#toast #img{width:50px;height:50px;float:left;padding-top:16px;padding-bottom:16px;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#111;color:#fff}#toast #desc{color:#fff;padding:16px;overflow:hidden;white-space:nowrap}#toast.show{visibility:visible;-webkit-animation:fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;animation:fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s}@-webkit-keyframes fadein{from{bottom:0;opacity:0}to{bottom:30px;opacity:1}}@keyframes fadein{from{bottom:0;opacity:0}to{bottom:30px;opacity:1}}@-webkit-keyframes expand{from{min-width:50px}to{min-width:350px}}@keyframes expand{from{min-width:50px}to{min-width:350px}}@-webkit-keyframes stay{from{min-width:350px}to{min-width:350px}}@keyframes stay{from{min-width:350px}to{min-width:350px}}@-webkit-keyframes shrink{from{min-width:350px}to{min-width:50px}}@keyframes shrink{from{min-width:350px}to{min-width:50px}}@-webkit-keyframes fadeout{from{bottom:30px;opacity:1}to{bottom:60px;opacity:0}}@keyframes fadeout{from{bottom:30px;opacity:1}to{bottom:60px;opacity:0}}";export{e as radh_toast}