---
title: Notification 通知提醒框 (done)
order: 13
group: 
  path: /components
nav: 
  title: 组件
  path: /components
---

## 使用

### 使用原则
+ 在系统四个角显示通知提醒信息。经常用于：
  + 较为复杂的通知内容；
  + 带有交互的通知，给出下一步的行动点；
  + 系统主动推送。
+ 可设置4.5s后自动消失。也可以设置为0.

### 基本使用

提供了四种基本通知提醒框：`success`、`error`、`info`、`warning`。默认带 icon
```jsx
import React from 'react';
import { Button, notification } from 'baas-ui';

const success = () => {
  notification.success({
    message: '这是一条成功提示的标题',
    description: '这是一条成功提示描述这是一条成功提示描述',
  });
};

const error = () => {
  notification.error({
    message: '这是一条失败提示的标题',
    description: '这是一条失败提示描述这是一条失败提示描述',
  });
};

const warning = () => {
  notification.warning({
    message: '这是一条警告提示的标题',
    description: '这是一条警告提示描述这是一条警告提示描述',
  });
};

const info = () => {
  notification.info({
    message: '这是一条消息提示的标题',
    description: '这是一条消息提示描述这是一条消息提示描述',
  });
};

export default () => (
  <div style={{ display: 'flex' }}>
    <div style={{ flex: '1' }}>
      <Button onClick={success}>Success</Button>
    </div>
    <div style={{ flex: '1' }}><Button onClick={error}>Error</Button></div>
    <div style={{ flex: '1' }}><Button onClick={info}>Info</Button></div>
    <div style={{ flex: '1' }}><Button onClick={warning}>Warning</Button></div>
  </div>
);
```

### 不带图标
```jsx
import React from 'react';
import { Button, notification } from 'baas-ui';

const open = () => {
  notification.open({
    message: '这是一条成功提示的标题',
    description: '这是一条成功提示的描述这是一条成功提示的描述',
  });
};

export default () => (
  <div style={{ display: 'flex' }}>
    <div style={{ flex: '1' }}>
      <Button onClick={open}>普通提醒</Button>
    </div>
  </div>
);
```

### 手动更新和关闭
```jsx
import React from 'react';
import { Button, notification } from 'baas-ui';

const update = () => {
  notification.success({
    key: 'myUpdate',
    message: '这是一条成功提示的标题',
    description: '3s后自动更新内容',
    duration: null,
  });
  setTimeout(() => {
    notification.success({
      key: 'myUpdate',
      message: '我更新了标题',
      description: '这是我的更新原因这是我的更新原因',
    });
  }, 3000);
};

const close = () => {
  notification.warning({
    key: 'myClose',
    message: '这是一条警告提示的标题',
    description: '3s后会自动关闭提醒框',
    duration: null,
  });
  setTimeout(() => {
    notification.close('myClose');
  }, 3000);
};

export default () => (
  <div style={{ display: 'flex' }}>
    <div style={{ flex: '1' }}>
      <Button onClick={update}>手动更新</Button>
    </div>
    <div style={{ flex: '1' }}>
      <Button onClick={close}>手动关闭</Button>
    </div>
  </div>
);
```

### 设置提醒框的弹出位置

```jsx
import React from 'react';
import { Button, notification } from 'baas-ui';

const open = (placement) => () => {
  notification.info({
    placement,
    message: '这是一条消息提示的标题',
    description: '这是一条消息提示描述这是一条消息提示描述',
  });
};

export default () => (
  <div style={{ display: 'flex' }}>
    <div style={{ flex: '1' }}>
      <Button onClick={open('topLeft')}>topLeft</Button>
    </div>
    <div style={{ flex: '1' }}>
      <Button onClick={open('topRight')}>topRight</Button>
    </div>
    <div style={{ flex: '1' }}>
      <Button onClick={open('bottomLeft')}>bottomLeft</Button>
    </div>
    <div style={{ flex: '1' }}>
      <Button onClick={open('bottomRight')}>bottomRight</Button>
    </div>
  </div>
);
```

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

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

- `notification.config(options)`

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

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| bottom | 消息从底部弹出时，距离底部的位置，单位像素。 | number | 24 |
| closeIcon | 自定义关闭图标 | ReactNode | - |
| duration | 默认自动关闭延时，单位秒 | number | 4.5 |
| getContainer | 配置渲染节点的输出位置 | () => HTMLNode | () => document.body |
| placement | 弹出位置，可选 `topLeft` `topRight` `bottomLeft` `bottomRight` | string | topRight |
| top | 消息从顶部弹出时，距离顶部的位置，单位像素。 | number | 24 |