Geometry

Properties

Every element has the four geometry properties x, y, width, and height, of type length.

x and y are the offsets from the element’s parent’s top-left corner to the element’s top-left corner. width and height are the element’s size, extending to the right and downwards from that corner.

The x and y properties of the root element are meaningless and shall not be used.

Binding x or y of the root element is deprecated. The window size can be set through width and height.

Defaults

When x has no binding, it defaults to (parent.width - self.width) / 2, and y to (parent.height - self.height) / 2: the value that centers the element within its parent along that axis.

When width or height has no binding, the default depends on the element type: a Rectangle has the same width or height as its parent.

Elements inside a layout are positioned and sized by the layout instead of these defaults.

In this example, both rectangles cover the whole window:

export component Example inherits Window {
    Rectangle {
        background: #2a6e3f;
        Rectangle {
        }
    }
}

slint

A binding of width or height that evaluates to a percentage is relative to the parent’s property of the same name: width: 50%; is short for width: parent.width * 50%;.