@molejs/unmodeled-layer-2
使用 rc-trigger 来实现弹框可见性的控制, 包括动画,定位等信息, 封装 rc-trigger,实现自适应位置
Last updated 10 months ago by liugenpeng .
ISC · Original npm · Tarball · package.json
$ cnpm install @molejs/unmodeled-layer-2 
SYNC missed versions from official npm registry.

@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>

Current Tags

  • 0.0.1                                ...           latest (10 months ago)

1 Versions

  • 0.0.1                                ...           10 months ago

Copyright 2014 - 2016 © taobao.org |