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 } 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. <div>
  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. </div>,
  16. mountNode,
  17. );

Notification通知提醒框 - 图3

自定义图标

图标可以被自定义。

  1. import { Button, notification, Icon } 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. icon: <Icon type="smile" style={{ color: '#108ee9' }} />,
  8. });
  9. };
  10. ReactDOM.render(
  11. <Button type="primary" onClick={openNotification}>
  12. Open the notification box
  13. </Button>,
  14. mountNode,
  15. );

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. style: {
  8. width: 600,
  9. marginLeft: 335 - 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

自动关闭的延时

自定义通知框自动关闭的延时,默认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. I will be close automatically. I will never close automatically.',
  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通知提醒框 - 图6

自定义按钮

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

  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通知提醒框 - 图7

位置

可以设置通知从右上角、右下角、左下角、左上角弹出。

  1. import { Button, Select, notification } from 'antd';
  2. const { Option } = Select;
  3. const options = ['topLeft', 'topRight', 'bottomLeft', 'bottomRight'];
  4. const openNotification = () => {
  5. notification.open({
  6. message: 'Notification Title',
  7. description:
  8. 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
  9. });
  10. };
  11. ReactDOM.render(
  12. <div>
  13. <Select
  14. defaultValue="topRight"
  15. style={{ width: 120, marginRight: 10 }}
  16. onChange={val => {
  17. notification.config({
  18. placement: val,
  19. });
  20. }}
  21. >
  22. {options.map(val => (
  23. <Option key={val} value={val}>
  24. {val}
  25. </Option>
  26. ))}
  27. </Select>
  28. <Button type="primary" onClick={openNotification}>
  29. Open the notification box
  30. </Button>
  31. </div>,
  32. mountNode,
  33. );

Notification通知提醒框 - 图8

更新消息内容

可以通过唯一的 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 参数如下:

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

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

  • notification.config(options)
  1. notification.config({
  2. placement: 'bottomRight',
  3. bottom: 50,
  4. duration: 3,
  5. });
参数说明类型默认值版本
bottom消息从底部弹出时,距离底部的位置,单位像素。number24
duration默认自动关闭延时,单位秒number4.5
getContainer配置渲染节点的输出位置() => HTMLNode() => document.body
placement弹出位置,可选 topLeft topRight bottomLeft bottomRightstringtopRight
top消息从顶部弹出时,距离顶部的位置,单位像素。number24