青梧 UI

Toast 轻提示

轻量级全局反馈,零依赖 · 纯 TypeScript · ARIA live region 内建 · 6 种定位 · 4 种语义 · Promise 链 · 队列管理

样式预览 · Apple 磨砂玻璃 (点击卡片重播入场动画)
磨砂玻璃 · 信息提示
操作成功
磁盘空间不足,请及时清理以释放存储空间
登录失败:账号或密码错误
语义类型
定位 · 当前: ↑ 顶部
场景演示
自适应文本 · @qingwu-ui/text-layout
最大行数
操作日志
点击上方交互控件,每次操作将记录在此
import { toast } from "@qingwu-ui/toast";
import "@qingwu-ui/toast/style.css";

toast.success("操作成功");
toast.error("操作失败");

toast("自定义消息", {
  position: "top-right",
  duration: 3000,
});

// 自适应文本(text-layout 精确排版)
toast.info("内容自适应完整显示");
toast.info("超长文本自动截断", { maxLines: 2 });

// 常驻不自动消失
toast.info("常驻通知", { persist: true });
toast.configure({ persistMaxVisible: 3 });

// Promise 链
toast.promise(fetchUser(), {
  loading: "加载中...",
  success: (data) => `欢迎 ${data.name}`,
  error: "加载失败",
});

// 关闭 & 配置
toast.dismiss(id);
toast.dismissAll();
toast.configure({ maxVisible: 3 });