代码演示
如何引入
普通通知
最基本的用法，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
