Toast 轻提示
短暂反馈操作结果，并在不阻断当前流程的前提下提供说明。
使用概览
适合使用
- 保存、复制或轻量失败需要即时确认且无需长期保留时。
不建议使用
- 用户必须确认风险，或消息需要持续可见才能完成任务时。
真实示例
保存成功轻提示
非阻断地确认设置已经保存完成。
正在加载示例…
安装
本地候选警告Registry 地址仅指向当前本地文档站；npm 包也只用于本地候选验证，尚未公开发布。
pnpm dlx shadcn@4.16.0 add http://127.0.0.1:3000/r/toast.json基础用法
导入
import { ToastProvider, Toast, ToastTitle, ToastDescription, ToastViewport } from "@richardqiu/quartz/toast";JSX
<ToastProvider><Toast open tone="success"><ToastTitle>保存成功</ToastTitle><ToastDescription>设置已同步到当前工作区。</ToastDescription></Toast><ToastViewport /></ToastProvider>状态与控制摘要
默认
键盘焦点可见
已打开
已关闭
错误
label · textactive · booleanAPI 参考
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
duration | number | 5000 | 设置通知自动关闭前保持可见的毫秒数。 |
swipeDirection | "right" | "left" | "up" | "down" | "right" | 配置触摸手势关闭通知的方向。 |
组合结构
- 01
ToastProvider - 02
Toast - 03
ToastTitle - 04
ToastDescription - 05
ToastAction - 06
ToastClose - 07
ToastViewport
键盘约定
- F8 聚焦本地化 ToastViewport，Tab 访问操作，Escape 或关闭按钮移除通知。
可访问性契约
- ToastAction 的 altText、ToastClose、Provider 与 Viewport 标签都应本地化。
- 色调只改变视觉；播报优先级和实时区域角色由使用方明确选择。
- 获得焦点或悬停时暂停计时，减少或关闭动效时不产生空间移动。