logoAnt Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
  • 国内镜像
5.25.2
  • 组件总览
  • 通用
    • Button按钮
    • FloatButton悬浮按钮
      5.0.0
    • Icon图标
    • Typography排版
  • 布局
    • Divider分割线
    • Flex弹性布局
      5.10.0
    • Grid栅格
    • Layout布局
    • Space间距
    • Splitter分隔面板
      5.21.0
  • 导航
    • Anchor锚点
    • Breadcrumb面包屑
    • Dropdown下拉菜单
    • Menu导航菜单
    • Pagination分页
    • Steps步骤条
    • Tabs标签页
  • 数据录入
    • AutoComplete自动完成
    • Cascader级联选择
    • Checkbox多选框
    • ColorPicker颜色选择器
      5.5.0
    • DatePicker日期选择框
    • Form表单
    • Input输入框
    • InputNumber数字输入框
    • Mentions提及
    • Radio单选框
    • Rate评分
    • Select选择器
    • Slider滑动输入条
    • Switch开关
    • TimePicker时间选择框
    • Transfer穿梭框
    • TreeSelect树选择
    • Upload上传
  • 数据展示
    • Avatar头像
    • Badge徽标数
    • Calendar日历
    • Card卡片
    • Carousel走马灯
    • Collapse折叠面板
    • Descriptions描述列表
    • Empty空状态
    • Image图片
    • List列表
    • Popover气泡卡片
    • QRCode二维码
      5.1.0
    • Segmented分段控制器
    • Statistic统计数值
    • Table表格
    • Tag标签
    • Timeline时间轴
    • Tooltip文字提示
    • Tour漫游式引导
      5.0.0
    • Tree树形控件
  • 反馈
    • Alert警告提示
    • Drawer抽屉
    • Message全局提示
    • Modal对话框
    • Notification通知提醒框
    • Popconfirm气泡确认框
    • Progress进度条
    • Result结果
    • Skeleton骨架屏
    • Spin加载中
    • Watermark水印
      5.1.0
  • 其他
    • Affix固钉
    • App包裹组件
      5.1.0
    • ConfigProvider全局化配置
    • Util工具类
      5.13.0

Notification
通知提醒框

全局展示通知提醒信息。
使用import { notification } from "antd";
源码components/notification
文档
编辑此页更新日志

相关资源

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-首页模板集
Scaffolds-脚手架市场
Umi-React 应用开发框架
dumi-组件/文档研发工具
qiankun-微前端框架
Ant Motion-设计动效
国内镜像站点 🇨🇳

社区

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design 语雀专栏
Ant Design 知乎专栏
体验科技专栏
seeconf logoSEE Conf-蚂蚁体验科技大会
加入我们

帮助

GitHub
更新日志
常见问题
报告 Bug
议题
讨论区
StackOverflow
SegmentFault

Ant XTech logo更多产品

yuque logo语雀-构建你的数字花园
AntV logoAntV-数据可视化解决方案
Egg logoEgg-企业级 Node.js 框架
Kitchen logoKitchen-Sketch 工具集
Galacean logoGalacean-互动图形解决方案
xtech logo蚂蚁体验科技
主题编辑器
Made with ❤ by
蚂蚁集团和 Ant Design 开源社区

何时使用

在系统四个角显示通知提醒信息。经常用于以下情况:

  • 较为复杂的通知内容。
  • 带有交互的通知,给出用户下一步的行动点。
  • 系统主动推送。

代码演示

Hooks 调用(推荐)

通过 notification.useNotification 创建支持读取 context 的 contextHolder。请注意,我们推荐通过顶层注册的方式代替 notification 静态方法,因为静态方法无法消费上下文,因而 ConfigProvider 的数据也不会生效。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
带有图标的通知提醒框

通知提醒框左侧有图标。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
自定义图标

图标可以被自定义。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
自定义样式

使用 style 和 className 来定义样式。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
Enabled:
Threshold:
堆叠

堆叠配置,默认开启。超过 3 个以上的消息会被自动收起,可以通过 threshold 来设置不会被收起的最大数量。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
5.10.0
静态方法(不推荐)

静态方法无法消费 Context,推荐优先使用 Hooks 版本。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
自动关闭的延时

自定义通知框自动关闭的延时,默认 4.5s,取消自动关闭只要将该值设为 0 即可。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
自定义按钮

自定义关闭按钮的样式和文字。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
位置

使用 placement 可以配置通知从上面、下面、左上角、右上角、左下角、右下角弹出。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
更新消息内容

可以通过唯一的 key 来更新内容。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
显示进度条

显示自动关闭通知框的进度条。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
5.18.0

API

通用属性参考:通用属性

  • notification.success(config)
  • notification.error(config)
  • notification.info(config)
  • notification.warning(config)
  • notification.open(config)
  • notification.destroy(key?: String)

config 参数如下:

参数说明类型默认值版本
actions自定义按钮组ReactNode-5.24.0
btn自定义按钮组,请使用 actions 替换ReactNode--
className自定义 CSS classstring--
closeIcon自定义关闭图标ReactNodetrue5.7.0:设置为 null 或 false 时隐藏关闭按钮
description通知提醒内容,必选ReactNode--
duration默认 4.5 秒后自动关闭,配置为 null 则不自动关闭number4.5-
showProgress显示自动关闭通知框的进度条boolean5.18.0
pauseOnHover悬停时是否暂停计时器booleantrue5.18.0
icon自定义图标ReactNode--
key当前通知唯一标志string--
message通知提醒标题,必选ReactNode--
placement弹出位置,可选 top | topLeft | topRight | bottom | bottomLeft | bottomRightstringtopRight-
style自定义内联样式CSSProperties--
role供屏幕阅读器识别的通知内容语义,默认为 alert。此情况下屏幕阅读器会立即打断当前正在阅读的其他内容,转而阅读通知内容alert | statusalert5.6.0
onClick点击通知时触发的回调函数function--
onClose当通知关闭时触发function--
props透传至通知 div 上的 props 对象,支持传入 data-* aria-* 或 role 作为对象的属性。需要注意的是,虽然在 TypeScript 类型中声明的类型支持传入 data-* 作为对象的属性,但目前只允许传入 data-testid 作为对象的属性。 详见 https://github.com/microsoft/TypeScript/issues/28960Object--
  • notification.useNotification(config)

config 参数如下:

参数说明类型默认值版本
bottom消息从底部弹出时,距离底部的位置,单位像素number24
closeIcon自定义关闭图标ReactNodetrue5.7.0:设置为 null 或 false 时隐藏关闭按钮
getContainer配置渲染节点的输出位置() => HTMLNode() => document.body
placement弹出位置,可选 top | topLeft | topRight | bottom | bottomLeft | bottomRightstringtopRight
showProgress显示自动关闭通知框的进度条boolean5.18.0
pauseOnHover悬停时是否暂停计时器booleantrue5.18.0
rtl是否开启 RTL 模式booleanfalse
stack堆叠模式,超过阈值时会将所有消息收起boolean | { threshold: number }{ threshold: 3 }5.10.0
top消息从顶部弹出时,距离顶部的位置,单位像素number24
maxCount最大显示数,超过限制时,最早的消息会被自动关闭number-4.17.0

全局配置

还提供了一个全局配置方法,在调用前提前配置,全局一次生效。

notification.config(options)

当你使用 ConfigProvider 进行全局化配置时,系统会默认自动开启 RTL 模式。(4.3.0+)

当你想单独使用,可通过如下设置开启 RTL 模式。

js
notification.config({
placement: 'bottomRight',
bottom: 50,
duration: 3,
rtl: true,
});

notification.config

参数说明类型默认值版本
bottom消息从底部弹出时,距离底部的位置,单位像素number24
closeIcon自定义关闭图标ReactNodetrue5.7.0:设置为 null 或 false 时隐藏关闭按钮
duration默认自动关闭延时,单位秒number4.5
showProgress显示自动关闭通知框的进度条boolean5.18.0
pauseOnHover悬停时是否暂停计时器booleantrue5.18.0
getContainer配置渲染节点的输出位置,但依旧为全屏展示() => HTMLNode() => document.body
placement弹出位置,可选 top topLeft topRight bottom bottomLeft bottomRightstringtopRight
rtl是否开启 RTL 模式booleanfalse
top消息从顶部弹出时,距离顶部的位置,单位像素number24
maxCount最大显示数,超过限制时,最早的消息会被自动关闭number-4.17.0

主题变量(Design Token)

组件 Token如何定制?
Token 名称描述类型默认值
width提醒框宽度string | number384
zIndexPopup提醒框 z-indexnumber2050
全局 Token如何定制?

FAQ

为什么 notification 不能获取 context、redux 的内容和 ConfigProvider 的 locale/prefixCls/theme 等配置?

直接调用 notification 方法,antd 会通过 ReactDOM.render 动态创建新的 React 实体。其 context 与当前代码所在 context 并不相同,因而无法获取 context 信息。

当你需要 context 信息(例如 ConfigProvider 配置的内容)时,可以通过 notification.useNotification 方法会返回 api 实体以及 contextHolder 节点。将其插入到你需要获取 context 位置即可:

tsx
const [api, contextHolder] = notification.useNotification();
return (
<Context1.Provider value="Ant">
{/* contextHolder 在 Context1 内,它可以获得 Context1 的 context */}
{contextHolder}
<Context2.Provider value="Design">
{/* contextHolder 在 Context2 外,因而不会获得 Context2 的 context */}
</Context2.Provider>
</Context1.Provider>
);

异同:通过 hooks 创建的 contextHolder 必须插入到子元素节点中才会生效,当你不需要上下文信息时请直接调用。

可通过 App 包裹组件 简化 useNotification 等方法需要手动植入 contextHolder 的问题。

静态方法如何设置 prefixCls ?

你可以通过 ConfigProvider.config 进行设置。