FadeIn自定义弹层

author: 闫申申

定义

自定义弹层(方向、对齐方式、宽高都可以自定义)

图片展示

FadeIn 自定义弹层 - 图1

代码演示

  2. import FadeIn from 'pile/dist/components/fadein'
  3. <FadeIn  
  4.     show={false} 
  5.     direction="bottom"
  6.     height="auto"
  7.     width="100%"
  8.     align = {0}
  9.     contentPadding={false} 
  10.     showBack={()=>{console.log("open")}} 
  11.     closeBack={()=>{console.log("close")}}
  12. >
  13.     内容随心所欲的添加
  14. </FadeIn>

属性

参数 描述 数据类型 默认值
show 状态 ：true 展开，false 关闭 bool false
closeBtnText 关闭按钮文案 string "确定"
closeShow 关闭按钮是否展示 bool true
changeFun 展开与关闭切换时回调，参数：true 展开，false 关闭 function
direction 滑动方向 bottom , top , left ,right string "bottom"
height 高度支持（"100%","300px","auto"） string "auto"
width 宽度支持（"100%","300px"） string "auto"
align 对齐方式：0:水平或者垂直居中，1 ：左对齐或者顶部对齐，2右对齐或者底部对齐 number 0
closeBack 关闭时的回调 function
transparent 背景是否透明 bool false
showBack 展开时的回调 function

原文: https://didi.github.io/pile.js/docs/2017/08/develop-components-fadeinx.html