# 通知提醒框 Notification

- 页面: https://jiguang132.com/zh/resources/arco-design/docs/notification
- 资源: Arco Design (https://jiguang132.com/zh/resources/arco-design.md)
- 全部指南: https://jiguang132.com/zh/resources/arco-design/docs.md

全局展示通知提醒，将信息及时有效的传达给用户。

## 安装

```bash
npm install @arco-design/web-react@2.66.18
```

在入口引入 `@arco-design/web-react/dist/css/arco.css`，用 `ConfigProvider` 设置语言。React 19 项目还需在入口最先引入 `@arco-design/web-react/es/_util/react-19-adapter`，否则 Message、Modal 等命令式 API 无法渲染。

## 示例

- **基础用法**：最简单的例子。
- **不同类型的通知**：通知提醒框有 5 种不同的类型，分别为：`info`, `success`, `warning`, `error`, `normal`。
- **更新通知内容**：通过指定参数 `id`，可以更新已经存在的通知提醒框。
- **更新延迟**：通过指定参数 `id`，可以更新已经存在的通知提醒框。
- **自定义操作按钮**：通过指定 `btn` 字段，可以添加操作按钮。
- **自定义样式**：可以设置 `style` 和 `className` 来定制样式。
- **通知提醒位置**：通知提醒框有 4 种不同的弹出位置，分别为：`左上角`, `右上角 (默认)`, `左下角`, `右下角`。
- **Hooks-用法**：可以通过 `useNotification`**(2.40.0)** 去创建可以读取 context 的对话框。

示例来自 Arco Design 官方仓库（MIT），固定在 npm 2.66.18 对应的提交；部分示例使用在线图片或上传地址，预览中网络请求被禁用。

## API

### Notification

|参数名|描述|类型|默认值|版本|
|---|---|---|---|---|
|closable|是否显示关闭按钮|boolean |`true`|-|
|showIcon|是否显示图标|boolean |`true`|-|
|duration|自动关闭的时间，单位为 `ms`|number |`3000`|-|
|id|当前通知的唯一标识，可以用来更新消息|string |`-`|-|
|position|消息的位置，分为 `topLeft` 左上方、`topRight` 右上方、`bottomLeft` 左下方和 `bottomRight` 右下方|'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight' |`-`|-|
|btn|添加操作按钮|ReactNode |`-`|-|
|closeIcon|自定义右上角关闭按钮|ReactNode |`-`|2.50.0|
|icon|自定义图标|ReactNode |`-`|-|
|className|节点类名|string \| string[] |`-`|-|
|content|通知内容|ReactNode \| string  **(必填)**|`-`|-|
|style|节点样式|CSSProperties |`-`|-|
|title|通知标题|ReactNode \| string |`-`|-|
|onClose|关闭时的回调|() => void |`-`|-|

### 使用方法

- `Notification.info(config)`
- `Notification.success(config)`
- `Notification.warning(config)`
- `Notification.error(config)`
- `Notification.normal(config)`
- `Notification.remove(id)`
- `Notification.clear()`

### 全局设置

`Notification.config(options)`

|参数名|描述|类型|默认值|
|---|:---:|:---:|---:|
|maxCount|最大通知数量|`number`|`-`|
|getContainer|放置通知的容器|`() => HTMLElement`|`() => document.body`|
|duration|通知自动关闭的时间|`number`|`3000`|
|prefixCls|类名前缀|`string`|`arco`|

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt