Bindings

Form

A binding assigns an expression to a property of the element in whose body it appears. It has the form of a property name, followed by :, an expression, and ;.[sls.binding.form]

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

slint

The name shall refer to a property of the enclosing element.[sls.binding.target-must-exist]

The type of the expression shall be the type of the property, or convert to it.[sls.binding.type]

Expressions

An expression is a color literal or a length literal.[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]