定价

集中展示通过 toast() 触发的全局通知,支持六个屏幕位置、堆叠动效与可见数量控制,让连续反馈保持有序。

我们正在让 SnowUI 组件成为 AI 对话中可直接操作的界面。目前对话交互能力仍在建设中;本页展示网站用法,支持的对话平台与组件版本将在验证后公布。 AI 对话内生成和使用 SnowUI 界面完全免费,不属于项目,不占项目或开发者席位额度,无需 SnowUI 注册、激活或付费证明。

如何使用

作为 Toast 的展示宿主,协调通知队列与布局。普通页面通知列表由业务页面组织,不把历史消息全部转成瞬时 Toast。

  • 挂载为通知展示宿主,使用 toast 创建消息;maxVisible 限制同时可见数量。

  • 同一运行实例的命令式通知共用队列,在应用根部挂载一个 Toaster,让多个页面区域复用;重复挂载会重复展示同一条通知。

  • offset / gap 控制位置与堆叠间隔;parts 配置默认 Toast 及字符串通知生成的 Text,单条消息的显式外观优先。

导入

import { Toaster } from '@snowui-design-system/components';

用法

位置

堆叠

自动关闭与常驻

API 参考

属性 类型 默认值 示例 描述
offset number 16 offset={42} 视口边缘到 Toast 区域的距离,单位 px
maxVisible number 3 maxVisible={42} 单个位置最多可见的层数;仅限制可见层数,不限制 toast() 入队数量;达到上限后新 Toast 会把当前最后一层挤出
gap number 8 gap={42} 同位置 Toast 之间的视觉偏移,单位 px
scaleStep number 0.05 scaleStep={42} 每层堆叠的缩放衰减系数;index=1 时默认缩放到 0.95
stackOpacityStep number 0.2 stackOpacityStep={42} 每层堆叠的透明度衰减系数;默认第 2 / 3 层为 0.8 / 0.6
stackMinOpacity number 0.6 stackMinOpacity={42} 堆叠条目的最低透明度下限
stackDuration number 300 stackDuration={42} 堆叠组合动效时长,单位 ms
stackEasing string "ease" stackEasing="Example" 堆叠组合动效缓动
width number | string — width="Example" Toast 区域宽度;默认内容自适应,传入后可固定宽度;窄屏自动限制为 calc(100vw - 2rem)
parts ComponentPartsOf<{ Toast: typeof Toast; Text: typeof Text }> — parts={partsOptions} 统一配置直接生成的 Toast 外观与 text 字符串生成的 Text;Text 默认 lines=1,显式 children 不消费 parts.Text;队列数据、位置和关闭行为由 Toaster 管理,单条通知显式属性优先