---
title: Notification - 通知提醒框
order: 13
path: /Notification
nav:
  order: 1
  title: 桌面组件
  path: /design
group:
  order: 6
  title: 反馈组件
  path: /feedback
---

定义：对用户的操作作出轻量的全局反馈。

## 基础用法

常规提示，5 秒后自动关闭。

#### 基础使用

<code src="./demos/base.tsx" background="#fff" height="400px"/>

## 带关带关闭的通知提醒框

需手动关闭的提示。

<code src="./demos/close.tsx" background="#fff" height="400px"/>

## 不同状态的通知提醒框

通知提醒框有 5 种不同的类型，分别为：info, success, warning, error，normal。

自动关闭

<code src="./demos/types.tsx" background="#fff" height="400px"/>

手动关闭

<code src="./demos/typesClose.tsx" background="#fff" height="400px"/>

## 带操作的通知提醒框

带有操作的消息通知为用户提供下一步行动点，在消息提示框中进行简要快捷的交互。

<code src="./demos/tips.tsx" background="#fff" height="400px"/>

## 通知提醒框的位置

通知提醒框有 4 种不同的弹出位置，分别为：左上角, 右上角 (默认), 左下角, 右下角。

<code src="./demos/placement.tsx" background="#fff" height="400px"/>

## API

组件提供了一些静态方法，使用方式和参数如下：

- `notification.success(config)`
- `notification.error(config)`
- `notification.info(config)`
- `notification.warning(config)`
- `notification.warn(config)`
- `notification.normal(config)`
- `notification.open(config)`

- config 参数如下：

| 参数         | 说明                                                           | 类型                                                                                                                                          | 默认值              |
| ------------ | -------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
| bottom       | 消息从底部弹出时，距离底部的位置，单位像素                     | number                                                                                                                                        | 24                  |
| btn          | 自定义关闭按钮                                                 | ReactNode                                                                                                                                     | -                   |
| className    | 自定义 CSS class                                               | string                                                                                                                                        | -                   |
| closeIcon    | 自定义关闭图标                                                 | ReactNode                                                                                                                                     | -                   |
| description  | 通知提醒内容，必选                                             | ReactNode                                                                                                                                     | -                   |
| duration     | 默认 5 秒后自动关闭，配置为 null 则不自动关闭                  | number                                                                                                                                        | 5                   |
| getContainer | 配置渲染节点的输出位置                                         | () => HTMLNode                                                                                                                                | () => document.body |
| icon         | 自定义图标                                                     | ReactNode                                                                                                                                     | -                   |
| key          | 当前通知唯一标志                                               | string                                                                                                                                        | -                   |
| message      | 通知提醒标题，必选                                             | ReactNode                                                                                                                                     | -                   |
| placement    | 弹出位置，可选 `topLeft` `topRight` `bottomLeft` `bottomRight` | string                                                                                                                                        | `topRight`          |
| style        | 自定义内联样式                                                 | [CSSProperties](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e434515761b36830c3e58a970abf5186f005adac/types/react/index.d.ts#L794) | -                   |
| top          | 消息从顶部弹出时，距离顶部的位置，单位像素                     | number                                                                                                                                        | 24                  |
| onClick      | 点击通知时触发的回调函数                                       | function                                                                                                                                      | -                   |
| onClose      | 当通知关闭时触发                                               | function                                                                                                                                      | -                   |
| onOK         | 点击确认触发的回调函数                                         | function                                                                                                                                      | -                   |
| onCancle     | 点击取消触发的回调函数                                         | function                                                                                                                                      | -                   |

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

- `notification.config(options)`

  > 当你使用 `ConfigProvider` 进行全局化配置时，系统会默认自动开启 RTL 模式。(4.3.0+)
  >
  > 当你想单独使用，可通过如下设置开启 RTL 模式。

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

| 参数         | 说明                                                                          | 类型           | 默认值              |
| ------------ | ----------------------------------------------------------------------------- | -------------- | ------------------- |
| bottom       | 消息从底部弹出时，距离底部的位置，单位像素                                    | number         | 24                  |
| closeIcon    | 自定义关闭图标                                                                | ReactNode      | -                   |
| duration     | 默认自动关闭延时，单位秒                                                      | number         | 5                   |
| getContainer | 配置渲染节点的输出位置                                                        | () => HTMLNode | () => document.body |
| placement    | 弹出位置，可选 `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | string         | `topRight`          |
| rtl          | 是否开启 RTL 模式                                                             | boolean        | false               |
| top          | 消息从顶部弹出时，距离顶部的位置，单位像素                                    | number         | 24                  |
| maxCount     | 最大显示数, 超过限制时，最早的消息会被自动关闭                                | number         | -                   |