反馈类 · Notification
通知
通知用于主动向用户发出消息通知

代码演示

如何引入

普通通知

最基本的用法,3s 后自动关闭

不同位置弹出

可以从多个不同位置弹出:默认右上角 topRight。可选值:topbottomtopLefttopRightbottomLeftbottomRight

带有图标的通知

包括成功、失败、警告、提示

多色样式

可以使用 theme 设置浅色填充样式提高与界面的对比,默认为 'normal' 的白色模式。

链接文本

配合 Typography 可以自定义操作区链接文本,用来配合更复杂的场景的使用。

修改延时

自定义时长 10s,默认时长为 3s

手动关闭

设置 duration 为 0 时,通知将不会自动关闭,此时只能手动关闭。

API 参考

组件提供的静态方法,使用方式如下:
展示:可以直接传入 options 对象,返回值为idconst id = Notification.open({ /*...options*/ })
  • Notification.open({content: 'message', duration: 3})
  • Notification.info({content: 'message', duration: 3})
  • Notification.error({content: 'message', duration: 3})
  • Notification.warning({content: 'message', duration: 3})
  • Notification.success({content: 'message', duration: 3})
手动关闭 (id 为展示方法的返回值)
  • Notification.close(id)
属性说明类型默认值版本
content通知内容ReactNode''
duration自动关闭的延时,单位 s,设为 0 时不自动关闭number3
getPopupContainer指定父级 DOM,弹层将会渲染至该 DOM 中,自定义需要设置 position: relative() => HTMLElement() => document.body0.34.0
icon左上角 iconReact.Node
position弹出位置,可选 topbottomtopLefttopRightbottomLeftbottomRightstringtopRight
showClose是否展示关闭按钮booleantrue0.25.0
theme填充样式,支持light, normalstringnormal1.0.0
title通知标题ReactNode''
zIndex弹层 z-index 值,首次设置一次生效number1010
onClick点击通知的回调函数(e: event) => void0.27.0
onClose通知关闭的回调函数(主动关闭、延时到达关闭都会触发)() => void
onCloseClick主动点击关闭按钮时的回调函数(id: string | number) => void
全局配置在调用前提前配置,全局一次生效 ( >= 0.25.0 ):
  • Notification.config(config)
属性说明类型默认值版本
bottom弹出位置 bottomnumber | string-0.25.0
duration自动关闭的延时,单位 s,设为 0 时不自动关闭number30.25.0
left弹出位置 leftnumber | string-0.25.0
position弹出位置,可选 topbottomtopLefttopRightbottomLeftbottomRightstringtopRight0.25.0
right弹出位置 rightnumber | string-0.25.0
top弹出位置 topnumber | string-0.25.0
zIndex弹层 z-index 值number10100.25.0

Accessibility

ARIA

  • 组件的 role 为 'alert'
  • 通知的 aria-labelledby 标记为对应通知标题

设计变量

全局销毁 ( >= 0.25.0 ):
  • Notification.destroyAll() ( >= 0.25.0 )
Hook Notification ( >= 1.2.0 ):
  • Notification.useNotification
    当你需要使用 Context 时,可以通过 Notification.useNotification 创建一个 contextHolder 插入相应的节点中。此时通过 hooks 创建的 Notification 将会得到 contextHolder 所在位置的所有上下文。创建的 notification 对象拥有与以下方法:info, success, warning, error, open, close。使用方法可以参考:useToast

© 2021 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED