提示与反馈
Alert / Status Message
把当前操作相关的重要状态放在用户能看见的位置。
更改已保存在本地
这是一条持续可见的提示。
app.mjs
import { mount } from '@sofish/ui/browser';
const view = mount(
document.querySelector('#example'),
'alert'
);
view.element.addEventListener('ui:dismiss', event => {
console.log(event.detail.value);
});
// view.update({ ...nextProps });
// view.destroy();什么时候用
错误、警告或成功结果需要解释或保留。
什么时候不用
需要用户作决定时，提示信息不能代替明确操作。
COMPONENT API
属性与事件
传入业务数据，通过事件连接你的应用。
| 属性 | 默认值 |
|---|---|
title | "更改已保存在本地" |
description | "这是一条持续可见的提示。" |
tone | "info" |
dismissible | false |
事件
ui:dismiss
INTERACTION NOTES
交互与可访问性
- 播报级别匹配信息紧急程度。
- 重要信息不要只放在自动消失的 Toast 中。
和相似组件的区别
Alert 在上下文中留存；Toast 通常短暂。审批还需要后续决策。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
React / Next.js · 来源核验