Row

The Row component is used when you want the components added to it to be arranged in columns. It is similar to how the Section component works when the columns key is set to null, except it doesn't provide a title above the content.

Schema

Below is an example of the schema required to define a Row.

{
    "type": "Row",
    "options": {
        "columns": 1,
        "width": 2/3
    },
    "components": [...]
}

Description

Key	Type	Description
width	String	Optional. The width of the component, when inside a Section or Row component with their columns option set to null.
horizontal_margin	Number	Optional. Margin added horizontally to the element. Defaults to 3. Accepts any integer between 1 - 12, 14 or 16.
vertical_margin	Number	Optional. Margin added vertically to the element. Defaults to 1. Accepts any integer between 1 - 12, 14 or 16.
column_spacing	Number	Optional. Spacing between components rendered as columns. Defaults to 3. Accepts any integer between 1 - 12, 14 or 16.
columns	Number	Optional. The number of columns to divide the section up into. See below for more details.
align	String	Optional. Defaults to left. The alignment of content within the component, can be either left, centre or right.
$components	Array<Object>	The components to add within the section.

Justification / alignment

If the columns key is set to null, then the child components can take on width values (e.g. 1/3). In such a scenario, the align key can be used to either left, right or centre align them within the Row.

Width

The width key supports defining the width using a fraction specified as a string e.g. 1/3. The values for the denominator supported are 2, 3, 4, 5, 6 and 12, whilst the numerator can be any value up to the value of the denominator.

If the width key is set to null, then the component will attempt to fill all the available horizontal space.

Columns

If options.columns is set to null, all the components inside will stack horizontally together, automatically adjusting their widths to attempt to fit. In this mode, you can use the width option for the child components, to control their widths more precisely. For example, one component can be set to span 1/3 the width, and the other to be 2/3 the width.

Note If too many components are added, they may spill off the page out of view.

If a number is provided, the section is divided into as many columns, and each child component spans exactly one column by default.

Components / extendable

This component is extendable, meaning it supports adding components within it. To add components inside, simply add the objects defining the components inside the components key.