组件 · 反馈

Toast 轻提示

轻量浮层提示：ToastProvider + Toaster 承载队列；命令式 API 来自 headless createToast/useToast。角色：主题视觉层。

入口 @selrux/ui/toast · 源码 src/components/toast/index.ts · 7 个组件 · 发布状态 preview

使用建议

避免：无 Provider 直接调用
避免：与 App.message 混用两套根
限制：属性与导出以 @selrux/ui 对应子路径 d.ts/源码为准，禁止臆造

引入

tsx

123456789import {
  ToastAction,
  ToastClose,
  ToastDescription,
  Toaster,
  ToastItem,
  ToastProvider,
  // …共 10 个导出
} from '@selrux/ui/toast';

演练场

调节下方可实现的字面量属性，实时预览真实组件。函数、Portal、样式逃生口等见代码演示与 API 表。

代码演示

基础用法

createToast 创建实例交给 ToastProvider，Toaster 渲染视口；调用 success / error / info 等方法弹出。

类型

与 Alert 共享 default、info、success、warning、error 的语义色；loading 保留 Toast 的短任务状态。

连续提示与堆叠

默认不限制同时展示数量，折叠时露出三层，聚焦或悬停可展开全部。

Promise

异步创建期间显示加载提示，完成后将同一条 Toast 更新为成功状态。

API

属性覆盖：示例用到 6 / 8 个自有属性（75%）

由 scripts/demo-coverage.mjs 统计，不含 className / style / 原生透传属性与纯转发事件。

Toaster.container：Portal 挂载目标，默认 body；文档页无需更换挂载点

ToastAction

动作按钮只补视觉，不引入完整 Button 闭包。

无自有属性；其余 289 项原生属性继承自 ButtonHTMLAttributes / HTMLAttributes。

ToastClose

小关闭图标配本地化可访问名称，命中区域至少 24px。

无自有属性；其余 289 项原生属性继承自 ButtonHTMLAttributes / HTMLAttributes。

ToastDescription

辅助说明保留正文对比度和自然换行。

无自有属性；其余 280 项原生属性继承自 HTMLAttributes。

Toaster

在捕获的来源域下挂载镜像，防止嵌套 Toaster 位置改变颜色来源。

属性	说明	类型	默认值
`placement`	-	`"top-start" \| "top" \| "top-end" \| "bottom-start" \| "bottom" \| "bottom-end"`	-
`container`	-	`PortalContainerInput`	-
`swipe`	-	`boolean`	-
`stack`	折叠为最新消息在前的堆栈，悬停、聚焦或触摸时展开。	`boolean`	-
`children`	-	`((item: ToastSnapshot) => ReactNode)`	-

另有 277 项原生属性与事件继承自 HTMLAttributes，原样透传。

ToastItem

外壳负责过渡，内容盒保留自然高度供堆叠测量；ref 仍指向 li。

无自有属性；其余 279 项原生属性继承自 HTMLAttributes / LiHTMLAttributes。

ToastProvider

无 DOM 主题适配，尺寸按 prop → ConfigProvider → md 解析。

属性	说明	类型	默认值
`size`	-	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"`	-
`toast`	-	`ToastApi`	-
`maxVisible`	默认 Infinity；指定正整数时启用活动容量限制和 FIFO 等待。与折叠露出的层数无关。	`number`	`Infinity`
`maxQueued`	-	`number`	-
`duration`	-	`number`	-

另有 1 项原生属性与事件继承自，原样透传。

ToastTitle

标题静态外观，字号来自视口所属尺寸域。