slint/demos/usecases/ui/widgets/container.slint

// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT

import { Palette, VerticalBox } from "std-widgets.slint";
import { UsecasesPalette } from "styling.slint";

export component StateContainer inherits Rectangle {
    callback clicked <=> touch-area.clicked;

    in property <bool> checked;

    background: Palette.alternate-background;
    border-radius: 8px;

    touch-area := TouchArea {}

    state-layer := Rectangle {
        border-radius: root.border-radius;

        states [
            pressed when touch-area.pressed : {
                state-layer.background: UsecasesPalette.state-pressed;
            }
            hover when touch-area.has-hover : {
                state-layer.background: UsecasesPalette.state-hover;
            }
            checked when root.checked : {
                state-layer.background: UsecasesPalette.state-selected;
            }
        ]
    }

    @children
}

export component Container inherits Rectangle {
    background: Palette.alternate-background;
    border-radius: 8px;
    border-width: 1px;

    VerticalBox {
        @children
    }
}