Message 消息通知

基础消息通知

用于轻量级反馈或提示,不会打断用户操作。

在 Stackblitz 中打开

不同状态的消息通知

消息通知类型为普通(info)、警示(warning)、成功(success)、错误(error),用 API 方法调用反馈类对话框

在 Stackblitz 中打开

Message Props

name type default description required
className String - className of component N
style Object - CSS(Cascading Style Sheets),Typescript:React.CSSProperties N
align String left options: left/center。Typescript:MessageAlignType type MessageAlignType = 'left' | 'center'see more ts definition N
closeBtn TNode - Typescript:string | boolean | TNodesee more ts definition N
content TNode - Typescript:string | TNodesee more ts definition N
duration Number 3000 - N
icon TNode true Typescript:boolean | TNodesee more ts definition N
link TNode - Typescript:string | object | TNodesee more ts definition N
marquee Boolean / Object false Typescript:boolean | MessageMarquee interface MessageMarquee { speed?: number; loop?: number; delay?: number }see more ts definition N
offset Array - Typescript:Array<string | number> N
theme String info options: info/success/warning/error。Typescript:MessageThemeList type MessageThemeList = 'info' | 'success' | 'warning' | 'error'see more ts definition N
visible Boolean false - N
defaultVisible Boolean false uncontrolled property N
zIndex Number - - N
onChange Function Typescript:(visible: boolean) => void
deprecated
N
onClose Function Typescript:(context: { trigger: 'close-click' | 'duration-end', e?: MouseEvent }) => void
deprecated。close message event。Typescript:string | TNodesee more ts definition
N
onCloseBtnClick Function Typescript:(context: { e: MouseEvent }) => void
N
onClosed Function Typescript:() => void
deprecated
N
onDurationEnd Function Typescript:() => void
N
onLinkClick Function Typescript:(context: { e: MouseEvent }) => void
N
onOpen Function Typescript:() => void
deprecated
N
onOpened Function Typescript:() => void
deprecated
N

何时使用

当需要对用户进行较轻量的反馈或提示,可以自动消失或通过点击关闭,通常由用户触发。

与页面布局相关

通知通常出现在页面顶部,叠加在页面的上层,可在一段时间后自动消失、或用户点击关闭。

推荐/慎用示例

当需要在通知栏中展示按钮时,不建议超过1个。若需要使用更多按钮,建议使用其它交互方式。

消息通知是一种相对轻量、短时的反馈方式,尽量避免在页面中同时堆叠多个消息通知,用户可能会来不及关注它们。

相似组件

组件名 何时使用
轻提示 当需要对用户进行轻量反馈或提示,且不需要用户进行操作时使用,轻提示会在一段时间后自动消失。
公告栏 当需要对用户进行较明显的反馈或提示,需要用户关注时使用,一段时间后不会自动消失,通常是自动触发。