Layout

Layouts in andlabs UI are composed of horizontal and vertical boxes, each of which contain a list of child elements, which may be stretched or static. Horizontal boxes are laid out on a single row, and every control within has the same height (that is, matching the height of the tallest element). In a vertical box, the controls are laid out in a single column and every element is the same width (being that of the widest item). If the container is larger than the minimum required to fit the items, any extra space is shared between any element that was appended as stretchy—if none stretch, the items will remain left- or top-aligned.

To provide a visual separation between groups of elements, we can use the ui.Separator control, which draws a thin line horizontally or vertically—remember to mark it as not stretchy within the box layout. If you wish to introduce space within your layout without the visual line, you can create a blank label (using ui.Label("")) and set its stretchy parameter to true when appended to a box.