Notification通知提醒框

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

• 较为复杂的通知内容。

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

• 系统主动推送。

基本

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

通知提醒框左侧有图标。

const openNotificationWithIcon = type => {
  notification[type]({
    message: 'Notification Title',
    description:
      'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
  });
};
ReactDOM.render(
  <div>
    <Button onClick={() => openNotificationWithIcon('success')}>Success</Button>
    <Button onClick={() => openNotificationWithIcon('info')}>Info</Button>
    <Button onClick={() => openNotificationWithIcon('warning')}>Warning</Button>
    <Button onClick={() => openNotificationWithIcon('error')}>Error</Button>
  </div>,
  mountNode,
);

自定义图标

import { Button, notification, Icon } from 'antd';
const openNotification = () => {
  notification.open({
    message: 'Notification Title',
    description:
      'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
    icon: <Icon type="smile" style={{ color: '#108ee9' }} />,
  });
};
ReactDOM.render(
  <Button type="primary" onClick={openNotification}>
    Open the notification box
  </Button>,
  mountNode,
);

使用 style 和 className 来定义样式。

自动关闭的延时

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

const openNotification = () => {
  const args = {
    message: 'Notification Title',
    description:
    duration: 0,
  };
  notification.open(args);
};
ReactDOM.render(
  <Button type="primary" onClick={openNotification}>
    Open the notification box
  </Button>,
  mountNode,
);

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

import { Button, notification } from 'antd';
const close = () => {
  console.log(
    'Notification was closed. Either the close button was clicked or duration time elapsed.',
  );
};
const openNotification = () => {
  const key = `open${Date.now()}`;
  const btn = (
    <Button type="primary" size="small" onClick={() => notification.close(key)}>
      Confirm
    </Button>
  );
  notification.open({
    message: 'Notification Title',
    description:
      'A function will be be called after the notification is closed (automatically after the "duration" time of manually).',
    btn,
    key,
    onClose: close,
  });
};
  <Button type="primary" onClick={openNotification}>
    Open the notification box
  </Button>,
  mountNode,
);

位置

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

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

import { Button, notification } from 'antd';
const key = 'updatable';
const openNotification = () => {
  notification.open({
    key,
    message: 'Notification Title',
    description: 'description.',
  });
  setTimeout(() => {
    notification.open({
      key,
      message: 'New Title',
      description: 'New description.',
    });
  }, 1000);
};
ReactDOM.render(
  <Button type="primary" onClick={openNotification}>
    Open the notification box
  </Button>,
  mountNode,
);

• 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 参数如下：

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

• notification.config(options)

notification.config({
  placement: 'bottomRight',
  bottom: 50,
});