代码演示
如何引入
普通提示
信息提醒反馈
其他提示类型
包括成功、失败、警告
多色样式
可以使用
theme
设置浅色填充样式提高与界面的对比,默认为 'normal' 的白色模式。链接文本
配合 Typography 可以自定义链接文本,用来配合更复杂的场景的使用。
修改延时
自定义时长 10s,默认时长为 3s
手动关闭
当
duration
设置为 0 时,toast 不会自动关闭,此时必须通过手动关闭。Hooks 用法
通过 Toast.useToast 创建支持读取 context 的 contextHolder。此时的 toast 会渲染在 contextHolder 所在的节点处。
如果需要渲染到 Portal 中可以使用 ReactDOM.createPortal 方法。
API 参考
组件提供的静态方法,使用方式和参数如下:展示:可以直接传入
options
对象或 string
,返回值为toastId
:const toastId = Toast.info({ /*...options*/ })
Toast.info(options || string)
Toast.error(options || string)
Toast.warning(options || string)
Toast.success(options || string)
手动关闭 (
toastId
为展示方法的返回值)Toast.close(toastId)
属性 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
bottom | 弹出位置 bottom | number | string | - | 0.25.0 |
content | 提示内容 | ReactNode | '' | |
duration | 自动关闭的延时,单位 s,设为 0 时不自动关闭 | number | 3 | |
getPopupContainer | 指定父级 DOM,弹层将会渲染至该 DOM 中,自定义需要设置 container 和 内部的 .semi-toast-wrapper position: relative | () => HTMLElement | null | () => document.body | 0.34.0 |
icon | 自定义图标 | ReactNode | 0.25.0 | |
left | 弹出位置 left | number | string | - | 0.25.0 |
right | 弹出位置 right | number | string | - | 0.25.0 |
showClose | 是否展示关闭按钮 | boolean | true | 0.25.0 |
textMaxWidth | 内容的最大宽度 | number | string | 450 | 0.25.0 |
theme | 填充样式,支持 light , normal | string | normal | 1.0.0 |
top | 弹出位置 top | number | string | - | 0.25.0 |
zIndex | 弹层 z-index 值 | number | 1010 | |
onClose | toast 关闭的回调函数 | () => void |
全局配置在调用前提前配置,全局一次生效 ( >= 0.25.0 ):
Toast.config(config)
属性 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
bottom | 弹出位置 bottom | number | string | - | 0.25.0 |
duration | 自动关闭的延时,单位 s,设为 0 时不自动关闭 | number | 3 | 0.25.0 |
getPopupContainer | 指定父级 DOM,弹层将会渲染至该 DOM 中,自定义需要设置 container 和 内部的 .semi-toast-wrapper position: relative | () => HTMLElement | null | () => document.body | 1.23.0 |
left | 弹出位置 left | number | string | - | 0.25.0 |
right | 弹出位置 right | number | string | - | 0.25.0 |
top | 弹出位置 top | number | string | - | 0.25.0 |
zIndex | 弹层 z-index 值 | number | 1010 | 0.25.0 |
ToastFactory.create(config) => Toast
如果您的应用中需要使用不同 config 的 Toast,可以使用 ToastFactory.create(config)创建新的 Toast (>= 1.23):
全局销毁 ( >= 0.25.0 ):
Toast.destroyAll()
HookToast ( >= 1.2.0 ):
Toast.useToast()
当你需要使用 Context 时,可以通过 Toast.useToast 创建一个 contextHolder 插入相应的节点中。此时通过 hooks 创建的 Toast 将会得到 contextHolder 所在位置的所有上下文。创建的 toast 对象拥有与以下方法:info
,success
,warning
,error
,close
。
Accessibility
ARIA
- Toast 的 role 为 alert