1.0.33 • Published 3 years ago
bee-overlay v1.0.33
bee-overlay
弹出层控制组件
使用方法
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
1.0.33
3 years ago
1.0.32-alpha.0
3 years ago
1.0.32
4 years ago
1.0.31
5 years ago
1.0.31-beta
5 years ago
1.0.30
5 years ago
1.0.30-alpha.0
5 years ago
1.0.29
5 years ago
1.0.28
5 years ago
1.0.27
5 years ago
1.0.27-alpha.0
5 years ago
1.0.26
5 years ago
1.0.25
5 years ago
1.0.25-alpha.0
5 years ago
1.0.24
5 years ago
1.0.24-alpha.1
5 years ago
1.0.24-alpha.0
5 years ago
1.0.23
5 years ago
1.0.22
5 years ago
1.0.21
5 years ago
1.0.20
5 years ago
1.0.19
5 years ago
1.0.18
5 years ago
1.0.17
5 years ago
1.0.16
5 years ago
1.0.15
6 years ago
1.0.14
6 years ago
1.0.13
6 years ago
1.0.12
6 years ago
1.0.11
6 years ago
1.0.10
6 years ago
1.0.9
6 years ago
1.0.8
6 years ago
1.0.7
6 years ago
1.0.6
6 years ago
1.0.5
6 years ago
1.0.4
7 years ago
1.0.3
7 years ago
1.0.2
7 years ago
1.0.1
7 years ago
1.0.0
7 years ago
0.2.0
7 years ago
0.1.4
7 years ago
0.1.3
7 years ago
0.1.2
7 years ago
0.1.0
7 years ago
0.0.19
7 years ago
0.0.18
7 years ago
0.0.17
7 years ago
0.0.16
7 years ago
0.0.15
7 years ago
0.0.13
7 years ago
0.0.12
7 years ago
0.0.11
7 years ago
0.0.10
7 years ago
0.0.9
7 years ago
0.0.8
7 years ago
0.0.7
7 years ago
0.0.6
7 years ago
0.0.5
7 years ago
0.0.4
7 years ago
0.0.3
7 years ago
0.0.2
7 years ago
0.0.1
8 years ago