1// Copyright © SixtyFPS GmbH <info@slint.dev>
2// SPDX-License-Identifier: MIT
3
4import { Button, GroupBox, SpinBox, ComboBox, CheckBox, LineEdit, TabWidget, VerticalBox, HorizontalBox,
5 Slider, ProgressIndicator, SpinBox, Switch, Spinner, GridBox } from "std-widgets.slint";
6import { GallerySettings } from "../gallery_settings.slint";
7import { Page } from "page.slint";
8
9export component ControlsPage inherits Page {
10 title: @tr("Controls");
11 description: @tr("This page gives an overview of the default widget set provided by Slint. The widgets are available in different styles native, fluent-(dark/light) and material-(dark/light). The widgets can be imported from \"std-widgets.slint\".");
12
13 GroupBox {
14 vertical-stretch: 0;
15 title: @tr("Buttons");
16
17 VerticalLayout {
18 padding: 0px;
19
20 HorizontalBox {
21 alignment: start;
22
23 Button {
24 text: @tr("Regular Button");
25 enabled: GallerySettings.widgets-enabled;
26 }
27
28 Button {
29 text: @tr("Primary Button with Icon");
30 icon: @image-url("../../thumbsup.png");
31 enabled: GallerySettings.widgets-enabled;
32 primary: true;
33 }
34
35 Button {
36 icon: @image-url("../../thumbsup.png");
37 enabled: GallerySettings.widgets-enabled;
38 primary: true;
39 }
40
41 Button {
42 checkable: true;
43 text: self.checked ? @tr("ON") : @tr("OFF");
44 enabled: GallerySettings.widgets-enabled;
45 }
46 }
47
48 HorizontalBox {
49 alignment: start;
50
51 Button {
52 text: @tr("Primary Button with colorized icon");
53 icon: @image-url("../../thumbsup.png");
54 enabled: GallerySettings.widgets-enabled;
55 colorize-icon: true;
56 primary: true;
57 }
58 }
59 }
60 }
61
62 GroupBox {
63 title: @tr("CheckBox - ComboBox - Switch");
64 vertical-stretch: 0;
65
66 HorizontalBox {
67 alignment: start;
68 padding: 0px;
69
70 checkbox := CheckBox {
71 text: checkbox.checked ? @tr("(checked)") : @tr("(unchecked)");
72 checked: true;
73 enabled: GallerySettings.widgets-enabled;
74 }
75
76 ComboBox {
77 model: [@tr("Select Something"), @tr("From this"), @tr("Combobox")];
78 enabled: GallerySettings.widgets-enabled;
79 }
80
81 Switch {
82 text: @tr("Flight Mode");
83 checked: true;
84 enabled: GallerySettings.widgets-enabled;
85 }
86 }
87 }
88
89 GroupBox {
90 title: @tr("LineEdit - SpinBox");
91 vertical-stretch: 0;
92
93 HorizontalBox {
94 alignment: start;
95 padding: 0px;
96
97 LineEdit {
98 placeholder-text: @tr("Enter some text");
99 enabled: GallerySettings.widgets-enabled;
100 }
101
102 SpinBox {
103 vertical-stretch: 0;
104 value: 42;
105 enabled: GallerySettings.widgets-enabled;
106 }
107 }
108 }
109
110 GroupBox {
111 title: @tr("Slider");
112 vertical-stretch: 0;
113
114 i-slider := Slider {
115 min-width: 160px;
116 minimum: -100;
117 maximum: 100;
118 value: 42;
119 enabled: GallerySettings.widgets-enabled;
120 }
121 }
122
123 GroupBox {
124 title: @tr("ProgressIndicator | Spinner");
125 vertical-stretch: 0;
126
127 GridBox {
128 spacing: 16px;
129
130 i-progress-indicator := ProgressIndicator {
131 row: 0;
132 col: 0;
133 min-width: 160px;
134 progress: (i-slider.value - i-slider.minimum) / (i-slider.maximum - i-slider.minimum);
135 indeterminate: true;
136 }
137
138 Rectangle {
139 row: 0;
140 col: 1;
141 rowspan: 2;
142 Spinner {
143 progress: i-progress-indicator.progress;
144 indeterminate: i-progress-indicator.indeterminate;
145 }
146 }
147
148 CheckBox {
149 row: 1;
150 col: 0;
151 text: @tr("indeterminate");
152 checked <=> i-progress-indicator.indeterminate;
153 }
154 }
155 }
156
157 GroupBox {
158 title: @tr("TabWidget");
159
160 TabWidget {
161 Tab {
162 title: @tr("Tab 1");
163
164 VerticalBox {
165 alignment: start;
166
167 GroupBox {
168 title: @tr("Content of tab 1");
169
170 HorizontalBox {
171 alignment: start;
172
173 Button {
174 text: @tr("Click me");
175 enabled: GallerySettings.widgets-enabled;
176 }
177 }
178 }
179 }
180 }
181
182 Tab {
183 title: @tr("Tab 2");
184
185 VerticalBox {
186 alignment: start;
187
188 GroupBox {
189 title: @tr("Content of tab 2");
190
191 VerticalBox {
192 alignment: start;
193
194 CheckBox {
195 text: @tr("Check me");
196 enabled: GallerySettings.widgets-enabled;
197 }
198 }
199 }
200 }
201 }
202
203 Tab {
204 title: @tr("Tab 3");
205
206 VerticalBox {
207 Text {
208 text: @tr("Content of tab 3");
209 }
210 }
211 }
212 }
213 }
214}
215