HResize

本组件实现左右两个div的伸缩处理。

Installation

使用npm：

$ npm i h-resize

Usage

Import:

import Hresize from 'h-resize';

Render in your component:

render() {
    // ...
    return (
        <div className="hresize-box">
            <HResize 
                leftDiv={leftDiv}
                rightDiv={rightDiv}
                vNumInit={300}
                vNumLeftLimit={100}
                vNumRightLimit={300}
                vMidWidth={1}
                midHandlerClassName="mid-mouse"
                onResizeStop={this.onResizeStop}
                onResizeStart={this.onResizeStart}
            />
        </div>
    )
}

API

参数：

/**
* leftDiv 左边元素
* rightDiv 右边元素
* vNumInit 左边元素的初始宽度
* vNumLeftLimit 左边最小宽度
* vNumRightLimit 右边最小宽度
* vMidWidth 中间的拖拽区宽度
* midHandlerClassName 中间拖拽时的类
* onResizeStart 开始拖拽的回调
* onResizeStop  结束拖拽的回调
*/
static propTypes = {
    vNumInit: PropTypes.number.isRequired,
    leftDiv: PropTypes.element.isRequired,
    rightDiv: PropTypes.element.isRequired,
    vNumLeftLimit: PropTypes.number,
    vNumRightLimit: PropTypes.number,
    vMidWidth: PropTypes.number,
    midHandlerClassName: PropTypes.string,
    onResizeStart: PropTypes.func,
    onResizeStop: PropTypes.func
}

static defaultProps = {
    vNumLeftLimit: 30,
    vNumRightLimit: 30,
    vMidWidth: 1,
    midHandlerClassName: '',
    onResizeStart: (): void => {},
    onResizeStop: (): void => {}
}

Keywords

horizontal, resize