Balloon 气泡提示

开发指南

气泡组件

何时使用

  • 当用户与被说明对象(文字,图片,输入框等)发生交互行为的action开始时, 即刻跟随动作出现一种辅助或帮助的提示信息。

  • 其中Balloon.Tooltip是简化版本,主要用于hover时显示简单文案。

使用注意

  • 对于trigger是自定义的React Component的情况,自定义的React Component 需要透传onMouseEnter/onMouseLeave/onClick 事件。

  • 若要使用无障碍的气泡提示,请传入id。推荐简单提示使用<Tooltip>、复杂交互使用<Balloon triggerType="click"> 。 triggerType="focus"作为辅助状态用于组件内部,请用户不要直接使用此值。

类型:

tooltip

简化的 Balloon, 只能设置 align, trigger 和 children, 触发条件是 hover.

PopConfirm 文本

只有文本。

尺寸:

            

PopConfirm 不同类型、尺寸

通过type设置不同的类型,可选值info,warning,success,danger, 通过size设置尺寸,可选值small,medium,large

PopConfirm 回调

onCancel 和 onConfirm 结合 visible 使用。

API

Balloon

// 组件内使用,请勿直接在业务中使用Balloon

参数说明类型默认值
children浮层的内容any-
type样式类型

可选值:
'normal', 'primary'
Enum'primary'
visible弹层当前显示的状态Boolean-
defaultVisible弹层默认显示的状态Booleanfalse
onVisibleChange弹层在显示和隐藏触发的事件

签名:
Function(visible: Boolean, type: String) => void
参数:
visible: {Boolean} 弹层是否隐藏和显示
type: {String} 触发弹层显示或隐藏的来源, closeClick 表示由自带的关闭按钮触发; fromTrigger 表示由trigger的点击触发; docClick 表示由document的点击触发
Functionfunc.noop
alignEdge弹出层对齐方式Booleantrue
closable是否显示关闭按钮Booleantrue
align弹出层位置

可选值:
't'(上)
'r'(右)
'b'(下)
'l'(左)
'tl'(上左)
'tr'(上右)
'bl'(下左)
'br'(下右)
'lt'(左上)
'lb'(左下)
'rt'(右上)
'rb'(右下 及其 两两组合)
Enum'b'
offset弹层相对于trigger的定位的微调, 接收数组hoz, ver, 表示弹层在 left / top 上的增量
e.g. 100, 100 表示往右(RTL 模式下是往左) 、下分布偏移100px
Array0, 0
trigger触发元素any<span />
triggerType触发行为
鼠标悬浮, 鼠标点击('hover','click')或者它们组成的数组,如 'hover', 'click', 强烈不建议使用'focus',若弹窗内容有复杂交互请使用click
String/Array'hover'
onClose任何visible为false时会触发的事件

签名:
Function() => void
Functionfunc.noop
needAdjust是否进行自动位置调整Booleanfalse
delay弹层在触发以后的延时显示, 单位毫秒 msNumber-
afterClose浮层关闭后触发的事件, 如果有动画,则在动画结束后触发

签名:
Function() => void
Functionfunc.noop
shouldUpdatePosition强制更新定位信息Boolean-
autoFocus弹层出现后是否自动focus到内部第一个元素Booleantrue
safeNode安全节点:对于triggetType为click的浮层,会在点击除了浮层外的其它区域时关闭浮层.safeNode用于添加不触发关闭的节点, 值可以是dom节点的id或者是节点的dom对象Stringundefined
safeId用来指定safeNode节点的id,和safeNode配合使用Stringnull
animation配置动画的播放方式Object/Boolean{ in: 'zoomIn', out: 'zoomOut', }
cache弹层的dom节点关闭时是否删除Booleanfalse
popupContainer指定浮层渲染的父节点, 可以为节点id的字符串,也可以返回节点的函数。String/Function-
popupStyle弹层组件style,透传给PopupObject{}
popupClassName弹层组件className,透传给PopupString''
popupProps弹层组件属性,透传给PopupObject{}
followTrigger是否跟随滚动Boolean-
id弹层id, 传入值才会支持无障碍String-

Balloon.Tooltip

参数说明类型默认值
type类型,可选值'primary', 'normal'Enmu'normal'
childrentooltip的内容any-
align弹出层位置

可选值:
't'(上)
'r'(右)
'b'(下)
'l'(左)
'tl'(上左)
'tr'(上右)
'bl'(下左)
'br'(下右)
'lt'(左上)
'lb'(左下)
'rt'(右上)
'rb'(右下 及其 两两组合)
Enum'b'
trigger触发元素any<span />
triggerType触发行为
鼠标悬浮, 鼠标点击('hover', 'click')或者它们组成的数组,如 'hover', 'click', 强烈不建议使用'focus',若有复杂交互,推荐使用triggerType为click的Balloon组件
String/Array'hover'
popupStyle弹层组件style,透传给PopupObject-
popupClassName弹层组件className,透传给PopupString-
popupProps弹层组件属性,透传给PopupObject-
pure是否pure renderBoolean-
popupContainer指定浮层渲染的父节点, 可以为节点id的字符串,也可以返回节点的函数。String/Function-
followTrigger是否跟随滚动Boolean-
id弹层id, 传入值才会支持无障碍String-

Balloon.PopConfirm

参数说明类型默认值
size尺寸,可选值 small,medium,largeStringmedium
type类型,可选值 info,warning,success,dangerStringinfo
locale底部按钮文案object{confirm: '确定', cancel: '取消'}
align同BalloonString'b'
alignEdge同BalloonBooleantrue
icon自定义icon,优先级高于typeReactNode-
title标题ReactNode-
content内容ReactNode-
footer是否有底部按钮Booleantrue
confirmProps确认按钮额外属性,onClick由onConfirm定义Object{}
cancelProps取消按钮额外属性,onClick由onCancel定义,warning属性由组件内定义Object{}
onConfirm点击确认按钮回调Functionnoop
onCancel点击取消按钮回调Functionnoop
defaultVisible气泡默认是否可见Booleanfalse
visible气泡是否可见,受控Boolean-
onVisibleChange气泡显示隐藏回调Functionnoop
offset气泡相对trigger定位的偏移量Array0, 0
trigger触发器,必填ReactNode
triggerType触发类型,可选'hover', 'click'string'hover'
needAdjust同Balloon
shouldUpdatePosition同Balloon
safeNode同Balloon
safeId同Balloon
animation同Balloon
cache同Balloon
popupContainer同Balloon
popupStyle同Balloon
popupClassName同Balloon
popupProps同Balloon
followTrigger同Balloon
id同Balloon

ARIA and KeyBoard

按键说明
SPACEtriggerType=‘click’时,点击会弹出提示
EntertriggerType=‘click’时,点击会弹出提示