梧桐设计语言v0.4.1

轻提示Toast

轻提示只放不需要读的内容:成功了、正在导出、有几条待上传。3 秒消失。float 深色底、on-float 字、圆角 radius-mdshadow-float,左侧状态图标,右侧一个动作(撤销 / 查看)。


  • 成功提示带撤销,比弹确认框问「确定要派单吗」体验好得多。
  • 位置:桌面右下角,移动底部居中偏上(避开底部主按钮和 BatchBar)。
  • 失败不用轻提示——用 ErrorBlock。失败原因必须留在页面上让人读完。
  • 进行中的(「正在导出 156 条…」)不自动消失,完成后替换成成功。

消费者提供:类型、文案、可选动作与回调。

示例

import
import { ToastProvider, useToast } from "@wutong/ui";
// 根组件包一层 <ToastProvider position="bottom-right">,桌面右下、移动 bottom-center

触发

成功带撤销;进行中不自动消失;没有 error——失败用 ErrorBlock

静态外观

已派单给王强
3 条记录待上传
正在导出 156 条…

API

属性类型默认说明
push(options)(o: ToastOptions) => id{ kind: ok | info | warn | loading, message, action?, duration? }
dismiss(id)(id) => void手动关闭(loading 完成后)
ToastProvider.position"bottom-right" | "bottom-center""bottom-right"桌面 / 移动