Column

Overview

The Column component is designed to arrange its child components in a vertical sequence. This layout mechanism is fundamental for creating structured and organized UIs that require vertical stacking of elements, such as forms, lists, or any content that follows a top-to-bottom flow.

Sample JSON

Below is a sample JSON object demonstrating how to define a Column component with various child components and style properties:

column.json

{
  "type": "column",
  "data": {
    "children": [
      {
        "type": "text",
        "data": {
          "text": "Hello World"
        },
        "style": {
          "fontStyle": "heading1",
          "fontSize": 18,
          "fontColor": "ff0000",
          "fontColorDark": "FFC0CB",
          "fontWeight": "bold",
          "maxLines": 2,
          "padding": {
            "top": 0,
            "bottom": 10,
            "left": 0,
            "right": 0
          }
        }
      },
      {
        "type": "text",
        "data": {
          "text": "Hello World 2"
        },
        "style": {
          "fontStyle": "heading1",
          "fontColor": "0000ff",
          "padding": {
            "top": 0,
            "bottom": 10,
            "left": 0,
            "right": 0
          }
        }
      }
    ]
  },
  "style": {
    "alignment": "leading",
    "spacing": 8,
    "padding": {
      "top": 0,
      "bottom": 0,
      "left": 16,
      "right": 16
    }
  }
}

This results in the following output:

Hello World

Hello World 2

This JSON structure creates a Column component that vertically stacks two Text components with specific styles. The alignment property is set to "leading", meaning the children are aligned to the start of the column (typically the left side in left-to-right languages). The spacing property defines an 8-pixel gap between each child component, and padding adds space around the entire set of children within the column.

Data Properties

The data properties define the content structure of the Column component. The following table lists the available data property for the Column component:

Property	Type	Required	Description
children	[Components]	true	An array of components to be displayed in a vertical stack.

Style Properties (Optional)

Style properties allow you to customize the layout and spacing of the Column component.

info

The style properties are optional. If you don't specify any style properties, the Column component will use default alignment, spacing, and padding.

The following table lists the available style properties for the Column component:

Property	Type	Platform	Required	Description
alignment	String	iOS	false	Aligns the children horizontally within the column according to the specified guide. Common values are "leading", "center", and "trailing".
spacing	Float	android, iOS	false	The gap between adjacent components.
horizontal_alignment	String	android	false	Specifies how to align the Column's children horizontally. Common values include "Start", "CenterHorizontally", or "End".
vertical_alignment	String	android	false	Specifies how to align the Column's children vertically. Common values include "Top", "CenterVertically", or "Bottom".
padding	JSON	android, iOS	false	The padding around the column component.

alignment

• Type: String (optional)
• Description: Specifies the horizontal alignment of child components within the column. Common values include "leading", "center", and "trailing", affecting how items are positioned along the cross axis of the column layout.

spacing

• Type: Float (optional)
• Description: Determines the vertical space between each child component. This property allows for consistent spacing throughout the column, enhancing visual separation and readability.

horizontal_alignment

• Type: String (optional)
• Description: Specifies how to align the Column's children horizontally. Common values include "Start", "CenterHorizontally", and "End". This property affects the alignment along the main axis.

vertical_alignment

• Type: String (optional)
• Description: Specifies how to align the Column's children vertically. Common values include "Top", "CenterVertically", and "Bottom". This property affects the alignment along the cross axis.

padding

• Type: JSON (optional)
• Description: Defines the space around the component. The padding is specified for top, bottom, left, and right individually. Each subproperty is an integer representing the number of logical pixels for the padding.
  • top: The space above the component.
  • bottom: The space below the component.
  • left: The space to the left of the component.
  • right: The space to the right of the component.

note

The Column component is a versatile tool for vertical layout management in app UIs, enabling developers to create cohesive and accessible designs.