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, TimePickerPopup, DatePickerPopup } 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 - TimePickerPopup - DatePickerPopup");
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 time-picker-button := Button {
109 text: @tr("Open TimePickerPopup");
110
111 clicked => {
112 time-picker.show();
113 }
114 }
115
116 Button {
117 text: @tr("Open DatePickerPopup");
118 clicked => {
119 date-picker.show();
120 }
121 }
122 }
123 }
124
125 GroupBox {
126 title: @tr("Slider");
127 vertical-stretch: 0;
128
129 slider := Slider {
130 min-width: 160px;
131 minimum: -100;
132 maximum: 100;
133 value: 42;
134 enabled: GallerySettings.widgets-enabled;
135 }
136 }
137
138 GroupBox {
139 title: @tr("ProgressIndicator | Spinner");
140 vertical-stretch: 0;
141
142 GridBox {
143 spacing: 16px;
144
145 progress-indicator := ProgressIndicator {
146 row: 0;
147 col: 0;
148 min-width: 160px;
149 progress: (slider.value - slider.minimum) / (slider.maximum - slider.minimum);
150 indeterminate: true;
151 }
152
153 Rectangle {
154 row: 0;
155 col: 1;
156 rowspan: 2;
157
158 Spinner {
159 progress: progress-indicator.progress;
160 indeterminate: progress-indicator.indeterminate;
161 }
162 }
163
164 CheckBox {
165 row: 1;
166 col: 0;
167 text: @tr("indeterminate");
168 checked <=> progress-indicator.indeterminate;
169 }
170 }
171 }
172
173 GroupBox {
174 title: @tr("TabWidget");
175
176 TabWidget {
177 Tab {
178 title: @tr("Tab 1");
179
180 VerticalBox {
181 alignment: start;
182
183 GroupBox {
184 title: @tr("Content of tab 1");
185
186 HorizontalBox {
187 alignment: start;
188
189 Button {
190 text: @tr("Click me");
191 enabled: GallerySettings.widgets-enabled;
192 }
193 }
194 }
195 }
196 }
197
198 Tab {
199 title: @tr("Tab 2");
200
201 VerticalBox {
202 alignment: start;
203
204 GroupBox {
205 title: @tr("Content of tab 2");
206
207 VerticalBox {
208 alignment: start;
209
210 CheckBox {
211 text: @tr("Check me");
212 enabled: GallerySettings.widgets-enabled;
213 }
214 }
215 }
216 }
217 }
218
219 Tab {
220 title: @tr("Tab 3");
221
222 VerticalBox {
223 Text {
224 text: @tr("Content of tab 3");
225 }
226 }
227 }
228 }
229 }
230
231 time-picker := TimePickerPopup {
232 x: (root.width - self.width) / 2;
233 y: (root.height - self.height) / 2;
234 }
235
236 date-picker := DatePickerPopup {
237 x: (root.width - self.width) / 2;
238 y: (root.height - self.height) / 2;
239 }
240}
241