API 文档

MetonaToast v2.0.0 完整 API 参考。所有方法均支持链式调用和配置覆盖。

show(message, opts?)

显示默认类型的 Toast 通知。

// 字符串
MeToast.show('默认消息');

// 带配置
MeToast.show('自定义', { duration: 2000, position: 'bottom-center' });

// 对象形式
MeToast.show({ title: '标题', message: '内容' });

success(message, opts?)

显示成功通知。绿色对勾图标。

MeToast.success('保存成功！');
MeToast.success({ title: '已保存', message: '文件已同步到云端' });

error(message, opts?)

显示错误通知。红色叉号图标。

MeToast.error('网络错误，请重试');

warning(message, opts?)

显示警告通知。黄色三角图标。

MeToast.warning('请注意检查输入内容');

info(message, opts?)

显示信息通知。蓝色圆形图标。

MeToast.info('系统将于 22:00 进行维护');

loading(message, opts?)

显示加载状态。返回一个控制对象，支持链式转换为 success/error/info/warning。

const loading = MeToast.loading('正在提交...');
setTimeout(() => loading.success('提交成功！'), 2000);

// 返回对象方法
loading.success(msg, opts?)   // 转为成功
loading.error(msg, opts?)     // 转为错误
loading.info(msg, opts?)      // 转为信息
loading.warning(msg, opts?)   // 转为警告
loading.update(partial)         // 原地更新
loading.dismiss()                // 关闭

promise(promise, opts)

自动根据 Promise 状态切换 Toast。显示 loading → 自动 success/error。

await MeToast.promise(
  fetch('/api/data'),
  {
    loading: '加载中...',
    success: '加载完成！',
    error: '加载失败',
  }
);

confirm(message, opts?)

确认对话框。返回 Promise<boolean>，用户点击确认返回 true。

const ok = await MeToast.confirm('确定删除吗？', {
  confirmText: '删除',
  confirmColor: '#ef4444',
  cancelText: '取消',
});
if (ok) MeToast.success('已删除');

prompt(message, opts?)

输入对话框。返回 Promise<string|null>，用户取消返回 null。

const name = await MeToast.prompt('请输入姓名', {
  placeholder: '请输入...',
  defaultValue: '张三',
});
if (name) MeToast.info('你好，' + name + '！');

progress(message, opts?)

进度条通知。返回控制对象，可调用 setProgress / complete / error。

const p = MeToast.progress('上传中...');
p.setProgress(30);
p.setProgress(70);
p.complete('上传完成！');
// 或
p.error('上传失败');
p.dismiss();

countdown(message, seconds, opts?)

倒计时 Toast。{seconds} 占位符自动替换为剩余秒数。

MeToast.countdown('操作将在 {seconds} 秒后执行', 5, {
  onComplete: () => MeToast.success('已执行'),
});

// 返回控制对象
const c = MeToast.countdown('{seconds}s', 10);
c.cancel();  // 取消并关闭
c.pause();   // 暂停
c.resume();  // 恢复

queue(messages, opts?)

队列展示：顺序逐个显示消息。返回可取消的 thenable 对象。

const q = MeToast.queue(['步骤一', '步骤二', '步骤三'], {
  delay: 800,
  duration: 2000,
  type: 'info',
});
q.cancel(); // 取消队列
await q;  // 等待队列完成

stack(messages, opts?)

堆叠展示：同时错峰显示多条消息。

MeToast.stack(['消息1', '消息2', '消息3', '消息4'], {
  stagger: 150,
  type: 'info',
});

action(message, actions, opts?) v2.0

Action Toast：内嵌操作按钮的通知。类似 Android Snackbar。

MeToast.action('文件已删除', [
  { text: '撤销', onClick: () => restore(), color: '#3b82f6' },
  { text: '查看', onClick: () => openFile() },
]);

group(name) v2.0

创建 Toast 分组。返回一个自动添加 group 参数的子对象，支持按组管理。

const orders = MeToast.group('orders');
orders.success('订单已创建');
orders.error('支付失败');
orders.count();   // 该组的 toast 数量
orders.dismiss(); // 关闭整组

// 也可通过主对象关闭
MeToast.dismissGroup('orders');

dismiss(id?)

关闭 Toast。无参数关闭所有，传 id 关闭指定。

MeToast.dismiss();       // 关闭所有
MeToast.dismiss(toastId); // 关闭指定

其他管理方法：count() getToasts() pauseAll() resumeAll() destroy() clear()

configure(opts)

全局配置。影响后续所有 Toast。

MeToast.configure({
  position: 'top-right',
  duration: 4000,
  theme: 'dark',
  animation: 'slide',
  locale: 'zh-CN',
});

use(plugin)

安装插件。支持字符串（预设）和对象（自定义）。

MeToast.use('keyboard');      // ESC 关闭所有 Toast
MeToast.use('persistence');   // 配置持久化到 localStorage
MeToast.use('accessibility'); // 屏幕阅读器朗读

// 自定义插件
MeToast.use({
  name: 'my-plugin',
  install() {
    Toast.on('afterShow', (t) => console.log(t.message));
  },
});

destroy()

完全销毁：关闭所有 Toast、移除 DOM 容器和样式标签。

MeToast.destroy();

全部配置项

以下配置可用于 configure() 或单个 Toast 的第二个参数。

回调函数

动画列表

主题参考

// 内置主题
light   — 白色玻璃质感
dark    — 深色玻璃质感
auto    — 跟随系统
warm    — 暖色调

// 注册自定义主题
MeToast.themes.registerTheme('ocean', {
  bg: 'rgba(240,249,255,0.96)',
  text: '#0c4a6e',
  border: 'rgba(14,165,233,0.2)',
  shadow: '0 10px 36px -10px rgba(14,165,233,0.18)',
  hoverShadow: '0 14px 48px -10px rgba(14,165,233,0.22)',
  progressBg: 'rgba(14,165,233,0.1)',
  closeHoverBg: 'rgba(14,165,233,0.1)',
});
MeToast.themes.switchTheme('ocean');