slint/internal/compiler/widgets/material/groupbox.slint

// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0

import { MaterialPalette, MaterialFontSettings } from "styling.slint";

// A container widget with a title.
export component GroupBox {
    in property <string> title;
    in property <bool> enabled: true;
    in property <length> content-padding: 16px;

    accessible-role: groupbox;
    accessible-label: root.title;
    accessible-enabled: root.enabled;

    states [
        disabled when !root.enabled : {
            background.border-color: MaterialPalette.control-foreground;
            background.opacity: 0.38;
        }
    ]

    VerticalLayout {
        spacing: 4px;

        if root.title != "" : Text {
            color: MaterialPalette.control-foreground;
            // FIXME after Roboto font can be loaded
            //font-family: MaterialFontSettings.body-small.font;
            font-size: MaterialFontSettings.body-large.font-size;
            font-weight: MaterialFontSettings.body-small.font-weight;
            overflow: elide;
            horizontal-alignment: center;
            text: root.title;

            states [
                disabled when !root.enabled : {
                    opacity: 0.38;
                }
            ]
        }

        background := Rectangle {
            border-radius: 16px;
            border-width: 1px;
            border-color: MaterialPalette.border;
            vertical-stretch: 1;
            background: MaterialPalette.alternate-background;

            GridLayout {
                padding: root.content-padding;

                @children
            }
        }
    }
}