States

The states statement allows to declare states and set properties of multiple elements in one go:

export component Example inherits Window {
    preferred-width: 100px;
    preferred-height: 100px;
    default-font-size: 24px;

    label := Text { }
    ta := TouchArea {
        clicked => {
            active = !active;
        }
    }
    property <bool> active: true;
    states [
        active when active && !ta.has-hover: {
            label.text: "Active";
            root.background: blue;
        }
        active-hover when active && ta.has-hover: {
            label.text: "Active\nHover";
            root.background: green;
        }
        inactive when !active: {
            label.text: "Inactive";
            root.background: gray;
        }
    ]
}

slint

In this example, the active and active-hovered states are defined depending on the value of the active boolean property and the TouchArea’s has-hover. When the user hovers the example with the mouse, it will toggle between a blue and a green background, and adjust the text label accordingly. Clicking toggles the active property and thus enters the inactive state.

Transitions

Transitions bind animations to state changes.

This example defines two transitions. First the out keyword is used to animate all properties for 800ms when leaving the disabled state. The second transition uses the in keyword to animate the background when transitioning into the down state.

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

    text := Text { text: "hello"; }
    in-out property<bool> pressed;
    in-out property<bool> is-enabled;

    states [
        disabled when !root.is-enabled : {
            background: gray; // same as root.background: gray;
            text.color: white;
            out {
                animate * { duration: 800ms; }
            }
        }
        down when pressed : {
            background: blue;
            in {
                animate background { duration: 300ms; }
            }
        }
    ]
}

slint