API
Balloon
// 组件内使用,请勿直接在业务中使用Balloon
参数 | 说明 | 类型 | 默认值 |
---|
children | 浮层的内容 | any | - |
type | 样式类型
可选值: 'normal', 'primary' | Enum | 'primary' |
visible | 弹层当前显示的状态 | Boolean | - |
defaultVisible | 弹层默认显示的状态 | Boolean | false |
onVisibleChange | 弹层在显示和隐藏触发的事件
签名: Function(visible: Boolean, type: String) => void 参数: visible: {Boolean} 弹层是否隐藏和显示 type: {String} 触发弹层显示或隐藏的来源, closeClick 表示由自带的关闭按钮触发; fromTrigger 表示由trigger的点击触发; docClick 表示由document的点击触发 | Function | func.noop |
alignEdge | 弹出层对齐方式 | Boolean | true |
closable | 是否显示关闭按钮 | Boolean | true |
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 | Array | 0, 0 |
trigger | 触发元素 | any | <span /> |
triggerType | 触发行为 鼠标悬浮, 鼠标点击('hover','click')或者它们组成的数组,如 'hover', 'click', 强烈不建议使用'focus',若弹窗内容有复杂交互请使用click | String/Array | 'hover' |
onClose | 任何visible为false时会触发的事件
签名: Function() => void | Function | func.noop |
needAdjust | 是否进行自动位置调整 | Boolean | true |
delay | 弹层在触发以后的延时显示, 单位毫秒 ms | Number | - |
afterClose | 浮层关闭后触发的事件, 如果有动画,则在动画结束后触发
签名: Function() => void | Function | func.noop |
shouldUpdatePosition | 强制更新定位信息 | Boolean | - |
autoFocus | 弹层出现后是否自动focus到内部第一个元素 | Boolean | true |
safeNode | 安全节点:对于triggetType为click的浮层,会在点击除了浮层外的其它区域时关闭浮层.safeNode用于添加不触发关闭的节点, 值可以是dom节点的id或者是节点的dom对象 | String | undefined |
safeId | 用来指定safeNode节点的id,和safeNode配合使用 | String | null |
animation | 配置动画的播放方式 | Object/Boolean | { in: 'zoomIn', out: 'zoomOut', } |
cache | 弹层的dom节点关闭时是否删除 | Boolean | false |
popupContainer | 指定浮层渲染的父节点, 可以为节点id的字符串,也可以返回节点的函数。 | String/Function | - |
popupStyle | 弹层组件style,透传给Popup | Object | {} |
popupClassName | 弹层组件className,透传给Popup | String | '' |
popupProps | 弹层组件属性,透传给Popup | Object | {} |
followTrigger | 是否跟随滚动 | Boolean | - |
id | 弹层id, 传入值才会支持无障碍 | String | - |
Balloon.Tooltip
参数 | 说明 | 类型 | 默认值 |
---|
type | 类型,可选值'primary', 'normal' | Enmu | 'normal' |
children | tooltip的内容 | 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,透传给Popup | Object | - |
popupClassName | 弹层组件className,透传给Popup | String | - |
popupProps | 弹层组件属性,透传给Popup | Object | - |
pure | 是否pure render | Boolean | - |
popupContainer | 指定浮层渲染的父节点, 可以为节点id的字符串,也可以返回节点的函数。 | String/Function | - |
followTrigger | 是否跟随滚动 | Boolean | - |
id | 弹层id, 传入值才会支持无障碍 | String | - |
Balloon.PopConfirm
参数 | 说明 | 类型 | 默认值 |
---|
size | 尺寸,可选值 small ,medium ,large | String | medium |
type | 类型,可选值 info ,warning ,success ,danger | String | info |
locale | 底部按钮文案 | object | {confirm: '确定', cancel: '取消'} |
align | 同Balloon | String | 'b' |
alignEdge | 同Balloon | Boolean | true |
icon | 自定义icon,优先级高于type | ReactNode | - |
title | 标题 | ReactNode | - |
content | 内容 | ReactNode | - |
footer | 是否有底部按钮 | Boolean | true |
confirmProps | 确认按钮额外属性,onClick由onConfirm定义 | Object | {} |
cancelProps | 取消按钮额外属性,onClick由onCancel定义,warning属性由组件内定义 | Object | {} |
onConfirm | 点击确认按钮回调 | Function | noop |
onCancel | 点击取消按钮回调 | Function | noop |
defaultVisible | 气泡默认是否可见 | Boolean | false |
visible | 气泡是否可见,受控 | Boolean | - |
onVisibleChange | 气泡显示隐藏回调 | Function | noop |
offset | 气泡相对trigger定位的偏移量 | Array | 0, 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
按键 | 说明 |
---|
SPACE | 当triggerType=‘click’ 时,点击会弹出提示 |
Enter | 当triggerType=‘click’ 时,点击会弹出提示 |