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 or y has no binding, the element is centered 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