Expressions

An expression is a color literal, a length literal, or a property reference.[sls.expr.forms]

Color Literals

A color literal consists of # followed by 3, 4, 6, or 8 hexadecimal digits: #rgb, #rgba, #rrggbb, or #rrggbbaa. The digits are case-insensitive. Any other number of digits is an error.[sls.expr.color.forms]

The digits specify the red, green, blue, and alpha channels, in this order. When the alpha channel is absent, the color is fully opaque.[sls.expr.color.channels]

In the 3- and 4-digit forms, each digit specifies a channel with the digit duplicated: #18f is the same color as #1188ff.[sls.expr.color.short-forms]

A color literal evaluates to a value of type color.[sls.expr.color.type]

Length Literals

A length literal consists of a number directly followed by a unit, for example 120px.[sls.expr.length.form]

export component Example inherits Window {
    Rectangle {
        width: 120px;
        height: 80px;
        background: #2a6e3f;
    }
}

slint

The number shall be integral: 10.5px is an error.[sls.expr.length.integral]

px is the only unit. A number literal with another unit, or without a unit, is an error.[sls.expr.length.px-only]

A length literal evaluates to a value of type length.[sls.expr.length.type]

References

export component Example inherits Window {
    in property <color> tint;
    background: root.tint;
    Rectangle {
        background: root.tint;
        width: self.height;
    }
}

slint

A property reference refers to a property. It is a property name, optionally preceded by an element reference and a ..[sls.expr.ref.form]

The element reference is self for the enclosing element, parent for its parent, root for the component’s root element, or an element id.[sls.expr.ref.element]

The name shall refer to a property of the referenced element.[sls.expr.ref.target]

When reading, a property reference evaluates to the value of the referenced property, and has that property’s type.[sls.expr.ref.value]