Bee-overlay NPM

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

react react-component react-overlay iuap-design neoui-react overlay

warning classnames bee-animate dom-helpers tinper-bee-core

@everything-registry/sub-chunk-1224 xa-dropdown xa-select dcapp-base bee-tooltip bee-select bee-notification bee-popconfirm bee-popover bee-loading bee-dropdown tinper-bee yonui-ys nc-lightapp-front occ-tinper-bee react-clipboard-copy platform-workbench qm-select

5 years ago

5 years ago

6 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago