mirror of
https://github.com/slint-ui/slint.git
synced 2025-08-22 11:24:10 +00:00
072d8fabcb
Add material, material-light and material-dark widgets and make it available by the `env` `SLINT_STYLE`.
60 lines
No EOL
1.7 KiB
Text
60 lines
No EOL
1.7 KiB
Text
// Copyright © SixtyFPS GmbH <info@slint-ui.com>
|
|
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial
|
|
|
|
|
|
import { md } from "md.slint";
|
|
|
|
// A container widget with a title.s
|
|
export GroupBox := Rectangle {
|
|
property <string> title <=> label.text;
|
|
property<bool> enabled: true;
|
|
|
|
container := Rectangle {
|
|
border-radius: 4px;
|
|
border-width: 1px;
|
|
border-color: md.sys.color.outline;
|
|
y: layout.padding-top;
|
|
width: layout.width;
|
|
height: layout.height - layout.padding-top;
|
|
}
|
|
|
|
label-container := Rectangle {
|
|
x: 8px;
|
|
y: container.y;
|
|
width: label.width + 8px;
|
|
height: label.height + 8px;
|
|
background: md.sys.color.background;
|
|
|
|
label := Text {
|
|
x: 4px;
|
|
y: 4px;
|
|
width: min(root.width - 24pt, preferred-width);
|
|
|
|
color: md.sys.color.on-surface;
|
|
// FIXME after Roboto font can be loaded
|
|
//font-family: md.sys.typescale.body-small.font;
|
|
font-size: md.sys.typescale.body-small.size;
|
|
font-weight: md.sys.typescale.body-small.weight;
|
|
overflow: elide;
|
|
}
|
|
}
|
|
|
|
layout := HorizontalLayout {
|
|
padding-top: label-container.height / 2;
|
|
GridLayout {
|
|
padding-top: 16pt + label-container.height / 2;
|
|
padding-left: 16px;
|
|
padding-right: 16px;
|
|
padding-bottom: 16px;
|
|
@children
|
|
}
|
|
}
|
|
|
|
states [
|
|
disabled when !enabled : {
|
|
container.border-color: md.sys.color.on-surface;
|
|
container.opacity: 0.38;
|
|
label.opacity: 0.38;
|
|
}
|
|
]
|
|
} |