Grid
容器属性
所有组件配置的第一层均支持容器属性
组件属性 componentsProps
| Name | Type | Default | 是否支持 Variable Pattern | Description |
|---|---|---|---|---|
| className | string | ✔️ | Root div 的 className | |
| style | object | Root div 的 style | ||
| blankChildPlace | bool | true | 当子元素设置为隐藏的时候,是否占据一个空白位置 | |
| colNumber | number | 12 | Grid 的列的数量 | |
| gap | number | 8 | Grid 行和列之间的间距,等同 css flex 的属性 | |
| rowGap | number | Grid 行之间的间距,等同 css flex 的属性 | ||
| columnGap | number | Grid 列之间的间距,等同 css flex 的属性 | ||
| justifyItems | string | 等同 css flex 的属性 | ||
| justifyContent | string | 等同 css flex 的属性 | ||
| alignContent | object | 等同 css flex 的属性 |
所有其余 componentsProps 将会被传给组件根元素(div)。
子组件容器属性
Gird 组件的所有儿子组件在容器属性级别都支持额外支持一个 span 属性,用来决定儿子在一行里横跨的列数。
| Name | Type | Default | Description |
|---|---|---|---|
| span | number | 1 | 子组件在 Grid 组件的 colNumber 当中占据的列数,例如,当 colNumber 等于 12 的时候,子组件设置 "span": 4 表示占据一行的三分之一 |
JS API
通过 formApi.getFieldApi() 获取的接口如下:
| Name | Type | Description |
|---|---|---|
| node | HTML Element | 组件的根 DOM 元素 |