bee-collapse

react bee-collapse component for tinper-bee

在一个元素或者组件中添加折叠效果

使用方法

使用单独的Collapse包

组件引入

先进行下载bee-collapse包

npm install --save bee-collapse

组件调用

import Collapse from 'bee-collapse'
    
<Collapse in=true >
  折叠内容
</Collapse>

样式引入

• 可以使用link引入build目录下Collapse.css

<link rel="stylesheet" href="./node_modules/bee-collapse/build/Collapse.css">

• 可以在js中import样式

import "./node_modules/bee-collapse/src/Collapse.scss"
//或是
import "./node_modules/bee-collapse/build/Collapse.css"

API

|参数|说明|类型|默认值| |:---|:-----|:----|:------| |in|折叠的内容是否显示|boolean|false| |unmountOnExit|组件折叠时，是否从DOM元素删除该组件|boolean|false| |transitionAppear|组件内容初始化为显示时，是否添加动态效果|boolean|false| |timeout|设置超时时间，防止出现问题，其值可设置为>=动画时间|number|300| |onEnter|组件内容扩展之前调用的函数|func|-| |onEntering|组件内容扩展时调用的函数|func|-| |onEntered|组件内容扩展完成时调用的函数|func|-| |onExit|组件内容隐藏前调用的函数|func|-| |onExiting|组件内容隐藏时调用的函数|func|-| |onExited|组件内容隐藏后调用的函数|func|-| |dimension|折叠区展开效果是纵向的还是横向的（即height或者width改变）|"height"或者"width"或者func|height|

开发调试

$ npm install -g bee-tools
$ git clone https://github.com/tinper-bee/bee-collapse
$ cd bee-collapse
$ npm install
$ npm run dev