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 指定容器。
更多选项
textMaxWidth 限制内容宽度、showClose 隐藏关闭按钮、icon 自定义图标。
API 参考
Toast
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
content | 提示内容(必填),支持文本或自定义 Snippet | string | Snippet | '' |
id | 自定义 ToastId;已存在则原地合并更新并重启定时器 | string | undefined |
type | 语义类型,决定图标与色;default 无内置图标 | 'info'|'success'|'warning'|'error'|'default' | 'default' |
duration | 自动关闭秒数;0 = 不自动关闭(须手动关闭) | number | 3 |
showClose | 是否展示关闭按钮 | boolean | true |
textMaxWidth | 内容的最大宽度 | number | string | 450 |
theme | 填充样式;'light' 浅色填充 + 类型描边 | 'normal'|'light' | 'normal' |
stack | 是否堆叠 Toast(多条叠一摞、Hover 展开) | boolean | false |
icon | 自定义图标(覆盖类型内置图标) | Snippet | undefined |
direction | 书写方向 | 'ltr'|'rtl' | 'ltr' |
onClose | toast 关闭时的回调(无参数,对齐 Semi) | () => void | undefined |
Events
| 事件 | 载荷 | 说明 |
|---|---|---|
onClose | — | toast 关闭时触发(无参数,对齐 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) | 成功提示图标颜色 |