slint/demos/energy-monitor/ui/widgets/item.slint

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

import { StateLayer } from "../components/state_layer.slint";
import { ScrollView } from "scroll_view.slint";
import { Theme } from "../theme.slint";
import { StateLayer } from "../components/state_layer.slint";

export component Item {
    in property <string> text <=> i-text.text;
    in property <bool> has-separator;

    callback clicked <=> i-touch-area.clicked;

    min-height: 40px;

    i-container := Rectangle {
        background: Theme.palette.dark-deep-blue;
        border-radius: 4px;
    }

    i-touch-area := TouchArea {}

    HorizontalLayout {
        padding-left: Theme.spaces.medium;
        padding-top: Theme.spaces.medium;
        padding-bottom: Theme.spaces.medium;
        padding-right: Theme.spaces.medium;
        spacing: Theme.spaces.medium;

        i-text := Text {
            horizontal-stretch: 1;
            color: Theme.palette.white;
            font-size: Theme.typo.description.size;
            font-weight: Theme.typo.description.weight;
            vertical-alignment: center;
        }

        @children
    }

    if (has-separator) : Rectangle {
        width: parent.width - 2 * Theme.spaces.medium;
        height: 1px;
        x: Theme.spaces.medium;
        y: parent.height - self.height;
        background: Theme.palette.slint-blue-300;
        opacity: 0.25;
    }
}
export component ItemGroupBox {
    in property <string> title <=> i-title.text;

    VerticalLayout {
        HorizontalLayout {
            padding: Theme.spaces.medium;

            i-title := Text {
                color: Theme.palette.white;
                font-size: Theme.typo.header.size;
                font-weight: Theme.typo.header.weight;
            }
        }

       Rectangle {
            background: Theme.palette.dark-deep-blue;
            border-radius: 4px;

            VerticalLayout {
                @children
            }
        }
    }
}