折叠 Collapse
issue

何时使用

折叠组件

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

如何使用

import { Collapse } from 'tinper-bee';

or

import Collapse from 'bee-collapse';
import 'bee-collapse/build/Collapse.css';

能力特性

collapse

简单collpase

查看源码
我是折叠区域的内容，点击按钮我就显示，再次点击就会隐藏。快来点击按钮体验我的交互效果吧，是不是很棒！赶快使用吧~~~

unmountOnExit使用

collapse中使用unmountOnExit，默认值为false，unmountOnExit为true时每次隐藏折叠区时，组件会从dom中删除；为false时，不会删除

查看源码

各种Enter事件

collapse显示内容时onEnter，onEntering，onEntered事件调用

查看源码
我是折叠区域的内容，点击按钮我就显示，再次点击就会隐藏。快来点击按钮体验我的交互效果吧，是不是很棒！赶快使用吧~~~

我来显示具体调用事件的信息

各种Exit事件

collapse隐藏内容时onExit，onExiting，onExited事件调用

查看源码
我是折叠区域的内容，点击按钮我就显示，再次点击就会隐藏。快来点击按钮体验我的交互效果吧，是不是很棒！赶快使用吧~~~

我来显示具体调用事件的信息

折叠区横向展开

dimension为"width"具体使用

查看源码
我是折叠区域的内容，点击按钮我就显示，再次点击就会隐藏。快来点击按钮体验我的交互效果吧，是不是很棒！赶快使用吧~~~

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

注意事项

暂无

更新日志

相关资源

社区

帮助

联系我们

  • 北京市海淀区北清路68号用友产业园
  • guoyff@yonyou.com

版权所有：用友网络科技股份有限公司 2017 京ICP备05007539号-7 京ICP证100714号 京公网安备1101080209224号

Powered by yonyou

collapse
JS代码
/**
 *
 * @title collapse
 * @description 简单collpase
 *
 */

import React, {Component} from 'react';
import { Button, Collapse } from 'tinper-bee';





class Demo1 extends Component {
	constructor(props) {
		super(props);
		this.state = {
			open: true
		}
	}
	render() {
		return (
			<div>
				<Button
					colors="primary"
					onClick={ ()=> this.setState({ open: !this.state.open })}>
		          点我啦
		        </Button>
		        
		        <Collapse in={this.state.open}>
		          <div>
		            我是折叠区域的内容，点击按钮我就显示，再次点击就会隐藏。快来点击按钮体验我的交互效果吧，是不是很棒！赶快使用吧~~~
		          </div>
		        </Collapse>
		    </div>
		)

	}
}

export default Demo1;
unmountOnExit使用
JS代码
/**
 *
 * @title unmountOnExit使用
 * @description collapse中使用unmountOnExit，默认值为false，unmountOnExit为true时每次隐藏折叠区时，组件会从dom中删除；为false时，不会删除
 */

import React, {Component} from 'react';
import { Button, Collapse } from 'tinper-bee';





class Demo1 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            open: false
        }
    }

    render() {
        return (
            <div>
                <Button
                    colors="primary"
                    onClick={() => this.setState({open: !this.state.open})}>
                    unmountOnExit为true的Demo
                </Button>

                <Collapse
                    in={this.state.open}
                    unmountOnExit={true}>
                    <div>
                        我是折叠区域的内容，点击按钮我就显示，再次点击就会隐藏。unmountOnExit为true隐藏时我这个dom将被移除。
                    </div>
                </Collapse>


            </div>
        )

    }
}

export default Demo1;
各种Enter事件
JS代码
/**
 *
 * @title 各种Enter事件
 * @description collapse显示内容时onEnter，onEntering，onEntered事件调用
 *
 */

import React, {Component} from 'react';
import { Button, Collapse } from 'tinper-bee';






class Demo1 extends Component {
	constructor(props) {
		super(props);
		this.state = {
			open: false
		}
		this.onEnter = this.onEnter.bind(this);
		this.onEntering = this.onEntering.bind(this);
		this.onEntered = this.onEntered.bind(this);
	}
	onEnter() {

		document.getElementById('desc').innerHTML = "内容将要显示";
	}
	onEntering() {

		document.getElementById('desc').innerHTML = "内容正在显示";
	}
	onEntered() {
		document.getElementById('desc').innerHTML = "内容已显示完成";
	}
	render() {
		return (
			<div className="demo3">
		        <Button
					colors="primary"
					onClick={ ()=> this.setState({ open: !this.state.open })}>
		          各种EnterEvent
		        </Button>
		        
		        <Collapse
					in={this.state.open}
					onEnter={this.onEnter}
					onEntering={this.onEntering}
					onEntered={this.onEntered}>
		          <div>
		            我是折叠区域的内容，点击按钮我就显示，再次点击就会隐藏。快来点击按钮体验我的交互效果吧，是不是很棒！赶快使用吧~~~
		          </div>
		        </Collapse>

		        <p id="desc">我来显示具体调用事件的信息</p>
		       
		    </div>
		)

	}
}

export default Demo1;
SCSS代码
.demo3 {
  #desc {
    border: 1px solid rgb(30,136,229);
    background: #eee;
    padding: 10px;
  }
}
各种Exit事件
JS代码
/**
 *
 * @title 各种Exit事件
 * @description collapse隐藏内容时onExit，onExiting，onExited事件调用
 *
 */

import React, {Component} from 'react';
import { Button, Collapse } from 'tinper-bee';






class Demo1 extends Component {
	constructor(props) {
		super(props);
		this.state = {
			open: true
		}
		this.onExit = this.onExit.bind(this);
		this.onExiting = this.onExiting.bind(this);
		this.onExited = this.onExited.bind(this);
	}
	onExit() {
		document.getElementById('desc4').innerHTML = "我将要隐藏";
	}
	onExiting() {
		document.getElementById('desc4').innerHTML = "我正在隐藏";
	}
	onExited() {
		document.getElementById('desc4').innerHTML = "我已隐藏完成";
	}
	render() {
		return (
			<div className="demo4">
		        <Button
					colors="primary"
					onClick={ ()=> this.setState({ open: !this.state.open })}>
		          各种Exit事件
		        </Button>
		        
		        <Collapse
					in={this.state.open}
					onExit={this.onExit}
					onExiting={this.onExiting}
					onExited={this.onExited}>
		          <div>
		            我是折叠区域的内容，点击按钮我就显示，再次点击就会隐藏。快来点击按钮体验我的交互效果吧，是不是很棒！赶快使用吧~~~
		          </div>
		        </Collapse>
		         <p id="desc4">我来显示具体调用事件的信息</p>
		       
		    </div>
		)

	}
}
export default Demo1;
SCSS代码
.demo4 {
  #desc4 {
    border: 1px solid rgb(30,136,229);
    background: #eee;
    padding: 10px;
  }
}
折叠区横向展开
JS代码
/**
 *
 * @title 折叠区横向展开
 * @description dimension为"width"具体使用
 *
 */

import React, {Component} from 'react';
import { Button, Collapse } from 'tinper-bee';






class Demo1 extends Component {
	constructor(props) {
		super(props);
		this.state = {
			open: true
		}
	}
	render() {
		return (
			<div className="demo5">
		        <Button
					colors="primary"
					onClick={ ()=> this.setState({ open: !this.state.open })}>
		          点我内容横向动态显示隐藏
		        </Button>
		        <div style={{height: '25px'}}>
					<Collapse
						in={this.state.open}
						dimension="width" >
					<div>
						我是折叠区域的内容，点击按钮我就显示，再次点击就会隐藏。快来点击按钮体验我的交互效果吧，是不是很棒！赶快使用吧~~~
						<br/>
					</div>

					</Collapse>
				</div>
		    </div>
		)

	}
}
export default Demo1;