MetonaToast

npm

# 安装
npm install metona-toast

# ES Module
import MeToast from 'metona-toast';

# CommonJS
const MeToast = require('metona-toast');

CDN

<!-- UMD 开发版 -->
<script src="https://unpkg.com/metona-toast@2.0.0/dist/metona-toast.js"></script>

<!-- 压缩版（生产环境推荐）-->
<script src="https://unpkg.com/metona-toast@2.0.0/dist/metona-toast.min.js"></script>

<!-- ES Module 直接引用 -->
<script type="module">
  import MeToast from 'https://unpkg.com/metona-toast@2.0.0/dist/metona-toast.esm.js';
</script>

// 五种类型，一行搞定
MeToast.success('操作成功！');
MeToast.error('操作失败！');
MeToast.warning('请注意检查');
MeToast.info('系统维护中');
MeToast.show('默认消息');

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

// 自定义时长 — 显示10秒
MeToast.info('显示10秒', { duration: 10000 });

// 自定义位置 — 底部居中
MeToast.warning('底部居中', { position: 'bottom-center' });

// 手动关闭 — 不自动消失
MeToast.info('手动关闭', { duration: 0, closeButton: true });

// 自定义动画 — 弹跳效果
MeToast.success('弹跳动画', { animation: 'bounce' });

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

// loading → error
const loading = MeToast.loading('正在提交...');
setTimeout(() => loading.error('提交失败，请重试'), 2000);

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

// 确认对话框 → Promise<boolean>
const ok = await MeToast.confirm('确定删除吗？', {
  confirmText: '删除',
  confirmColor: '#ef4444',
});

// 输入对话框 → Promise<string|null>
const name = await MeToast.prompt('请输入姓名', {
  placeholder: '请输入...',
});

// 进度条 — 实时更新
const p = MeToast.progress('上传中...');
let v = 0;
const t = setInterval(() => {
  v += Math.random() * 28;
  if (v >= 100) { clearInterval(t); p.complete('上传完成！'); }
  else p.setProgress(v);
}, 400);

// 倒计时 — {seconds} 自动替换
MeToast.countdown('{seconds} 秒后执行', 5, {
  onComplete: () => MeToast.success('已执行'),
});

// 队列 — 一个接一个
await MeToast.queue(['步骤一', '步骤二', '步骤三'], {
  delay: 800,
  duration: 2000,
  type: 'info',
});

// 堆叠 — 同时错峰
MeToast.stack(['消息 1', '消息 2', '消息 3', '消息 4'], {
  stagger: 150,
  type: 'info',
});

// keyboard — ESC 关闭所有 Toast
MeToast.use('keyboard');

// persistence — 配置持久化（自动保存/加载）
MeToast.use('persistence');

// accessibility — 屏幕阅读器朗读公告
MeToast.use('accessibility');

MeToast.configure({
  position: 'top-right',       // 默认位置
  duration: 4000,                // 默认显示时长(ms)
  max: 6,                        // 同时最多显示条数
  theme: 'auto',                // light | dark | auto | warm
  animation: 'slide',            // 默认动画效果
  pauseOnHover: true,           // 悬停暂停计时
  closeOnClick: true,           // 点击关闭
  showProgress: true,           // 显示进度条
  draggable: true,             // 允许拖拽关闭
  locale: 'zh-CN',              // 默认语言
});

// 切换主题（switchTheme + configure 同步全局配置）
MeToast.themes.switchTheme('warm');
MeToast.configure({ theme: 'warm' });

// 切换语言 — 英文
MeToast.i18n.switchLocale('en-US');

// 切换回中文
MeToast.i18n.switchLocale('zh-CN');

// 注册自定义主题
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.count();           // 当前数量
MeToast.getToasts();      // 获取所有实例
MeToast.dismiss();        // 关闭全部
MeToast.dismiss(id);      // 关闭指定
MeToast.pauseAll();       // 暂停全部计时
MeToast.resumeAll();      // 恢复全部计时
MeToast.destroy();        // 完全销毁