137 files changed, 3082 insertions, 0 deletions

diff --git a/src/quickcontrols/designer/AbstractButtonSection.qml b/src/quickcontrols/designer/AbstractButtonSection.qml
new file mode 100644
index 0000000000..c7684c20d0
--- /dev/null
+++ b/src/quickcontrols/designer/AbstractButtonSection.qml
@@ -0,0 +1,89 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Section {
+    caption: qsTr("AbstractButton")
+
+    SectionLayout {
+        Label {
+            text: qsTr("Text")
+            tooltip: qsTr("The text displayed on the button.")
+        }
+        SecondColumnLayout {
+            LineEdit {
+                backendValue: backendValues.text
+                Layout.fillWidth: true
+            }
+        }
+
+         Label {
+            text: qsTr("Display")
+            tooltip: qsTr("Determines how the icon and text are displayed within the button.")
+            disabledState: !backendValues.display.isAvailable
+        }
+        SecondColumnLayout {
+            ComboBox {
+                backendValue: backendValues.display
+                model: [ "IconOnly", "TextOnly", "TextBesideIcon" ]
+                scope: "AbstractButton"
+                Layout.fillWidth: true
+                enabled: backendValue.isAvailable
+            }
+        }
+
+        Label {
+            visible: checkable
+            text: qsTr("Checkable")
+            tooltip: qsTr("Whether the button is checkable.")
+        }
+        SecondColumnLayout {
+            CheckBox {
+                text: backendValues.checkable.valueToString
+                backendValue: backendValues.checkable
+                Layout.fillWidth: true
+            }
+        }
+
+        Label {
+            text: qsTr("Checked")
+            tooltip: qsTr("Whether the button is checked.")
+        }
+        SecondColumnLayout {
+            CheckBox {
+                text: backendValues.checked.valueToString
+                backendValue: backendValues.checked
+                Layout.fillWidth: true
+            }
+        }
+
+        Label {
+            text: qsTr("Exclusive")
+            tooltip: qsTr("Whether the button is exclusive.")
+            disabledState: !backendValues.autoExclusive.isAvailable
+        }
+        SecondColumnLayout {
+            CheckBox {
+                text: backendValues.autoExclusive.valueToString
+                backendValue: backendValues.autoExclusive
+                Layout.fillWidth: true
+                enabled: backendValue.isAvailable
+            }
+        }
+
+        Label {
+            text: qsTr("Auto-Repeat")
+            tooltip: qsTr("Whether the button repeats pressed(), released() and clicked() signals while the button is pressed and held down.")
+        }
+        SecondColumnLayout {
+            CheckBox {
+                text: backendValues.autoRepeat.valueToString
+                backendValue: backendValues.autoRepeat
+                Layout.fillWidth: true
+            }
+        }
+    }
+}
diff --git a/src/quickcontrols/designer/BusyIndicatorSpecifics.qml b/src/quickcontrols/designer/BusyIndicatorSpecifics.qml
new file mode 100644
index 0000000000..8e0021fc71
--- /dev/null
+++ b/src/quickcontrols/designer/BusyIndicatorSpecifics.qml
@@ -0,0 +1,41 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    Section {
+        width: parent.width
+        caption: qsTr("BusyIndicator")
+
+        SectionLayout {
+            Label {
+                text: qsTr("Running")
+                tooltip: qsTr("Whether the busy indicator is currently indicating activity.")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    text: backendValues.running.valueToString
+                    backendValue: backendValues.running
+                    Layout.fillWidth: true
+                }
+            }
+        }
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/ButtonSection.qml b/src/quickcontrols/designer/ButtonSection.qml
new file mode 100644
index 0000000000..d338bd2990
--- /dev/null
+++ b/src/quickcontrols/designer/ButtonSection.qml
@@ -0,0 +1,41 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Section {
+    id: section
+    caption: qsTr("Button")
+
+    SectionLayout {
+
+        Label {
+            text: qsTr("Flat")
+            tooltip: qsTr("Whether the button is flat.")
+            disabledState: !backendValues.flat.isAvailable
+        }
+        SecondColumnLayout {
+            CheckBox {
+                text: backendValues.flat.valueToString
+                backendValue: backendValues.flat
+                Layout.fillWidth: true
+                enabled: backendValue.isAvailable
+            }
+        }
+        Label {
+            text: qsTr("Highlighted")
+            tooltip: qsTr("Whether the button is highlighted.")
+            disabledState: !backendValues.highlighted.isAvailable
+        }
+        SecondColumnLayout {
+            CheckBox {
+                text: backendValues.highlighted.valueToString
+                backendValue: backendValues.highlighted
+                Layout.fillWidth: true
+                enabled: backendValue.isAvailable
+            }
+        }
+    }
+}
diff --git a/src/quickcontrols/designer/ButtonSpecifics.qml b/src/quickcontrols/designer/ButtonSpecifics.qml
new file mode 100644
index 0000000000..1de3c0a3c2
--- /dev/null
+++ b/src/quickcontrols/designer/ButtonSpecifics.qml
@@ -0,0 +1,30 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    ButtonSection {
+        width: parent.width
+    }
+
+    AbstractButtonSection {
+        width: parent.width
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/CMakeLists.txt b/src/quickcontrols/designer/CMakeLists.txt
new file mode 100644
index 0000000000..5576d42bd3
--- /dev/null
+++ b/src/quickcontrols/designer/CMakeLists.txt
@@ -0,0 +1,64 @@
+# Copyright (C) 2022 The Qt Company Ltd.
+# SPDX-License-Identifier: BSD-3-Clause
+
+file(GLOB_RECURSE __aux_qml_glob_files
+    RELATIVE "${CMAKE_CURRENT_SOURCE_DIR}"
+    "images/*.png"
+)
+qt_path_join(images_destination ${QT_INSTALL_DIR} "${INSTALL_QMLDIR}/QtQuick/Controls/designer/images")
+qt_copy_or_install(
+    FILES
+        ${__aux_qml_glob_files}
+    DESTINATION "${images_destination}"
+)
+qt_path_join(destination ${QT_INSTALL_DIR} "${INSTALL_QMLDIR}/QtQuick/Controls/designer")
+qt_copy_or_install(
+    FILES
+        AbstractButtonSection.qml
+        BusyIndicatorSpecifics.qml
+        ButtonSection.qml
+        ButtonSpecifics.qml
+        CheckBoxSpecifics.qml
+        CheckDelegateSpecifics.qml
+        CheckSection.qml
+        ComboBoxSpecifics.qml
+        ContainerSection.qml
+        ControlSection.qml
+        ControlSpecifics.qml
+        DelayButtonSpecifics.qml
+        DialSpecifics.qml
+        FrameSpecifics.qml
+        GroupBoxSpecifics.qml
+        InsetSection.qml
+        ItemDelegateSection.qml
+        ItemDelegateSpecifics.qml
+        LabelSpecifics.qml
+        PaddingSection.qml
+        PageIndicatorSpecifics.qml
+        PageSpecifics.qml
+        PaneSection.qml
+        PaneSpecifics.qml
+        ProgressBarSpecifics.qml
+        RadioButtonSpecifics.qml
+        RadioDelegateSpecifics.qml
+        RangeSliderSpecifics.qml
+        RoundButtonSpecifics.qml
+        ScrollViewSpecifics.qml
+        SliderSpecifics.qml
+        SpinBoxSpecifics.qml
+        StackViewSpecifics.qml
+        SwipeDelegateSpecifics.qml
+        SwipeViewSpecifics.qml
+        SwitchDelegateSpecifics.qml
+        SwitchSpecifics.qml
+        TabBarSpecifics.qml
+        TabButtonSpecifics.qml
+        TextAreaSpecifics.qml
+        TextFieldSpecifics.qml
+        ToolBarSpecifics.qml
+        ToolButtonSpecifics.qml
+        ToolSeparatorSpecifics.qml
+        TumblerSpecifics.qml
+        qtquickcontrols2.metainfo
+    DESTINATION "${destination}"
+)
diff --git a/src/quickcontrols/designer/CheckBoxSpecifics.qml b/src/quickcontrols/designer/CheckBoxSpecifics.qml
new file mode 100644
index 0000000000..497a66858f
--- /dev/null
+++ b/src/quickcontrols/designer/CheckBoxSpecifics.qml
@@ -0,0 +1,31 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    CheckSection {
+        width: parent.width
+        caption: qsTr("CheckBox")
+    }
+
+    AbstractButtonSection {
+        width: parent.width
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/CheckDelegateSpecifics.qml b/src/quickcontrols/designer/CheckDelegateSpecifics.qml
new file mode 100644
index 0000000000..2f959b86f5
--- /dev/null
+++ b/src/quickcontrols/designer/CheckDelegateSpecifics.qml
@@ -0,0 +1,35 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    CheckSection {
+        width: parent.width
+        caption: qsTr("CheckDelegate")
+    }
+
+    ItemDelegateSection {
+        width: parent.width
+    }
+
+    AbstractButtonSection {
+        width: parent.width
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/CheckSection.qml b/src/quickcontrols/designer/CheckSection.qml
new file mode 100644
index 0000000000..b58d6a27ce
--- /dev/null
+++ b/src/quickcontrols/designer/CheckSection.qml
@@ -0,0 +1,35 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Section {
+    SectionLayout {
+        Label {
+            text: qsTr("Check State")
+            tooltip: qsTr("The current check state.")
+        }
+        SecondColumnLayout {
+            ComboBox {
+                backendValue: backendValues.checkState
+                model: [ "Unchecked", "PartiallyChecked", "Checked" ]
+                scope: "Qt"
+                Layout.fillWidth: true
+            }
+        }
+
+        Label {
+            text: qsTr("Tri-state")
+            tooltip: qsTr("Whether the checkbox has three states.")
+        }
+        SecondColumnLayout {
+            CheckBox {
+                text: backendValues.tristate.valueToString
+                backendValue: backendValues.tristate
+                Layout.fillWidth: true
+            }
+        }
+    }
+}
diff --git a/src/quickcontrols/designer/ComboBoxSpecifics.qml b/src/quickcontrols/designer/ComboBoxSpecifics.qml
new file mode 100644
index 0000000000..9700bc5fd9
--- /dev/null
+++ b/src/quickcontrols/designer/ComboBoxSpecifics.qml
@@ -0,0 +1,86 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    Section {
+        width: parent.width
+        caption: qsTr("ComboBox")
+
+        SectionLayout {
+            Label {
+                text: qsTr("Text Role")
+                tooltip: qsTr("The model role used for displaying text.")
+            }
+            SecondColumnLayout {
+                LineEdit {
+                    backendValue: backendValues.textRole
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Current")
+                tooltip: qsTr("The index of the current item.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 0
+                    backendValue: backendValues.currentIndex
+                    Layout.fillWidth: true
+                }
+            }
+        Label {
+            text: qsTr("Editable")
+            tooltip: qsTr("Whether the combo box is editable.")
+        }
+        SecondColumnLayout {
+            CheckBox {
+                text: backendValues.editable.valueToString
+                backendValue: backendValues.editable
+                Layout.fillWidth: true
+            }
+        }
+        Label {
+            text: qsTr("Flat")
+            tooltip: qsTr("Whether the combo box button is flat.")
+        }
+        SecondColumnLayout {
+            CheckBox {
+                text: backendValues.flat.valueToString
+                backendValue: backendValues.flat
+                Layout.fillWidth: true
+            }
+        }
+        Label {
+                text: qsTr("DisplayText")
+                tooltip: qsTr("Holds the text that is displayed on the combo box button.")
+            }
+            SecondColumnLayout {
+                LineEdit {
+                    backendValue: backendValues.displayText
+                    Layout.fillWidth: true
+                }
+            }
+        }
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/ContainerSection.qml b/src/quickcontrols/designer/ContainerSection.qml
new file mode 100644
index 0000000000..93618cb5bf
--- /dev/null
+++ b/src/quickcontrols/designer/ContainerSection.qml
@@ -0,0 +1,26 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Section {
+    caption: qsTr("Container")
+
+    SectionLayout {
+        Label {
+            text: qsTr("Current")
+            tooltip: qsTr("The index of the current item.")
+        }
+        SecondColumnLayout {
+            SpinBox {
+                maximumValue: 9999999
+                minimumValue: -9999999
+                decimals: 0
+                backendValue: backendValues.currentIndex
+                Layout.fillWidth: true
+            }
+        }
+    }
+}
diff --git a/src/quickcontrols/designer/ControlSection.qml b/src/quickcontrols/designer/ControlSection.qml
new file mode 100644
index 0000000000..c7f6283ea7
--- /dev/null
+++ b/src/quickcontrols/designer/ControlSection.qml
@@ -0,0 +1,81 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Section {
+    caption: qsTr("Control")
+
+    SectionLayout {
+        Label {
+            text: qsTr("Enabled")
+            tooltip: qsTr("Whether the control is enabled.")
+        }
+        SecondColumnLayout {
+            CheckBox {
+                text: backendValues.enabled.valueToString
+                backendValue: backendValues.enabled
+                Layout.fillWidth: true
+            }
+        }
+
+        Label {
+            text: qsTr("Focus Policy")
+            tooltip: qsTr("Focus policy of the control.")
+            disabledState: !backendValues.focusPolicy.isAvailable
+        }
+        SecondColumnLayout {
+            ComboBox {
+                backendValue: backendValues.focusPolicy
+                model: [ "TabFocus", "ClickFocus", "StrongFocus", "WheelFocus", "NoFocus" ]
+                scope: "Qt"
+                Layout.fillWidth: true
+                enabled: backendValue.isAvailable
+            }
+        }
+
+        Label {
+            text: qsTr("Hover")
+            tooltip: qsTr("Whether control accepts hover events.")
+            disabledState: !backendValues.hoverEnabled.isAvailable
+        }
+        SecondColumnLayout {
+            CheckBox {
+                text: backendValues.hoverEnabled.valueToString
+                backendValue: backendValues.hoverEnabled
+                Layout.fillWidth: true
+                enabled: backendValue.isAvailable
+            }
+        }
+
+        Label {
+            text: qsTr("Spacing")
+            tooltip: qsTr("Spacing between internal elements of the control.")
+        }
+        SecondColumnLayout {
+            SpinBox {
+                maximumValue: 9999999
+                minimumValue: -9999999
+                decimals: 0
+                backendValue: backendValues.spacing
+                Layout.fillWidth: true
+            }
+        }
+
+        Label {
+            text: qsTr("Wheel")
+            tooltip: qsTr("Whether control accepts wheel events.")
+            disabledState: !backendValues.wheelEnabled.isAvailable
+        }
+        SecondColumnLayout {
+            CheckBox {
+                text: backendValues.wheelEnabled.valueToString
+                backendValue: backendValues.wheelEnabled
+                Layout.fillWidth: true
+                enabled: backendValue.isAvailable
+            }
+        }
+    }
+}
diff --git a/src/quickcontrols/designer/ControlSpecifics.qml b/src/quickcontrols/designer/ControlSpecifics.qml
new file mode 100644
index 0000000000..c7c34a4ae1
--- /dev/null
+++ b/src/quickcontrols/designer/ControlSpecifics.qml
@@ -0,0 +1,22 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/DelayButtonSpecifics.qml b/src/quickcontrols/designer/DelayButtonSpecifics.qml
new file mode 100644
index 0000000000..309075d2b7
--- /dev/null
+++ b/src/quickcontrols/designer/DelayButtonSpecifics.qml
@@ -0,0 +1,48 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    Section {
+        width: parent.width
+        caption: qsTr("DelayButton")
+
+        SectionLayout {
+            Label {
+                text: qsTr("Delay")
+                tooltip: qsTr("The delay in milliseconds.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    minimumValue: 0
+                    maximumValue: 9999999
+                    decimals: 0
+                    stepSize: 1
+                    backendValue: backendValues.delay
+                    Layout.fillWidth: true
+                }
+            }
+        }
+    }
+
+    AbstractButtonSection {
+        width: parent.width
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/DialSpecifics.qml b/src/quickcontrols/designer/DialSpecifics.qml
new file mode 100644
index 0000000000..c0fd3df2ed
--- /dev/null
+++ b/src/quickcontrols/designer/DialSpecifics.qml
@@ -0,0 +1,139 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    Section {
+        width: parent.width
+        caption: qsTr("Dial")
+
+        SectionLayout {
+            Label {
+                text: qsTr("Value")
+                tooltip: qsTr("The current value of the dial.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    minimumValue: Math.min(backendValues.from.value, backendValues.to.value)
+                    maximumValue: Math.max(backendValues.from.value, backendValues.to.value)
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.value
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("From")
+                tooltip: qsTr("The starting value of the dial range.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.from
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("To")
+                tooltip: qsTr("The ending value of the dial range.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.to
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Step Size")
+                tooltip: qsTr("The step size of the dial.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.stepSize
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Snap Mode")
+                tooltip: qsTr("The snap mode of the dial.")
+            }
+            SecondColumnLayout {
+                ComboBox {
+                    backendValue: backendValues.snapMode
+                    model: [ "NoSnap", "SnapOnRelease", "SnapAlways" ]
+                    scope: "Dial"
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Live")
+                tooltip: qsTr("Whether the dial provides live value updates.")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    text: backendValues.live.valueToString
+                    backendValue: backendValues.live
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Input Mode")
+                tooltip: qsTr("How the dial tracks movement.")
+            }
+            SecondColumnLayout {
+                ComboBox {
+                    backendValue: backendValues.inputMode
+                    model: [ "Circular", "Horizontal", "Vertical" ]
+                    scope: "Dial"
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Wrap")
+                tooltip: qsTr("Whether the dial wraps when dragged.")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    text: backendValues.wrap.valueToString
+                    backendValue: backendValues.wrap
+                    Layout.fillWidth: true
+                }
+            }
+        }
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/FrameSpecifics.qml b/src/quickcontrols/designer/FrameSpecifics.qml
new file mode 100644
index 0000000000..a7a0acaf4a
--- /dev/null
+++ b/src/quickcontrols/designer/FrameSpecifics.qml
@@ -0,0 +1,26 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    PaneSection {
+        width: parent.width
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/GroupBoxSpecifics.qml b/src/quickcontrols/designer/GroupBoxSpecifics.qml
new file mode 100644
index 0000000000..29f826efff
--- /dev/null
+++ b/src/quickcontrols/designer/GroupBoxSpecifics.qml
@@ -0,0 +1,44 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    Section {
+        width: parent.width
+        caption: qsTr("GroupBox")
+
+        SectionLayout {
+            Label {
+                text: qsTr("Title")
+                tooltip: qsTr("The title of the group box.")
+            }
+            SecondColumnLayout {
+                LineEdit {
+                    backendValue: backendValues.title
+                    Layout.fillWidth: true
+                }
+            }
+        }
+    }
+
+    PaneSection {
+        width: parent.width
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/InsetSection.qml b/src/quickcontrols/designer/InsetSection.qml
new file mode 100644
index 0000000000..125cc011ef
--- /dev/null
+++ b/src/quickcontrols/designer/InsetSection.qml
@@ -0,0 +1,86 @@
+// Copyright (C) 2020 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Section {
+    caption: qsTr("Inset")
+
+    SectionLayout {
+        Label {
+            text: qsTr("Vertical")
+        }
+        SecondColumnLayout {
+            Label {
+                text: qsTr("Top")
+                tooltip: qsTr("Top inset for the background.")
+                width: 42
+            }
+            SpinBox {
+                maximumValue: 10000
+                minimumValue: -10000
+                realDragRange: 5000
+                decimals: 0
+                backendValue: backendValues.topInset
+                Layout.fillWidth: true
+            }
+            Item {
+                width: 4
+                height: 4
+            }
+
+            Label {
+                text: qsTr("Bottom")
+                tooltip: qsTr("Bottom inset for the background.")
+                width: 42
+            }
+            SpinBox {
+                maximumValue: 10000
+                minimumValue: -10000
+                realDragRange: 5000
+                decimals: 0
+                backendValue: backendValues.bottomInset
+                Layout.fillWidth: true
+            }
+        }
+
+        Label {
+            text: qsTr("Horizontal")
+        }
+        SecondColumnLayout {
+            Label {
+                text: qsTr("Left")
+                tooltip: qsTr("Left inset for the background.")
+                width: 42
+            }
+            SpinBox {
+                maximumValue: 10000
+                minimumValue: -10000
+                realDragRange: 5000
+                decimals: 0
+                backendValue: backendValues.leftInset
+                Layout.fillWidth: true
+            }
+            Item {
+                width: 4
+                height: 4
+            }
+
+            Label {
+                text: qsTr("Right")
+                tooltip: qsTr("Right inset for the background.")
+                width: 42
+            }
+            SpinBox {
+                maximumValue: 10000
+                minimumValue: -10000
+                realDragRange: 5000
+                decimals: 0
+                backendValue: backendValues.rightInset
+                Layout.fillWidth: true
+            }
+        }
+    }
+}
diff --git a/src/quickcontrols/designer/ItemDelegateSection.qml b/src/quickcontrols/designer/ItemDelegateSection.qml
new file mode 100644
index 0000000000..1d6c45606a
--- /dev/null
+++ b/src/quickcontrols/designer/ItemDelegateSection.qml
@@ -0,0 +1,25 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Section {
+    id: section
+    caption: qsTr("ItemDelegate")
+
+    SectionLayout {
+        Label {
+            text: qsTr("Highlighted")
+            tooltip: qsTr("Whether the delegate is highlighted.")
+        }
+        SecondColumnLayout {
+            CheckBox {
+                text: backendValues.highlighted.valueToString
+                backendValue: backendValues.highlighted
+                Layout.fillWidth: true
+            }
+        }
+    }
+}
diff --git a/src/quickcontrols/designer/ItemDelegateSpecifics.qml b/src/quickcontrols/designer/ItemDelegateSpecifics.qml
new file mode 100644
index 0000000000..e80bc01528
--- /dev/null
+++ b/src/quickcontrols/designer/ItemDelegateSpecifics.qml
@@ -0,0 +1,30 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    ItemDelegateSection {
+        width: parent.width
+    }
+
+    AbstractButtonSection {
+        width: parent.width
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/LabelSpecifics.qml b/src/quickcontrols/designer/LabelSpecifics.qml
new file mode 100644
index 0000000000..932922573a
--- /dev/null
+++ b/src/quickcontrols/designer/LabelSpecifics.qml
@@ -0,0 +1,53 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    StandardTextSection {
+        width: parent.width
+        showIsWrapping: true
+        showFormatProperty: true
+        showVerticalAlignment: true
+    }
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: qsTr("Text Color")
+
+        ColorEditor {
+            caption: qsTr("Text Color")
+            backendValue: backendValues.color
+            supportGradient: false
+        }
+    }
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: qsTr("Style Color")
+
+        ColorEditor {
+            caption: qsTr("Style Color")
+            backendValue: backendValues.styleColor
+            supportGradient: false
+        }
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+
+    InsetSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/PaddingSection.qml b/src/quickcontrols/designer/PaddingSection.qml
new file mode 100644
index 0000000000..d921d2878f
--- /dev/null
+++ b/src/quickcontrols/designer/PaddingSection.qml
@@ -0,0 +1,68 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Section {
+    caption: qsTr("Padding")
+
+    SectionLayout {
+        Label {
+            text: qsTr("Top")
+            tooltip: qsTr("Padding between the content and the top edge of the control.")
+        }
+        SecondColumnLayout {
+            SpinBox {
+                maximumValue: 9999999
+                minimumValue: -9999999
+                decimals: 0
+                backendValue: backendValues.topPadding
+                Layout.fillWidth: true
+            }
+        }
+
+        Label {
+            text: qsTr("Left")
+            tooltip: qsTr("Padding between the content and the left edge of the control.")
+        }
+        SecondColumnLayout {
+            SpinBox {
+                maximumValue: 9999999
+                minimumValue: -9999999
+                decimals: 0
+                backendValue: backendValues.leftPadding
+                Layout.fillWidth: true
+            }
+        }
+
+        Label {
+            text: qsTr("Right")
+            tooltip: qsTr("Padding between the content and the right edge of the control.")
+        }
+        SecondColumnLayout {
+            SpinBox {
+                maximumValue: 9999999
+                minimumValue: -9999999
+                decimals: 0
+                backendValue: backendValues.rightPadding
+                Layout.fillWidth: true
+            }
+        }
+
+        Label {
+            text: qsTr("Bottom")
+            tooltip: qsTr("Padding between the content and the bottom edge of the control.")
+        }
+        SecondColumnLayout {
+            SpinBox {
+                maximumValue: 9999999
+                minimumValue: -9999999
+                decimals: 0
+                backendValue: backendValues.bottomPadding
+                Layout.fillWidth: true
+            }
+        }
+    }
+}
diff --git a/src/quickcontrols/designer/PageIndicatorSpecifics.qml b/src/quickcontrols/designer/PageIndicatorSpecifics.qml
new file mode 100644
index 0000000000..65d9031025
--- /dev/null
+++ b/src/quickcontrols/designer/PageIndicatorSpecifics.qml
@@ -0,0 +1,65 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    Section {
+        width: parent.width
+        caption: qsTr("PageIndicator")
+
+        SectionLayout {
+            Label {
+                text: qsTr("Count")
+                tooltip: qsTr("The number of pages.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 0
+                    backendValue: backendValues.count
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Current")
+                tooltip: qsTr("The index of the current page.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 0
+                    backendValue: backendValues.currentIndex
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Interactive")
+                tooltip: qsTr("Whether the control is interactive.")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    text: backendValues.interactive.valueToString
+                    backendValue: backendValues.interactive
+                    Layout.fillWidth: true
+                }
+            }
+        }
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/PageSpecifics.qml b/src/quickcontrols/designer/PageSpecifics.qml
new file mode 100644
index 0000000000..c4b8027b69
--- /dev/null
+++ b/src/quickcontrols/designer/PageSpecifics.qml
@@ -0,0 +1,68 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    Section {
+        width: parent.width
+        caption: qsTr("Page")
+
+        SectionLayout {
+            Label {
+                text: qsTr("Title")
+                tooltip: qsTr("Title of the page.")
+            }
+            SecondColumnLayout {
+                LineEdit {
+                    backendValue: backendValues.title
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Content Width")
+                tooltip: qsTr("Content height used for calculating the total implicit width.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 0
+                    backendValue: backendValues.contentWidth
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Content Height")
+                tooltip: qsTr("Content height used for calculating the total implicit height.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 0
+                    backendValue: backendValues.contentHeight
+                    Layout.fillWidth: true
+                }
+            }
+        }
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/PaneSection.qml b/src/quickcontrols/designer/PaneSection.qml
new file mode 100644
index 0000000000..7710198f19
--- /dev/null
+++ b/src/quickcontrols/designer/PaneSection.qml
@@ -0,0 +1,40 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Section {
+    caption: qsTr("Pane")
+
+    SectionLayout {
+        Label {
+            text: qsTr("Content Width")
+            tooltip: qsTr("Content height used for calculating the total implicit width.")
+        }
+        SecondColumnLayout {
+            SpinBox {
+                maximumValue: 9999999
+                minimumValue: -9999999
+                decimals: 0
+                backendValue: backendValues.contentWidth
+                Layout.fillWidth: true
+            }
+        }
+
+        Label {
+            text: qsTr("Content Height")
+            tooltip: qsTr("Content height used for calculating the total implicit height.")
+        }
+        SecondColumnLayout {
+            SpinBox {
+                maximumValue: 9999999
+                minimumValue: -9999999
+                decimals: 0
+                backendValue: backendValues.contentHeight
+                Layout.fillWidth: true
+            }
+        }
+    }
+}
diff --git a/src/quickcontrols/designer/PaneSpecifics.qml b/src/quickcontrols/designer/PaneSpecifics.qml
new file mode 100644
index 0000000000..a7a0acaf4a
--- /dev/null
+++ b/src/quickcontrols/designer/PaneSpecifics.qml
@@ -0,0 +1,26 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    PaneSection {
+        width: parent.width
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/ProgressBarSpecifics.qml b/src/quickcontrols/designer/ProgressBarSpecifics.qml
new file mode 100644
index 0000000000..9a604d4037
--- /dev/null
+++ b/src/quickcontrols/designer/ProgressBarSpecifics.qml
@@ -0,0 +1,88 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    Section {
+        width: parent.width
+        caption: qsTr("ProgressBar")
+
+        SectionLayout {
+            Label {
+                text: qsTr("Indeterminate")
+                tooltip: qsTr("Whether the progress is indeterminate.")
+                disabledState: !backendValues.indeterminate.isAvailable
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    text: backendValues.indeterminate.valueToString
+                    backendValue: backendValues.indeterminate
+                    Layout.fillWidth: true
+                    enabled: backendValue.isAvailable
+                }
+            }
+
+            Label {
+                text: qsTr("Value")
+                tooltip: qsTr("The current value of the progress.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    minimumValue: Math.min(backendValues.from.value, backendValues.to.value)
+                    maximumValue: Math.max(backendValues.from.value, backendValues.to.value)
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.value
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("From")
+                tooltip: qsTr("The starting value for the progress.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.from
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("To")
+                tooltip: qsTr("The ending value for the progress.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.to
+                    Layout.fillWidth: true
+                }
+            }
+        }
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/RadioButtonSpecifics.qml b/src/quickcontrols/designer/RadioButtonSpecifics.qml
new file mode 100644
index 0000000000..ecfd4cf406
--- /dev/null
+++ b/src/quickcontrols/designer/RadioButtonSpecifics.qml
@@ -0,0 +1,26 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    AbstractButtonSection {
+        width: parent.width
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/RadioDelegateSpecifics.qml b/src/quickcontrols/designer/RadioDelegateSpecifics.qml
new file mode 100644
index 0000000000..e80bc01528
--- /dev/null
+++ b/src/quickcontrols/designer/RadioDelegateSpecifics.qml
@@ -0,0 +1,30 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    ItemDelegateSection {
+        width: parent.width
+    }
+
+    AbstractButtonSection {
+        width: parent.width
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/RangeSliderSpecifics.qml b/src/quickcontrols/designer/RangeSliderSpecifics.qml
new file mode 100644
index 0000000000..cb66eec393
--- /dev/null
+++ b/src/quickcontrols/designer/RangeSliderSpecifics.qml
@@ -0,0 +1,156 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    Section {
+        width: parent.width
+        caption: qsTr("RangeSlider")
+
+        SectionLayout {
+            Label {
+                text: qsTr("First Value")
+                tooltip: qsTr("The value of the first range slider handle.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    minimumValue: Math.min(backendValues.from.value, backendValues.to.value)
+                    maximumValue: Math.max(backendValues.from.value, backendValues.to.value)
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.first_value
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Second Value")
+                tooltip: qsTr("The value of the second range slider handle.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    minimumValue: Math.min(backendValues.from.value, backendValues.to.value)
+                    maximumValue: Math.max(backendValues.from.value, backendValues.to.value)
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.second_value
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("From")
+                tooltip: qsTr("The starting value of the range slider range.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.from
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("To")
+                tooltip: qsTr("The ending value of the range slider range.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.to
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Step Size")
+                tooltip: qsTr("The step size of the range slider.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.stepSize
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Snap Mode")
+                tooltip: qsTr("The snap mode of the range slider.")
+            }
+            SecondColumnLayout {
+                ComboBox {
+                    backendValue: backendValues.snapMode
+                    model: [ "NoSnap", "SnapOnRelease", "SnapAlways" ]
+                    scope: "RangeSlider"
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Orientation")
+                tooltip: qsTr("The orientation of the range slider.")
+            }
+            SecondColumnLayout {
+                ComboBox {
+                    backendValue: backendValues.orientation
+                    model: [ "Horizontal", "Vertical" ]
+                    scope: "Qt"
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Live")
+                tooltip: qsTr("Whether the range slider provides live value updates.")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    text: backendValues.live.valueToString
+                    backendValue: backendValues.live
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Touch drag threshold")
+                tooltip: qsTr("The threshold (in logical pixels) at which a touch drag event will be initiated.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    minimumValue: 0
+                    maximumValue: 10000
+                    decimals: 0
+                    backendValue: backendValues.touchDragThreshold
+                    Layout.fillWidth: true
+                }
+            }
+        }
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/RoundButtonSpecifics.qml b/src/quickcontrols/designer/RoundButtonSpecifics.qml
new file mode 100644
index 0000000000..45c617bc94
--- /dev/null
+++ b/src/quickcontrols/designer/RoundButtonSpecifics.qml
@@ -0,0 +1,51 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    Section {
+        width: parent.width
+        caption: qsTr("RoundButton")
+
+        SectionLayout {
+            Label {
+                text: qsTr("Radius")
+                tooltip: qsTr("Radius of the button.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    minimumValue: 0
+                    maximumValue: 10000
+                    decimals: 0
+                    backendValue: backendValues.radius
+                    Layout.fillWidth: true
+                }
+            }
+        }
+    }
+
+    ButtonSection {
+        width: parent.width
+    }
+
+    AbstractButtonSection {
+        width: parent.width
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/ScrollViewSpecifics.qml b/src/quickcontrols/designer/ScrollViewSpecifics.qml
new file mode 100644
index 0000000000..c2623a0966
--- /dev/null
+++ b/src/quickcontrols/designer/ScrollViewSpecifics.qml
@@ -0,0 +1,57 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    Section {
+        width: parent.width
+        caption: qsTr("ScrollView")
+
+        SectionLayout {
+            Label {
+                text: qsTr("Content Width")
+                tooltip: qsTr("Content height used for calculating the total implicit width.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 0
+                    backendValue: backendValues.contentWidth
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Content Height")
+                tooltip: qsTr("Content height used for calculating the total implicit height.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 0
+                    backendValue: backendValues.contentHeight
+                    Layout.fillWidth: true
+                }
+            }
+        }
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/SliderSpecifics.qml b/src/quickcontrols/designer/SliderSpecifics.qml
new file mode 100644
index 0000000000..a2fada6f52
--- /dev/null
+++ b/src/quickcontrols/designer/SliderSpecifics.qml
@@ -0,0 +1,147 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    Section {
+        width: parent.width
+        caption: qsTr("Slider")
+
+        SectionLayout {
+            Label {
+                text: qsTr("Value")
+                tooltip: qsTr("The current value of the slider.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    minimumValue: Math.min(backendValues.from.value, backendValues.to.value)
+                    maximumValue: Math.max(backendValues.from.value, backendValues.to.value)
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.value
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("From")
+                tooltip: qsTr("The starting value of the slider range.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.from
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("To")
+                tooltip: qsTr("The ending value of the slider range.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.to
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Step Size")
+                tooltip: qsTr("The step size of the slider.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.stepSize
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Snap Mode")
+                tooltip: qsTr("The snap mode of the slider.")
+                disabledState: !backendValues.snapMode.isAvailable
+            }
+            SecondColumnLayout {
+                ComboBox {
+                    backendValue: backendValues.snapMode
+                    model: [ "NoSnap", "SnapOnRelease", "SnapAlways" ]
+                    scope: "Slider"
+                    Layout.fillWidth: true
+                    enabled: backendValue.isAvailable
+                }
+            }
+
+            Label {
+                text: qsTr("Orientation")
+                tooltip: qsTr("The orientation of the slider.")
+            }
+            SecondColumnLayout {
+                ComboBox {
+                    backendValue: backendValues.orientation
+                    model: [ "Horizontal", "Vertical" ]
+                    scope: "Qt"
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Live")
+                tooltip: qsTr("Whether the slider provides live value updates.")
+                disabledState: !backendValues.live.isAvailable
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    text: backendValues.live.valueToString
+                    backendValue: backendValues.live
+                    Layout.fillWidth: true
+                    enabled: backendValue.isAvailable
+                }
+            }
+
+            Label {
+                text: qsTr("Touch drag threshold")
+                tooltip: qsTr("The threshold (in logical pixels) at which a touch drag event will be initiated.")
+                disabledState: !backendValues.touchDragThreshold.isAvailable
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    minimumValue: 0
+                    maximumValue: 10000
+                    decimals: 0
+                    backendValue: backendValues.touchDragThreshold
+                    Layout.fillWidth: true
+                    enabled: backendValue.isAvailable
+                }
+            }
+        }
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/SpinBoxSpecifics.qml b/src/quickcontrols/designer/SpinBoxSpecifics.qml
new file mode 100644
index 0000000000..6bd28bb880
--- /dev/null
+++ b/src/quickcontrols/designer/SpinBoxSpecifics.qml
@@ -0,0 +1,109 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    Section {
+        width: parent.width
+        caption: qsTr("SpinBox")
+
+        SectionLayout {
+            Label {
+                text: qsTr("Value")
+                tooltip: qsTr("The current value of the spinbox.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    minimumValue: Math.min(backendValues.from.value, backendValues.to.value)
+                    maximumValue: Math.max(backendValues.from.value, backendValues.to.value)
+                    decimals: 2
+                    backendValue: backendValues.value
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("From")
+                tooltip: qsTr("The starting value of the spinbox range.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 2
+                    backendValue: backendValues.from
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("To")
+                tooltip: qsTr("The ending value of the spinbox range.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 2
+                    backendValue: backendValues.to
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Step Size")
+                tooltip: qsTr("The step size of the spinbox.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 2
+                    backendValue: backendValues.stepSize
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Editable")
+                tooltip: qsTr("Whether the spinbox is editable.")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    text: backendValues.editable.valueToString
+                    backendValue: backendValues.editable
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Wrap")
+                tooltip: qsTr("Whether the spinbox wraps.")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    text: backendValues.wrap.valueToString
+                    backendValue: backendValues.wrap
+                    Layout.fillWidth: true
+                }
+            }
+        }
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/StackViewSpecifics.qml b/src/quickcontrols/designer/StackViewSpecifics.qml
new file mode 100644
index 0000000000..c7c34a4ae1
--- /dev/null
+++ b/src/quickcontrols/designer/StackViewSpecifics.qml
@@ -0,0 +1,22 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/SwipeDelegateSpecifics.qml b/src/quickcontrols/designer/SwipeDelegateSpecifics.qml
new file mode 100644
index 0000000000..e80bc01528
--- /dev/null
+++ b/src/quickcontrols/designer/SwipeDelegateSpecifics.qml
@@ -0,0 +1,30 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    ItemDelegateSection {
+        width: parent.width
+    }
+
+    AbstractButtonSection {
+        width: parent.width
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/SwipeViewSpecifics.qml b/src/quickcontrols/designer/SwipeViewSpecifics.qml
new file mode 100644
index 0000000000..70882e2832
--- /dev/null
+++ b/src/quickcontrols/designer/SwipeViewSpecifics.qml
@@ -0,0 +1,58 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    Section {
+        width: parent.width
+        caption: qsTr("SwipeView")
+
+        SectionLayout {
+            Label {
+                text: qsTr("Interactive")
+                tooltip: qsTr("Whether the view is interactive.")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    text: backendValues.interactive.valueToString
+                    backendValue: backendValues.interactive
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Orientation")
+                tooltip: qsTr("Orientation of the view.")
+            }
+            SecondColumnLayout {
+                ComboBox {
+                    backendValue: backendValues.orientation
+                    model: [ "Horizontal", "Vertical" ]
+                    scope: "Qt"
+                    Layout.fillWidth: true
+                }
+            }
+        }
+    }
+
+    ContainerSection {
+        width: parent.width
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/SwitchDelegateSpecifics.qml b/src/quickcontrols/designer/SwitchDelegateSpecifics.qml
new file mode 100644
index 0000000000..d3d600f462
--- /dev/null
+++ b/src/quickcontrols/designer/SwitchDelegateSpecifics.qml
@@ -0,0 +1,26 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    ItemDelegateSection {
+        width: parent.width
+    }
+
+    AbstractButtonSection {
+        width: parent.width
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/SwitchSpecifics.qml b/src/quickcontrols/designer/SwitchSpecifics.qml
new file mode 100644
index 0000000000..ecfd4cf406
--- /dev/null
+++ b/src/quickcontrols/designer/SwitchSpecifics.qml
@@ -0,0 +1,26 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    AbstractButtonSection {
+        width: parent.width
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/TabBarSpecifics.qml b/src/quickcontrols/designer/TabBarSpecifics.qml
new file mode 100644
index 0000000000..1a5b08e528
--- /dev/null
+++ b/src/quickcontrols/designer/TabBarSpecifics.qml
@@ -0,0 +1,74 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    Section {
+        width: parent.width
+        caption: qsTr("TabBar")
+
+        SectionLayout {
+            Label {
+                text: qsTr("Position")
+                tooltip: qsTr("Position of the tabbar.")
+            }
+            SecondColumnLayout {
+                ComboBox {
+                    backendValue: backendValues.position
+                    model: [ "Header", "Footer" ]
+                    scope: "TabBar"
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Content Width")
+                tooltip: qsTr("Content height used for calculating the total implicit width.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 0
+                    backendValue: backendValues.contentWidth
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Content Height")
+                tooltip: qsTr("Content height used for calculating the total implicit height.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 0
+                    backendValue: backendValues.contentHeight
+                    Layout.fillWidth: true
+                }
+            }
+        }
+    }
+
+    ContainerSection {
+        width: parent.width
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/TabButtonSpecifics.qml b/src/quickcontrols/designer/TabButtonSpecifics.qml
new file mode 100644
index 0000000000..ecfd4cf406
--- /dev/null
+++ b/src/quickcontrols/designer/TabButtonSpecifics.qml
@@ -0,0 +1,26 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    AbstractButtonSection {
+        width: parent.width
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/TextAreaSpecifics.qml b/src/quickcontrols/designer/TextAreaSpecifics.qml
new file mode 100644
index 0000000000..faec481eb8
--- /dev/null
+++ b/src/quickcontrols/designer/TextAreaSpecifics.qml
@@ -0,0 +1,71 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    Section {
+        width: parent.width
+        caption: qsTr("TextArea")
+
+        SectionLayout {
+            Label {
+                text: qsTr("Placeholder")
+                tooltip: qsTr("Placeholder text displayed when the editor is empty.")
+            }
+            SecondColumnLayout {
+                LineEdit {
+                    backendValue: backendValues.placeholderText
+                    Layout.fillWidth: true
+                }
+
+            }
+
+            Label {
+                text: qsTr("Hover")
+                tooltip: qsTr("Whether text area accepts hover events.")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    text: backendValues.hoverEnabled.valueToString
+                    backendValue: backendValues.hoverEnabled
+                    Layout.fillWidth: true
+                }
+            }
+        }
+    }
+
+    Section {
+        width: parent.width
+        caption: qsTr("Placeholder Text Color")
+
+        ColorEditor {
+            caption: qsTr("Placeholder Text Color")
+            backendValue: backendValues.placeholderTextColor
+            supportGradient: false
+        }
+    }
+
+    StandardTextSection {
+        width: parent.width
+        showIsWrapping: true
+        showFormatProperty: true
+        showVerticalAlignment: true
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+
+    InsetSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/TextFieldSpecifics.qml b/src/quickcontrols/designer/TextFieldSpecifics.qml
new file mode 100644
index 0000000000..54dcefb3b1
--- /dev/null
+++ b/src/quickcontrols/designer/TextFieldSpecifics.qml
@@ -0,0 +1,68 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    Section {
+        width: parent.width
+        caption: qsTr("TextField")
+
+        SectionLayout {
+            Label {
+                text: qsTr("Placeholder")
+                tooltip: qsTr("Placeholder text displayed when the editor is empty.")
+            }
+            SecondColumnLayout {
+                LineEdit {
+                    backendValue: backendValues.placeholderText
+                    Layout.fillWidth: true
+                }
+
+            }
+
+            Label {
+                text: qsTr("Hover")
+                tooltip: qsTr("Whether text field accepts hover events.")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    text: backendValues.hoverEnabled.valueToString
+                    backendValue: backendValues.hoverEnabled
+                    Layout.fillWidth: true
+                }
+            }
+        }
+    }
+
+    Section {
+        width: parent.width
+        caption: qsTr("Placeholder Text Color")
+
+        ColorEditor {
+            caption: qsTr("Placeholder Text Color")
+            backendValue: backendValues.placeholderTextColor
+            supportGradient: false
+        }
+    }
+
+    StandardTextSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+
+    InsetSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/ToolBarSpecifics.qml b/src/quickcontrols/designer/ToolBarSpecifics.qml
new file mode 100644
index 0000000000..284443c2a0
--- /dev/null
+++ b/src/quickcontrols/designer/ToolBarSpecifics.qml
@@ -0,0 +1,46 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    Section {
+        width: parent.width
+        caption: qsTr("ToolBar")
+
+        SectionLayout {
+            Label {
+                text: qsTr("Position")
+                tooltip: qsTr("Position of the toolbar.")
+            }
+            SecondColumnLayout {
+                ComboBox {
+                    backendValue: backendValues.position
+                    model: [ "Header", "Footer" ]
+                    scope: "ToolBar"
+                    Layout.fillWidth: true
+                }
+            }
+        }
+    }
+
+    PaneSection {
+        width: parent.width
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/ToolButtonSpecifics.qml b/src/quickcontrols/designer/ToolButtonSpecifics.qml
new file mode 100644
index 0000000000..1de3c0a3c2
--- /dev/null
+++ b/src/quickcontrols/designer/ToolButtonSpecifics.qml
@@ -0,0 +1,30 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    ButtonSection {
+        width: parent.width
+    }
+
+    AbstractButtonSection {
+        width: parent.width
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/ToolSeparatorSpecifics.qml b/src/quickcontrols/designer/ToolSeparatorSpecifics.qml
new file mode 100644
index 0000000000..a2dfe43d18
--- /dev/null
+++ b/src/quickcontrols/designer/ToolSeparatorSpecifics.qml
@@ -0,0 +1,38 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    Section {
+        width: parent.width
+        caption: qsTr("ToolSeparator")
+
+        SectionLayout {
+            Label {
+                text: qsTr("Orientation")
+                tooltip: qsTr("The orientation of the separator.")
+            }
+            SecondColumnLayout {
+                ComboBox {
+                    backendValue: backendValues.orientation
+                    model: [ "Horizontal", "Vertical" ]
+                    scope: "Qt"
+                    Layout.fillWidth: true
+                }
+            }
+        }
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/TumblerSpecifics.qml b/src/quickcontrols/designer/TumblerSpecifics.qml
new file mode 100644
index 0000000000..4026a63d12
--- /dev/null
+++ b/src/quickcontrols/designer/TumblerSpecifics.qml
@@ -0,0 +1,69 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import HelperWidgets
+import QtQuick.Layouts
+
+Column {
+    width: parent.width
+
+    Section {
+        width: parent.width
+        caption: qsTr("Tumbler")
+
+        SectionLayout {
+            Label {
+                text: qsTr("Visible Count")
+                tooltip: qsTr("The count of visible items.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 0
+                    backendValue: backendValues.visibleItemCount
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Current")
+                tooltip: qsTr("The index of the current item.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 0
+                    backendValue: backendValues.currentIndex
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: qsTr("Wrap")
+                tooltip: qsTr("Whether the tumbler wrap.")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    text: backendValues.wrap.valueToString
+                    backendValue: backendValues.wrap
+                    Layout.fillWidth: true
+                }
+            }
+        }
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    FontSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/quickcontrols/designer/images/busyindicator-icon.png b/src/quickcontrols/designer/images/busyindicator-icon.png
new file mode 100644
index 0000000000..666d1ed93f
--- /dev/null
+++ b/src/quickcontrols/designer/images/busyindicator-icon.png
diff --git a/src/quickcontrols/designer/images/busyindicator-icon16.png b/src/quickcontrols/designer/images/busyindicator-icon16.png
new file mode 100644
index 0000000000..5aa57d7f48
--- /dev/null
+++ b/src/quickcontrols/designer/images/busyindicator-icon16.png
diff --git a/src/quickcontrols/designer/images/[email protected] b/src/quickcontrols/designer/images/[email protected]
new file mode 100644
index 0000000000..bb2278ff89
--- /dev/null
+++ b/src/quickcontrols/designer/images/[email protected]
diff --git a/src/quickcontrols/designer/images/button-icon.png b/src/quickcontrols/designer/images/button-icon.png
new file mode 100644
index 0000000000..c44909f6dd
--- /dev/null
+++ b/src/quickcontrols/designer/images/button-icon.png
diff --git a/src/quickcontrols/designer/images/button-icon16.png b/src/quickcontrols/designer/images/button-icon16.png
new file mode 100644
index 0000000000..5c921deb13
--- /dev/null
+++ b/src/quickcontrols/designer/images/button-icon16.png
diff --git a/src/quickcontrols/designer/images/[email protected] b/src/quickcontrols/designer/images/[email protected]
new file mode 100644
index 0000000000..f90a1ba7dc
--- /dev/null
+++ b/src/quickcontrols/designer/images/[email protected]
diff --git a/src/quickcontrols/designer/images/checkbox-icon.png b/src/quickcontrols/designer/images/checkbox-icon.png
new file mode 100644
index 0000000000..ee669b3a88
--- /dev/null
+++ b/src/quickcontrols/designer/images/checkbox-icon.png
diff --git a/src/quickcontrols/designer/images/checkbox-icon16.png b/src/quickcontrols/designer/images/checkbox-icon16.png
new file mode 100644
index 0000000000..8d89eab841
--- /dev/null
+++ b/src/quickcontrols/designer/images/checkbox-icon16.png
diff --git a/src/quickcontrols/designer/images/[email protected] b/src/quickcontrols/designer/images/[email protected]
new file mode 100644
index 0000000000..51c5601de0
--- /dev/null
+++ b/src/quickcontrols/designer/images/[email protected]
diff --git a/src/quickcontrols/designer/images/combobox-icon.png b/src/quickcontrols/designer/images/combobox-icon.png
new file mode 100644
index 0000000000..2d31b17c65
--- /dev/null
+++ b/src/quickcontrols/designer/images/combobox-icon.png
diff --git a/src/quickcontrols/designer/images/combobox-icon16.png b/src/quickcontrols/designer/images/combobox-icon16.png
new file mode 100644
index 0000000000..15fc3505ba
--- /dev/null
+++ b/src/quickcontrols/designer/images/combobox-icon16.png
diff --git a/src/quickcontrols/designer/images/[email protected] b/src/quickcontrols/designer/images/[email protected]
new file mode 100644
index 0000000000..5f82390596
--- /dev/null
+++ b/src/quickcontrols/designer/images/[email protected]
diff --git a/src/quickcontrols/designer/images/control-icon.png b/src/quickcontrols/designer/images/control-icon.png
new file mode 100644
index 0000000000..fd9e4e8ff3
--- /dev/null
+++ b/src/quickcontrols/designer/images/control-icon.png
diff --git a/src/quickcontrols/designer/images/control-icon16.png b/src/quickcontrols/designer/images/control-icon16.png
new file mode 100644
index 0000000000..31c765483e
--- /dev/null
+++ b/src/quickcontrols/designer/images/control-icon16.png
diff --git a/src/quickcontrols/designer/images/[email protected] b/src/quickcontrols/designer/images/[email protected]
new file mode 100644
index 0000000000..22604d2492
--- /dev/null
+++ b/src/quickcontrols/designer/images/[email protected]
diff --git a/src/quickcontrols/designer/images/delaybutton-icon.png b/src/quickcontrols/designer/images/delaybutton-icon.png
new file mode 100644
index 0000000000..5a55bd9f77
--- /dev/null
+++ b/src/quickcontrols/designer/images/delaybutton-icon.png
diff --git a/src/quickcontrols/designer/images/delaybutton-icon16.png b/src/quickcontrols/designer/images/delaybutton-icon16.png
new file mode 100644
index 0000000000..cd21394e46
--- /dev/null
+++ b/src/quickcontrols/designer/images/delaybutton-icon16.png
diff --git a/src/quickcontrols/designer/images/[email protected] b/src/quickcontrols/designer/images/[email protected]
new file mode 100644
index 0000000000..7beee2fab0
--- /dev/null
+++ b/src/quickcontrols/designer/images/[email protected]
diff --git a/src/quickcontrols/designer/images/dial-icon.png b/src/quickcontrols/designer/images/dial-icon.png
new file mode 100644
index 0000000000..b3b63e3523
--- /dev/null
+++ b/src/quickcontrols/designer/images/dial-icon.png
diff --git a/src/quickcontrols/designer/images/dial-icon16.png b/src/quickcontrols/designer/images/dial-icon16.png
new file mode 100644
index 0000000000..8d8c7c09b0
--- /dev/null
+++ b/src/quickcontrols/designer/images/dial-icon16.png
diff --git a/src/quickcontrols/designer/images/[email protected] b/src/quickcontrols/designer/images/[email protected]
new file mode 100644
index 0000000000..22547a16b8
--- /dev/null
+++ b/src/quickcontrols/designer/images/[email protected]
diff --git a/src/quickcontrols/designer/images/frame-icon.png b/src/quickcontrols/designer/images/frame-icon.png
new file mode 100644
index 0000000000..32abc8bf1e
--- /dev/null
+++ b/src/quickcontrols/designer/images/frame-icon.png
diff --git a/src/quickcontrols/designer/images/frame-icon16.png b/src/quickcontrols/designer/images/frame-icon16.png
new file mode 100644
index 0000000000..e5b65ad53b
--- /dev/null
+++ b/src/quickcontrols/designer/images/frame-icon16.png
diff --git a/src/quickcontrols/designer/images/[email protected] b/src/quickcontrols/designer/images/[email protected]
new file mode 100644
index 0000000000..8b876f38ec
--- /dev/null
+++ b/src/quickcontrols/designer/images/[email protected]
diff --git a/src/quickcontrols/designer/images/groupbox-icon.png b/src/quickcontrols/designer/images/groupbox-icon.png
new file mode 100644
index 0000000000..5542ecf8bf
--- /dev/null
+++ b/src/quickcontrols/designer/images/groupbox-icon.png
diff --git a/src/quickcontrols/designer/images/groupbox-icon16.png b/src/quickcontrols/designer/images/groupbox-icon16.png
new file mode 100644
index 0000000000..9cf4324819
--- /dev/null
+++ b/src/quickcontrols/designer/images/groupbox-icon16.png
diff --git a/src/quickcontrols/designer/images/[email protected] b/src/quickcontrols/designer/images/[email protected]
new file mode 100644
index 0000000000..80dab3c716
--- /dev/null
+++ b/src/quickcontrols/designer/images/[email protected]
diff --git a/src/quickcontrols/designer/images/itemdelegate-icon.png b/src/quickcontrols/designer/images/itemdelegate-icon.png
new file mode 100644
index 0000000000..822cf3e7b8
--- /dev/null
+++ b/src/quickcontrols/designer/images/itemdelegate-icon.png
diff --git a/src/quickcontrols/designer/images/itemdelegate-icon16.png b/src/quickcontrols/designer/images/itemdelegate-icon16.png
new file mode 100644
index 0000000000..b3ed007a0e
--- /dev/null
+++ b/src/quickcontrols/designer/images/itemdelegate-icon16.png
diff --git a/src/quickcontrols/designer/images/[email protected] b/src/quickcontrols/designer/images/[email protected]
new file mode 100644
index 0000000000..cb81308ff8
--- /dev/null
+++ b/src/quickcontrols/designer/images/[email protected]
diff --git a/src/quickcontrols/designer/images/label-icon.png b/src/quickcontrols/designer/images/label-icon.png
new file mode 100644
index 0000000000..788bef078c
--- /dev/null
+++ b/src/quickcontrols/designer/images/label-icon.png
diff --git a/src/quickcontrols/designer/images/label-icon16.png b/src/quickcontrols/designer/images/label-icon16.png
new file mode 100644
index 0000000000..b68d384568
--- /dev/null
+++ b/src/quickcontrols/designer/images/label-icon16.png
diff --git a/src/quickcontrols/designer/images/[email protected] b/src/quickcontrols/designer/images/[email protected]
new file mode 100644
index 0000000000..7001413d3b
--- /dev/null
+++ b/src/quickcontrols/designer/images/[email protected]
diff --git a/src/quickcontrols/designer/images/page-icon.png b/src/quickcontrols/designer/images/page-icon.png
new file mode 100644
index 0000000000..b5ac87e899
--- /dev/null
+++ b/src/quickcontrols/designer/images/page-icon.png
diff --git a/src/quickcontrols/designer/images/page-icon16.png b/src/quickcontrols/designer/images/page-icon16.png
new file mode 100644
index 0000000000..bc6810b605
--- /dev/null
+++ b/src/quickcontrols/designer/images/page-icon16.png
diff --git a/src/quickcontrols/designer/images/[email protected] b/src/quickcontrols/designer/images/[email protected]
new file mode 100644
index 0000000000..23db032f4a
--- /dev/null
+++ b/src/quickcontrols/designer/images/[email protected]
diff --git a/src/quickcontrols/designer/images/pageindicator-icon.png b/src/quickcontrols/designer/images/pageindicator-icon.png
new file mode 100644
index 0000000000..edb6b377bb
--- /dev/null
+++ b/src/quickcontrols/designer/images/pageindicator-icon.png
diff --git a/src/quickcontrols/designer/images/pageindicator-icon16.png b/src/quickcontrols/designer/images/pageindicator-icon16.png
new file mode 100644
index 0000000000..0fb8967564
--- /dev/null
+++ b/src/quickcontrols/designer/images/pageindicator-icon16.png
diff --git a/src/quickcontrols/designer/images/[email protected] b/src/quickcontrols/designer/images/[email protected]
new file mode 100644
index 0000000000..7be0ee813b
--- /dev/null
+++ b/src/quickcontrols/designer/images/[email protected]
diff --git a/src/quickcontrols/designer/images/pane-icon.png b/src/quickcontrols/designer/images/pane-icon.png
new file mode 100644
index 0000000000..62ebe487ff
--- /dev/null
+++ b/src/quickcontrols/designer/images/pane-icon.png
diff --git a/src/quickcontrols/designer/images/pane-icon16.png b/src/quickcontrols/designer/images/pane-icon16.png
new file mode 100644
index 0000000000..2b8048441c
--- /dev/null
+++ b/src/quickcontrols/designer/images/pane-icon16.png
diff --git a/src/quickcontrols/designer/images/[email protected] b/src/quickcontrols/designer/images/[email protected]
new file mode 100644
index 0000000000..55bb116a69
--- /dev/null
+++ b/src/quickcontrols/designer/images/[email protected]
diff --git a/src/quickcontrols/designer/images/progressbar-icon.png b/src/quickcontrols/designer/images/progressbar-icon.png
new file mode 100644
index 0000000000..a023f73c30
--- /dev/null
+++ b/src/quickcontrols/designer/images/progressbar-icon.png
diff --git a/src/quickcontrols/designer/images/progressbar-icon16.png b/src/quickcontrols/designer/images/progressbar-icon16.png
new file mode 100644
index 0000000000..6fede21d8c
--- /dev/null
+++ b/src/quickcontrols/designer/images/progressbar-icon16.png
diff --git a/src/quickcontrols/designer/images/[email protected] b/src/quickcontrols/designer/images/[email protected]
new file mode 100644
index 0000000000..0069400335
--- /dev/null
+++ b/src/quickcontrols/designer/images/[email protected]
diff --git a/src/quickcontrols/designer/images/radiobutton-icon.png b/src/quickcontrols/designer/images/radiobutton-icon.png
new file mode 100644
index 0000000000..d38170e22f
--- /dev/null
+++ b/src/quickcontrols/designer/images/radiobutton-icon.png
diff --git a/src/quickcontrols/designer/images/radiobutton-icon16.png b/src/quickcontrols/designer/images/radiobutton-icon16.png
new file mode 100644
index 0000000000..07b46a8ab0
--- /dev/null
+++ b/src/quickcontrols/designer/images/radiobutton-icon16.png
diff --git a/src/quickcontrols/designer/images/[email protected] b/src/quickcontrols/designer/images/[email protected]
new file mode 100644
index 0000000000..4bbddda4b2
--- /dev/null
+++ b/src/quickcontrols/designer/images/[email protected]
diff --git a/src/quickcontrols/designer/images/rangeslider-icon.png b/src/quickcontrols/designer/images/rangeslider-icon.png
new file mode 100644
index 0000000000..1c4c7b2948
--- /dev/null
+++ b/src/quickcontrols/designer/images/rangeslider-icon.png
diff --git a/src/quickcontrols/designer/images/rangeslider-icon16.png b/src/quickcontrols/designer/images/rangeslider-icon16.png
new file mode 100644
index 0000000000..3be4624ddd
--- /dev/null
+++ b/src/quickcontrols/designer/images/rangeslider-icon16.png
diff --git a/src/quickcontrols/designer/images/[email protected] b/src/quickcontrols/designer/images/[email protected]
new file mode 100644
index 0000000000..aee69b3302
--- /dev/null
+++ b/src/quickcontrols/designer/images/[email protected]
diff --git a/src/quickcontrols/designer/images/roundbutton-icon.png b/src/quickcontrols/designer/images/roundbutton-icon.png
new file mode 100644
index 0000000000..d4b470dc25
--- /dev/null
+++ b/src/quickcontrols/designer/images/roundbutton-icon.png
diff --git a/src/quickcontrols/designer/images/roundbutton-icon16.png b/src/quickcontrols/designer/images/roundbutton-icon16.png
new file mode 100644
index 0000000000..f6f3666639
--- /dev/null
+++ b/src/quickcontrols/designer/images/roundbutton-icon16.png
diff --git a/src/quickcontrols/designer/images/[email protected] b/src/quickcontrols/designer/images/[email protected]
new file mode 100644
index 0000000000..4553e165e7
--- /dev/null
+++ b/src/quickcontrols/designer/images/[email protected]
diff --git a/src/quickcontrols/designer/images/scrollview-icon.png b/src/quickcontrols/designer/images/scrollview-icon.png
new file mode 100644
index 0000000000..5ef73ff19f
--- /dev/null
+++ b/src/quickcontrols/designer/images/scrollview-icon.png
diff --git a/src/quickcontrols/designer/images/scrollview-icon16.png b/src/quickcontrols/designer/images/scrollview-icon16.png
new file mode 100644
index 0000000000..f8ca7a3685
--- /dev/null
+++ b/src/quickcontrols/designer/images/scrollview-icon16.png
diff --git a/src/quickcontrols/designer/images/[email protected] b/src/quickcontrols/designer/images/[email protected]
new file mode 100644
index 0000000000..0eb7f9665e
--- /dev/null
+++ b/src/quickcontrols/designer/images/[email protected]
diff --git a/src/quickcontrols/designer/images/slider-icon.png b/src/quickcontrols/designer/images/slider-icon.png
new file mode 100644
index 0000000000..bd0a9729be
--- /dev/null
+++ b/src/quickcontrols/designer/images/slider-icon.png
diff --git a/src/quickcontrols/designer/images/slider-icon16.png b/src/quickcontrols/designer/images/slider-icon16.png
new file mode 100644
index 0000000000..a08622df89
--- /dev/null
+++ b/src/quickcontrols/designer/images/slider-icon16.png
diff --git a/src/quickcontrols/designer/images/[email protected] b/src/quickcontrols/designer/images/[email protected]
new file mode 100644
index 0000000000..93842e4cdd
--- /dev/null
+++ b/src/quickcontrols/designer/images/[email protected]
diff --git a/src/quickcontrols/designer/images/spinbox-icon.png b/src/quickcontrols/designer/images/spinbox-icon.png
new file mode 100644
index 0000000000..37277c5e43
--- /dev/null
+++ b/src/quickcontrols/designer/images/spinbox-icon.png
diff --git a/src/quickcontrols/designer/images/spinbox-icon16.png b/src/quickcontrols/designer/images/spinbox-icon16.png
new file mode 100644
index 0000000000..f88711dd25
--- /dev/null
+++ b/src/quickcontrols/designer/images/spinbox-icon16.png
diff --git a/src/quickcontrols/designer/images/[email protected] b/src/quickcontrols/designer/images/[email protected]
new file mode 100644
index 0000000000..b62a3bad51
--- /dev/null
+++ b/src/quickcontrols/designer/images/[email protected]
diff --git a/src/quickcontrols/designer/images/stackview-icon.png b/src/quickcontrols/designer/images/stackview-icon.png
new file mode 100644
index 0000000000..a6ced34925
--- /dev/null
+++ b/src/quickcontrols/designer/images/stackview-icon.png
diff --git a/src/quickcontrols/designer/images/stackview-icon16.png b/src/quickcontrols/designer/images/stackview-icon16.png
new file mode 100644
index 0000000000..0f19d0efa3
--- /dev/null
+++ b/src/quickcontrols/designer/images/stackview-icon16.png
diff --git a/src/quickcontrols/designer/images/[email protected] b/src/quickcontrols/designer/images/[email protected]
new file mode 100644
index 0000000000..9b5ef9517b
--- /dev/null
+++ b/src/quickcontrols/designer/images/[email protected]
diff --git a/src/quickcontrols/designer/images/swipeview-icon.png b/src/quickcontrols/designer/images/swipeview-icon.png
new file mode 100644
index 0000000000..031cb27c36
--- /dev/null
+++ b/src/quickcontrols/designer/images/swipeview-icon.png
diff --git a/src/quickcontrols/designer/images/swipeview-icon16.png b/src/quickcontrols/designer/images/swipeview-icon16.png
new file mode 100644
index 0000000000..446c469690
--- /dev/null
+++ b/src/quickcontrols/designer/images/swipeview-icon16.png
diff --git a/src/quickcontrols/designer/images/[email protected] b/src/quickcontrols/designer/images/[email protected]
new file mode 100644
index 0000000000..0ccb978c46
--- /dev/null
+++ b/src/quickcontrols/designer/images/[email protected]
diff --git a/src/quickcontrols/designer/images/switch-icon.png b/src/quickcontrols/designer/images/switch-icon.png
new file mode 100644
index 0000000000..e018159286
--- /dev/null
+++ b/src/quickcontrols/designer/images/switch-icon.png
diff --git a/src/quickcontrols/designer/images/switch-icon16.png b/src/quickcontrols/designer/images/switch-icon16.png
new file mode 100644
index 0000000000..9abd275659
--- /dev/null
+++ b/src/quickcontrols/designer/images/switch-icon16.png
diff --git a/src/quickcontrols/designer/images/[email protected] b/src/quickcontrols/designer/images/[email protected]
new file mode 100644
index 0000000000..787f54ca41
--- /dev/null
+++ b/src/quickcontrols/designer/images/[email protected]
diff --git a/src/quickcontrols/designer/images/textarea-icon.png b/src/quickcontrols/designer/images/textarea-icon.png
new file mode 100644
index 0000000000..f1b2dc0f84
--- /dev/null
+++ b/src/quickcontrols/designer/images/textarea-icon.png
diff --git a/src/quickcontrols/designer/images/textarea-icon16.png b/src/quickcontrols/designer/images/textarea-icon16.png
new file mode 100644
index 0000000000..4afc1fbab5
--- /dev/null
+++ b/src/quickcontrols/designer/images/textarea-icon16.png
diff --git a/src/quickcontrols/designer/images/[email protected] b/src/quickcontrols/designer/images/[email protected]
new file mode 100644
index 0000000000..c32ecc71a9
--- /dev/null
+++ b/src/quickcontrols/designer/images/[email protected]
diff --git a/src/quickcontrols/designer/images/textfield-icon.png b/src/quickcontrols/designer/images/textfield-icon.png
new file mode 100644
index 0000000000..ba5537acef
--- /dev/null
+++ b/src/quickcontrols/designer/images/textfield-icon.png
diff --git a/src/quickcontrols/designer/images/textfield-icon16.png b/src/quickcontrols/designer/images/textfield-icon16.png
new file mode 100644
index 0000000000..c4a62a6582
--- /dev/null
+++ b/src/quickcontrols/designer/images/textfield-icon16.png
diff --git a/src/quickcontrols/designer/images/[email protected] b/src/quickcontrols/designer/images/[email protected]
new file mode 100644
index 0000000000..e05fd41b9a
--- /dev/null
+++ b/src/quickcontrols/designer/images/[email protected]
diff --git a/src/quickcontrols/designer/images/toolbar-icon.png b/src/quickcontrols/designer/images/toolbar-icon.png
new file mode 100644
index 0000000000..5cb5b2e1af
--- /dev/null
+++ b/src/quickcontrols/designer/images/toolbar-icon.png
diff --git a/src/quickcontrols/designer/images/toolbar-icon16.png b/src/quickcontrols/designer/images/toolbar-icon16.png
new file mode 100644
index 0000000000..569373afa1
--- /dev/null
+++ b/src/quickcontrols/designer/images/toolbar-icon16.png
diff --git a/src/quickcontrols/designer/images/[email protected] b/src/quickcontrols/designer/images/[email protected]
new file mode 100644
index 0000000000..fd9e6ceebc
--- /dev/null
+++ b/src/quickcontrols/designer/images/[email protected]
diff --git a/src/quickcontrols/designer/images/toolbutton-icon.png b/src/quickcontrols/designer/images/toolbutton-icon.png
new file mode 100644
index 0000000000..3298f69519
--- /dev/null
+++ b/src/quickcontrols/designer/images/toolbutton-icon.png
diff --git a/src/quickcontrols/designer/images/toolbutton-icon16.png b/src/quickcontrols/designer/images/toolbutton-icon16.png
new file mode 100644
index 0000000000..9ab7861c25
--- /dev/null
+++ b/src/quickcontrols/designer/images/toolbutton-icon16.png
diff --git a/src/quickcontrols/designer/images/[email protected] b/src/quickcontrols/designer/images/[email protected]
new file mode 100644
index 0000000000..e5958cded3
--- /dev/null
+++ b/src/quickcontrols/designer/images/[email protected]
diff --git a/src/quickcontrols/designer/images/toolseparator-icon.png b/src/quickcontrols/designer/images/toolseparator-icon.png
new file mode 100644
index 0000000000..5e99f06f2e
--- /dev/null
+++ b/src/quickcontrols/designer/images/toolseparator-icon.png
diff --git a/src/quickcontrols/designer/images/toolseparator-icon16.png b/src/quickcontrols/designer/images/toolseparator-icon16.png
new file mode 100644
index 0000000000..68f22c5df1
--- /dev/null
+++ b/src/quickcontrols/designer/images/toolseparator-icon16.png
diff --git a/src/quickcontrols/designer/images/[email protected] b/src/quickcontrols/designer/images/[email protected]
new file mode 100644
index 0000000000..549c11c67c
--- /dev/null
+++ b/src/quickcontrols/designer/images/[email protected]
diff --git a/src/quickcontrols/designer/images/tumbler-icon.png b/src/quickcontrols/designer/images/tumbler-icon.png
new file mode 100644
index 0000000000..98eb8232a2
--- /dev/null
+++ b/src/quickcontrols/designer/images/tumbler-icon.png
diff --git a/src/quickcontrols/designer/images/tumbler-icon16.png b/src/quickcontrols/designer/images/tumbler-icon16.png
new file mode 100644
index 0000000000..ff5f95cf32
--- /dev/null
+++ b/src/quickcontrols/designer/images/tumbler-icon16.png
diff --git a/src/quickcontrols/designer/images/[email protected] b/src/quickcontrols/designer/images/[email protected]
new file mode 100644
index 0000000000..236abf0cfe
--- /dev/null
+++ b/src/quickcontrols/designer/images/[email protected]
diff --git a/src/quickcontrols/designer/qtquickcontrols2.metainfo b/src/quickcontrols/designer/qtquickcontrols2.metainfo
new file mode 100644
index 0000000000..1075cec62e
--- /dev/null
+++ b/src/quickcontrols/designer/qtquickcontrols2.metainfo
@@ -0,0 +1,535 @@
+MetaInfo {
+    Type {
+        name: "QtQuick.Controls.BusyIndicator"
+        icon: "images/busyindicator-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Busy Indicator"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/busyindicator-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.Button"
+        icon: "images/button-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Button"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/button-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "text"; type: "binding"; value: "qsTr(\"Button\")" }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.CheckBox"
+        icon: "images/checkbox-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Check Box"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/checkbox-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "text"; type: "binding"; value: "qsTr(\"Check Box\")" }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.CheckDelegate"
+        icon: "images/checkbox-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Check Delegate"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/checkbox-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "text"; type: "binding"; value: "qsTr(\"Check Delegate\")" }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.ComboBox"
+        icon: "images/combobox-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Combo Box"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/combobox-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.Control"
+        icon: "images/control-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Control"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/control-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.DelayButton"
+        icon: "images/button-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Delay Button"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/delaybutton-icon.png"
+            version: "2.2"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "text"; type: "binding"; value: "qsTr(\"Delay Button\")" }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.Dial"
+        icon: "images/dial-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Dial"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/dial-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.Frame"
+        icon: "images/frame-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Frame"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/frame-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "width"; type: "int"; value: 200 }
+            Property { name: "height"; type: "int"; value: 200 }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.GroupBox"
+        icon: "images/groupbox-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Group Box"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/groupbox-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "width"; type: "int"; value: 200 }
+            Property { name: "height"; type: "int"; value: 200 }
+            Property { name: "title"; type: "binding"; value: "qsTr(\"Group Box\")" }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.ItemDelegate"
+        icon: "images/itemdelegate-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Item Delegate"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/itemdelegate-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "text"; type: "binding"; value: "qsTr(\"Item Delegate\")" }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.Label"
+        icon: "images/label-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Label"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/label-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "text"; type: "binding"; value: "qsTr(\"Label\")" }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.Page"
+        icon: "images/page-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Page"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/page-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "width"; type: "int"; value: 200 }
+            Property { name: "height"; type: "int"; value: 200 }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.PageIndicator"
+        icon: "images/pageindicator-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Page Indicator"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/pageindicator-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "count"; type: "int"; value: 3 }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.Pane"
+        icon: "images/pane-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Pane"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/pane-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "width"; type: "int"; value: 200 }
+            Property { name: "height"; type: "int"; value: 200 }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.ProgressBar"
+        icon: "images/progressbar-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Progress Bar"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/progressbar-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "value"; type: "real"; value: 0.5 }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.RadioButton"
+        icon: "images/radiobutton-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Radio Button"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/radiobutton-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "text"; type: "binding"; value: "qsTr(\"Radio Button\")" }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.RadioDelegate"
+        icon: "images/radiobutton-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Radio Delegate"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/radiobutton-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "text"; type: "binding"; value: "qsTr(\"Radio Delegate\")" }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.RangeSlider"
+        icon: "images/rangeslider-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Range Slider"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/rangeslider-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "first.value"; type: "real"; value: 0.25 }
+            Property { name: "second.value"; type: "real"; value: 0.75 }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.RoundButton"
+        icon: "images/roundbutton-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Round Button"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/roundbutton-icon.png"
+            version: "2.1"
+            requiredImport: "QtQuick.Controls"
+            Property { name: "text"; type: "string"; value: "+" }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.Slider"
+        icon: "images/slider-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Slider"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/slider-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "value"; type: "real"; value: 0.5 }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.SpinBox"
+        icon: "images/spinbox-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Spin Box"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/spinbox-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.ScrollView"
+        icon: "images/scrollview-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Scroll View"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/scrollview-icon.png"
+            version: "2.2"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "width"; type: "int"; value: 200 }
+            Property { name: "height"; type: "int"; value: 200 }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.StackView"
+        icon: "images/stackview-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Stack View"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/stackview-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "width"; type: "int"; value: 200 }
+            Property { name: "height"; type: "int"; value: 200 }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.SwipeDelegate"
+        icon: "images/itemdelegate-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Swipe Delegate"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/itemdelegate-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "text"; type: "binding"; value: "qsTr(\"Swipe Delegate\")" }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.SwipeView"
+        icon: "images/swipeview-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Swipe View"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/swipeview-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "width"; type: "int"; value: 200 }
+            Property { name: "height"; type: "int"; value: 200 }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.Switch"
+        icon: "images/switch-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Switch"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/switch-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "text"; type: "binding"; value: "qsTr(\"Switch\")" }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.SwitchDelegate"
+        icon: "images/switch-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Switch Delegate"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/switch-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "text"; type: "binding"; value: "qsTr(\"Switch Delegate\")" }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.TabBar"
+        icon: "images/toolbar-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Tab Bar"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/toolbar-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+            Property { name: "width"; type: "int"; value: 240 }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.TabButton"
+        icon: "images/toolbutton-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Tab Button"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/toolbutton-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+            Property { name: "text"; type: "binding"; value: "qsTr(\"Tab Button\")" }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.TextArea"
+        icon: "images/textarea-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Text Area"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/textarea-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "placeholderText"; type: "binding"; value: "qsTr(\"Text Area\")" }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.TextField"
+        icon: "images/textfield-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Text Field"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/textfield-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "placeholderText"; type: "binding"; value: "qsTr(\"Text Field\")" }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.ToolBar"
+        icon: "images/toolbar-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Tool Bar"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/toolbar-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "width"; type: "int"; value: 360 }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.ToolButton"
+        icon: "images/toolbutton-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Tool Button"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/toolbutton-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "text"; type: "binding"; value: "qsTr(\"Tool Button\")" }
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.ToolSeparator"
+        icon: "images/toolseparator-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Tool Separator"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/toolseparator-icon.png"
+            version: "2.1"
+            requiredImport: "QtQuick.Controls"
+        }
+    }
+
+    Type {
+        name: "QtQuick.Controls.Tumbler"
+        icon: "images/tumbler-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Tumbler"
+            category: "Qt Quick - Controls 2"
+            libraryIcon: "images/tumbler-icon.png"
+            version: "2.0"
+            requiredImport: "QtQuick.Controls"
+
+            Property { name: "model"; type: "int"; value: "10" }
+        }
+    }
+}