@beisen-phoenix/unmodeled-layer NPM | npm.io

3.3.55 • Published 4 years ago

Install

Weekly downloads

11

License

ISC

Repository

Last release

4 years ago

@beisen-phoenix/unmodeled-layer

使用 rc-trigger 来实现弹框可见性的控制, 包括动画，定位等信息，封装 rc-trigger，实现自适应位置

API 属性如下:

成员	说明	类型	默认值
visible	是否显示	boolean	-
size	尺寸大小: small(170px) large(340px) auto(与父级自适应)	string	-
width	自定义大小，优先级低于 size	number	-
autoSize	是否监听弹层的大小变化	Boolean	true
childMargin	子组件的外边距	string	0px
trigger	触发展示的行为: hover click	Array<'hover' 'click'>	'hover'
footer	自定义按钮	object	-
autoAdjust	是否自适应调整位置	Boolean	true
content	弹窗内容	ReactNode	-
stretch	弹层拉伸	string（'width'、 'minWidth'、 'height'、 'minHeight'）	-
onVisibleChange	弹层显示状态改变时调用, 参数为 visible	Function(visible)	-
onOk	默认确定按钮的回调函数	Function	-
extraCls	自定义 class	string	""
blockContainer	外层容器的显示类型（true 是 block 类型，false 则是 inline-block）	Boolean	false
placement	弹层的显示位置(可选值：topLeft, topRight, bottomRight, bottomLeft)	string	bottomLeft
builtinPlacements	弹层的可定义偏移位置(具体可参考 dom-align)	object	--
getPopupContainer	弹层挂载的容器	Function	-
destroyPopupOnHide	隐藏的时候是否销毁节点	boolean	false

builtinPlacements 取值举例

{
  topLeft: {
    points: ['bl', 'tl'],
  },
  topRight: {
    points: ['br', 'tr'],
  },
  bottomRight: {
    points: ['tr', 'br'],
  },
  bottomLeft: {
    points: ['tl', 'bl'],
    offset: [-11, -15]
  },
}

代码示例

let footer = [{
  text: '按钮1',
  onClick: ()=> console.log("按钮1")
}, {
  text: '按钮2',
  onClick: ()=> console.log("按钮2")
}]
<UnmodeledLayer
  visible={visible}
  size = 'small'
  footer={footer}
  trigger={['hover', 'click']}
  content={content}
  onOk={this.handleOk}
  onVisibleChange={this.onVisibleChange}
  >
  <Button>打开</Button>
</UnmodeledLayer>

@beisen-phoenix/button @beisen-phoenix/style-token @beisen-phoenix/tooltip @beisen/common-func rc-trigger

@infinitebrahmanuniverse/nolb-_beisen-@everything-registry/sub-chunk-118 group-single-select @molejs/data-table beisen-phoenix ux-new-social-archives ux-nusion-index-page-template ux-increase-personnel ux-staff-adjustment ux-stop-payment ux-work-report ux-work-report-drawer ux-details-editor ux-recruit-tree ocean-input-multi-select pop-search @beisen/simple-screening @beisen-phoenix/field-department @beisen-phoenix/field-dropdown @beisen-phoenix/field-lookup @beisen-phoenix/field-select-list recruit-checked-form @beisen-phoenix/field-user @beisen-phoenix/data-table @beisen-phoenix/date-time-picker @beisen-phoenix/date-time-range-picker @beisen-phoenix/lookup @beisen-phoenix/search-form @beisen/ocean-input-multi-select @beisen/ocean-person-selector-input @beisen/ocean-pop-layer @beisen/ocean-pop-search @beisen/ocean-single-select-list @beisen/ocean-tree @beisen/ocean-tree-fixed @beisen/ocean-userselector @beisen/select @beisen/ocean-date @beisen/ocean-date-picker-composite @beisen-phoenix/dropdown @beisen-phoenix/field-date-time-picker @beisen-phoenix/all-in-one @beisen-phoenix/area-selector @beisen-phoenix/auto-complete @beisen-phoenix/select @beisen-phoenix/cascader @beisen-phoenix/commentor @beisen-platform/jobtype-selector @beisen-platform/ux-standard-field-common @beisen-platform/ux-standard-fields-common @beisen-platform/schema-button-group @beisen-platform/school-selector

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago