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.
Below is an example of the schema required to define a Row
.
{
"type": "Row",
"options": {
"columns": 1,
"width": 2/3
},
"components": [...]
}
Key | Type | Description |
---|---|---|
option.width |
String |
Optional. The width of the component, when inside a Section or Row component with their columns option set to null . |
option.columns |
Number |
Optional. The number of columns to divide the section up into. See below for more details. |
components |
Array<Object> |
The components to add within the section. |
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.
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.
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.
Hybiscus is continuously improving and adding new features. If you think we are missing a critical feature, please do not hesitate to contact us and offer your feedback at info@hybiscus.dev