在线体验

安装步骤

1. npm install react
2. npm install react-zoom-components

Drag

代码演示

import { Drag } from "react-zoom-components";
function Test() {
    return (
        <>
          <div style={{ width: "200px", height: "200px" }}>
            <Drag
              children={[<div>left</div>, <div>right</div>]}
              width={["30%", "70%"]}
            />
          </div>
        </>
    );
}
export default Test

API

Drag

补充：

(1)建议在Drag组件外包裹一个父组件，可以更好地控制宽度和高度。

(2)目前仅支持两个children，width和children的个数要一致。

| 参数 | 说明 | 类型 | 默认值 | | -------- | -------- | ----------- | ------ | | children | 子组件 | ReactNode[] | - | | width | 默认宽度 | string[] | - |

RowFold

代码演示

import { RowFold } from "react-zoom-components";
function Test() {
    return (
        <>
          <div style={{ width: "200px", height: "200px" }}>
            <RowFold
              children={[<div>left</div>, <div>middle</div>, <div>right</div>]}
              height={["30%", "40%", "30%"]}
            />
          </div>
        </>
    );
}
export default Test

API

RowFold

补充：

(1)建议在Drag组件外包裹一个父组件，可以更好地控制宽度和高度。

(2)height和children的个数要一致。

| 参数 | 说明 | 类型 | 默认值 | | -------- | -------- | ----------- | ------ | | children | 子组件 | ReactNode[] | - | | height | 默认高度 | string[] | - |

ColumnFold

代码演示

import { ColumnFold } from "react-zoom-components";
function Test() {
    return (
        <>
          <div style={{ width: "200px", height: "200px" }}>
            <ColumnFold
              children={[<div>left</div>, <div>middle</div>, <div>right</div>]}
              width={["30%", "40%", "30%"]}
            />
          </div>
        </>
    );
}
export default Test

API

ColumnFold

补充：

(1)建议在Drag组件外包裹一个父组件，可以更好地控制宽度和高度。

(2)width和children的个数要一致。

| 参数 | 说明 | 类型 | 默认值 | | -------- | -------- | ----------- | ------ | | children | 子组件 | ReactNode[] | - | | width | 默认宽度 | string[] | - |