Geometry

Properties

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

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.[sls.geom.relative]

The x and y properties of the root element are meaningless and shall not be used.[sls.geom.window.root]

Binding a geometry property of the root element is an error.[sls.geom.window]

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.[sls.geom.default-position]

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.[sls.geom.default-size]

In this example, both rectangles cover the whole window:[sls.geom.example.intro]

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

slint