Toast

轻提示:命令式全局反馈 API(Toast.info/success/warning/error/open/close/destroyAll/config/useToast + ToastFactory.create),严格对齐 Semi Design。单例容器惰性挂载到 body(wrapper 固定顶部居中,config 的 top/left/bottom/right 整体偏移);type=info/success/warning/error/default(default 无内置图标);theme=normal(白)/light(多色填充+描边);stack 多条堆叠、Hover 展开(3D 透视折叠);duration 自动关闭(0 常驻)、mouseenter 暂停/mouseleave 从头计时;showClose 关闭按钮(复用 IconButton);textMaxWidth 内容最大宽度;content/icon 支持 string 或 Snippet;对已存在 id 再调 info/success 即原地更新。useToast() 返回 [api, holderStore] 经 <ToastHolder> 渲染在组件树内继承上下文;ToastFactory.create(config) 创建带独立 config 的新实例(如 getPopupContainer)。a11y:卡片 role=alert + aria-label="{type} type"(对齐 Semi),关闭按钮 IconButton 带可访问名。

设计文档

如何引入

import { Toast } from '@chenzy-design/svelte';

普通提示

调用 Toast 相关 method 弹出提示;推荐 stack 堆叠、Hover 展开,避免多条并列干扰。

其他提示类型

成功、失败、警告:Toast.success / warning / error。

多色样式

theme='light' 浅色填充样式提高对比,默认 'normal' 白色模式。

链接文本

配合 Typography 自定义链接文本(content 支持 Snippet),适配更复杂场景。

修改延时

自定义时长 10s,默认时长为 3s。

手动关闭

duration 设为 0 时不自动关闭,须经 Toast.close(id) 手动关闭。

更新消息内容

通过唯一的 id 对已存在 toast 原地更新内容与类型。

销毁所有

Toast.destroyAll() 全局销毁全部 toast。

消费 Context

Toast.useToast 创建 contextHolder,toast 渲染在 ToastHolder 所在节点,继承其上下文。

创建不同配置

ToastFactory.create(config) 创建带独立 config 的新 Toast,如 getPopupContainer 指定容器。

custom container

更多选项

textMaxWidth 限制内容宽度、showClose 隐藏关闭按钮、icon 自定义图标。

API 参考

Toast

Props

属性说明类型默认值
content提示内容(必填),支持文本或自定义 Snippetstring | Snippet''
id自定义 ToastId;已存在则原地合并更新并重启定时器stringundefined
type语义类型,决定图标与色;default 无内置图标'info'|'success'|'warning'|'error'|'default''default'
duration自动关闭秒数;0 = 不自动关闭(须手动关闭)number3
showClose是否展示关闭按钮booleantrue
textMaxWidth内容的最大宽度number | string450
theme填充样式;'light' 浅色填充 + 类型描边'normal'|'light''normal'
stack是否堆叠 Toast(多条叠一摞、Hover 展开)booleanfalse
icon自定义图标(覆盖类型内置图标)Snippetundefined
direction书写方向'ltr'|'rtl''ltr'
onClosetoast 关闭时的回调(无参数,对齐 Semi)() => voidundefined

Events

事件载荷说明
onClosetoast 关闭时触发(无参数,对齐 Semi)

Config

属性类型默认值说明
0[object Object]
1[object Object]
2[object Object]
3[object Object]
4[object Object]
5[object Object]
6[object Object]
7[object Object]

Accessibility

  • 每张 toast 卡片自身 role=alert + aria-label="{type} type"(对齐 Semi),屏幕阅读器直接播报卡片内容。关闭按钮 IconButton 带 aria-label(locale Toast.close)。不抢焦点、不锁滚动。

设计变量

变量默认值用法
--cd-color-toast-bg-default var(--cd-color-bg-3)提示背景颜色 - 默认
--cd-color-toast-danger-icon var(--cd-color-danger)错误提示图标颜色
--cd-color-toast-danger-light-bg var(--cd-color-danger-light-default)多色样式 错误提示背景颜色
--cd-color-toast-danger-light-border var(--cd-color-danger)多色样式 错误提示描边颜色
--cd-color-toast-danger-light-icon var(--cd-color-toast-danger-icon)多色样式 错误提示图标颜色
--cd-color-toast-info-icon var(--cd-color-info)通知提示图标颜色
--cd-color-toast-info-light-bg var(--cd-color-info-light-default)多色样式 通知提示背景颜色
--cd-color-toast-info-light-border var(--cd-color-info)多色样式 通知提示描边颜色
--cd-color-toast-info-light-icon var(--cd-color-toast-info-icon)多色样式 通知提示图标颜色
--cd-color-toast-success-icon var(--cd-color-success)成功提示图标颜色