HorizontalLayout

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

slint

Places its children next to each other horizontally. 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

length default: 0px

The distance between the elements in the layout.

Padding Properties

padding

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

length default: 0px

padding-right

length default: 0px

padding-top

length default: 0px

padding-bottom

length default: 0px

Alignment Properties

alignment

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.