JGuang
EN

通知提醒框

Notification · Arco Design

交互预览
npm install @arco-design/web-react@2.66.18

通知提醒框 Notification

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

安装

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是否显示关闭按钮booleantrue-
showIcon是否显示图标booleantrue-
duration自动关闭的时间，单位为 msnumber3000-
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通知自动关闭的时间number3000
prefixCls类名前缀stringarco