layer-shika/examples/runtime-surface-config/ui/bar.slint

// Runtime Control Example - Interactive Status Bar

import { Button } from "std-widgets.slint";
export component Bar inherits Window {
    in-out property <bool> is-expanded: false;
    in-out property <string> current-anchor: "Top";
    in-out property <string> current-layer: "Top";

    callback toggle-size(bool);
    callback switch-anchor(string);
    callback switch-layer(string);

    function next-anchor(current: string) -> string {
        if (current == "Top") {
            return "Bottom";
        } else {
            return "Top";
        }
    }

    function next-layer(current: string) -> string {
        if (current == "Top") {
            return "Overlay";
        } else if (current == "Overlay") {
            return "Bottom";
        } else if (current == "Bottom") {
            return "Background";
        } else {
            return "Top";
        }
    }

    HorizontalLayout {
        spacing: 12px;

        Text {
            text: "Click buttons to control surface";
            vertical-alignment: center;
        }

        Text {
            text: "Anchor: " + current-anchor;
            font-size: 12px;
            vertical-alignment: center;
        }

        Text {
            text: "Layer: " + current-layer;
            font-size: 12px;
            vertical-alignment: center;
        }

        Rectangle {
            horizontal-stretch: 1;
        }

        Button {
            text: is-expanded ? "Collapse" : "Expand";
            clicked => {
                root.is-expanded = !root.is-expanded;
                toggle-size(root.is-expanded);
            }
        }

        Button {
            text: "Switch Anchor";
            clicked => {
                root.current-anchor = next-anchor(root.current-anchor);
                switch-anchor(root.current-anchor);
            }
        }

        Button {
            text: "Switch Layer";
            clicked => {
                root.current-layer = next-layer(root.current-layer);
                switch-layer(root.current-layer);
            }
        }
    }
}