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 });