1.0.2 • Published 5 years ago
ng2-grid-layout v1.0.2
Ng2GridLayout
This project was generated with Angular CLI version 6.2.8.
#Registory https://github.com/MusixNotMusic/ng2-grid-layout
Development server
ng serve #启动项目Build Lib
ng build grid-layout #构建liblayout
(layout)
+---------------------------------------------------------------------------------------------------+ -
| +----------+ +-----------+ | |
| | | | <--w--> | | |
| | | | | | |
| +----------+ +-----------+ | H
| +----------+ (grid) | |
| | | | |
| | | | |
| +----------+ | |
+---------------------------------------------------------------------------------------------------+ -
|<------------------------------------browser width------------------------------------------------>|NgGridLayout.Component
| 参数 | 类型 | 默认值 | 含义 |
|---|---|---|---|
| colNum | number | 12 | 允许每列最多排序个数 |
| rowHeight | number | 30 | 行高度 |
| maxRows | number | Infinity | 最大行数 |
| margin | Array <number> | 10,10 | 栅格之间距离 |
| isDraggable | boolean | true | 可拖拽 |
| isResizable | boolean | true | 可伸缩 |
| useCssTransforms | boolean | true | 使用css3动画 transform |
| verticalCompact | boolean | true | 对齐方式 |
| layout | Array <object> | 具体布局数据 | |
| responsive | boolean | true | 响应式 |
| breakpoints | object | { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 } | 响应式设备宽度 |
| cols | object | { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 } | 响应式 对应colNum值 |
NgGridItem.Component
| 参数 | 类型 | 默认值 | 含义 |
|---|---|---|---|
| componentData | object | 动态组件数据{component: xxx, data:xxx} | |
| isDraggable | boolean | 栅格是否drag | |
| isResizable | boolean | 栅格是否resize | |
| minH | number | 1 | 栅格最小高度 |
| minW | number | 1 | 栅格最小宽度 |
| maxH | number | Infinity | 栅格最大高度 |
| maxW | number | Infinity | 栅格最大宽度 |
| x | number | 栅格位于layout(布局)图中的x轴位置 | |
| y | number | 栅格位于layout(布局)图中的y轴位置 | |
| w | number | 栅格 在 layout(布局)图中的 单位 宽度 | |
| h | number | 栅格 在 layout(布局)图中的 单位 高度 | |
| i | number | layout中记录的索引index | |
| rowHeight | number | 10 | 单位行高 |
| static | boolean | false | 栅格是否静止 |