组件 · 浮层 · 原生 HTML 与 React
轻提示 Toast
操作结果的一句话：已保存、已复制、失败可重试；同一句再来时只动一下。
演示
<button class="xxd-btn" onclick="Xxd.toast('已保存草稿', { tone: 'success' })">保存</button>
<button class="xxd-btn" onclick="Xxd.toast('已移到废纸篓', { action: { label: '撤销', onClick() { Xxd.toast('已恢复', { tone: 'success' }) } } })">删除（可撤销）</button>
<button class="xxd-btn" onclick="Xxd.toast('第 ' + (window.__n = (window.__n || 0) + 1) + ' 条消息', { tone: 'info' })">连发几条</button>export function ToastDemo() {
return (
<Toasty>
<ToastButton />
</Toasty>
);
}属性与类名
| 属性 / 类名 | 说明 |
|---|---|
| 类名 | xxd-toast xxd-toast-region xxd-toast__action |
JS
Xxd.toast(message, { tone: "success" | "danger" | "warning" | "info", within, duration, action: { label: "撤销", onClick }, stack: true })键盘与读屏
- 区域是 role=status + aria-live=polite，不打断正在读的内容
- 带操作（撤销、重试）的缺省停 6 秒；鼠标放上去或键盘聚焦到里面时暂停计时
规则
- 就地出现（within）
- 堆叠：多张叠成一摞，hover 展开；同一句话再来时不加新的，只轻轻动一下
- 横向滑动关闭
- 绿色只表示完成