The Wheels

Toast

variant / duration-ms / show() / hide() · スタック表示

Preview

variant

お知らせです 保存しました 確認してください エラーが発生しました
info success warning error

duration-ms（固定表示）

手動で閉じるまで表示されます
show() hide()

スタック

1 件目の通知 2 件目の通知 3 件目の通知
まとめて表示

HTML

<tw-toast id="toast-success" variant="success" duration-ms="3000">保存しました</tw-toast>
<button type="button" id="show-success">success</button>

<tw-toast id="toast-sticky" variant="info" duration-ms="0">手動で閉じるまで表示されます</tw-toast>
<button type="button" id="show-sticky">show()</button>
<button type="button" id="hide-sticky">hide()</button>

<tw-toast id="toast-stack-a" variant="success">1 件目の通知</tw-toast>
<tw-toast id="toast-stack-b" variant="info">2 件目の通知</tw-toast>
<button type="button" id="show-stack">まとめて表示</button>
import "@b4moss/the-wheels";

document.getElementById("show-success")?.addEventListener("click", () => {
  document.getElementById("toast-success")?.show();
});

document.getElementById("show-sticky")?.addEventListener("click", () => {
  document.getElementById("toast-sticky")?.show();
});
document.getElementById("hide-sticky")?.addEventListener("click", () => {
  document.getElementById("toast-sticky")?.hide();
});

document.getElementById("show-stack")?.addEventListener("click", () => {
  document.getElementById("toast-stack-a")?.show();
  document.getElementById("toast-stack-b")?.show();
  document.getElementById("toast-stack-c")?.show();
});
import "@b4moss/the-wheels";
import type { TwToast } from "@b4moss/the-wheels";

document.getElementById("show-success")?.addEventListener("click", () => {
  (document.getElementById("toast-success") as TwToast | null)?.show();
});

document.getElementById("show-sticky")?.addEventListener("click", () => {
  (document.getElementById("toast-sticky") as TwToast | null)?.show();
});
document.getElementById("hide-sticky")?.addEventListener("click", () => {
  (document.getElementById("toast-sticky") as TwToast | null)?.hide();
});

document.getElementById("show-stack")?.addEventListener("click", () => {
  (document.getElementById("toast-stack-a") as TwToast | null)?.show();
  (document.getElementById("toast-stack-b") as TwToast | null)?.show();
  (document.getElementById("toast-stack-c") as TwToast | null)?.show();
});