MetonaToast

轻量 · 零依赖 · 精致美观的 Toast 通知库。纯原生 JavaScript,gzip 不到 10KB。

📦 <10KB gzip🎨 107 图标🎭 11 动画🌍 国际化🔌 插件📘 TypeScript

核心特性

一切你需要的,都在一个不到 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 上仅注册两个全局变量:MeToastMet,完全等价

# 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(); // 一键关闭整组

主题切换

点击按钮实时预览四种内置主题