跳到主要内容

Grid

容器属性

所有组件配置的第一层均支持容器属性

组件属性 componentsProps

NameTypeDefault是否支持 Variable PatternDescription
classNamestring✔️Root div 的 className
styleobjectRoot div 的 style
blankChildPlacebooltrue当子元素设置为隐藏的时候,是否占据一个空白位置
colNumbernumber12Grid 的列的数量
gapnumber8Grid 行和列之间的间距,等同 css flex 的属性
rowGapnumberGrid 行之间的间距,等同 css flex 的属性
columnGapnumberGrid 列之间的间距,等同 css flex 的属性
justifyItemsstring等同 css flex 的属性
justifyContentstring等同 css flex 的属性
alignContentobject等同 css flex 的属性

所有其余 componentsProps 将会被传给组件根元素(div)。

子组件容器属性

Gird 组件的所有儿子组件在容器属性级别都支持额外支持一个 span 属性,用来决定儿子在一行里横跨的列数。

NameTypeDefaultDescription
spannumber1子组件在 Grid 组件的 colNumber 当中占据的列数,例如,当 colNumber 等于 12 的时候,子组件设置 "span": 4 表示占据一行的三分之一

JS API

通过 formApi.getFieldApi() 获取的接口如下:

NameTypeDescription
nodeHTML Element组件的根 DOM 元素