rat-balloon

组件介绍

• category: Components
• chinese: 气泡提示
• type: 弹层

安装

$ npm install rat-balloon --save

开发指南

气泡组件

何时使用

• 当用户与被说明对象（文字，图片，输入框等）发生交互行为的action开始时, 即刻跟随动作出现一种辅助或帮助的提示信息。
• 其中Balloon.Tooltip是简化版本，主要用于hover时显示简单文案。

使用注意

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

API

Balloon

| 参数 | 说明 | 类型 | 默认值 | | -------------------- | ---------------- | --------------- | ---------------------------------------- | | pure | 是否pure render | Boolean | false | | type | 样式类型可选值:'normal', 'primary' | Enum | 'normal' | | children | 浮层的内容 | any | - | | visible | 弹层当前显示的状态 | Boolean | -| | defaultVisible | 弹层默认显示的状态 | Boolean | false | | onVisibleChange | 弹层在显示和隐藏触发的事件签名:Function(visible: Boolean) => void参数:visible: {Boolean} 弹层是否隐藏和显示 | Function | func.noop | | alignEdge | 弹出层对齐方式 | Boolean | false | | closable | 是否显示关闭按钮 | Boolean | true | | align | 弹出层位置可选值:'t'(上)'r'(右)'b'(下)'l'(左)'tl'(上左)'tr'(上右)'bl'(下左)'br'(下右)'lt'(左上)'lb'(左下)'rt'(右上)'rb'(右下 及其 两两组合) | Enum | 'b' | | offset | 弹层相对于trigger的定位的微调 | Array | [0, 0] | | trigger | 触发元素 | any | <span></span>| | triggerType | 触发行为鼠标悬浮, 获取到焦点, 鼠标点击('hover'，'focus'，'click')或者它们组成的数组，如 ['hover', 'focus'] | String/Array | 'hover' | | onClose | 任何visible为false时会触发的事件签名:Function() => void | Function | func.noop | | delay | 弹层在触发以后的延时显示, 单位毫秒 ms | Number | - | | afterClose | 浮层关闭后触发的事件, 如果有动画，则在动画结束后触发签名:Function() => void | Function | func.noop | | shouldUpdatePosition | 强制更新定位信息 | Boolean | - | | autoFocus | 弹层出现后是否自动focus到内部第一个元素 | Boolean | false | | safeNode | 安全节点:对于triggetType为click的浮层,会在点击除了浮层外的其它区域时关闭浮层.safeNode用于添加不触发关闭的节点, 值可以是dom节点的id或者是节点的dom对象 | String | undefined | | safeId | 用来指定safeNode节点的id，和safeNode配合使用 | String | null | | cache | 弹层的dom节点关闭时是否删除 | Boolean | false | | popupContainer | 指定浮层渲染的父节点, 可以为节点id的字符串，也可以返回节点的函数。 | String/Function | - | | popupStyle | 弹层组件style，透传给Popup | Object | {} | | popupProps | 弹层组件属性，透传给Popup | Object | {} |

Balloon.Tooltip

| 参数 | 说明 | 类型 | 默认值 | | -------------- | ------------ | --------------- | ------------------- | | children | tooltip的内容 | any | - | | align | 弹出层位置可选值:'t'(上)'r'(右)'b'(下)'l'(左)'tl'(上左)'tr'(上右)'bl'(下左)'br'(下右)'lt'(左上)'lb'(左下)'rt'(右上)'rb'(右下 及其 两两组合) | Enum | 'b' | | trigger | 触发元素 | any | <span></span> | | triggerType | 触发行为鼠标悬浮, 获取到焦点, 鼠标点击('hover'，'focus'，'click')或者它们组成的数组，如 ['hover', 'focus'] | String/Array | 'hover' | | popupStyle | 弹层组件style，透传给Popup | Object | - | | popupProps | 弹层组件属性，透传给Popup | Object | - | | pure | 是否pure render | Boolean | - | | popupContainer | 指定浮层渲染的父节点, 可以为节点id的字符串，也可以返回节点的函数。 | String/Function | -| | id | 弹层id, 传入值才会支持无障碍 | String | -|