layer-shika/examples/session-lock/ui/lock.slint

import { Button, LineEdit, HorizontalBox } from "std-widgets.slint";

export component Main inherits Window {
    background: transparent;
    callback lock_requested();

    default-font-size: 16px;
    HorizontalLayout {
        alignment: center;
        Button {
            text: "Lock";
            clicked => root.lock_requested();
        }
    }
}

export component LockScreen inherits Window {
    in-out property <string> password;
    callback unlock_requested(string);

    Rectangle {
        width: 100%;
        height: 100%;

        HorizontalLayout {
            alignment: center;

            VerticalLayout {
                alignment: center;

                Text {
                    text: "Session Locked";
                    font-size: 28px;
                }

                Text {
                    text: "Enter a password to unlock";
                }

                VerticalLayout {
                    width: 255px;

                    LineEdit {
                        text: root.password;
                        edited => {
                            root.password = self.text;
                        }
                    }

                    Button {
                        text: "Unlock";
                        clicked => {
                            root.unlock_requested(root.password);
                        }
                    }
                }
            }
        }
    }
}