Expressions

Expressions are a powerful way to declare relationships and connections in your user interface. They´re typically used to combine basic arithmetic with access to properties of other elements. When these properties change, the expression is automatically re-evaluated and a new value is assigned to the property the expression is associated with:

export component Example {
    // declare a property of type int
    in-out property<int> my-property;

    // This accesses the property
    width: root.my-property * 20px;

}

slint

When my-property changes, the width changes automatically, too.

Arithmetic in expression with numbers works like in most programming languages with the operators *, +, -, /:

export component Example {
    in-out property <int> p: 1 * 2 + 3 * 4; // same as (1 * 2) + (3 * 4)
}

slint

Concatenate strings with +.

The operators && and || express logical and and or between boolean values. The operators ==, !=, >, <, >= and <= compare values of the same type.

Access an element’s properties by using its name, followed by a . and the property name:

export component Example {
    foo := Rectangle {
        x: 42px;
    }
    x: foo.x;
}

slint

The ternary operator ... ? ... : ... is also supported, like in C or JavaScript:

export component Example inherits Window {
    preferred-width: 100px;
    preferred-height: 100px;

    Rectangle {
        touch := TouchArea {}
        background: touch.pressed ? #111 : #eee;
        border-width: 5px;
        border-color: !touch.enabled ? #888
            : touch.pressed ? #aaa
            : #555;
    }
}

slint

Statements

Let statements (local variables)

The let keyword can be used to create local variables. Local variables are immutable and cannot be redeclared (even in other scopes). They optionally have a type annotation.

clicked => {
    let foo = "hello world"; // no type annotation, inferred type
    debug(foo); // prints "hello world"

    let bar: int = 2; // explicit type annotation
    debug(bar); // prints "2"
}

slint

Assignment

clicked => { some-property = 42; }

slint

Self-assignment with += -= *= /=

clicked => { some-property += 42; }

slint

Calling a callback

clicked => { root.some-callback(); }

slint

Conditional statements

clicked => {
    if (condition) {
        foo = 42;
    } else if (other-condition) {
        bar = 28;
    } else {
        foo = 4;
    }
}

slint

Empty expression

clicked => { }
// or
clicked => { ; }

slint