Skip to content

布局分割组件(上下/左右/上下左右布局分割,且可以拖动布局的范围)

License

Notifications You must be signed in to change notification settings

lsbFlying/drag-division

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

DragDivision

DragDivision

分割拖拽组件,可上下方向分割拖拽,左右方向分割拖拽,可十字交叉垂直与水平方向双向拖拽 注意:容器层本身继承父节点的宽高,父节点或者容器层本身的宽高不能变化,否则会影响拖拽效果布局

Install

npm i drag-division

Usage

import { DragDivision } from "drag-division";
function App() {
  return (
    <DragDivision
      topNode={<div className="topDiv">123</div>}
      bottomNode={<div className="bottomDiv">456</div>}
      topMinHeight={"20%"}
      bottomMinHeight={"30%"}
      topHeight="30%"
      // divisionDirection="horizontal"
      // leftNode={<div className="topDiv">123</div>}
      // rightNode={<div className="bottomDiv">456</div>}
      // leftWidth="30%"
      // leftMinWidth={"20%"}
      // rightMinWidth={"30%"}
    />
  );
}

License

MIT License (c) 刘善保

About

布局分割组件(上下/左右/上下左右布局分割,且可以拖动布局的范围)

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published