FormGrid ​

FormGrid 组件

Markup Schema 案例 ​

:
:
:
:
:
:
:

JSON Schema 案例 ​

:
:
:
:
:
:
:

原生案例 ​

maxColumns 3 + minColumns 2

1
2
3
4
5
6

maxColumns 3

1
2
3
4
5
6

minColumns 2

1
2
3
4
5
6

Null

1
2
3
4
5
6

minWidth 150 +maxColumns 3

1
2
3
4
5
6

maxWidth 120+minColumns 2

1
2
3
4
5
6

maxWidth 120 + gridSpan -1

1
2
3

API ​

FormGrid ​

属性名类型描述默认值
minWidthnumber / number[]元素最小宽度100
maxWidthnumber / number[]元素最大宽度-
minColumnsnumber / number[]最小列数0
maxColumnsnumber / number[]最大列数-
breakpointsnumber[]容器尺寸断点[720,1280,1920]
columnGapnumber列间距8
rowGapnumber行间距4
colWrapboolean自动换行true
strictAutoFitbooleanGridItem 宽度是否严格受限于 maxWidth，不受限的话会自动占满容器false
shouldVisible(node,grid)=>boolean是否需要显示当前节点()=>true
gridGrid外部传入 Grid 实例，用于实现更复杂的布局逻辑-

注意：

  • minWidth 生效优先级高于 minColumn
  • maxWidth 优先级高于 maxColumn
  • minWidth/maxWidth/minColumns/maxColumns 的数组格式代表与断点数组映射

FormGrid.GridColumn ​

属性名类型描述默认值
gridSpannumber元素所跨列数，如果为-1，那么会自动反向跨列填补单元格1

FormGrid.createFormGrid ​

从上下文中读取 Grid 实例

ts
interface createFormGrid {
  (props: IGridProps): Grid
}

FormGrid.useFormGrid ​

从上下文中读取 Grid 实例

ts
interface useFormGrid {
  (): Grid
}

源代码 ​

文档