getting started
premium components
deprecated components
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. Only applies when inside a Section or Row component whose columns option is 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
For details on the width
key, please see here.
Columns
For details on the columns key, please see here.
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.
Missing something?
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