代码演示
如何引入
普通通知
最基本的用法,3s 后自动关闭
不同位置弹出
可以从多个不同位置弹出:默认右上角
topRight
。可选值:top
、bottom
、topLeft
、topRight
、bottomLeft
、bottomRight
。带有图标的通知
包括成功、失败、警告、提示
多色样式
可以使用
theme
设置浅色填充样式提高与界面的对比,默认为 'normal' 的白色模式。链接文本
配合 Typography 可以自定义操作区链接文本,用来配合更复杂的场景的使用。
修改延时
自定义时长 10s,默认时长为 3s
手动关闭
设置 duration 为 0 时,通知将不会自动关闭,此时只能手动关闭。
API 参考
组件提供的静态方法,使用方式如下:
展示:可以直接传入 options 对象,返回值为
id
:const id = Notification.open({ /*...options*/ })
Notification.open({content: 'message', duration: 3})
Notification.info({content: 'message', duration: 3})
Notification.error({content: 'message', duration: 3})
Notification.warning({content: 'message', duration: 3})
Notification.success({content: 'message', duration: 3})
手动关闭 (id 为展示方法的返回值)
Notification.close(id)
属性 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
content | 通知内容 | ReactNode | '' | |
duration | 自动关闭的延时,单位 s,设为 0 时不自动关闭 | number | 3 | |
getPopupContainer | 指定父级 DOM,弹层将会渲染至该 DOM 中,自定义需要设置 position: relative | () => HTMLElement | () => document.body | 0.34.0 |
icon | 左上角 icon | React.Node | ||
position | 弹出位置,可选 top 、bottom 、topLeft 、topRight 、bottomLeft 、bottomRight | string | topRight | |
showClose | 是否展示关闭按钮 | boolean | true | 0.25.0 |
theme | 填充样式,支持light , normal | string | normal | 1.0.0 |
title | 通知标题 | ReactNode | '' | |
zIndex | 弹层 z-index 值,首次设置一次生效 | number | 1010 | |
onClick | 点击通知的回调函数 | (e: event) => void | 0.27.0 | |
onClose | 通知关闭的回调函数(主动关闭、延时到达关闭都会触发) | () => void | ||
onCloseClick | 主动点击关闭按钮时的回调函数 | (id: string | number) => void |
全局配置在调用前提前配置,全局一次生效 ( >= 0.25.0 ):
Notification.config(config)
属性 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
bottom | 弹出位置 bottom | number | string | - | 0.25.0 |
duration | 自动关闭的延时,单位 s,设为 0 时不自动关闭 | number | 3 | 0.25.0 |
left | 弹出位置 left | number | string | - | 0.25.0 |
position | 弹出位置,可选 top 、bottom 、topLeft 、topRight 、bottomLeft 、bottomRight | string | topRight | 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 |
Accessibility
ARIA
- 组件的
role
为 'alert' - 通知的
aria-labelledby
标记为对应通知标题
设计变量
全局销毁 ( >= 0.25.0 ):
Notification.destroyAll()
( >= 0.25.0 )
Hook Notification ( >= 1.2.0 ):
Notification.useNotification
当你需要使用 Context 时,可以通过 Notification.useNotification 创建一个 contextHolder 插入相应的节点中。此时通过 hooks 创建的 Notification 将会得到 contextHolder 所在位置的所有上下文。创建的 notification 对象拥有与以下方法:info
,success
,warning
,error
,open
,close
。使用方法可以参考:useToast