Notification 通知提醒框

全局展示通知提醒信息。

何时使用

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

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

代码演示

基本

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

Notification通知提醒框 - 图1

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Button, notification } from 'choerodon-ui';
  4. const openNotification = () => {
  5. notification.open({
  6. message: 'Notification Title',
  7. description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
  8. });
  9. };
  10. ReactDOM.render(
  11. <Button type="primary" onClick={openNotification}>Open the notification box</Button>,
  12. document.getElementById('container'));

自动关闭的延时

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

Notification通知提醒框 - 图2

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Button, notification } from 'choerodon-ui';
  4. const openNotification = () => {
  5. const args = {
  6. message: 'Notification Title',
  7. description: 'I will never close automatically. I will be close automatically. I will never close automatically.',
  8. duration: 0,
  9. };
  10. notification.open(args);
  11. };
  12. ReactDOM.render(
  13. <Button type="primary" onClick={openNotification}>Open the notification box</Button>,
  14. document.getElementById('container'));

带有图标的通知提醒框

通知提醒框左侧有图标。

Notification通知提醒框 - 图3

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

自定义按钮

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

Notification通知提醒框 - 图4

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Button, notification } from 'choerodon-ui';
  4. const close = () => {
  5. console.log('Notification was closed. Either the close button was clicked or duration time elapsed.');
  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: 'A function will be be called after the notification is closed (automatically after the "duration" time of manually).',
  17. btn,
  18. key,
  19. onClose: close,
  20. });
  21. };
  22. ReactDOM.render(
  23. <Button type="primary" onClick={openNotification}>
  24. Open the notification box
  25. </Button>,

自定义图标

图标可以被自定义。

Notification通知提醒框 - 图5

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Button, notification, Icon } from 'choerodon-ui';
  4. const openNotification = () => {
  5. notification.open({
  6. message: 'Notification Title',
  7. description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
  8. icon: <Icon type="smile-circle" style={{ color: '#108ee9' }} />,
  9. });
  10. };
  11. ReactDOM.render(
  12. <Button type="primary" onClick={openNotification}>Open the notification box</Button>,
  13. document.getElementById('container'));

位置

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

Notification通知提醒框 - 图6

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

自定义样式

使用 style 和 className 来定义样式。

Notification通知提醒框 - 图7

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Button, notification } from 'choerodon-ui';
  4. const openNotification = () => {
  5. notification.open({
  6. message: 'Notification Title',
  7. description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
  8. style: {
  9. width: 600,
  10. marginLeft: 335 - 600,
  11. },
  12. });
  13. };
  14. ReactDOM.render(
  15. <Button type="primary" onClick={openNotification}>Open the notification box</Button>,
  16. document.getElementById('container'));

API

  • notification.success(config)
  • notification.error(config)
  • notification.info(config)
  • notification.warning(config)
  • notification.warn(config)
  • notification.close(key: String)
  • notification.destroy()

config 参数如下:

参数说明类型默认值
btn自定义关闭按钮ReactNode-
className自定义 CSS classstring-
description通知提醒内容,必选string|ReactNode-
duration默认 4.5 秒后自动关闭,配置为 null 则不自动关闭number4.5
icon自定义图标ReactNode-
key当前通知唯一标志string-
message通知提醒标题,必选string|ReactNode-
placement弹出位置,可选 topLeft topRight bottomLeft bottomRightstringtopRight
style自定义内联样式React.CSSProperties-
onClose点击默认关闭按钮时触发的回调函数Function-

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

  • 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