blob: b099b4825452e4ccfa07e92c09cf0f1ab88063f7 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
|
/****************************************************************************
**
** Copyright (C) 2015 The Qt Company Ltd.
** Contact: http://www.qt.io/licensing/
**
** This file is part of the documentation of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:FDL$
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see http://www.qt.io/terms-conditions. For further
** information use the contact form at http://www.qt.io/contact-us.
**
** GNU Free Documentation License Usage
** Alternatively, this file may be used under the terms of the GNU Free
** Documentation License version 1.3 as published by the Free Software
** Foundation and appearing in the file included in the packaging of
** this file. Please review the following information to ensure
** the GNU Free Documentation License version 1.3 requirements
** will be met: http://www.gnu.org/copyleft/fdl.html.
** $QT_END_LICENSE$
**
****************************************************************************/
/*!
\page qtquickcontrols2-customize.html
\title Customizing Qt Quick Controls 2
\brief A set of UI controls to create user interfaces in Qt Quick
Qt Quick Controls consist of a hierarchy (tree) of items. In order to
provide a custom look and feel, the default QML implementation of each
item can be replaced with a custom one. The following snippets present
the default implementations of various items. These can be used as a
starting point to implement a custom look and feel.
\section1 Customizing BusyIndicator
BusyIndicator consists of two visual items: \l {Control::background}{background}
and \l {BusyIndicator::indicator}{indicator}.
\section3 Background
\image qtquickcontrols2-busyindicator-background.png
BusyIndicator has no background item by default.
\section3 Indicator
\image qtquickcontrols2-busyindicator-indicator.png
\snippet BusyIndicator.qml indicator
\section1 Customizing Button
Button consists of two visual items: \l {Control::background}{background}
and \l {AbstractButton::label}{label}.
\section3 Background
\image qtquickcontrols2-button-background.png
\snippet Button.qml background
\section3 Label
\image qtquickcontrols2-button-label.png
\snippet Button.qml label
\section1 Customizing CheckBox
CheckBox consists of three visual items: \l {Control::background}{background},
\l {AbstractButton::label}{label} and \l {Checkable::indicator}{indicator}.
\section3 Background
\image qtquickcontrols2-checkbox-background.png
CheckBox has no background item by default.
\section3 Label
\image qtquickcontrols2-checkbox-label.png
\snippet CheckBox.qml label
\section3 Indicator
\image qtquickcontrols2-checkbox-indicator.png
\snippet CheckBox.qml indicator
\section1 Customizing Frame
Frame consists of two visual items: \l {Control::background}{background}
and \l {Frame::frame}{frame}.
\section3 Background
\image qtquickcontrols2-frame-background.png
Frame has no background item by default.
\section3 Frame
\image qtquickcontrols2-frame-frame.png
\snippet Frame.qml frame
\section1 Customizing GroupBox
GroupBox consists of three visual items: \l {Control::background}{background},
\l {Frame::frame}{frame} and \l {GroupBox::label}{label}.
\section3 Background
\image qtquickcontrols2-groupbox-background.png
GroupBox has no background item by default.
\section3 Frame
\image qtquickcontrols2-groupbox-frame.png
\snippet GroupBox.qml frame
\section3 Label
\image qtquickcontrols2-groupbox-label.png
\snippet GroupBox.qml label
\section1 Customizing Label
TODO
\section1 Customizing PageIndicator
TODO
\section1 Customizing ProgressBar
ProgressBar consists of two visual items: \l {Control::background}{background}
and \l {ProgressBar::indicator}{indicator}.
\section3 Background
\image qtquickcontrols2-progressbar-background.png
\snippet ProgressBar.qml background
\section3 Indicator
\image qtquickcontrols2-progressbar-indicator.png
\snippet ProgressBar.qml indicator
\section1 Customizing RadioButton
RadioButton consists of three visual items: \l {Control::background}{background},
\l {AbstractButton::label}{label} and \l {Checkable::indicator}{indicator}.
\section3 Background
\image qtquickcontrols2-radiobutton-background.png
RadioButton has no background item by default.
\section3 Label
\image qtquickcontrols2-radiobutton-label.png
\snippet RadioButton.qml label
\section3 Indicator
\image qtquickcontrols2-radiobutton-indicator.png
\snippet RadioButton.qml indicator
\section1 Customizing ScrollBar
ScrollBar consists of two visual items: \l {Control::background}{background}
and \l {ScrollBar::handle}{handle}.
\section3 Background
\image qtquickcontrols2-scrollbar-background.png
ScrollBar has no background item by default.
\section3 Handle
\image qtquickcontrols2-scrollbar-handle.png
\snippet ScrollBar.qml handle
\section1 Customizing ScrollIndicator
ScrollIndicator consists of two visual items: \l {Control::background}{background}
and \l {ScrollIndicator::indicator}{indicator}.
\section3 Background
\image qtquickcontrols2-scrollindicator-background.png
ScrollIndicator has no background item by default.
\section3 Indicator
\image qtquickcontrols2-scrollindicator-indicator.png
\snippet ScrollIndicator.qml indicator
\section1 Customizing Slider
Slider consists of three visual items: \l {Control::background}{background},
\l {Slider::track}{track} and \l {Slider::handle}{handle}.
\section3 Background
\image qtquickcontrols2-slider-background.png
Slider has no background item by default.
\section3 Track
\image qtquickcontrols2-slider-track.png
\snippet Slider.qml track
\section3 Handle
\image qtquickcontrols2-slider-handle.png
\snippet Slider.qml handle
\section1 Customizing StackView
TODO
\section1 Customizing Switch
Switch consists of three visual items: \l {Control::background}{background},
\l {AbstractButton::label}{label} and \l {Checkable::indicator}{indicator}.
\section3 Background
\image qtquickcontrols2-switch-background.png
Switch has no background item by default.
\section3 Label
\image qtquickcontrols2-switch-label.png
\snippet Switch.qml label
\section3 Indicator
\image qtquickcontrols2-switch-indicator.png
\snippet Switch.qml indicator
\section1 Customizing TabBar
TODO
\section1 Customizing TabButton
TODO
\section1 Customizing TextArea
TODO
\section1 Customizing TextField
TextField consists of two visual items: \l {TextField::background}{background}
and \l {TextField::placeholder}{placeholder}.
\section3 Background
\image qtquickcontrols2-textfield-background.png
\snippet TextField.qml background
\section3 Placeholder
\image qtquickcontrols2-textfield-placeholder.png
\snippet TextField.qml placeholder
\section1 Customizing ToggleButton
ToggleButton consists of three visual items: \l {Control::background}{background},
\l {AbstractButton::label}{label} and \l {Checkable::indicator}{indicator}.
\section3 Background
\image qtquickcontrols2-togglebutton-background.png
ToggleButton has no background item by default.
\section3 Label
\image qtquickcontrols2-togglebutton-label.png
\snippet ToggleButton.qml label
\section3 Indicator
\image qtquickcontrols2-togglebutton-indicator.png
\snippet ToggleButton.qml indicator
\section1 Customizing ToolBar
ToolBar consists of two visual items: \l {Control::background}{background} and
\l {Frame::frame}{frame}.
\section3 Background
\image qtquickcontrols2-toolbar-background.png
\snippet ToolBar.qml background
\section3 Frame
\image qtquickcontrols2-toolbar-frame.png
ToggleButton has no frame item by default.
\section1 Customizing ToolButton
ToolButton consists of two visual items: \l {Control::background}{background}
and \l {AbstractButton::label}{label}.
\section3 Background
\image qtquickcontrols2-toolbutton-background.png
\snippet ToolButton.qml background
\section3 Label
\image qtquickcontrols2-toolbutton-label.png
\snippet ToolButton.qml label
*/
|