Contents Menu Expand Light mode Dark mode Auto light/dark, in light mode Auto light/dark, in dark mode Skip to content
Qt for Python
Logo
Qt for Python
  • Getting Started
  • Commercial Use
  • Building from Source
  • Package Details
  • Modules API
  • Tools
  • Tutorials
  • Examples
    • Extending QML - Adding Types Example
    • Extending QML (advanced) - BirthdayParty Base Project
    • Extending QML (advanced) - Inheritance and Coercion
    • Extending QML (advanced) - Default Properties
    • Extending QML (advanced) - Grouped Properties
    • Extending QML (advanced) - Attached Properties
    • Extending QML (advanced) - Property Value Source
    • Extending QML - Binding Example
    • Extending QML - Creating a New Type
    • Extending QML - Connecting to C++ Methods and Signals
    • Extending QML - Adding Property Bindings
    • Extending QML - Using Custom Property Types
    • Extending QML - Using List Property Types
    • Extending QML - Plugins Example
    • QAbstractListModel in QML
    • Extending QML - Extension Objects Example
    • Extending QML - Methods Example
    • Extending QML - Object and List Property Types Example
    • Calling Python Methods from QML
    • Receiving return values from Python in QML
    • Handling QML Signals in Python
    • Directly Connecting QML Component Signals to Python Functions
    • Text Properties Example
    • Using Model Example
    • Object List Model Example
    • OpenGL under QML Squircle
    • Scene Graph Painted Item Example
    • QQuickRenderControl OpenGL Example
    • Scene Graph - Custom Geometry
    • String List Model Example
    • Qt Quick Examples - Window and Screen
    • Qt Quick Controls 2 - Gallery
    • Qt Quick Controls - Contact List
    • Qt Quick Controls - Filesystem Explorer
    • Widgets Gallery Example
    • Address Book Example
    • Anchor Layout Example
    • Animated Tiles Example
    • Application Chooser Example
    • Application Example
    • Basic Drawing Example
    • Basic Sort/Filter Model Example
    • Basic Layouts Example
    • Blur Picker Effect Example
    • Border Layout Example
    • Cannon Example
    • Character Map Example
    • Classwizard Example
    • Colliding Mice Example
    • Concentric Circles Examples
    • Diagram Scene Example
    • Digital Clock Example
    • Dir View Example
    • Dock Widget Example
    • Drag and Drop Robot Example
    • Draggable Text Example
    • Drop Site Example
    • Dynamic Layouts Example
    • Easing Example
    • Editable Tree Model Example
    • Elastic Nodes Example
    • Extension Example
    • Fetch More Example
    • Flow Layout Example
    • GNU gettext Example
    • Image Viewer Example
    • JSON Model Example
    • License Wizard Example
    • Lighting Example
    • Qt Linguist Example
    • MDI Example
    • Model View Tutorial Examples
    • Order Form Example
    • Painter Example
    • Plot Example
    • QRangeModel Example
    • QRegularExpression Example
    • Screenshot Example
    • Simple RHI Widget Example
    • SpinBox Delegate Example
    • Standard Dialogs Example
    • Star Delegate Example
    • States Example
    • Syntax Highlighter Example
    • System Tray Icon Example
    • Tab Dialog Example
    • Tetrix
    • TextEdit Example
    • TextObject Example
    • Thread Signals Examples
    • Trivial Wizard Example
    • Task Menu Extension Example
    • UILoader Example
    • MIME Type Browser Example
    • Settings Editor Example
    • IPC: Shared Memory
    • Mandelbrot Threads Example
    • Async “Eratosthenes” Example
    • Async “Minimal” Example
    • Blocking Fortune Client Example
    • Downloader Example
    • Fortune Client Example
    • Fortune Server Example
    • Google Suggest Example
    • Loopback Example
    • Threaded Fortune Server Example
    • SQL Books Example
    • D-Bus List Names Example
    • D-Bus Ping Pong Example
    • DOM Bookmarks Example
    • Analog Clock Window Example
    • RHI Window Example
    • Context Info Example
    • Hello GL2 Example
    • Texture Example
    • Threaded QOpenGLWidget Example
    • Sample Bindings Example
    • Using CMake
    • Scriptable Application Example
    • WigglyWidget Example
    • Media Player Example
    • RESTful API client
    • Document Viewer Example
    • OSM Buildings
    • Simple HTTP Server Example
    • Widget Graph Gallery
    • Simple Bar Graph
    • GraphsAudio Example
    • HelloGraphs Example
    • Minimal Surface Example
    • Graph Gallery
    • Surface Graph Gallery
    • Bars 3D Example
    • Surface Example
    • Surface Example
    • Surface Example
    • Area Chart Example
    • Audio Example
    • Bar Chart Example
    • Callout Example
    • Chart Themes Example
    • Donut Chart Breakdown Example
    • Dynamic Spline Example
    • Legend Example
    • Line and Bar Chart Example
    • Line Chart Example
    • Logarithmic Axis Example
    • Memory Usag Example
    • Model Data Example
    • Nested Donuts Example
    • Percent Bar Chart Example
    • Pie Chart Example
    • Selected Point Configuration Example
    • Light Markers and Points Selection Example
    • QML Polar Chart Example
    • Temperature Records Example
    • Zoom Line Chart Example
    • Audio Output Example
    • Audio Source Example
    • Camera Example
    • Player Example
    • Screen Capture Example
    • Nano Browser Example
    • WebEngine Markdown Editor Example
    • WebEngine Notifications Example
    • Simple Browser
    • Qt Widgets Nano Browser Example
    • Ax Viewer Example
    • Bluetooth Scanner Example
    • Bluetooth Low Energy Heart Rate Game
    • Bluetooth Low Energy Heart Rate Server
    • Bluetooth Low Energy Scanner Example
    • Networkx viewer Example
    • OpenCV Face Detection Example
    • Pandas Simple Example
    • Scikit Image Example
    • Matplotlib Widget 3D Example
    • Matplotlib Widget Gaussian Example
    • Map Viewer Example
    • Reddit Example
    • PDF Viewer Example
    • PDF Viewer Example
    • Custom Geometry Example
    • Introduction Example Qt Quick 3D
    • Procedural Texture Example
    • Model-View Server Example
    • Spatial Audio Panning Example
    • Hello Speak
    • Simple Qt 3D Example
    • CAN Bus example
    • Modbus Client example
    • Terminal Example
    • Move Blocks Example
    • StateMachine Ping Pong Example
    • StateMachine Rogue Example
    • Traffic Light Example
    • WebChannel Standalone Example
    • Simple CoAP Client Example
    • Simple MQTT Client Example
    • Qt OPC UA Viewer Example
    • Drumpad example (Qt Design Studio) - Final project
    • Drumpad example (Qt Design Studio) - Initial project
    • Finance Manager Example - Part 1
    • Finance Manager Example - Part 2
    • Finance Manager Example - Part 3
    • Minibrowser Example
  • Videos
  • Deployment
  • Considerations
  • Developer Notes
  • Release Notes
  • Module Index
Back to top

Qt Quick Controls 2 - Gallery¶

Tags: Android

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.

Download this example

# Copyright (C) 2022 The Qt Company Ltd.
# SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
from __future__ import annotations

"""
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", "FluentWinUI3"]

    if platform.system() == "Darwin":
        built_in_styles.append("macOS")
        built_in_styles.append("iOS")
    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'))

    exit_code = app.exec()
    del engine
    sys.exit(exit_code)
// 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: qsTr("Qt Quick Controls")

    //! [orientation]
    readonly property bool portraitMode: !orientationCheckBox.checked || 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 {
        sequences: [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()
            }
        }
    }

    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 : qsTr("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: qsTr("Settings")
                        onTriggered: settingsDialog.open()
                    }
                    Action {
                        text: qsTr("Help")
                        onTriggered: window.help()
                    }
                    Action {
                        text: qsTr("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: qsTr("BusyIndicator"); source: "qrc:/pages/BusyIndicatorPage.qml" }
                ListElement { title: qsTr("Button"); source: "qrc:/pages/ButtonPage.qml" }
                ListElement { title: qsTr("CheckBox"); source: "qrc:/pages/CheckBoxPage.qml" }
                ListElement { title: qsTr("ComboBox"); source: "qrc:/pages/ComboBoxPage.qml" }
                ListElement { title: qsTr("DelayButton"); source: "qrc:/pages/DelayButtonPage.qml" }
                ListElement { title: qsTr("Dial"); source: "qrc:/pages/DialPage.qml" }
                ListElement { title: qsTr("Dialog"); source: "qrc:/pages/DialogPage.qml" }
                ListElement { title: qsTr("Delegates"); source: "qrc:/pages/DelegatePage.qml" }
                ListElement { title: qsTr("Frame"); source: "qrc:/pages/FramePage.qml" }
                ListElement { title: qsTr("GroupBox"); source: "qrc:/pages/GroupBoxPage.qml" }
                ListElement { title: qsTr("MenuBar"); source: "qrc:/pages/MenuBarPage.qml" }
                ListElement { title: qsTr("MonthGrid"); source: "qrc:/pages/MonthGridPage.qml" }
                ListElement { title: qsTr("PageIndicator"); source: "qrc:/pages/PageIndicatorPage.qml" }
                ListElement { title: qsTr("ProgressBar"); source: "qrc:/pages/ProgressBarPage.qml" }
                ListElement { title: qsTr("RadioButton"); source: "qrc:/pages/RadioButtonPage.qml" }
                ListElement { title: qsTr("RangeSlider"); source: "qrc:/pages/RangeSliderPage.qml" }
                ListElement { title: qsTr("ScrollBar"); source: "qrc:/pages/ScrollBarPage.qml" }
                ListElement { title: qsTr("ScrollIndicator"); source: "qrc:/pages/ScrollIndicatorPage.qml" }
                ListElement { title: qsTr("SearchField"); source: "qrc:/pages/SearchFieldPage.qml" }
                ListElement { title: qsTr("Slider"); source: "qrc:/pages/SliderPage.qml" }
                ListElement { title: qsTr("SpinBox"); source: "qrc:/pages/SpinBoxPage.qml" }
                ListElement { title: qsTr("SplitView"); source: "qrc:/pages/SplitViewPage.qml" }
                ListElement { title: qsTr("StackView"); source: "qrc:/pages/StackViewPage.qml" }
                ListElement { title: qsTr("SwipeView"); source: "qrc:/pages/SwipeViewPage.qml" }
                ListElement { title: qsTr("Switch"); source: "qrc:/pages/SwitchPage.qml" }
                ListElement { title: qsTr("TabBar"); source: "qrc:/pages/TabBarPage.qml" }
                ListElement { title: qsTr("TableView"); source: "qrc:/pages/TableViewPage.qml" }
                ListElement { title: qsTr("TextArea"); source: "qrc:/pages/TextAreaPage.qml" }
                ListElement { title: qsTr("TextField"); source: "qrc:/pages/TextFieldPage.qml" }
                ListElement { title: qsTr("ToolBar"); source: "qrc:/pages/ToolBarPage.qml" }
                ListElement { title: qsTr("ToolTip"); source: "qrc:/pages/ToolTipPage.qml" }
                ListElement { title: qsTr("TreeView"); source: "qrc:/pages/TreeViewPage.qml" }
                ListElement { title: qsTr("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: {
                    if (stackView.depth > 1)
                        return

                    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: qsTr("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)
        modal: true
        focus: true
        title: qsTr("Settings")

        standardButtons: Dialog.Ok | Dialog.Cancel
        onAccepted: {
            settings.style = styleBox.displayText
            GalleryConfig.disabled = disableControlsCheckBox.checked
            settingsDialog.close()
        }
        onRejected: {
            styleBox.currentIndex = styleBox.styleIndex
            settingsDialog.close()
        }

        contentItem: ColumnLayout {
            id: settingsColumn
            spacing: 20

            RowLayout {
                spacing: 10

                Label {
                    text: qsTr("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
                }
            }

            RowLayout {
                id: colorSchemes
                // Some Qt Quick styles prioritize the respective design system guidelines
                // over the system palette.
                enabled: ["FluentWinUI3", "Fusion", "iOS", "Basic"].includes(styleBox.currentText)
                CheckBox {
                    id: autoColorScheme
                    checked: true
                    text: qsTr("Auto")
                }
                CheckBox {
                    id: darkColorScheme
                    text: qsTr("Dark Mode")
                }
                CheckBox {
                    id: lightColorScheme
                    text: qsTr("Light Mode")
                }
                ButtonGroup {
                    exclusive: true
                    buttons: colorSchemes.children
                    onCheckedButtonChanged: {
                        let scheme;
                        switch (checkedButton) {
                            case autoColorScheme:
                                scheme = Qt.Unknown
                                break;
                            case darkColorScheme:
                                scheme = Qt.Dark
                                break;
                            case lightColorScheme:
                                scheme = Qt.Light
                                break;
                        }
                        Qt.styleHints.colorScheme = scheme
                    }
                }
            }

            CheckBox {
                id: orientationCheckBox
                text: qsTr("Enable Landscape")
                checked: false
                Layout.fillWidth: true
            }

            CheckBox {
                id: disableControlsCheckBox
                checked: GalleryConfig.disabled
                text: qsTr("Disable Controls")
                Layout.fillWidth: true
            }

            Label {
                text: qsTr("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: qsTr("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: qsTr("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: qsTr("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/GalleryConfig.qml</file>
  <file>pages/GroupBoxPage.qml</file>
  <file>pages/MenuBarPage.qml</file>
  <file>pages/MonthGridPage.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/SearchFieldPage.qml</file>
  <file>pages/SliderPage.qml</file>
  <file>pages/SpinBoxPage.qml</file>
  <file>pages/SplitViewPage.qml</file>
  <file>pages/StackViewPage.qml</file>
  <file>pages/SwipeViewPage.qml</file>
  <file>pages/SwitchPage.qml</file>
  <file>pages/TabBarPage.qml</file>
  <file>pages/TableViewPage.qml</file>
  <file>pages/TextAreaPage.qml</file>
  <file>pages/TextFieldPage.qml</file>
  <file>pages/ToolBarPage.qml</file>
  <file>pages/ToolTipPage.qml</file>
  <file>pages/TreeViewPage.qml</file>
  <file>pages/TumblerPage.qml</file>
  <file>qmldir</file>
  <file>qtquickcontrols2.conf</file>
</qresource>
</RCC>
module App
singleton GalleryConfig 1.0 pages/GalleryConfig.qml
[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

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: qsTr("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
        }
    }
}
// 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

        Row {
            CheckBox {
                id: checkedCheckBox
                text: qsTr("Checked")
            }

            CheckBox {
                id: flatCheckBox
                text: qsTr("Flat")
            }

            CheckBox {
                id: pressedCheckBox
                enabled: !GalleryConfig.disabled
                text: qsTr("Pressed")
            }
        }

        Label {
            width: parent.width
            wrapMode: Label.Wrap
            horizontalAlignment: Qt.AlignHCenter
            text: qsTr("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 {
                enabled: !GalleryConfig.disabled
                text: qsTr("Button")
                checked: checkedCheckBox.checked
                flat: flatCheckBox.checked
                down: pressedCheckBox.checked ? true : undefined
                Layout.fillWidth: true
            }
            Button {
                enabled: !GalleryConfig.disabled
                text: qsTr("Highlighted")
                checked: checkedCheckBox.checked
                flat: flatCheckBox.checked
                down: pressedCheckBox.checked ? true : undefined
                highlighted: true
                Layout.fillWidth: true
            }
            RoundButton {
                enabled: !GalleryConfig.disabled
                text: qsTr("RoundButton")
                checked: checkedCheckBox.checked
                flat: flatCheckBox.checked
                down: pressedCheckBox.checked ? true : undefined
                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: qsTr("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 {
                enabled: !GalleryConfig.disabled
                text: qsTr("First")
                checked: true
            }
            CheckBox {
                enabled: !GalleryConfig.disabled
                text: qsTr("Second")
            }
        }
    }
}
// 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: qsTr("ComboBox is a combined button and popup list. It presents "
                + "a list of options to the user that occupies minimal screen space.")
        }

        ComboBox {
            enabled: !GalleryConfig.disabled
            model: [qsTr("First"), qsTr("Second"), qsTr("Third")]
            anchors.horizontalCenter: parent.horizontalCenter
        }

        Label {
            width: parent.width
            wrapMode: Label.Wrap
            horizontalAlignment: Qt.AlignHCenter
            text: qsTr("ComboBox can be made editable. An editable combo box auto-"
                + "completes its text based on what is available in the model.")
        }

        ComboBox {
            id: comboBox

            enabled: !GalleryConfig.disabled
            editable: true
            model: ListModel {
                ListElement { text: qsTr("Banana") }
                ListElement { text: qsTr("Apple") }
                ListElement { text: qsTr("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

    Column {
        spacing: 40
        width: parent.width

        Label {
            width: parent.width
            wrapMode: Label.Wrap
            horizontalAlignment: Qt.AlignHCenter
            text: qsTr("DelayButton is a checkable button that incorporates a delay before the "
                + "button is activated. This delay prevents accidental presses.")
        }

        DelayButton {
            enabled: !GalleryConfig.disabled
            text: qsTr("DelayButton")
            anchors.horizontalCenter: parent.horizontalCenter
        }
    }
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

pragma ComponentBehavior: Bound

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: qsTr("Delegate controls are used as delegates in views such as ListView.")
        }

        ButtonGroup {
            id: radioButtonGroup
        }

        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

            model: ListModel {
                ListElement { type: "ItemDelegate"; value: qsTr("ItemDelegate1") }
                ListElement { type: "ItemDelegate"; value: qsTr("ItemDelegate2") }
                ListElement { type: "ItemDelegate"; value: qsTr("ItemDelegate3") }
                ListElement { type: "SwipeDelegate"; value: qsTr("SwipeDelegate1") }
                ListElement { type: "SwipeDelegate"; value: qsTr("SwipeDelegate2") }
                ListElement { type: "SwipeDelegate"; value: qsTr("SwipeDelegate3") }
                ListElement { type: "CheckDelegate"; value: qsTr("CheckDelegate1") }
                ListElement { type: "CheckDelegate"; value: qsTr("CheckDelegate2") }
                ListElement { type: "CheckDelegate"; value: qsTr("CheckDelegate3") }
                ListElement { type: "RadioDelegate"; value: qsTr("RadioDelegate1") }
                ListElement { type: "RadioDelegate"; value: qsTr("RadioDelegate2") }
                ListElement { type: "RadioDelegate"; value: qsTr("RadioDelegate3") }
                ListElement { type: "SwitchDelegate"; value: qsTr("SwitchDelegate1") }
                ListElement { type: "SwitchDelegate"; value: qsTr("SwitchDelegate2") }
                ListElement { type: "SwitchDelegate"; value: qsTr("SwitchDelegate3") }
            }

            delegate: Loader {
                id: delegateLoader
                width: ListView.view.width
                sourceComponent: delegateComponentMap[type]

                required property string value
                required property string type
                required property var model
                required property int index

                property ListView view: listView

                readonly property var delegateComponentMap: {
                    "ItemDelegate": itemDelegateComponent,
                    "SwipeDelegate": swipeDelegateComponent,
                    "CheckDelegate": checkDelegateComponent,
                    "RadioDelegate": radioDelegateComponent,
                    "SwitchDelegate": switchDelegateComponent
                }

                Component {
                    id: itemDelegateComponent

                    ItemDelegate {
                        enabled: !GalleryConfig.disabled
                        text: delegateLoader.value
                        width: delegateLoader.width
                    }
                }

                Component {
                    id: swipeDelegateComponent

                    SwipeDelegate {
                        id: swipeDelegate
                        enabled: !GalleryConfig.disabled
                        text: delegateLoader.value
                        width: delegateLoader.width

                        Component {
                            id: removeComponent

                            Rectangle {
                                color: SwipeDelegate.pressed ? "#333" : "#444"
                                width: parent.width
                                height: parent.height
                                clip: true

                                SwipeDelegate.onClicked: {
                                    if (delegateLoader.view !== undefined)
                                        delegateLoader.view.model.remove(delegateLoader.index)
                                }

                                Label {
                                    font.pixelSize: swipeDelegate.font.pixelSize
                                    text: qsTr("Remove")
                                    color: "white"
                                    anchors.centerIn: parent
                                }
                            }
                        }

                        SequentialAnimation {
                            id: removeAnimation

                            PropertyAction {
                                target: delegateLoader
                                property: "ListView.delayRemove"
                                value: true
                            }
                            NumberAnimation {
                                target: swipeDelegate
                                property: "height"
                                to: 0
                                easing.type: Easing.InOutQuad
                            }
                            PropertyAction {
                                target: delegateLoader
                                property: "ListView.delayRemove"
                                value: false
                            }
                        }

                        swipe.left: removeComponent
                        swipe.right: removeComponent
                        ListView.onRemove: removeAnimation.start()
                    }
                }

                Component {
                    id: checkDelegateComponent

                    CheckDelegate {
                        enabled: !GalleryConfig.disabled
                        text: delegateLoader.value
                    }
                }

                Component {
                    id: radioDelegateComponent

                    RadioDelegate {
                        enabled: !GalleryConfig.disabled
                        text: delegateLoader.value

                        ButtonGroup.group: radioButtonGroup
                    }
                }

                Component {
                    id: switchDelegateComponent

                    SwitchDelegate {
                        enabled: !GalleryConfig.disabled
                        text: delegateLoader.value
                    }
                }
            }
        }
    }
}
// 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: qsTr("Dialog is a popup that is mostly used for short-term tasks "
                + "and brief communications with the user.")
        }

        Button {
            text: qsTr("Message")
            anchors.horizontalCenter: parent.horizontalCenter
            width: page.buttonWidth
            onClicked: messageDialog.open()

            Dialog {
                id: messageDialog
                enabled: !GalleryConfig.disabled

                x: (parent.width - width) / 2
                y: (parent.height - height) / 2

                title: qsTr("Message")

                Label {
                    text: qsTr("Lorem ipsum dolor sit amet...")
                }
            }
        }

        Button {
            id: button
            text: qsTr("Confirmation")
            anchors.horizontalCenter: parent.horizontalCenter
            width: page.buttonWidth
            onClicked: confirmationDialog.open()

            Dialog {
                id: confirmationDialog
                enabled: !GalleryConfig.disabled

                x: (parent.width - width) / 2
                y: (parent.height - height) / 2
                parent: Overlay.overlay

                modal: true
                title: qsTr("Confirmation")
                standardButtons: Dialog.Yes | Dialog.No

                Column {
                    spacing: 20
                    anchors.fill: parent
                    Label {
                        text: qsTr("The document has been modified.\nDo you want to save your changes?")
                    }
                    CheckBox {
                        text: qsTr("Do not ask again")
                        anchors.right: parent.right
                    }
                }
            }
        }

        Button {
            text: qsTr("Content")
            anchors.horizontalCenter: parent.horizontalCenter
            width: page.buttonWidth
            onClicked: contentDialog.open()

            Dialog {
                id: contentDialog
                enabled: !GalleryConfig.disabled

                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: qsTr("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: qsTr("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: qsTr("Input")
            anchors.horizontalCenter: parent.horizontalCenter
            width: page.buttonWidth
            onClicked: inputDialog.open()

            Dialog {
                id: inputDialog
                enabled: !GalleryConfig.disabled

                x: (parent.width - width) / 2
                y: (parent.height - height) / 2
                parent: Overlay.overlay

                focus: true
                modal: true
                title: qsTr("Input")
                standardButtons: Dialog.Ok | Dialog.Cancel

                ColumnLayout {
                    spacing: 20
                    anchors.fill: parent
                    Label {
                        elide: Label.ElideRight
                        text: qsTr("Please enter the credentials:")
                        Layout.fillWidth: true
                    }
                    TextField {
                        focus: true
                        placeholderText: qsTr("Username")
                        Layout.fillWidth: true
                    }
                    TextField {
                        placeholderText: qsTr("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: qsTr("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 {
            enabled: !GalleryConfig.disabled
            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

    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: qsTr("Frame is used to layout a logical group of controls together, within a visual frame.")
        }

        Frame {
            enabled: !GalleryConfig.disabled
            anchors.horizontalCenter: parent.horizontalCenter

            Column {
                spacing: 20
                width: page.itemWidth

                RadioButton {
                    text: qsTr("First")
                    checked: true
                    width: parent.width
                }
                RadioButton {
                    id: button
                    text: qsTr("Second")
                    width: parent.width
                }
                RadioButton {
                    text: qsTr("Third")
                    width: parent.width
                }
            }
        }
    }
}
// Copyright (C) 2025 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

pragma Singleton
import QtQuick

QtObject {
    property bool disabled: 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

    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: qsTr("A GroupBox provides a frame, a title on top of it, and a logical group of controls within that frame.")
        }

        GroupBox {
            enabled: !GalleryConfig.disabled
            title: qsTr("Title")
            anchors.horizontalCenter: parent.horizontalCenter

            Column {
                spacing: 20
                width: page.itemWidth

                RadioButton {
                    text: qsTr("First")
                    checked: true
                    width: parent.width
                }
                RadioButton {
                    id: button
                    text: qsTr("Second")
                    width: parent.width
                }
                RadioButton {
                    text: qsTr("Third")
                    width: parent.width
                }
            }
        }
    }
}
// Copyright (C) 2025 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

import QtQuick
import QtQuick.Controls

Page {
    id: page
    enabled: !GalleryConfig.disabled

    header: MenuBar {
        Menu {
            title: qsTr("&File")
            Action { text: qsTr("&New...") }
            Action { text: qsTr("&Open...") }
            Action { text: qsTr("&Save") }
            Action { text: qsTr("Save &As...") }
            MenuSeparator { }
            Action { text: qsTr("&Quit") }
        }
        Menu {
            title: qsTr("&Edit")
            Action { text: qsTr("Cu&t") }
            Action { text: qsTr("&Copy") }
            Action { text: qsTr("&Paste") }
        }
        Menu {
            title: qsTr("&Help")
            Action { text: qsTr("&About") }
        }
    }

    Label {
        anchors.verticalCenter: parent.verticalCenter
        width: parent.width
        wrapMode: Label.Wrap
        horizontalAlignment: Qt.AlignHCenter
        text: qsTr("MenuBar provides a horizontal bar with drop-down menus, "
                 + "allowing users to access grouped commands and actions "
                 + "within an application.")
    }
}
// Copyright (C) 2025 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Page {
    id: page
    enabled: !GalleryConfig.disabled

    Column {
        spacing: 40
        width: parent.width

        Label {
            width: parent.width
            wrapMode: Label.Wrap
            horizontalAlignment: Qt.AlignHCenter
            text: qsTr("MonthGrid presents a calendar month as a grid of days, "
                     + "calculated for a specific month, year, and locale.")
        }

        ColumnLayout {
            spacing: 20
            anchors.horizontalCenter: parent.horizontalCenter

            RowLayout {
                spacing: 10
                Layout.fillWidth: true

                Button {
                    implicitWidth: height
                    enabled: !GalleryConfig.disabled
                    flat: true
                    text: qsTr("<")
                    onClicked: {
                        const new_month = monthGrid.month - 1
                        if (new_month < 0) {
                            monthGrid.month = 11
                            --monthGrid.year
                        } else {
                            monthGrid.month = new_month
                        }
                    }
                }
                Item {
                    Layout.fillHeight: true
                    Layout.fillWidth: true
                    Label {
                        anchors.centerIn: parent
                        text: qsTr("%1 %2").arg(monthGrid.locale.monthName(monthGrid.month))
                                           .arg(monthGrid.year)
                    }
                }
                Button {
                    implicitWidth: height
                    enabled: !GalleryConfig.disabled
                    flat: true
                    text: qsTr(">")
                    onClicked: {
                        const new_month = monthGrid.month + 1
                        if (new_month >= 12) {
                            monthGrid.month = 0
                            ++monthGrid.year
                        } else {
                            monthGrid.month = new_month
                        }
                    }
                }
            }

            GridLayout {
                columns: 2
                Layout.fillWidth: true
                Layout.fillHeight: true

                DayOfWeekRow {
                    locale: monthGrid.locale
                    Layout.fillWidth: true
                    Layout.column: 1
                }

                WeekNumberColumn {
                    locale: monthGrid.locale
                    year: monthGrid.year
                    month: monthGrid.month
                    Layout.fillHeight: true
                }

                MonthGrid {
                    id: monthGrid
                    locale: Qt.locale("en_US")
                    year: currentDate.getFullYear()
                    month: currentDate.getMonth()
                    readonly property date currentDate: new Date()
                    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: qsTr("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

ScrollablePage {
    id: page

    Column {
        spacing: 40
        width: parent.width

        Label {
            width: parent.width
            wrapMode: Label.Wrap
            horizontalAlignment: Qt.AlignHCenter
            text: qsTr("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.Controls

ScrollablePage {
    id: page

    Column {
        spacing: 40
        width: parent.width

        Label {
            width: parent.width
            wrapMode: Label.Wrap
            horizontalAlignment: Qt.AlignHCenter
            text: qsTr("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: qsTr("First")
                enabled: !GalleryConfig.disabled
            }
            RadioButton {
                text: qsTr("Second")
                checked: true
                enabled: !GalleryConfig.disabled
            }
            RadioButton {
                text: qsTr("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

ScrollablePage {
    id: page

    Column {
        spacing: 40
        width: parent.width

        Label {
            width: parent.width
            wrapMode: Label.Wrap
            horizontalAlignment: Qt.AlignHCenter
            text: qsTr("RangeSlider is used to select a range specified by two values, by sliding each handle along a track.")
        }

        RangeSlider {
            enabled: !GalleryConfig.disabled
            first.value: 0.25
            second.value: 0.75
            anchors.horizontalCenter: parent.horizontalCenter
        }

        RangeSlider {
            enabled: !GalleryConfig.disabled
            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

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.Controls

Flickable {
    id: flickable
    enabled: !GalleryConfig.disabled
    contentHeight: pane.height

    Pane {
        id: pane
        width: flickable.width
        height: flickable.height * 1.25

        Column {
            id: column
            spacing: 40
            width: parent.width

            CheckBox {
                id: alwaysOnCheckBox
                width: parent.width
                text: qsTr("Always on")
            }

            Label {
                width: parent.width
                wrapMode: Label.Wrap
                horizontalAlignment: Qt.AlignHCenter
                text: qsTr("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 {
        policy: alwaysOnCheckBox.checked ? ScrollBar.AlwaysOn : ScrollBar.AsNeeded
    }
}
// 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
    enabled: !GalleryConfig.disabled
    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: qsTr("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) 2025 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: qsTr("SearchField is a styled text input for searching, typically "
                       + "with a magnifier and clear icon.")
        }

        ListModel {
            id: colorModel
            ListElement { color: "blue" }
            ListElement { color: "green" }
            ListElement { color: "red" }
            ListElement { color: "yellow" }
            ListElement { color: "orange" }
            ListElement { color: "purple" }
        }

        SortFilterProxyModel {
            id: colorFilter
            model: colorModel
            sorters: [
                RoleSorter {
                    roleName: "color"
                }
            ]
            filters: [
                FunctionFilter {
                    component CustomData: QtObject { property string color }
                    property var regExp: new RegExp(colorSearch.text, "i")
                    onRegExpChanged: invalidate()
                    function filter(data: CustomData): bool {
                       return regExp.test(data.color);
                    }
                }
            ]
        }

        SearchField {
            id: colorSearch
            suggestionModel: colorFilter
            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: qsTr("Slider is used to select a value by sliding a handle along a track.")
        }

        Slider {
            enabled: !GalleryConfig.disabled
            value: 0.5
            anchors.horizontalCenter: parent.horizontalCenter
        }

        Slider {
            enabled: !GalleryConfig.disabled
            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: qsTr("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 {
            enabled: !GalleryConfig.disabled
            value: 50
            anchors.horizontalCenter: parent.horizontalCenter
            editable: true
        }
    }
}
// Copyright (C) 2025 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Page {
    id: page
    enabled: !GalleryConfig.disabled

    ColumnLayout {
        anchors.fill: parent
        spacing: 40

        CheckBox {
            id: orientationCheckBox
            text: qsTr("Vertical")
        }

        Label {
            wrapMode: Label.Wrap
            horizontalAlignment: Qt.AlignHCenter
            text: qsTr("SplitView provides a container that arranges items horizontally "
                     + "or vertically, separated by draggable splitters, allowing users "
                     + "to interactively resize adjacent views within an application.")
            Layout.fillWidth: true
        }

        SplitView {
            orientation: orientationCheckBox.checked ? Qt.Vertical : Qt.Horizontal
            Layout.fillHeight: true
            Layout.fillWidth: true

            Rectangle {
                implicitWidth: 200
                implicitHeight: 100
                color: "lightblue"
                SplitView.maximumWidth: 400

                Label {
                    text: "View 1"
                    anchors.centerIn: parent
                }
            }

            Rectangle {
                id: centerItem
                color: "lightgray"
                SplitView.minimumWidth: 50
                SplitView.minimumHeight: 50
                SplitView.fillWidth: true
                SplitView.fillHeight: true

                Label {
                    text: "View 2"
                    anchors.centerIn: parent
                }
            }

            Rectangle {
                implicitWidth: 200
                implicitHeight: 100
                color: "lightgreen"

                Label {
                    text: "View 3"
                    anchors.centerIn: parent
                }
            }
        }
    }
}
// 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
    enabled: !GalleryConfig.disabled

    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: qsTr("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: qsTr("Push")
                    anchors.horizontalCenter: parent.horizontalCenter
                    width: Math.max(button.implicitWidth, Math.min(button.implicitWidth * 2, pane.availableWidth / 3))
                    onClicked: stackView.push(page)
                }

                Button {
                    text: qsTr("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: qsTr("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

Pane {
    id: pane

    SwipeView {
        id: view
        currentIndex: 1
        anchors.fill: parent
        enabled: !GalleryConfig.disabled

        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: qsTr("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

ScrollablePage {
    id: page

    Column {
        spacing: 40
        width: parent.width

        Label {
            width: parent.width
            wrapMode: Label.Wrap
            horizontalAlignment: Qt.AlignHCenter
            text: qsTr("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 {
                enabled: !GalleryConfig.disabled
                text: qsTr("First")
            }
            Switch {
                enabled: !GalleryConfig.disabled
                text: qsTr("Second")
                checked: true
            }
        }
    }
}
// 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
    enabled: !GalleryConfig.disabled

    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: qsTr("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: qsTr("First")
        }
        TabButton {
            text: qsTr("Second")
        }
        TabButton {
            text: qsTr("Third")
        }
    }
}
// Copyright (C) 2025 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Qt.labs.qmlmodels

Page {
    id: page
    enabled: !GalleryConfig.disabled

    GridLayout {
        anchors.fill: parent

        Label {
            wrapMode: Label.Wrap
            horizontalAlignment: Qt.AlignHCenter
            text: qsTr("TableView provides a scrollable grid that displays data from "
                       + "a model in rows and columns, allowing users to view and interact "
                       + "with structured information within an application.")
            Layout.fillWidth: true
            Layout.columnSpan: 2
        }

        HorizontalHeaderView {
            clip: true
            syncView: tableView
            model: tableModel.headerModel
            Layout.column: 1
            Layout.row: 1
            Layout.fillWidth: true
        }

        VerticalHeaderView {
            clip: true
            syncView: tableView
            Layout.column: 0
            Layout.row: 2
            Layout.fillHeight: true
        }

        TableView {
            id: tableView
            columnSpacing: 1
            rowSpacing: 1
            clip: true

            selectionModel: ItemSelectionModel {}
            model: tableModel

            Layout.column: 1
            Layout.row: 2
            Layout.fillWidth: true
            Layout.fillHeight: true

            delegate: TableViewDelegate {
                implicitWidth: 100
                implicitHeight: 50
                Component.onCompleted: {
                    if (contentItem as Label) {
                        contentItem.horizontalAlignment = Qt.AlignHCenter
                        contentItem.verticalAlignment = Qt.AlignVCenter
                    }
                }
            }
        }
    }

    TableModel {
        id: tableModel
        property var headerModel: [qsTr("Name"), qsTr("Color")]
        TableModelColumn { display: "name" }
        TableModelColumn { display: "color" }
        rows: [
            {
                "name": qsTr("cat"),
                "color": qsTr("black")
            },
            {
                "name": qsTr("dog"),
                "color": qsTr("brown")
            },
            {
                "name": qsTr("bird"),
                "color": qsTr("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: qsTr("TextArea is a multi-line text editor.")
        }

        TextArea {
            enabled: !GalleryConfig.disabled
            width: page.availableWidth / 3
            anchors.horizontalCenter: parent.horizontalCenter

            wrapMode: TextArea.Wrap
            text: qsTr("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: qsTr("TextField is a single-line text editor.")
        }

        TextField {
            enabled: !GalleryConfig.disabled
            placeholderText: qsTr("TextField")
            anchors.horizontalCenter: parent.horizontalCenter
        }
    }
}
// Copyright (C) 2025 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Page {
    id: page
    enabled: !GalleryConfig.disabled

    header: ToolBar {
        RowLayout {
            anchors.fill: parent

            Item {
                Layout.fillHeight: true
                Layout.preferredWidth: height
            }

            Label {
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                text: qsTr("Header")

                Layout.fillHeight: true
                Layout.fillWidth: true
            }

            ToolSeparator { }

            ToolButton { text: "\u2699" }
        }
    }

    Label {
        anchors.centerIn: parent
        width: parent.width - 20
        wrapMode: Label.Wrap
        horizontalAlignment: Qt.AlignHCenter
        text: qsTr("ToolBar provides a horizontal container for application-wide "
                 + "and context-sensitive controls, such as navigation buttons and "
                 + "search fields, typically used as a header or footer within an "
                 + "application window")
    }

    footer: ToolBar {
        RowLayout {
            anchors.fill: parent

            Label {
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                text: "\u2139"

                Layout.fillHeight: true
                Layout.preferredWidth: height
            }

            Label {
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                text: qsTr("Footer")

                Layout.fillHeight: true
                Layout.fillWidth: true
            }

            ToolSeparator { }

            ToolButton { text: "\u2630" }
        }
    }
}
// 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: qsTr("A tool tip is a short piece of text that informs the user of a control's function.")
        }

        Button {
            text: qsTr("Tip")
            anchors.horizontalCenter: parent.horizontalCenter

            ToolTip.timeout: 5000
            ToolTip.visible: pressed
            ToolTip.text: qsTr("This is a tool tip.")
        }
    }
}
// Copyright (C) 2025 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Qt.labs.qmlmodels

Page {
    id: page

    GridLayout {
        anchors.fill: parent
        anchors.margins: 10

        Label {
            wrapMode: Label.Wrap
            horizontalAlignment: Qt.AlignHCenter
            text: qsTr("TreeView provides a hierarchical view for displaying and "
                     + "navigating tree-structured data, allowing users to expand and "
                     + "collapse nodes to explore parent-child relationships within a model")

            Layout.fillWidth: true
            Layout.columnSpan: 2
        }

        Item {
            implicitHeight: 40

            Layout.columnSpan: 2
            Layout.row: 1
        }

        HorizontalHeaderView {
            clip: true
            enabled: !GalleryConfig.disabled
            syncView: treeView
            model: [qsTr("Location")]

            Layout.column: 1
            Layout.row: 2
            Layout.fillWidth: true
        }

        VerticalHeaderView {
            clip: true
            enabled: !GalleryConfig.disabled
            syncView: treeView
            model: Array.from({length: treeView.rows}, (v, k) => k + 1)

            Layout.column: 0
            Layout.row: 3
            Layout.fillHeight: true
        }

        TreeView {
            id: treeView
            clip: true
            enabled: !GalleryConfig.disabled
            rowSpacing: 2
            model: treeModel

            Layout.column: 1
            Layout.row: 3
            Layout.fillWidth: true
            Layout.fillHeight: true

            selectionModel: ItemSelectionModel {}
            delegate: TreeViewDelegate { }

            columnWidthProvider: (column) => column === 0 ? treeView.width : 0

            Component.onCompleted: expandRecursively()
        }
    }

    TreeModel {
        id: treeModel

        TableModelColumn { display: "location" }

        rows: [
            {
                location: qsTr("America"),
                rows: [
                    { location: qsTr("Brazil") },
                    {
                        location: qsTr("Canada"),
                        rows: [
                            { location: qsTr("Calgary") },
                            { location: qsTr("Vancouver") }
                        ]
                    }
                ]
            },
            { location: qsTr("Asia") },
            {
                location: qsTr("Europe"),
                rows: [
                    {
                        location: qsTr("Italy"),
                        rows: [
                            { location: qsTr("Milan") },
                            { location: qsTr("Rome") }
                        ]
                    },
                    { location: qsTr("Portugal") }
                ]
            }

        ]
    }
}
// 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: qsTr("Tumbler is used to select a value by spinning a wheel.")
        }

        Tumbler {
            enabled: !GalleryConfig.disabled
            model: 10
            anchors.horizontalCenter: parent.horizontalCenter
        }
    }
}
Next
Qt Quick Controls - Contact List
Previous
Qt Quick Examples - Window and Screen
Copyright © 2025 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 (https://www.gnu.org/licenses/fdl.html) as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.
Made with Sphinx and @pradyunsg's Furo