Message 信息提示

系统主动推送给用户的消息。

Message 信息提示

开发指南

Select Shape:

类型和外观

通过设置type改变类型,通过设置shape调整信息外观

可关闭组件

通过增加closeable属性可以控制提示框是否可关闭。

受控显示隐藏

带操作行动

通过设置handler, onClickHandler附带上操作按钮

全局提醒

通过shape='global'设置样式,包含三种type类型,分别为:默认 notice,警告 error,渐变 help

弹窗便捷方法

可以通过Message.success等静态方法来方便的显示指定类型的信息弹窗。

API

Message

参数说明类型默认值
size反馈大小

可选值:
'medium', 'large'
Enum'medium'
type反馈类型

可选值:
'success', 'warning', 'error', 'notice', 'help', 'loading'
Enum'success'
shape反馈外观

可选值:
'inline', 'addon', 'toast', 'global'
Enum'inline'
title标题ReactNode-
children内容ReactNode-
defaultVisible默认是否显示Booleantrue
visible当前是否显示Boolean-
iconType显示的图标类型,会覆盖内部设置的IconTypeString-
closeable显示关闭按钮Booleanfalse
handler行动点内容按钮文本string | JSX.Element-
onClose关闭按钮的回调

签名:
Function() => void
Function() => {}
onClickHandler行动点内容按钮点击回调

签名:
Function() => void
Function() => {}
afterClose关闭之后调用的函数

签名:
Function() => void
Function() => {}
animation是否开启展开收起动画Booleantrue

Message.show

Message.show(props) 提供一个单例的调用方式,配置参数如下(继承 Overlay 的配置):

参数说明类型默认值
type反馈类型String'success'
title反馈标题ReactNode-
content反馈内容ReactNode-
duration显示持续时间,0表示一直存在,以毫秒为单位Number3000
align对齐方式,参考OverlayString'tc tc'
offset对齐之后的偏移位置Array0, 0
hasMask是否带有遮罩Booleanfalse
closeable显示关闭按钮Booleanfalse
afterClose关闭事件的回调函数Function-
overlayProps透传到弹层的属性对象Object-

示例:

Message.show({
  type: 'error',
  title: '错误',
  content: '请联系相关人员反馈!',
  hasMask: true
});

Message.hide

Message.hide() 提供关闭反馈弹层的快捷方法。

Message.success|error|notice|help|loading

Message.show({type: type, title: 'xxx'}); 的便捷调用方法。

示例:

Message.success('反馈内容');

// 或者
Message.success({
    title: '反馈内容',
    duration: 1000
});

ARIA and KeyBoard

说明: 此组件需要结合其他组件使用,才会有提示。参考上文无障碍