mirror of
https://github.com/slint-ui/slint.git
synced 2025-09-30 13:51:13 +00:00
7a01e3c0cb
Now it's also possible to toggle checked by click on the text of the CheckBox similar to fluent design GroupBox now respect the minimum width of the title, to avoid elision Adopt SpinBox: set focus when buttons are clicked #1795 on md SpinBox
59 lines
1.7 KiB
Text
59 lines
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.
|
|
export GroupBox := Rectangle {
|
|
property <string> title <=> label.text;
|
|
property<bool> enabled: true;
|
|
|
|
min-width: max(label-container.width + 16px, layout.min-width);
|
|
|
|
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;
|
|
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;
|
|
}
|
|
]
|
|
}
|