Detalhes do pacote

bee-overlay

tinper-bee1.2kMIT1.0.33

overlay ui component for react

react, react-component, react-overlay, iuap-design

readme (leia-me)

bee-overlay

npm version Build Status Coverage Status

弹出层控制组件

使用方法

API

  • Portal 入口，将子组件放入指定的容器
参数 说明 类型 默认值
container 目标容器 DOM元素\react组件\或是返回组件的函数 ''
  • Position 定位组件
参数 说明 类型 默认值
target 要定位元素 DOM元素\react组件\或是返回组件的函数 ''
container 目标容器 DOM元素\react组件\或是返回组件的函数 ''
containerPadding 设置目标容器的内边距 number 0
placement 显示位置设置 top\left\bottom\right right
shouldUpdatePosition 是否需要更新位置 boolean false
  • BaseOverlay 基础悬浮组件，依赖于Portal，Position组件，继承Portal，Position组件接口。
参数 说明 类型 默认值
show 是否显示 boolean false
rootClose 是否点击除弹出层任意地方隐藏 boolean true
onHide 当rootClose设置为false时，可设置为隐藏方法 function -
transition 过度动画组件 component -
onEnter 开始显示时的钩子函数 function -
onEntering 显示时的钩子函数 function -
onEntered 显示完成后的钩子函数 function -
onExit 隐藏开始时的钩子函数 function -
onExiting 隐藏进行时的钩子函数 function -
onExited 隐藏结束时的钩子函数 function -
  • Overlay 悬浮组件，依赖于BaseOverlay，继承BaseOverlay的组件接口
参数 说明 类型 默认值
show 是否显示 boolean false
rootClose 是否点击除弹出层任意地方隐藏 boolean true
onHide 当rootClose设置为false时，可设置为隐藏方法 function -
transition 过度动画组件 component -
onEnter 开始显示时的钩子函数 function -
onEntering 显示时的钩子函数 function -
onEntered 显示完成后的钩子函数 function -
onExit 隐藏开始时的钩子函数 function -
onExiting 隐藏进行时的钩子函数 function -
onExited 隐藏结束时的钩子函数 function -
placement 显示位置设置 top\left\bottom\right right
placement 第二优先级显示位置设置 top\left\bottom\right right
  • OverlayTrigger 挂载组件，依赖Overlay组件，继承Overlay组件的接口
参数 说明 类型 默认值
trigger 触发叠加层的事件 click/hover/focus hover/focus
delay 叠加层显示和隐藏的延迟时间 number -
delayShow 叠加层显示的延迟时间 number -
delayHide 叠加层隐藏的延迟时间 number -
defaultOverlayShown 覆盖Overlay设置的默认显隐状态 boolean false
overlay 叠加层 element/string/function -
onBlur 失去焦点触发的时间 function -
onClick 点击事件 function -
onFocus 焦点事件 function -
onMouseOut 鼠标离开事件 function -
onMouseOver 鼠标滑过事件 function -
popData trigger的自定义属性，例如 {"data-name":"lucian","data-sex":"man"}，属性名不能和其它属性名重复，否则会被覆盖 Object -
  • RootCloseWrapper 代理外部组件事件
参数 说明 类型 默认值
onRootClose 关闭时触发的方法 function -
children 内部包含元素 DOM元素 -
disabled 是否禁用 boolean -
event 触发事件 click/mousedown click
  • Affix 固定定位组件
参数 说明 类型 默认值
offsetTop 到屏幕顶部像素 number -
viewportOffsetTop 到窗口的偏移像素 number -
offsetBottom 到屏幕的底部的偏移像素 number -
topClassName 在顶部时添加的class class -
topStyle 在顶部添加的style style -
affixClassName 当固定定位时，添加的class class -
affixStyle 当固定定位时，添加的style style -
bottomClassName 在底部时添加的class class -
bottomStyle 在底部时添加的style style -
onAffix 在affixstyle和affixClassName添加之前的钩子函数 function -
onAffixed 在affixstyle和affixClassName添加之后的钩子函数 function -
onAffixTop 在topStyle和topClassName添加之前的钩子函数 function -
onAffixedTop 在topStyle和topClassName添加之后的钩子函数 function -
onAffixBottom 在bottomStyle和bottomClassName添加之前的钩子函数 function -
onAffixedBottom 在bottomStyle和bottomClassName添加之后的钩子函数 function -
  • AutoAffix 对Affix进行包装，提供自动计算偏移量，因为包装Affix，包含所有Affix组件的接口
参数 说明 类型 默认值
container 容器元素 DOM元素\React组件\或者返回React组件的函数 ---:
autoWidth 是否自适应宽度 boolean ---:
  • BaseModal 模态框，建立在Protal之上，包含所有Protal组件接口
参数 说明 类型 默认值
show 是否显示 boolean false
container 容器 DOM元素\React组件\或者返回React组件的函数 -
onShow 当模态框显示时的钩子函数 function -
onHide 当模态框关闭时的钩子函数 function -
backdrop 显示时，是否包含背景 boolean true
renderBackdrop 返回背景元素的函数 function -
onEscapeKeyUp 响应ESC键时的钩子函数 function -
onBackdropClick 点击背景元素的函数 function -
backdropStyle 添加到背景元素的style function -
backdropClassName 添加到背景元素的class function -
containerClassName 添加到外部容器的class function -
keyboard ESC键是否关闭模态框 boolean true
transition 动画组件 function -
dialogTransitionTimeout 设置动画超时时间 function -
backdropTransitionTimeout 设置背景动画超时时间 function -
autoFocus 显示时是否自动设置焦点 function -
enforceFocus 不让焦点离开模态框 function -
onEnter 模态框显示时的钩子函数 function -
onEntering 模态框进入中的钩子函数 function -
onEntered 模态框显示后的钩子函数 function -
onExit 模态框关闭时的钩子函数 function -:
onExiting 模态框关闭中的钩子函数 function -
onExited 模态框关闭后的钩子函数 function -
manager 管理模态框状态的组件 required -
  • Transtion
参数 说明 类型 默认值
in 是否触发动画 boolean false
unmountOnExit 不显示的时候是否销毁组件 boolean: false
transitionAppear 默认显示是否加载动画 boolean false
timeout 超时时间 number 5000
exitedClassName 退出动画时添加的class class -
exitingClassName 退出组件中添加的class class -
enteredClassName 进入动画时添加的class class -
enteringClassName 进入动画中添加的class class -
onEnter 动画显示时的钩子函数 function 空函数
onEntering 动画进入中的钩子函数 function 空函数
onEntered 动画显示后的钩子函数 function 空函数
onExit 动画关闭时的钩子函数 function 空函数
onExiting 动画关闭中的钩子函数 function 空函数
onExited 动画关闭后的钩子函数 function 空函数

开发调试

$ git clone https://github.com/tinper-bee/bee-overlay
$ cd bee-overlay
$ npm install
$ npm run dev

changelog (log de mudanças)

1.0.33 (2021-01-15)

Bug Fixes

  • 修改calculatePosition 计算逻辑,增加滚动条高度的计算 (2b1ca26)

1.0.32 (2020-05-11)

Bug Fixes

  • Tooltip onVisibleChange单独使用不生效 (7bc1627)
  • 自动化 (dd83b9c)

1.0.31 (2019-08-01)

Features

  • bee-overlay: getDocument可传数组 (ab21a61)

1.0.30 (2019-06-13)

1.0.29 (2019-06-06)

1.0.28 (2019-06-06)

1.0.27 (2019-06-06)

1.0.26 (2019-05-05)

Features

  • Modal.js: Refs Must Have Owner Warning (0980c2e)

1.0.25 (2019-04-28)

1.0.24 (2019-04-25)

1.0.23 (2019-04-25)

Features

  • bee-overlay: trigger新增自定义属性 (482f637)

1.0.22 (2019-01-20)

1.0.21 (2019-01-03)

Features

  • bee-overlay: 当渲染内容不在当前document时候，新增获得document的props (73f57f1)

1.0.20 (2018-12-27)

1.0.19 (2018-12-10)

1.0.18 (2018-12-07)

Features

  • 增加滚轮事件，滚动时显示的隐藏显示的menu: g (01cd267)

1.0.15 (2018-10-09)

Features

  • bee-overlay: clearTimeout前加判断 (4a55d52)

1.0.9 (2018-08-12)

Bug Fixes

  • bee-overlay bee-dropdown: fix Dropdown组件父组件销毁，下拉没有销毁bug (6ba52d9)
  • 内容超出时，将内容显示在相反反向将内容展示 (283e6ba)