MetonaToast — 轻量精致的 Toast 通知库

核心特性

一切你需要的，都在一个不到 10KB 的包中

🎨

107 种图标类型

success / error / warning / info / loading 以及 100+ 扩展类型，覆盖所有常见场景。

🎭

11 种动画效果

slide / fade / scale / bounce / flip / rotate / zoom / slideUp / slideDown / slideLeft / slideRight，每种感官差异明显。

🖌️

主题系统

内置 light / dark / auto / warm 四种主题，支持 registerTheme() 自定义注册任意主题。

🌍

国际化

内置 zh-CN 和 en-US 完整翻译，400+ 词汇。支持 addTranslations() 扩展任意语言。

🔌

插件系统

3 款预设插件 + 自定义插件架构。keyboard / persistence / accessibility 开箱即用。

✋

拖拽关闭

任意方向拖动 Toast 即可关闭。支持 Pointer Events，移动端和桌面端体验一致。

⚡

零依赖

纯原生 JavaScript 实现，无需任何运行时依赖。兼容所有现代浏览器。

📘

TypeScript

完整类型定义，智能提示全覆盖。MeToast.success()、.confirm()、.action() 全部有类型。

环境支持

所有现代浏览器原生支持，无需 polyfill

🌐

Chrome

64+

🦊

Firefox

63+

🧭

Safari

11+

🪟

Edge

79+

📦

Node.js

18+

📘

TypeScript

4.5+

核心依赖：Web Animations API · Pointer Events · CSS Grid · CSS Custom Properties

快速开始

浏览器 window 上仅注册两个全局变量：MeToast 和 Met，完全等价

# npm 安装
npm install metona-toast

// 导入
import MeToast from 'metona-toast';

// 使用
MeToast.success('操作成功！');
MeToast.error('操作失败！');
MeToast.loading('加载中...');

// CDN 直接引用
<script src="https://unpkg.com/metona-toast/dist/metona-toast.min.js"></script>

高级功能速览

不仅仅是一个 Toast——确认框、输入框、进度条、倒计时、队列，应有尽有

// Promise 风格 — 自动 loading → success/error
await MeToast.promise(fetch('/api/data'), {
  loading: '加载中...',
  success: '加载完成！',
  error: '加载失败',
});

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

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

// Action Toast — 内嵌操作按钮
MeToast.action('文件已删除', [
  { text: '撤销', onClick: () => restore() },
  { text: '查看', onClick: () => open() },
]);

// Toast 分组管理
const orderGroup = MeToast.group('orders');
orderGroup.success('订单已创建');
orderGroup.dismiss(); // 一键关闭整组

核心特性

107 种图标类型

11 种动画效果

主题系统

国际化

插件系统

拖拽关闭

零依赖

TypeScript

环境支持

Chrome

Firefox

Safari

Edge

Node.js

TypeScript

快速开始

高级功能速览

主题切换