rohin
June 1, 2021, 9:32pm
1
Hi, what is the easiest way to show a toast message in a UXP application?
It looks like one option might be to use the sp-toast tag (https://opensource.adobe.com/spectrum-web-components/components/toast ), but it looks like this requires React, which I’m trying to avoid.
UXP doesn’t have a sp-toast
component yet, but it’s pretty easy to make one that will do the job. I’m avoiding React here, since you’ve indicated this is something you’re avoiding.
HTML:
<sp-body class="toast" size="s">Temp container</sp-body>
CSS:
.toast {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 8px 16px;
background-color: rgb(18,128,92);
color: white;
display: none;
border-radius: 4px;
}
.toast.visible {
display: block;
}
JS:
const toast = document.querySelector(".toast");
toast.onclick = () => {
toast.classList.remove("visible");
};
function showToast(msg) {
toast.textContent = msg;
toast.classList.add("visible");
setTimeout(() => {
toast.classList.remove("visible");
}, 5000);
}
document.querySelector("#toastMe").onclick = evt => {
showToast("Toast is done");
};
Result:
Note that toasts cannot go outside the panel or dialog.
3 Likes