Notification通知提醒框

全局展示通知提醒信息。

何时使用

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

  • 较为复杂的通知内容。

  • 带有交互的通知,给出用户下一步的行动点。

  • 系统主动推送。

代码演示

Notification通知提醒框 - 图1

基本

最简单的用法,4.5 秒后自动关闭。

  1. import { Button, notification } from 'antd';
  2. const openNotification = () => {
  3. notification.open({
  4. message: 'Notification Title',
  5. description:
  6. 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
  7. onClick: () => {
  8. console.log('Notification Clicked!');
  9. },
  10. });
  11. };
  12. ReactDOM.render(
  13. <Button type="primary" onClick={openNotification}>
  14. Open the notification box
  15. </Button>,
  16. mountNode,
  17. );

Notification通知提醒框 - 图2

带有图标的通知提醒框

通知提醒框左侧有图标。

  1. import { Button, notification, Space } from 'antd';
  2. const openNotificationWithIcon = type => {
  3. notification[type]({
  4. message: 'Notification Title',
  5. description:
  6. 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
  7. });
  8. };
  9. ReactDOM.render(
  10. <Space>
  11. <Button onClick={() => openNotificationWithIcon('success')}>Success</Button>
  12. <Button onClick={() => openNotificationWithIcon('info')}>Info</Button>
  13. <Button onClick={() => openNotificationWithIcon('warning')}>Warning</Button>
  14. <Button onClick={() => openNotificationWithIcon('error')}>Error</Button>
  15. </Space>,
  16. mountNode,
  17. );

Notification通知提醒框 - 图3

自定义图标

图标可以被自定义。

  1. import { Button, notification } from 'antd';
  2. import { SmileOutlined } from '@ant-design/icons';
  3. const openNotification = () => {
  4. notification.open({
  5. message: 'Notification Title',
  6. description:
  7. 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
  8. icon: <SmileOutlined style={{ color: '#108ee9' }} />,
  9. });
  10. };
  11. ReactDOM.render(
  12. <Button type="primary" onClick={openNotification}>
  13. Open the notification box
  14. </Button>,
  15. mountNode,
  16. );

Notification通知提醒框 - 图4

自定义样式

使用 style 和 className 来定义样式。

  1. import { Button, notification } from 'antd';
  2. const openNotification = () => {
  3. notification.open({
  4. message: 'Notification Title',
  5. description:
  6. 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
  7. className: 'custom-class',
  8. style: {
  9. width: 600,
  10. },
  11. });
  12. };
  13. ReactDOM.render(
  14. <Button type="primary" onClick={openNotification}>
  15. Open the notification box
  16. </Button>,
  17. mountNode,
  18. );

Notification通知提醒框 - 图5

通过 Hooks 获取上下文

通过 notification.useNotification 创建支持读取 context 的 contextHolder

  1. import { Button, notification, Divider, Space } from 'antd';
  2. import {
  3. RadiusUpleftOutlined,
  4. RadiusUprightOutlined,
  5. RadiusBottomleftOutlined,
  6. RadiusBottomrightOutlined,
  7. } from '@ant-design/icons';
  8. const Context = React.createContext({ name: 'Default' });
  9. const Demo = () => {
  10. const [api, contextHolder] = notification.useNotification();
  11. const openNotification = placement => {
  12. api.info({
  13. message: `Notification ${placement}`,
  14. description: <Context.Consumer>{({ name }) => `Hello, ${name}!`}</Context.Consumer>,
  15. placement,
  16. });
  17. };
  18. return (
  19. <Context.Provider value={{ name: 'Ant Design' }}>
  20. {contextHolder}
  21. <Space>
  22. <Button type="primary" onClick={() => openNotification('topLeft')}>
  23. <RadiusUpleftOutlined />
  24. topLeft
  25. </Button>
  26. <Button type="primary" onClick={() => openNotification('topRight')}>
  27. <RadiusUprightOutlined />
  28. topRight
  29. </Button>
  30. </Space>
  31. <Divider />
  32. <Space>
  33. <Button type="primary" onClick={() => openNotification('bottomLeft')}>
  34. <RadiusBottomleftOutlined />
  35. bottomLeft
  36. </Button>
  37. <Button type="primary" onClick={() => openNotification('bottomRight')}>
  38. <RadiusBottomrightOutlined />
  39. bottomRight
  40. </Button>
  41. </Space>
  42. </Context.Provider>
  43. );
  44. };
  45. ReactDOM.render(<Demo />, mountNode);

Notification通知提醒框 - 图6

自动关闭的延时

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

  1. import { Button, notification } from 'antd';
  2. const openNotification = () => {
  3. const args = {
  4. message: 'Notification Title',
  5. description:
  6. 'I will never close automatically. This is a purposely very very long description that has many many characters and words.',
  7. duration: 0,
  8. };
  9. notification.open(args);
  10. };
  11. ReactDOM.render(
  12. <Button type="primary" onClick={openNotification}>
  13. Open the notification box
  14. </Button>,
  15. mountNode,
  16. );

Notification通知提醒框 - 图7

自定义按钮

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

  1. import { Button, notification } from 'antd';
  2. const close = () => {
  3. console.log(
  4. 'Notification was closed. Either the close button was clicked or duration time elapsed.',
  5. );
  6. };
  7. const openNotification = () => {
  8. const key = `open${Date.now()}`;
  9. const btn = (
  10. <Button type="primary" size="small" onClick={() => notification.close(key)}>
  11. Confirm
  12. </Button>
  13. );
  14. notification.open({
  15. message: 'Notification Title',
  16. description:
  17. 'A function will be be called after the notification is closed (automatically after the "duration" time of manually).',
  18. btn,
  19. key,
  20. onClose: close,
  21. });
  22. };
  23. ReactDOM.render(
  24. <Button type="primary" onClick={openNotification}>
  25. Open the notification box
  26. </Button>,
  27. mountNode,
  28. );

Notification通知提醒框 - 图8

位置

通知从右上角、右下角、左下角、左上角弹出。

  1. import { Button, notification, Divider, Space } from 'antd';
  2. import {
  3. RadiusUpleftOutlined,
  4. RadiusUprightOutlined,
  5. RadiusBottomleftOutlined,
  6. RadiusBottomrightOutlined,
  7. } from '@ant-design/icons';
  8. const openNotification = placement => {
  9. notification.info({
  10. message: `Notification ${placement}`,
  11. description:
  12. 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
  13. placement,
  14. });
  15. };
  16. ReactDOM.render(
  17. <div>
  18. <Space>
  19. <Button type="primary" onClick={() => openNotification('topLeft')}>
  20. <RadiusUpleftOutlined />
  21. topLeft
  22. </Button>
  23. <Button type="primary" onClick={() => openNotification('topRight')}>
  24. <RadiusUprightOutlined />
  25. topRight
  26. </Button>
  27. </Space>
  28. <Divider />
  29. <Space>
  30. <Button type="primary" onClick={() => openNotification('bottomLeft')}>
  31. <RadiusBottomleftOutlined />
  32. bottomLeft
  33. </Button>
  34. <Button type="primary" onClick={() => openNotification('bottomRight')}>
  35. <RadiusBottomrightOutlined />
  36. bottomRight
  37. </Button>
  38. </Space>
  39. </div>,
  40. mountNode,
  41. );

Notification通知提醒框 - 图9

更新消息内容

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

  1. import { Button, notification } from 'antd';
  2. const key = 'updatable';
  3. const openNotification = () => {
  4. notification.open({
  5. key,
  6. message: 'Notification Title',
  7. description: 'description.',
  8. });
  9. setTimeout(() => {
  10. notification.open({
  11. key,
  12. message: 'New Title',
  13. description: 'New description.',
  14. });
  15. }, 1000);
  16. };
  17. ReactDOM.render(
  18. <Button type="primary" onClick={openNotification}>
  19. Open the notification box
  20. </Button>,
  21. mountNode,
  22. );

API

  • notification.success(config)

  • notification.error(config)

  • notification.info(config)

  • notification.warning(config)

  • notification.warn(config)

  • notification.open(config)

  • notification.close(key: String)

  • notification.destroy()

config 参数如下:

参数说明类型默认值
bottom消息从底部弹出时,距离底部的位置,单位像素number24
btn自定义关闭按钮ReactNode-
className自定义 CSS classstring-
closeIcon自定义关闭图标ReactNode-
description通知提醒内容,必选ReactNode-
duration默认 4.5 秒后自动关闭,配置为 null 则不自动关闭number4.5
getContainer配置渲染节点的输出位置() => HTMLNode() => document.body
icon自定义图标ReactNode-
key当前通知唯一标志string-
message通知提醒标题,必选ReactNode-
placement弹出位置,可选 topLeft topRight bottomLeft bottomRightstringtopRight
style自定义内联样式CSSProperties-
top消息从顶部弹出时,距离顶部的位置,单位像素number24
onClick点击通知时触发的回调函数function-
onClose当通知关闭时触发function-

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

  • notification.config(options)

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

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

  1. notification.config({
  2. placement: 'bottomRight',
  3. bottom: 50,
  4. duration: 3,
  5. rtl: true,
  6. });
参数说明类型默认值
bottom消息从底部弹出时,距离底部的位置,单位像素number24
closeIcon自定义关闭图标ReactNode-
duration默认自动关闭延时,单位秒number4.5
getContainer配置渲染节点的输出位置() => HTMLNode() => document.body
placement弹出位置,可选 topLeft topRight bottomLeft bottomRightstringtopRight
rtl是否开启 RTL 模式booleanfalse
top消息从顶部弹出时,距离顶部的位置,单位像素number24

FAQ

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

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

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

  1. const [api, contextHolder] = notification.useNotification();
  2. return (
  3. <Context1.Provider value="Ant">
  4. {/* contextHolder 在 Context1 内,它可以获得 Context1 的 context */}
  5. {contextHolder}
  6. <Context2.Provider value="Design">
  7. {/* contextHolder 在 Context2 外,因而不会获得 Context2 的 context */}
  8. </Context2.Provider>
  9. </Context1.Provider>
  10. );

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

静态方法如何设置 prefixCls ?

你可以通过 ConfigProvider.config-4.13.0+) 进行设置。