# bee-collapse
> Collapse ui component for react
Latest version **1.0.4** (published 2021-01-15) · MIT license · 76 weekly downloads
## Install
```sh
npm install bee-collapse
pnpm add bee-collapse
yarn add bee-collapse
bun add bee-collapse
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.4 |
| Published | 2021-01-15 |
| First published | 2017-10-18 |
| Weekly downloads | 76 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=4.0.0 |
| Dependencies | 4 |
| Unpacked size | 25.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Yonyou FED |
| Maintainers | yonyoufed, jonyw, guoyongfeng, zhaoyuchief, kvkens, liushaozhen, whizbz, yangchch, npm_yx, huayingjie, bjyxszd, banyudu, liuyk, tinper-bot, houjitong, gaox2025f, gcht163 |
| Keywords | react, react-component, bee-collapse, iuap-design, tinper-bee, Collapse |
## Links
- npm: https://www.npmjs.com/package/bee-collapse
- Repository: https://github.com/tinper-bee/bee-collapse
- Homepage: https://github.com/tinper-bee/bee-collapse.git
- Issues: https://github.com/tinper-bee/bee-collapse.git/issues
- npm.io page: https://npm.io/package/bee-collapse
## Dependencies (4)
- [classnames](https://npm.io/package/classnames.md) ^2.2.5
- [dom-helpers](https://npm.io/package/dom-helpers.md) ^3.0.0
- [bee-transition](https://npm.io/package/bee-transition.md) ^1.0.0
- [tinper-bee-core](https://npm.io/package/tinper-bee-core.md) latest
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 1.0.4 (latest) — 2021-01-15
- 1.0.2 (beta) — 2019-05-16
- 1.0.3 — 2020-04-24
- 1.0.1 — 2017-10-18
- 1.0.0 — 2017-10-18
## README
# bee-collapse
[](https://www.npmjs.com/package/bee-collapse)
[](https://travis-ci.org/tinper-bee/bee-collapse)
[](https://coveralls.io/github/tinper-bee/bee-collapse?branch=master)
[](https://david-dm.org/tinper-bee/bee-collapse#info=devDependencies)
[](https://npmjs.org/package/bee-collapse)
[](http://isitmaintained.com/project/tinper-bee/bee-collapse "Average time to resolve an issue")
[](http://isitmaintained.com/project/tinper-bee/bee-collapse "Percentage of issues still open")
react bee-collapse component for tinper-bee
在一个元素或者组件中添加折叠效果
## 使用方法
### 使用单独的Collapse包
#### 组件引入
先进行下载bee-collapse包
```
npm install --save bee-collapse
```
组件调用
```js
import Collapse from 'bee-collapse'
折叠内容
```
#### 样式引入
- 可以使用link引入build目录下Collapse.css
```
```
- 可以在js中import样式
```js
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|
#### 开发调试
```sh
$ npm install -g bee-tools
$ git clone https://github.com/tinper-bee/bee-collapse
$ cd bee-collapse
$ npm install
$ npm run dev
```
---
_Source: https://npm.io/package/bee-collapse · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._