Column

A layout component that arranges its children vertically. To create a grid layout, nest Rows within this Column.

组件展示

Item 1

Item 2

Item 3

属性

属性名

类型

必需性

描述

id*

ComponentId

必需

暂无描述

accessibility

AccessibilityAttributes

可选

暂无描述

styles

Styles

可选

Component style properties

weight

number

可选

The relative weight of this component within a Row or Column. This is similar to the CSS 'flex-grow' property. Note: this may ONLY be set when the component is a direct descendant of a Row or Column.

component*

"Column"

必需

暂无描述

children*

ComponentId[] | object

必需

暂无描述

justify

可选

Defines the arrangement of children along the main axis (vertically). Use 'spaceBetween' to push items to the edges (e.g. header at top, footer at bottom), or 'start'/'end'/'center' to pack them together.

可选值: start, center, end, spaceBetween, spaceAround, spaceEvenly, stretch

align

"center" | "end" | "start" | "stretch"

可选

Defines the alignment of children along the cross axis (horizontally). This is similar to the CSS 'align-items' property.

可选值: center, end, start, stretch

代码示例

{
  "component": "Column",
  "id": "column_1",
  "children": {}
}