Qt Quick Controls 2 - Gallery#
The gallery example is a simple application with a drawer menu that contains all the Qt Quick Controls 2. Each menu item opens a page that shows the graphical appearance of a control, allows you to interact with the control, and explains in which circumstances it is handy to use this control.
# Copyright (C) 2022 The Qt Company Ltd.
# SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
"""
The gallery example is a simple application with a drawer menu that contains
all the Qt Quick Controls. Each menu item opens a page that shows the
graphical appearance of a control, allows you to interact with the control,
and explains in which circumstances it is handy to use this control.
"""
import os
import sys
import platform
from PySide6.QtGui import QGuiApplication, QIcon
from PySide6.QtCore import QSettings, QUrl
from PySide6.QtQml import QQmlApplicationEngine
from PySide6.QtQuickControls2 import QQuickStyle
import rc_gallery # noqa: F401
if __name__ == "__main__":
QGuiApplication.setApplicationName("Gallery")
QGuiApplication.setOrganizationName("QtProject")
app = QGuiApplication()
QIcon.setThemeName("gallery")
settings = QSettings()
if not os.environ.get("QT_QUICK_CONTROLS_STYLE"):
style_name = settings.value("style")
if style_name:
QQuickStyle.setStyle(style_name)
engine = QQmlApplicationEngine()
built_in_styles = ["Basic", "Fusion", "Imagine", "Material", "Universal"]
if platform.system() == "Darwin":
built_in_styles.append("macOS")
elif platform.system() == "Windows":
built_in_styles.append("Windows")
engine.setInitialProperties({"builtInStyles": built_in_styles})
engine.load(QUrl.fromLocalFile(":/gallery.qml"))
rootObjects = engine.rootObjects()
if not rootObjects:
sys.exit(-1)
window = rootObjects[0]
window.setIcon(QIcon(':/qt-project.org/logos/pysidelogo.png'))
sys.exit(app.exec())
// Copyright (C) 2021 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
pragma ComponentBehavior: Bound
import QtCore
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import "." as App
ApplicationWindow {
id: window
width: 360
height: 520
visible: true
title: "Qt Quick Controls"
//! [orientation]
readonly property bool portraitMode: window.width < window.height
//! [orientation]
function help() {
let displayingControl = listView.currentIndex !== -1
let currentControlName = displayingControl
? listView.model.get(listView.currentIndex).title.toLowerCase() : ""
let url = "https://doc.qt.io/qt-6/"
+ (displayingControl
? "qml-qtquick-controls2-" + currentControlName + ".html"
: "qtquick-controls2-qmlmodule.html");
Qt.openUrlExternally(url)
}
required property var builtInStyles
Settings {
id: settings
property string style
}
Shortcut {
sequences: ["Esc", "Back"]
enabled: stackView.depth > 1
onActivated: navigateBackAction.trigger()
}
Shortcut {
sequence: StandardKey.HelpContents
onActivated: window.help()
}
Action {
id: navigateBackAction
icon.name: stackView.depth > 1 ? "back" : "drawer"
onTriggered: {
if (stackView.depth > 1) {
stackView.pop()
listView.currentIndex = -1
} else {
drawer.open()
}
}
}
Shortcut {
sequence: "Menu"
onActivated: optionsMenuAction.trigger()
}
Action {
id: optionsMenuAction
icon.name: "menu"
onTriggered: optionsMenu.open()
}
header: App.ToolBar {
RowLayout {
spacing: 20
anchors.fill: parent
anchors.leftMargin: !window.portraitMode ? drawer.width : undefined
ToolButton {
action: navigateBackAction
visible: window.portraitMode
}
Label {
id: titleLabel
text: listView.currentItem ? (listView.currentItem as ItemDelegate).text : "Gallery"
font.pixelSize: 20
elide: Label.ElideRight
horizontalAlignment: Qt.AlignHCenter
verticalAlignment: Qt.AlignVCenter
Layout.fillWidth: true
}
ToolButton {
action: optionsMenuAction
Menu {
id: optionsMenu
x: parent.width - width
transformOrigin: Menu.TopRight
Action {
text: "Settings"
onTriggered: settingsDialog.open()
}
Action {
text: "Help"
onTriggered: window.help()
}
Action {
text: "About"
onTriggered: aboutDialog.open()
}
}
}
}
}
Drawer {
id: drawer
width: Math.min(window.width, window.height) / 3 * 2
height: window.height
modal: window.portraitMode
interactive: window.portraitMode ? (stackView.depth === 1) : false
position: window.portraitMode ? 0 : 1
visible: !window.portraitMode
ListView {
id: listView
focus: true
currentIndex: -1
anchors.fill: parent
model: ListModel {
ListElement { title: "BusyIndicator"; source: "qrc:/pages/BusyIndicatorPage.qml" }
ListElement { title: "Button"; source: "qrc:/pages/ButtonPage.qml" }
ListElement { title: "CheckBox"; source: "qrc:/pages/CheckBoxPage.qml" }
ListElement { title: "ComboBox"; source: "qrc:/pages/ComboBoxPage.qml" }
ListElement { title: "DelayButton"; source: "qrc:/pages/DelayButtonPage.qml" }
ListElement { title: "Dial"; source: "qrc:/pages/DialPage.qml" }
ListElement { title: "Dialog"; source: "qrc:/pages/DialogPage.qml" }
ListElement { title: "Delegates"; source: "qrc:/pages/DelegatePage.qml" }
ListElement { title: "Frame"; source: "qrc:/pages/FramePage.qml" }
ListElement { title: "GroupBox"; source: "qrc:/pages/GroupBoxPage.qml" }
ListElement { title: "PageIndicator"; source: "qrc:/pages/PageIndicatorPage.qml" }
ListElement { title: "ProgressBar"; source: "qrc:/pages/ProgressBarPage.qml" }
ListElement { title: "RadioButton"; source: "qrc:/pages/RadioButtonPage.qml" }
ListElement { title: "RangeSlider"; source: "qrc:/pages/RangeSliderPage.qml" }
ListElement { title: "ScrollBar"; source: "qrc:/pages/ScrollBarPage.qml" }
ListElement { title: "ScrollIndicator"; source: "qrc:/pages/ScrollIndicatorPage.qml" }
ListElement { title: "Slider"; source: "qrc:/pages/SliderPage.qml" }
ListElement { title: "SpinBox"; source: "qrc:/pages/SpinBoxPage.qml" }
ListElement { title: "StackView"; source: "qrc:/pages/StackViewPage.qml" }
ListElement { title: "SwipeView"; source: "qrc:/pages/SwipeViewPage.qml" }
ListElement { title: "Switch"; source: "qrc:/pages/SwitchPage.qml" }
ListElement { title: "TabBar"; source: "qrc:/pages/TabBarPage.qml" }
ListElement { title: "TextArea"; source: "qrc:/pages/TextAreaPage.qml" }
ListElement { title: "TextField"; source: "qrc:/pages/TextFieldPage.qml" }
ListElement { title: "ToolTip"; source: "qrc:/pages/ToolTipPage.qml" }
ListElement { title: "Tumbler"; source: "qrc:/pages/TumblerPage.qml" }
}
delegate: ItemDelegate {
id: delegateItem
width: ListView.view.width
text: title
highlighted: ListView.isCurrentItem
required property int index
required property var model
required property string title
required property string source
onClicked: {
listView.currentIndex = index
stackView.push(source)
if (window.portraitMode)
drawer.close()
}
}
ScrollIndicator.vertical: ScrollIndicator { }
}
}
StackView {
id: stackView
anchors.fill: parent
anchors.leftMargin: !window.portraitMode ? drawer.width : undefined
initialItem: Pane {
id: pane
Image {
id: logo
width: pane.availableWidth / 2
height: pane.availableHeight / 2
anchors.centerIn: parent
anchors.verticalCenterOffset: -50
fillMode: Image.PreserveAspectFit
source: "images/qt-logo.png"
}
Label {
text: "Qt Quick Controls provides a set of controls that can be used to build complete interfaces in Qt Quick."
anchors.margins: 20
anchors.top: logo.bottom
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: arrow.top
horizontalAlignment: Label.AlignHCenter
verticalAlignment: Label.AlignVCenter
wrapMode: Label.Wrap
}
Image {
id: arrow
source: "images/arrow.png"
anchors.left: parent.left
anchors.bottom: parent.bottom
visible: window.portraitMode
}
}
}
Dialog {
id: settingsDialog
x: Math.round((window.width - width) / 2)
y: Math.round(window.height / 6)
width: Math.round(Math.min(window.width, window.height) / 3 * 2)
modal: true
focus: true
title: "Settings"
standardButtons: Dialog.Ok | Dialog.Cancel
onAccepted: {
settings.style = styleBox.displayText
settingsDialog.close()
}
onRejected: {
styleBox.currentIndex = styleBox.styleIndex
settingsDialog.close()
}
contentItem: ColumnLayout {
id: settingsColumn
spacing: 20
RowLayout {
spacing: 10
Label {
text: "Style:"
}
ComboBox {
id: styleBox
property int styleIndex: -1
model: window.builtInStyles
Component.onCompleted: {
styleIndex = find(settings.style, Qt.MatchFixedString)
if (styleIndex !== -1)
currentIndex = styleIndex
}
Layout.fillWidth: true
}
}
Label {
text: "Restart required"
color: "#e41e25"
opacity: styleBox.currentIndex !== styleBox.styleIndex ? 1.0 : 0.0
horizontalAlignment: Label.AlignHCenter
verticalAlignment: Label.AlignVCenter
Layout.fillWidth: true
Layout.fillHeight: true
}
}
}
Dialog {
id: aboutDialog
modal: true
focus: true
title: "About"
x: (window.width - width) / 2
y: window.height / 6
width: Math.min(window.width, window.height) / 3 * 2
contentHeight: aboutColumn.height
Column {
id: aboutColumn
spacing: 20
Label {
width: aboutDialog.availableWidth
text: "The Qt Quick Controls module delivers the next generation user interface controls based on Qt Quick."
wrapMode: Label.Wrap
font.pixelSize: 12
}
Label {
width: aboutDialog.availableWidth
text: "In comparison to Qt Quick Controls 1, Qt Quick Controls "
+ "are an order of magnitude simpler, lighter, and faster."
wrapMode: Label.Wrap
font.pixelSize: 12
}
}
}
}
<!DOCTYPE RCC><RCC version="1.0">
<qresource>
<file>+Material/ToolBar.qml</file>
<file>ToolBar.qml</file>
<file>gallery.qml</file>
<file>icons/gallery/20x20/back.png</file>
<file>icons/gallery/20x20/drawer.png</file>
<file>icons/gallery/20x20/menu.png</file>
<file>icons/gallery/20x20@2/back.png</file>
<file>icons/gallery/20x20@2/drawer.png</file>
<file>icons/gallery/20x20@2/menu.png</file>
<file>icons/gallery/20x20@3/back.png</file>
<file>icons/gallery/20x20@3/drawer.png</file>
<file>icons/gallery/20x20@3/menu.png</file>
<file>icons/gallery/20x20@4/back.png</file>
<file>icons/gallery/20x20@4/drawer.png</file>
<file>icons/gallery/20x20@4/menu.png</file>
<file>icons/gallery/index.theme</file>
<file>images/arrow.png</file>
<file>images/arrow@2x.png</file>
<file>images/arrow@3x.png</file>
<file>images/arrow@4x.png</file>
<file>images/arrows.png</file>
<file>images/arrows@2x.png</file>
<file>images/arrows@3x.png</file>
<file>images/arrows@4x.png</file>
<file>images/qt-logo.png</file>
<file>images/qt-logo@2x.png</file>
<file>images/qt-logo@3x.png</file>
<file>images/qt-logo@4x.png</file>
<file>pages/BusyIndicatorPage.qml</file>
<file>pages/ButtonPage.qml</file>
<file>pages/CheckBoxPage.qml</file>
<file>pages/ComboBoxPage.qml</file>
<file>pages/DelayButtonPage.qml</file>
<file>pages/DelegatePage.qml</file>
<file>pages/DialPage.qml</file>
<file>pages/DialogPage.qml</file>
<file>pages/FramePage.qml</file>
<file>pages/GroupBoxPage.qml</file>
<file>pages/PageIndicatorPage.qml</file>
<file>pages/ProgressBarPage.qml</file>
<file>pages/RadioButtonPage.qml</file>
<file>pages/RangeSliderPage.qml</file>
<file>pages/ScrollBarPage.qml</file>
<file>pages/ScrollIndicatorPage.qml</file>
<file>pages/ScrollablePage.qml</file>
<file>pages/SliderPage.qml</file>
<file>pages/SpinBoxPage.qml</file>
<file>pages/StackViewPage.qml</file>
<file>pages/SwipeViewPage.qml</file>
<file>pages/SwitchPage.qml</file>
<file>pages/TabBarPage.qml</file>
<file>pages/TextAreaPage.qml</file>
<file>pages/TextFieldPage.qml</file>
<file>pages/ToolTipPage.qml</file>
<file>pages/TumblerPage.qml</file>
<file>qmldir</file>
<file>qtquickcontrols2.conf</file>
</qresource>
</RCC>
module App
[Material]
Primary=#41cd52
Accent=#41cd52
Theme=System
[Universal]
Accent=#41cd52
Theme=System
// Copyright (C) 2021 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick.Controls
ToolBar {}
// Copyright (C) 2020 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick.Controls.Material
ToolBar {
Material.foreground: "white"
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
ScrollablePage {
id: page
Column {
spacing: 40
width: parent.width
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: "ComboBox is a combined button and popup list. It presents "
+ "a list of options to the user that occupies minimal screen space."
}
ComboBox {
model: ["First", "Second", "Third"]
anchors.horizontalCenter: parent.horizontalCenter
}
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: "ComboBox can be made \l editable. An editable combo box auto-"
+ "completes its text based on what is available in the model."
}
ComboBox {
id: comboBox
editable: true
model: ListModel {
ListElement { text: "Banana" }
ListElement { text: "Apple" }
ListElement { text: "Coconut" }
}
onAccepted: {
if (find(editText) === -1)
comboBox.model.append({text: comboBox.editText})
}
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
ScrollablePage {
id: page
readonly property int itemWidth: Math.max(button.implicitWidth, Math.min(button.implicitWidth * 3, page.availableWidth / 3 * 2))
Column {
spacing: 40
width: parent.width
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: "Frame is used to layout a logical group of controls together, within a visual frame."
}
Frame {
anchors.horizontalCenter: parent.horizontalCenter
Column {
spacing: 20
width: page.itemWidth
RadioButton {
text: "First"
checked: true
width: parent.width
}
RadioButton {
id: button
text: "Second"
width: parent.width
}
RadioButton {
text: "Third"
width: parent.width
}
}
}
}
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
ScrollablePage {
id: page
Column {
spacing: 40
width: parent.width
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: "Slider is used to select a value by sliding a handle along a track."
}
Slider {
id: slider
value: 0.5
anchors.horizontalCenter: parent.horizontalCenter
}
Slider {
orientation: Qt.Vertical
value: 0.5
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
ScrollablePage {
id: page
Column {
spacing: 40
width: parent.width
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: "Tumbler is used to select a value by spinning a wheel."
}
Tumbler {
model: 10
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
ScrollablePage {
id: page
Column {
spacing: 40
width: parent.width
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: "SpinBox allows the user to choose an integer value by clicking the up or down indicator buttons, "
+ "by pressing up or down on the keyboard, or by entering a text value in the input field."
}
SpinBox {
id: box
value: 50
anchors.horizontalCenter: parent.horizontalCenter
editable: true
}
}
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
ScrollablePage {
id: page
Column {
spacing: 40
width: parent.width
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: "ProgressBar indicates the progress of an operation. It can be set in an "
+ "indeterminate mode to indicate that the length of the operation is unknown."
}
ProgressBar {
id: bar
value: 0.5
anchors.horizontalCenter: parent.horizontalCenter
}
ProgressBar {
indeterminate: true
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
Pane {
ColumnLayout {
spacing: 40
anchors.fill: parent
anchors.topMargin: 20
Label {
Layout.fillWidth: true
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: "Delegate controls are used as delegates in views such as ListView."
}
ListView {
id: listView
clip: true
section.property: "type"
section.delegate: Pane {
id: sectionPane
required property string section
width: ListView.view.width
height: sectionLabel.implicitHeight + 20
Label {
id: sectionLabel
text: sectionPane.section
anchors.centerIn: parent
}
}
Layout.fillWidth: true
Layout.fillHeight: true
readonly property var delegateComponentMap: {
"ItemDelegate": itemDelegateComponent,
"SwipeDelegate": swipeDelegateComponent,
"CheckDelegate": checkDelegateComponent,
"RadioDelegate": radioDelegateComponent,
"SwitchDelegate": switchDelegateComponent
}
Component {
id: itemDelegateComponent
ItemDelegate {
// qmllint disable unqualified
text: value
// qmllint enable unqualified
width: parent.width
}
}
Component {
id: swipeDelegateComponent
SwipeDelegate {
id: swipeDelegate
// qmllint disable unqualified
text: value
// qmllint enable unqualified
width: parent.width
Component {
id: removeComponent
Rectangle {
color: SwipeDelegate.pressed ? "#333" : "#444"
width: parent.width
height: parent.height
clip: true
SwipeDelegate.onClicked: {
// qmllint disable unqualified
view.model.remove(ourIndex)
// qmllint enable unqualified
}
Label {
// qmllint disable unqualified
font.pixelSize: swipeDelegate.font.pixelSize
// qmllint enable unqualified
text: "Remove"
color: "white"
anchors.centerIn: parent
}
}
}
SequentialAnimation {
id: removeAnimation
PropertyAction {
// qmllint disable unqualified
target: delegateItem
// qmllint enable unqualified
property: "ListView.delayRemove"
value: true
}
NumberAnimation {
// qmllint disable unqualified
target: delegateItem.item
// qmllint enable unqualified
property: "height"
to: 0
easing.type: Easing.InOutQuad
}
PropertyAction {
// qmllint disable unqualified
target: delegateItem
// qmllint enable unqualified
property: "ListView.delayRemove"
value: false
}
}
swipe.left: removeComponent
swipe.right: removeComponent
ListView.onRemove: removeAnimation.start()
}
}
Component {
id: checkDelegateComponent
CheckDelegate {
// qmllint disable unqualified
text: value
// qmllint enable unqualified
}
}
ButtonGroup {
id: radioButtonGroup
}
Component {
id: radioDelegateComponent
RadioDelegate {
// qmllint disable unqualified
text: value
ButtonGroup.group: radioButtonGroup
// qmllint enable unqualified
}
}
Component {
id: switchDelegateComponent
SwitchDelegate {
// qmllint disable unqualified
text: value
// qmllint enable unqualified
}
}
model: ListModel {
ListElement { type: "ItemDelegate"; value: "ItemDelegate1" }
ListElement { type: "ItemDelegate"; value: "ItemDelegate2" }
ListElement { type: "ItemDelegate"; value: "ItemDelegate3" }
ListElement { type: "SwipeDelegate"; value: "SwipeDelegate1" }
ListElement { type: "SwipeDelegate"; value: "SwipeDelegate2" }
ListElement { type: "SwipeDelegate"; value: "SwipeDelegate3" }
ListElement { type: "CheckDelegate"; value: "CheckDelegate1" }
ListElement { type: "CheckDelegate"; value: "CheckDelegate2" }
ListElement { type: "CheckDelegate"; value: "CheckDelegate3" }
ListElement { type: "RadioDelegate"; value: "RadioDelegate1" }
ListElement { type: "RadioDelegate"; value: "RadioDelegate2" }
ListElement { type: "RadioDelegate"; value: "RadioDelegate3" }
ListElement { type: "SwitchDelegate"; value: "SwitchDelegate1" }
ListElement { type: "SwitchDelegate"; value: "SwitchDelegate2" }
ListElement { type: "SwitchDelegate"; value: "SwitchDelegate3" }
}
delegate: Loader {
id: delegateLoader
width: ListView.view.width
// qmllint disable unqualified
sourceComponent: listView.delegateComponentMap[type]
// qmllint enable unqualified
required property string value
required property string type
required property var model
required property int index
property Loader delegateItem: delegateLoader
// qmllint disable unqualified
property ListView view: listView
// qmllint enable unqualified
property int ourIndex: index
}
}
}
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
pragma ComponentBehavior: Bound
import QtQuick
import QtQuick.Controls
StackView {
id: stackView
initialItem: page
Component {
id: page
Pane {
id: pane
width: parent ? parent.width : 0 // TODO: fix null parent on destruction
Column {
spacing: 40
width: parent.width
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: "StackView provides a stack-based navigation model which can be used with a set of interlinked pages. "
+ "Items are pushed onto the stack as the user navigates deeper into the material, and popped off again "
+ "when he chooses to go back."
}
Button {
id: button
text: "Push"
anchors.horizontalCenter: parent.horizontalCenter
width: Math.max(button.implicitWidth, Math.min(button.implicitWidth * 2, pane.availableWidth / 3))
onClicked: stackView.push(page)
}
Button {
text: "Pop"
enabled: stackView.depth > 1
width: Math.max(button.implicitWidth, Math.min(button.implicitWidth * 2, pane.availableWidth / 3))
anchors.horizontalCenter: parent.horizontalCenter
onClicked: stackView.pop()
}
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: "Stack Depth: " + stackView.depth
}
}
}
}
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
ScrollablePage {
id: page
Column {
spacing: 40
width: parent.width
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: "The Dial is similar to a traditional dial knob that is found on devices such as "
+ "stereos or industrial equipment. It allows the user to specify a value within a range."
}
Dial {
value: 0.5
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
ScrollablePage {
id: page
Column {
spacing: 40
width: parent.width
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: "PageIndicator is used to indicate the currently active page in a container of pages."
}
PageIndicator {
count: 5
currentIndex: 2
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
Pane {
id: pane
SwipeView {
id: view
currentIndex: 1
anchors.fill: parent
Repeater {
model: 3
Pane {
width: SwipeView.view.width
height: SwipeView.view.height
Column {
spacing: 40
width: parent.width
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: "SwipeView provides a navigation model that simplifies horizontal paged scrolling. "
+ "The page indicator on the bottom shows which is the presently active page."
}
Image {
source: "../images/arrows.png"
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
}
}
PageIndicator {
count: view.count
currentIndex: view.currentIndex
anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter
}
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
Page {
id: page
SwipeView {
id: swipeView
anchors.fill: parent
currentIndex: tabBar.currentIndex
Repeater {
model: 3
Pane {
width: SwipeView.view.width
height: SwipeView.view.height
Column {
spacing: 40
width: parent.width
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: "TabBar is a bar with icons or text which allows the user "
+ "to switch between different subtasks, views, or modes."
}
Image {
source: "../images/arrows.png"
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
}
}
footer: TabBar {
id: tabBar
currentIndex: swipeView.currentIndex
TabButton {
text: "First"
}
TabButton {
text: "Second"
}
TabButton {
text: "Third"
}
}
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
ScrollablePage {
id: page
Column {
spacing: 40
width: parent.width
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: "TextField is a single-line text editor."
}
TextField {
id: field
placeholderText: "TextField"
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
ScrollablePage {
id: page
readonly property int itemWidth: Math.max(button.implicitWidth, Math.min(button.implicitWidth * 3, page.availableWidth / 3 * 2))
Column {
spacing: 40
width: parent.width
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: "A GroupBox provides a frame, a title on top of it, and a logical group of controls within that frame."
}
GroupBox {
title: "Title"
anchors.horizontalCenter: parent.horizontalCenter
Column {
spacing: 20
width: page.itemWidth
RadioButton {
text: "First"
checked: true
width: parent.width
}
RadioButton {
id: button
text: "Second"
width: parent.width
}
RadioButton {
text: "Third"
width: parent.width
}
}
}
}
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
ScrollablePage {
id: page
Column {
spacing: 40
width: parent.width
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: "RadioButton presents an option button that can be toggled on or off. "
+ "Radio buttons are typically used to select one option from a set of options."
}
Column {
spacing: 20
anchors.horizontalCenter: parent.horizontalCenter
RadioButton {
text: "First"
}
RadioButton {
text: "Second"
checked: true
}
RadioButton {
text: "Third"
enabled: false
}
}
}
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
ScrollablePage {
id: page
Column {
spacing: 40
width: parent.width
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: "Button presents a push-button that can be pushed or clicked by the user. "
+ "Buttons are normally used to perform an action, or to answer a question."
}
ColumnLayout {
spacing: 20
anchors.horizontalCenter: parent.horizontalCenter
Button {
text: "First"
Layout.fillWidth: true
}
Button {
id: button
text: "Second"
highlighted: true
Layout.fillWidth: true
}
Button {
text: "Third"
enabled: false
Layout.fillWidth: true
}
}
}
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
Flickable {
id: flickable
contentHeight: pane.height
Pane {
id: pane
width: flickable.width
height: flickable.height * 1.25
Column {
id: column
spacing: 40
width: parent.width
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: "ScrollIndicator is a non-interactive indicator that indicates the current scroll position. "
+ "A scroll indicator can be either vertical or horizontal, and can be attached to any Flickable, "
+ "such as ListView and GridView."
}
Image {
rotation: 90
source: "../images/arrows.png"
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
ScrollIndicator.vertical: ScrollIndicator { }
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
Page {
id: page
default property alias content: pane.contentItem
Flickable {
anchors.fill: parent
contentHeight: pane.implicitHeight
flickableDirection: Flickable.AutoFlickIfNeeded
Pane {
id: pane
width: parent.width
}
ScrollIndicator.vertical: ScrollIndicator { }
}
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
ScrollablePage {
id: page
readonly property int buttonWidth: Math.max(button.implicitWidth, Math.min(button.implicitWidth * 2, page.availableWidth / 3))
Column {
spacing: 40
width: parent.width
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: "Dialog is a popup that is mostly used for short-term tasks "
+ "and brief communications with the user."
}
Button {
text: "Message"
anchors.horizontalCenter: parent.horizontalCenter
width: page.buttonWidth
onClicked: messageDialog.open()
Dialog {
id: messageDialog
x: (parent.width - width) / 2
y: (parent.height - height) / 2
title: "Message"
Label {
text: "Lorem ipsum dolor sit amet..."
}
}
}
Button {
id: button
text: "Confirmation"
anchors.horizontalCenter: parent.horizontalCenter
width: page.buttonWidth
onClicked: confirmationDialog.open()
Dialog {
id: confirmationDialog
x: (parent.width - width) / 2
y: (parent.height - height) / 2
parent: Overlay.overlay
modal: true
title: "Confirmation"
standardButtons: Dialog.Yes | Dialog.No
Column {
spacing: 20
anchors.fill: parent
Label {
text: "The document has been modified.\nDo you want to save your changes?"
}
CheckBox {
text: "Do not ask again"
anchors.right: parent.right
}
}
}
}
Button {
text: "Content"
anchors.horizontalCenter: parent.horizontalCenter
width: page.buttonWidth
onClicked: contentDialog.open()
Dialog {
id: contentDialog
x: (parent.width - width) / 2
y: (parent.height - height) / 2
width: Math.min(page.width, page.height) / 3 * 2
contentHeight: logo.height * 2
parent: Overlay.overlay
modal: true
title: "Content"
standardButtons: Dialog.Close
Flickable {
id: flickable
clip: true
anchors.fill: parent
contentHeight: column.height
Column {
id: column
spacing: 20
width: parent.width
Image {
id: logo
width: parent.width / 2
anchors.horizontalCenter: parent.horizontalCenter
fillMode: Image.PreserveAspectFit
source: "../images/qt-logo.png"
}
Label {
width: parent.width
text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc finibus "
+ "in est quis laoreet. Interdum et malesuada fames ac ante ipsum primis "
+ "in faucibus. Curabitur eget justo sollicitudin enim faucibus bibendum. "
+ "Suspendisse potenti. Vestibulum cursus consequat mauris id sollicitudin. "
+ "Duis facilisis hendrerit consectetur. Curabitur sapien tortor, efficitur "
+ "id auctor nec, efficitur et nisl. Ut venenatis eros in nunc placerat, "
+ "eu aliquam enim suscipit."
wrapMode: Label.Wrap
}
}
ScrollIndicator.vertical: ScrollIndicator {
parent: contentDialog.contentItem
anchors.top: flickable.top
anchors.bottom: flickable.bottom
anchors.right: parent.right
anchors.rightMargin: -contentDialog.rightPadding + 1
}
}
}
}
Button {
text: "Input"
anchors.horizontalCenter: parent.horizontalCenter
width: page.buttonWidth
onClicked: inputDialog.open()
Dialog {
id: inputDialog
x: (parent.width - width) / 2
y: (parent.height - height) / 2
parent: Overlay.overlay
focus: true
modal: true
title: "Input"
standardButtons: Dialog.Ok | Dialog.Cancel
ColumnLayout {
spacing: 20
anchors.fill: parent
Label {
elide: Label.ElideRight
text: "Please enter the credentials:"
Layout.fillWidth: true
}
TextField {
focus: true
placeholderText: "Username"
Layout.fillWidth: true
}
TextField {
placeholderText: "Password"
echoMode: TextField.PasswordEchoOnEdit
Layout.fillWidth: true
}
}
}
}
}
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
ScrollablePage {
id: page
Column {
spacing: 40
width: parent.width
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: "A tool tip is a short piece of text that informs the user of a control's function."
}
Button {
text: "Tip"
anchors.horizontalCenter: parent.horizontalCenter
ToolTip.timeout: 5000
ToolTip.visible: pressed
ToolTip.text: "This is a tool tip."
}
}
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
ScrollablePage {
id: page
Column {
spacing: 40
width: parent.width
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: "CheckBox presents an option button that can be toggled on or off. "
+ "Check boxes are typically used to select one or more options from a set of options."
}
Column {
spacing: 20
anchors.horizontalCenter: parent.horizontalCenter
CheckBox {
text: "First"
checked: true
}
CheckBox {
text: "Second"
}
CheckBox {
text: "Third"
checked: true
enabled: false
}
}
}
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
ScrollablePage {
id: page
Column {
spacing: 40
width: parent.width
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: "TextArea is a multi-line text editor."
}
TextArea {
width: page.availableWidth / 3
anchors.horizontalCenter: parent.horizontalCenter
wrapMode: TextArea.Wrap
text: "TextArea\n...\n...\n..."
}
}
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
ScrollablePage {
id: page
Column {
spacing: 40
width: parent.width
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: "RangeSlider is used to select a range specified by two values, by sliding each handle along a track."
}
RangeSlider {
id: slider
first.value: 0.25
second.value: 0.75
anchors.horizontalCenter: parent.horizontalCenter
}
RangeSlider {
orientation: Qt.Vertical
first.value: 0.25
second.value: 0.75
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
ScrollablePage {
id: page
Column {
spacing: 40
width: parent.width
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: "DelayButton is a checkable button that incorporates a delay before the "
+ "button is activated. This delay prevents accidental presses."
}
DelayButton {
text: "DelayButton"
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
ScrollablePage {
id: page
Column {
spacing: 40
width: parent.width
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: "Switch is an option button that can be dragged or toggled on or off. "
+ "Switches are typically used to select between two states."
}
Column {
spacing: 20
anchors.horizontalCenter: parent.horizontalCenter
Switch {
text: "First"
}
Switch {
text: "Second"
checked: true
}
Switch {
text: "Third"
enabled: false
}
}
}
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
Flickable {
id: flickable
contentHeight: pane.height
Pane {
id: pane
width: flickable.width
height: flickable.height * 1.25
Column {
id: column
spacing: 40
width: parent.width
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: "ScrollBar is an interactive bar that can be used to scroll to a specific position. "
+ "A scroll bar can be either vertical or horizontal, and can be attached to any Flickable, "
+ "such as ListView and GridView."
}
Image {
rotation: 90
source: "../images/arrows.png"
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
ScrollBar.vertical: ScrollBar { }
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
pragma ComponentBehavior: Bound
import QtQuick
import QtQuick.Controls
ScrollablePage {
id: page
Column {
spacing: 40
width: parent.width
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: "BusyIndicator is used to indicate activity while content is being loaded,"
+ " or when the UI is blocked waiting for a resource to become available."
}
BusyIndicator {
anchors.horizontalCenter: parent.horizontalCenter
}
}
}