1// Copyright © SixtyFPS GmbH <info@slint.dev>
2// SPDX-License-Identifier: MIT
3
4import { StateLayer } from "../components/state_layer.slint";
5import { ScrollView } from "scroll_view.slint";
6import { Theme } from "../theme.slint";
7import { StateLayer } from "../components/state_layer.slint";
8
9export component Item {
10 in property <string> text <=> i-text.text;
11 in property <bool> has-separator;
12
13 callback clicked <=> i-touch-area.clicked;
14
15 min-height: 40px;
16
17 i-container := Rectangle {
18 background: Theme.palette.dark-deep-blue;
19 border-radius: 4px;
20 }
21
22 i-touch-area := TouchArea {}
23
24 HorizontalLayout {
25 padding-left: Theme.spaces.medium;
26 padding-top: Theme.spaces.medium;
27 padding-bottom: Theme.spaces.medium;
28 padding-right: Theme.spaces.medium;
29 spacing: Theme.spaces.medium;
30
31 i-text := Text {
32 horizontal-stretch: 1;
33 color: Theme.palette.white;
34 font-size: Theme.typo.description.size;
35 font-weight: Theme.typo.description.weight;
36 vertical-alignment: center;
37 }
38
39 @children
40 }
41
42 if (has-separator) : Rectangle {
43 width: parent.width - 2 * Theme.spaces.medium;
44 height: 1px;
45 x: Theme.spaces.medium;
46 y: parent.height - self.height;
47 background: Theme.palette.slint-blue-300;
48 opacity: 0.25;
49 }
50}
51export component ItemGroupBox {
52 in property <string> title <=> i-title.text;
53
54 VerticalLayout {
55 HorizontalLayout {
56 padding: Theme.spaces.medium;
57
58 i-title := Text {
59 color: Theme.palette.white;
60 font-size: Theme.typo.header.size;
61 font-weight: Theme.typo.header.weight;
62 }
63 }
64
65 Rectangle {
66 background: Theme.palette.dark-deep-blue;
67 border-radius: 4px;
68
69 VerticalLayout {
70 @children
71 }
72 }
73 }
74}
75