VerticalLayout

export component Foo inherits Window {
    width: 200px;
    height: 100px;
    VerticalLayout {
        spacing: 5px;
        Rectangle { background: red; width: 10px; }
        Rectangle { background: blue; min-width: 10px; }
        Rectangle { background: yellow; vertical-stretch: 1; }
        Rectangle { background: green; vertical-stretch: 2; }
    }
}

Places its children next to each other vertically. The size of elements can either be fixed with the width or height property, or if they aren’t set they will be computed by the layout respecting the minimum and maximum sizes and the stretch factor.

spacing

type: length
default: 0px

The distance between the elements in the layout.

Padding Properties

padding

type: length
default: 0px

The padding within the layout as a whole. This single value is applied to all sides.

To target specific sides with different values use the following properties:

padding-left

type: length
default: 0px

padding-right

type: length
default: 0px

padding-top

type: length
default: 0px

padding-bottom

type: length
default: 0px

Alignment Properties

alignment

type: enum LayoutAlignment
default: the first enum value

LayoutAlignment

Enum representing the alignment property of a HorizontalBox, a VerticalBox, a HorizontalLayout, or VerticalLayout.

• stretch: Use the minimum size of all elements in a layout, distribute remaining space based on *-stretch among all elements.
• center: Use the preferred size for all elements, distribute remaining space evenly before the first and after the last element.
• start: Use the preferred size for all elements, put remaining space after the last element.
• end: Use the preferred size for all elements, put remaining space before the first element.
• space-between: Use the preferred size for all elements, distribute remaining space evenly between elements.
• space-around: Use the preferred size for all elements, distribute remaining space evenly before the first element, after the last element and between elements.

Set the alignment. Matches the CSS flex box.