文件名称:layoutcontainer:用于常见Web布局的布局调整大小引擎
文件大小:192KB
文件格式:ZIP
更新时间:2024-06-07 14:55:56
JavaScript
布局容器 布局容器是调整大小的引擎,当用户更改容器中拆分器的位置时,它可以自动计算容器的对应区域的正确位置。 用户可以通过为此引擎提供拖动偏移来实现拖动调整大小的行为,并且它将相应地更新数据。 同样,将发出事件以通知消费者数据模型中的更改。 观看演示: 现场演示: : 安装 > npm i layoutcontainer 概念 1.容器,区域和单元 布局容器最多包含5个区域: 每个区域可以是一个单元格或一个布局容器,因此我们可以灵活地构建完整的布局结构。 2.分离器 分离器是将容器内不同区域分开的边缘。 移动拆分器时,我们将处理相应区域的大小调整: 3.路径 路径是代表区域的字符串数组。 例如,在根容器的中心区域旁边的尾随拆分器或尾随单元格的路径为: let path = [ "center" , "trailing" ] 容易如1-2-3 1.准备数据 使用数据来表示布局结
【文件预览】:
layoutcontainer-master
----.gitignore(12B)
----webpack.dev.js(311B)
----package.json(705B)
----dist()
--------LayoutContainer.js(13KB)
--------example.js(18KB)
----index.js(5KB)
----_config.yml(26B)
----webpack.prod.js(296B)
----README.md(7KB)
----imgs()
--------splitters.png(67KB)
--------regions.png(66KB)
----webpack.common.js(672B)
----example()
--------data1.json(1KB)
--------data2.json(2KB)
--------example.js(6KB)
--------data3.json(895B)
----index.html(1KB)
----utls()
--------ResizeDetector.js(3KB)
--------SplitterResizer.js(7KB)
--------Mover.js(839B)
--------RegionResizer.js(3KB)
--------Constants.js(87B)
--------BorderResizer.js(13KB)
----yarn.lock(197KB)