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
|
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Theme
Item {
id: form
width: 320
height: 480
property alias slider: slider
property alias checkBoxUnderline: checkBoxUnderline
property alias checkBoxBold: checkBoxBold
property alias sizeSwitch: sizeSwitch
property alias button: button
Slider {
id: slider
width: 297
height: 38
stepSize: 1
to: 18
from: 10
value: 14
anchors.topMargin: Theme.baseSize
anchors.top: gridLayout.bottom
anchors.right: gridLayout.right
anchors.left: gridLayout.left
handle: Rectangle {
id: sliderHandle
x: slider.leftPadding + slider.visualPosition * (slider.availableWidth - width)
y: slider.topPadding + slider.availableHeight / 2 - height / 2
implicitWidth: 26
implicitHeight: 26
radius: 13
color: slider.pressed ? Theme.mainColorDarker : Theme.mainColor
border.color: Theme.gray
}
}
GridLayout {
id: gridLayout
anchors.top: parent.top
anchors.topMargin: 64
anchors.horizontalCenter: parent.horizontalCenter
columnSpacing: Theme.baseSize * 0.5
rowSpacing: Theme.baseSize * 0.5
rows: 4
columns: 2
Label {
text: qsTr("Toggle Size")
font: Theme.font
}
Switch {
id: sizeSwitch
Layout.fillWidth: true
}
CheckBox {
id: checkBoxBold
text: qsTr("Bold")
checked: true
Layout.fillWidth: true
}
CheckBox {
id: checkBoxUnderline
text: qsTr("Underline")
Layout.fillWidth: true
}
Rectangle {
id: rectangle
color: Theme.mainColor
Layout.fillWidth: true
Layout.columnSpan: 2
Layout.preferredHeight: 38
Layout.preferredWidth: 297
}
Label {
id: label
text: qsTr("Customization")
font: Theme.font
}
Button {
id: button
text: qsTr("Change Color")
Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
Layout.fillWidth: false
}
}
}
|
