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,
}

Package Sidebar

Install

npm i resize-draggable

Weekly Downloads

2

Version

1.3.4

License

MIT

Unpacked Size

38.6 kB

Total Files

7

Last publish

Collaborators

  • limoer