短暂通知
Toast / Snackbar
在不打断当前任务的情况下提示异步结果。
app.mjs
import { mount } from '@sofish/ui/browser';
const view = mount(
document.querySelector('#example'),
'toast'
);
view.element.addEventListener('ui:open', event => {
console.log(event.detail.value);
});
// view.update({ ...nextProps });
// view.destroy();什么时候用
后台操作完成或用户可能没看到的失败。
什么时候不用
重要决策和必须事后回看的结果不能仅留在会消失的通知里。
COMPONENT API
属性与事件
传入业务数据，通过事件连接你的应用。
| 属性 | 默认值 |
|---|---|
title | "示例：草稿已保存" |
content | "这不是实际保存结果" |
open | true |
reopenLabel | "再次显示示例" |
事件
ui:open
INTERACTION NOTES
交互与可访问性
- 提供足够阅读时间并支持暂停。
- 状态播报避免抢焦点，关键内容另有持久入口。
和相似组件的区别
Toast 是短暂递送；Alert 留在上下文中，执行记录保存事实。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
React / Next.js、Vue / Nuxt、Angular、Web Components · 来源核验