<fmb-toast>

轻量操作回执(画布顶部居中)。这是组件库里唯一走方法式 API 的组件——没有属性,调 el.show("已复制链接") 弹一条,自动消失。

设计上它只报告刚发生的事,不承担状态显示。「模型被剖开了」这类持续状态由视图 chip 与工具条按钮的激活态表达,不该靠 toast——用户错过那 2 秒就再也看不到了。

最小用法

<div class="viewport" style="position: relative">
  <canvas id="canvas"></canvas>
  <fmb-toast id="toast"></fmb-toast>
</div>

import { FmbToast } from "@modelcubes/viewer-ui";
void [FmbToast]; // 保留引用,防止入口被 tree-shake(见总览)

const toast = document.getElementById("toast") as FmbToast;

shareBtn.onclick = async () => {
  await navigator.clipboard.writeText(location.href);
  toast.show("已复制链接");
};

配合工具条的 Share 形态动作:

toolbar.addEventListener("fmb-toolbar-action", (e) => {
  if (e.detail.action === "snapshot-saved") toast.show("截图已保存");
});

属性

无。组件不需要 viewer,也不订阅任何引擎事件。

方法

方法	说明
show(message: string, durationMs?: number)	弹一条回执,默认 2200ms 后消失。重复调用会顶掉上一条并重新计时——不排队

事件

无。

行为细节

• 同时只有一条:第二次 show 直接替换文案并重置计时器,不会堆叠出一列 toast。
• 不占位:没有消息时组件渲染为空(nothing),不占据布局空间。
• 无障碍:消息容器带 role="status" + aria-live="polite",屏幕阅读器会朗读但不打断当前操作。
• 定位::host 自带绝对定位在画布顶部居中,须放在 position: relative 的视口容器内。
• 卸载即清理:disconnectedCallback 清掉待触发的定时器。
• 尊重减弱动效:prefers-reduced-motion 下关闭入场动画。

可定制点

底色 / 文字 / 阴影分别走 --fmb-surface、--fmb-fg-1、--fmb-shadow-lg。全表见主题定制。