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; }
    }
}

slint

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 Properties

spacing

lengthdefault: 0px

The distance between the elements in the layout.

Padding Properties

padding

lengthdefault: 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

lengthdefault: 0px

padding-right

lengthdefault: 0px

padding-top

lengthdefault: 0px

padding-bottom

lengthdefault: 0px

Alignment Properties

alignment

enum LayoutAlignmentdefault: the first enum value

Set the alignment along the main (vertical) axis. Matches the CSS flex box.

LayoutAlignment

Enum representing the alignment property of a HorizontalBox, a VerticalBox, a HorizontalLayout, a VerticalLayout, or a FlexboxLayout, and the cross-axis-line-alignment property of a FlexboxLayout.

For cross-axis-line-alignment, the values below apply to the flex lines instead of the elements.

• stretch: For alignment: use the minimum size of all elements in a layout, distribute remaining space based on *-stretch among all elements. For cross-axis-line-alignment: the flex lines have no stretch factor and share the remaining space equally.
• 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 between the elements, and use half spaces at the start and end.
• space-evenly: Use the preferred size for all elements, distribute remaining space evenly before the first element, after the last element and between elements.

cross-axis-alignment

enum CrossAxisAlignmentdefault: the first enum value

Set the alignment of items along the cross (horizontal) axis. The default is stretch, meaning each item fills the full width of the layout. The other values (start, end, center) size each item to its preferred width, clamped to its min/max, and position it at the left, right, or center of the layout’s content box.

export component Example inherits Window {
    width: 200px;
    height: 100px;
    VerticalLayout {
        cross-axis-alignment: end;
        Rectangle { background: red; preferred-width: 30px; preferred-height: 20px; }
        Rectangle { background: blue; preferred-width: 60px; preferred-height: 20px; }
        Rectangle { background: green; preferred-width: 90px; preferred-height: 20px; }
    }
}

slint

CrossAxisAlignment

Controls the alignment of items along the cross axis of a layout. Used as the cross-axis-alignment property of HorizontalLayout, VerticalLayout, and FlexboxLayout, and as the cross-axis-self-alignment property of their children, which overrides the container’s alignment for a single item.

• auto: The default: for cross-axis-self-alignment, use the container’s cross-axis-alignment value. For an unset cross-axis-alignment it is equivalent to stretch; it is an error to set it explicitly there.
• stretch: Items are stretched to fill the cross axis.
• start: Items are placed at the start of the cross axis.
• end: Items are placed at the end of the cross axis.
• center: Items are centered along the cross axis.

Cell elements

Cell elements inside a VerticalLayout obtain the following new properties:

cross-axis-self-alignment

enum CrossAxisAlignmentdefault: auto

Overrides the container’s cross-axis-alignment for this element. The default value auto uses the container’s cross-axis-alignment.

CrossAxisAlignment

Controls the alignment of items along the cross axis of a layout. Used as the cross-axis-alignment property of HorizontalLayout, VerticalLayout, and FlexboxLayout, and as the cross-axis-self-alignment property of their children, which overrides the container’s alignment for a single item.

• auto: The default: for cross-axis-self-alignment, use the container’s cross-axis-alignment value. For an unset cross-axis-alignment it is equivalent to stretch; it is an error to set it explicitly there.
• stretch: Items are stretched to fill the cross axis.
• start: Items are placed at the start of the cross axis.
• end: Items are placed at the end of the cross axis.
• center: Items are centered along the cross axis.

layout-order

intdefault: 0

Controls the visual order of the elements: they are laid out in ascending order value, and elements with the same value keep their declaration order.

VerticalLayout {
    Rectangle { layout-order: 2; }
    Rectangle { layout-order: 1; }  // appears first
}

slint

Only the visual order changes: keyboard focus still moves in declaration order.