resize-draggable

    1.3.4 • Public • Published

    resize-draggable

    English

    一个可以通过拖拽分割天来改变大小(展开/关闭)的 React 组件

    安装

    $ yarn add resize-draggable

    使用

    import React from "react";
    import ResizeDraggable from "resize-draggable";
    import "resize-draggable/dist/main.css"; // 必须导入样式
     
    const App = () => (
      <div>
        <div style={{ width: 100 }}></div>
        <ResizeDraggable direction="e" />
        <div style={{ width: 100 }}></div>
      </div>
    );
     
    export default App;

    组件

    <ResizeDraggable> 放在两个元素之间,在视觉上,显示成一个带展开和关闭按钮的分隔条。通过拖拽该分隔条,可以改变其两侧元素的尺寸(注:由于性能原因,尺寸的更改将在拖拽完毕进行)。与此同时,还可点击分隔条上的按钮在特定方向上快速展开/关闭一侧内容。

    点击demo体验和了解更多。

    // demo
    import React from "react";
    import { render } from "react-dom";
    import Draggleable from "resize-draggable";
    import "resize-draggable/dist/main.css";
    import "./index.css";
     
    const App = () => (
      <div>
        <div className="container-v">
          <div className="prev">Prev Element</div>
          <Draggleable direction="w" />
          <div className="next">Next Element</div>
        </div>
        <div className="container-v">
          <div className="prev">Prev Element</div>
          <Draggleable direction="e" />
          <div className="next">Next Element</div>
        </div>
        <div className="container-h">
          <div className="prev-h">Prev Element</div>
          <Draggleable direction="n" />
          <div className="next-h">Next Element</div>
        </div>
        <div className="container-h">
          <div className="prev-h">Prev Element</div>
          <Draggleable direction="s" />
          <div className="next-h">Next Element</div>
        </div>
      </div>
    );
     
    render(<App />, document.getElementById("root"));

    属性

    {
      // 分割条上展开/关闭按钮的方向
      // 可选值 东(e) 南(s) 西(w)北(n)
      // 默认情况下,属性`axis`为'x',如果设置`direction`为`s`或`n`,则`axis`为`y`
      direction: 'e' || 'w' || 'n' || 's',
     
      // 设置展开关闭是否可用,默认为`true`
      closable?: boolean,
     
      // 设置分割条是否可拖拽,默认为`false`,表示可以拖拽
      dragDisabled?: boolean,
     
      // 如果分隔条两边至少有一侧尺寸是自适应的(例如:flex:1的元素,百分比的宽高等),那么请设置`adaptive`为true,默认为`false`
      adaptive?: boolean,
     
      // 设置展开/关闭按钮默认情况下是否是关闭的,默认为false
      defaultClosed?: boolean,
     
      // 分隔条默认的位置偏移,默认为`{ x: 0, y: 0 }`
      // 关于该属性的更多描述,见:https://www.npmjs.com/package/react-draggable
      defaultPosition?: object,
     
      // 当拖动分隔条改变尺寸后触发
      onResize?: (e, data) => {...}
     
      // 当点击 分隔条上的展开/关闭按钮后触发
      onToggleClose?: (e, prevElement, nextElement) => {...}
     
      // 自定义样式
      style?: object,
    }

    Install

    npm i resize-draggable

    DownloadsWeekly Downloads

    1

    Version

    1.3.4

    License

    MIT

    Unpacked Size

    38.6 kB

    Total Files

    7

    Last publish

    Collaborators

    • limoer