diff options
Diffstat (limited to 'examples/quickcontrols/gallery')
64 files changed, 1870 insertions, 0 deletions
diff --git a/examples/quickcontrols/gallery/+Material/ToolBar.qml b/examples/quickcontrols/gallery/+Material/ToolBar.qml new file mode 100644 index 0000000000..f7ecbf116e --- /dev/null +++ b/examples/quickcontrols/gallery/+Material/ToolBar.qml @@ -0,0 +1,8 @@ +// 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" +} diff --git a/examples/quickcontrols/gallery/CMakeLists.txt b/examples/quickcontrols/gallery/CMakeLists.txt new file mode 100644 index 0000000000..d2858c8c59 --- /dev/null +++ b/examples/quickcontrols/gallery/CMakeLists.txt @@ -0,0 +1,104 @@ +# Copyright (C) 2022 The Qt Company Ltd. +# SPDX-License-Identifier: BSD-3-Clause + +cmake_minimum_required(VERSION 3.16) +project(gallery_controls2 LANGUAGES CXX) + +set(CMAKE_AUTOMOC ON) + +if(NOT DEFINED INSTALL_EXAMPLESDIR) + set(INSTALL_EXAMPLESDIR "examples") +endif() + +set(INSTALL_EXAMPLEDIR "${INSTALL_EXAMPLESDIR}/quickcontrols2/gallery") + +find_package(Qt6 REQUIRED COMPONENTS Core Gui Quick QuickControls2) + +qt_add_executable(galleryexample WIN32 MACOSX_BUNDLE + gallery.cpp +) + +qt_add_qml_module(galleryexample + URI gallery + VERSION 1.0 + NO_RESOURCE_TARGET_PATH + QML_FILES + "+Material/ToolBar.qml" + "ToolBar.qml" + "gallery.qml" + "pages/BusyIndicatorPage.qml" + "pages/ButtonPage.qml" + "pages/CheckBoxPage.qml" + "pages/ComboBoxPage.qml" + "pages/DelayButtonPage.qml" + "pages/DelegatePage.qml" + "pages/DialPage.qml" + "pages/DialogPage.qml" + "pages/FramePage.qml" + "pages/GroupBoxPage.qml" + "pages/PageIndicatorPage.qml" + "pages/ProgressBarPage.qml" + "pages/RadioButtonPage.qml" + "pages/RangeSliderPage.qml" + "pages/ScrollBarPage.qml" + "pages/ScrollIndicatorPage.qml" + "pages/ScrollablePage.qml" + "pages/SliderPage.qml" + "pages/SpinBoxPage.qml" + "pages/StackViewPage.qml" + "pages/SwipeViewPage.qml" + "pages/SwitchPage.qml" + "pages/TabBarPage.qml" + "pages/TextAreaPage.qml" + "pages/TextFieldPage.qml" + "pages/ToolTipPage.qml" + "pages/TumblerPage.qml" + RESOURCES + "icons/gallery/20x20/back.png" + "icons/gallery/20x20/drawer.png" + "icons/gallery/20x20/menu.png" + "icons/gallery/20x20@2/back.png" + "icons/gallery/20x20@2/drawer.png" + "icons/gallery/20x20@2/menu.png" + "icons/gallery/20x20@3/back.png" + "icons/gallery/20x20@3/drawer.png" + "icons/gallery/20x20@3/menu.png" + "icons/gallery/20x20@4/back.png" + "icons/gallery/20x20@4/drawer.png" + "icons/gallery/20x20@4/menu.png" + "icons/gallery/index.theme" + "images/arrow.png" + "images/arrow@2x.png" + "images/arrow@3x.png" + "images/arrow@4x.png" + "images/arrows.png" + "images/arrows@2x.png" + "images/arrows@3x.png" + "images/arrows@4x.png" + "images/qt-logo.png" + "images/qt-logo@2x.png" + "images/qt-logo@3x.png" + "images/qt-logo@4x.png" + "qmldir" + "qtquickcontrols2.conf" +) + +target_link_libraries(galleryexample PUBLIC + Qt::Core + Qt::Gui + Qt::Quick + Qt::QuickControls2 +) + +if(UNIX AND NOT APPLE AND CMAKE_CROSSCOMPILING) + find_package(Qt6 REQUIRED COMPONENTS QuickTemplates2) + + # Work around QTBUG-86533 + target_link_libraries(galleryexample PRIVATE Qt::QuickTemplates2) +endif() + +install(TARGETS galleryexample + RUNTIME DESTINATION "${INSTALL_EXAMPLEDIR}" + BUNDLE DESTINATION "${INSTALL_EXAMPLEDIR}" + LIBRARY DESTINATION "${INSTALL_EXAMPLEDIR}" +) diff --git a/examples/quickcontrols/gallery/ToolBar.qml b/examples/quickcontrols/gallery/ToolBar.qml new file mode 100644 index 0000000000..ffbf422a76 --- /dev/null +++ b/examples/quickcontrols/gallery/ToolBar.qml @@ -0,0 +1,6 @@ +// Copyright (C) 2020 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick.Controls + +ToolBar {} diff --git a/examples/quickcontrols/gallery/doc/images/qtquickcontrols2-gallery-drawer.png b/examples/quickcontrols/gallery/doc/images/qtquickcontrols2-gallery-drawer.png Binary files differnew file mode 100644 index 0000000000..0df43fbc4b --- /dev/null +++ b/examples/quickcontrols/gallery/doc/images/qtquickcontrols2-gallery-drawer.png diff --git a/examples/quickcontrols/gallery/doc/images/qtquickcontrols2-gallery-menu.png b/examples/quickcontrols/gallery/doc/images/qtquickcontrols2-gallery-menu.png Binary files differnew file mode 100644 index 0000000000..3bdaae942a --- /dev/null +++ b/examples/quickcontrols/gallery/doc/images/qtquickcontrols2-gallery-menu.png diff --git a/examples/quickcontrols/gallery/doc/images/qtquickcontrols2-gallery-welcome.png b/examples/quickcontrols/gallery/doc/images/qtquickcontrols2-gallery-welcome.png Binary files differnew file mode 100644 index 0000000000..ded30381d2 --- /dev/null +++ b/examples/quickcontrols/gallery/doc/images/qtquickcontrols2-gallery-welcome.png diff --git a/examples/quickcontrols/gallery/doc/src/qtquickcontrols2-gallery.qdoc b/examples/quickcontrols/gallery/doc/src/qtquickcontrols2-gallery.qdoc new file mode 100644 index 0000000000..814768fe61 --- /dev/null +++ b/examples/quickcontrols/gallery/doc/src/qtquickcontrols2-gallery.qdoc @@ -0,0 +1,39 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +/*! + \example gallery + \keyword Qt Quick Controls - Gallery + \title Qt Quick Controls - Gallery + \keyword Qt Quick Controls 2 - Gallery + \ingroup qtquickcontrols2-examples + \brief A gallery of controls. + + \raw HTML + <div class="table"><table style="background:transparent; border:0px"> + <tr><td style="border:0px"> + \endraw + \image qtquickcontrols2-gallery-welcome.png + \caption Welcome Screen + \raw HTML + </td><td style="border:0px"> + \endraw + \image qtquickcontrols2-gallery-drawer.png + \caption Side Drawer + \raw HTML + </td><td style="border:0px"> + \endraw + \image qtquickcontrols2-gallery-menu.png + \caption Options Menu + \raw HTML + </td></tr> + </table></div> + \endraw + + The gallery example is a simple application with a drawer menu that contains + all the \l {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. + + \include examples-run.qdocinc +*/ diff --git a/examples/quickcontrols/gallery/gallery.cpp b/examples/quickcontrols/gallery/gallery.cpp new file mode 100644 index 0000000000..0242f93b9f --- /dev/null +++ b/examples/quickcontrols/gallery/gallery.cpp @@ -0,0 +1,50 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +#include <QGuiApplication> +#include <QQmlApplicationEngine> +#include <QQmlContext> +#include <QSettings> +#include <QQuickStyle> +#include <QIcon> + +int main(int argc, char *argv[]) +{ + QGuiApplication::setApplicationName("Gallery"); + QGuiApplication::setOrganizationName("QtProject"); + + QGuiApplication app(argc, argv); + + QIcon::setThemeName("gallery"); + + QSettings settings; + if (qEnvironmentVariableIsEmpty("QT_QUICK_CONTROLS_STYLE")) + QQuickStyle::setStyle(settings.value("style").toString()); + + // If this is the first time we're running the application, + // we need to set a style in the settings so that the QML + // can find it in the list of built-in styles. + const QString styleInSettings = settings.value("style").toString(); + if (styleInSettings.isEmpty()) + settings.setValue(QLatin1String("style"), QQuickStyle::name()); + + QQmlApplicationEngine engine; + + QStringList builtInStyles = { QLatin1String("Basic"), QLatin1String("Fusion"), + QLatin1String("Imagine"), QLatin1String("Material"), QLatin1String("Universal") }; +#if defined(Q_OS_MACOS) + builtInStyles << QLatin1String("macOS"); + builtInStyles << QLatin1String("iOS"); +#elif defined(Q_OS_IOS) + builtInStyles << QLatin1String("iOS"); +#elif defined(Q_OS_WINDOWS) + builtInStyles << QLatin1String("Windows"); +#endif + + engine.setInitialProperties({{ "builtInStyles", builtInStyles }}); + engine.load(QUrl("qrc:/gallery.qml")); + if (engine.rootObjects().isEmpty()) + return -1; + + return app.exec(); +} diff --git a/examples/quickcontrols/gallery/gallery.pro b/examples/quickcontrols/gallery/gallery.pro new file mode 100644 index 0000000000..e1ac462a7c --- /dev/null +++ b/examples/quickcontrols/gallery/gallery.pro @@ -0,0 +1,68 @@ +TEMPLATE = app +TARGET = gallery +QT += quick quickcontrols2 + +SOURCES += \ + gallery.cpp + +RESOURCES += \ + gallery.qml \ + pages/BusyIndicatorPage.qml \ + pages/ButtonPage.qml \ + pages/CheckBoxPage.qml \ + pages/ComboBoxPage.qml \ + pages/DelayButtonPage.qml \ + pages/DelegatePage.qml \ + pages/DialogPage.qml \ + pages/DialPage.qml \ + pages/FramePage.qml \ + pages/GroupBoxPage.qml \ + pages/PageIndicatorPage.qml \ + pages/ProgressBarPage.qml \ + pages/RadioButtonPage.qml \ + pages/RangeSliderPage.qml \ + pages/ScrollablePage.qml \ + pages/ScrollBarPage.qml \ + pages/ScrollIndicatorPage.qml \ + pages/SliderPage.qml \ + pages/SpinBoxPage.qml \ + pages/StackViewPage.qml \ + pages/SwipeViewPage.qml \ + pages/SwitchPage.qml \ + pages/TabBarPage.qml \ + pages/TextAreaPage.qml \ + pages/TextFieldPage.qml \ + pages/ToolTipPage.qml \ + pages/TumblerPage.qml \ + qmldir \ + qtquickcontrols2.conf \ + icons/gallery/index.theme \ + icons/gallery/20x20/back.png \ + icons/gallery/20x20/drawer.png \ + icons/gallery/20x20/menu.png \ + icons/gallery/20x20@2/back.png \ + icons/gallery/20x20@2/drawer.png \ + icons/gallery/20x20@2/menu.png \ + icons/gallery/20x20@3/back.png \ + icons/gallery/20x20@3/drawer.png \ + icons/gallery/20x20@3/menu.png \ + icons/gallery/20x20@4/back.png \ + icons/gallery/20x20@4/drawer.png \ + icons/gallery/20x20@4/menu.png \ + images/arrow.png \ + images/arrow@2x.png \ + images/arrow@3x.png \ + images/arrow@4x.png \ + images/arrows.png \ + images/arrows@2x.png \ + images/arrows@3x.png \ + images/arrows@4x.png \ + images/qt-logo.png \ + images/qt-logo@2x.png \ + images/qt-logo@3x.png \ + images/qt-logo@4x.png \ + ToolBar.qml \ + +Material/ToolBar.qml + +target.path = $$[QT_INSTALL_EXAMPLES]/quickcontrols2/gallery +INSTALLS += target diff --git a/examples/quickcontrols/gallery/gallery.qml b/examples/quickcontrols/gallery/gallery.qml new file mode 100644 index 0000000000..35eaed9f11 --- /dev/null +++ b/examples/quickcontrols/gallery/gallery.qml @@ -0,0 +1,295 @@ +// Copyright (C) 2022 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +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" + + 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: 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 + + ToolButton { + action: navigateBackAction + } + + Label { + id: titleLabel + text: listView.currentItem ? listView.currentItem.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: help() + } + Action { + text: "About" + onTriggered: aboutDialog.open() + } + } + } + } + } + + Drawer { + id: drawer + width: Math.min(window.width, window.height) / 3 * 2 + height: window.height + interactive: stackView.depth === 1 + + ListView { + id: listView + + focus: true + currentIndex: -1 + anchors.fill: parent + + delegate: ItemDelegate { + width: listView.width + text: model.title + highlighted: ListView.isCurrentItem + onClicked: { + listView.currentIndex = index + stackView.push(model.source) + drawer.close() + } + } + + 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" } + } + + ScrollIndicator.vertical: ScrollIndicator { } + } + } + + StackView { + id: stackView + anchors.fill: parent + + 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 + } + } + } + + 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 + } + } + } +} diff --git a/examples/quickcontrols/gallery/icons/gallery/20x20/back.png b/examples/quickcontrols/gallery/icons/gallery/20x20/back.png Binary files differnew file mode 100644 index 0000000000..1f89ee058c --- /dev/null +++ b/examples/quickcontrols/gallery/icons/gallery/20x20/back.png diff --git a/examples/quickcontrols/gallery/icons/gallery/20x20/drawer.png b/examples/quickcontrols/gallery/icons/gallery/20x20/drawer.png Binary files differnew file mode 100644 index 0000000000..1e974efae8 --- /dev/null +++ b/examples/quickcontrols/gallery/icons/gallery/20x20/drawer.png diff --git a/examples/quickcontrols/gallery/icons/gallery/20x20/menu.png b/examples/quickcontrols/gallery/icons/gallery/20x20/menu.png Binary files differnew file mode 100644 index 0000000000..a10473d9e1 --- /dev/null +++ b/examples/quickcontrols/gallery/icons/gallery/20x20/menu.png diff --git a/examples/quickcontrols/gallery/icons/gallery/20x20@2/back.png b/examples/quickcontrols/gallery/icons/gallery/20x20@2/back.png Binary files differnew file mode 100644 index 0000000000..88e290b132 --- /dev/null +++ b/examples/quickcontrols/gallery/icons/gallery/20x20@2/back.png diff --git a/examples/quickcontrols/gallery/icons/gallery/20x20@2/drawer.png b/examples/quickcontrols/gallery/icons/gallery/20x20@2/drawer.png Binary files differnew file mode 100644 index 0000000000..eba3b6cccf --- /dev/null +++ b/examples/quickcontrols/gallery/icons/gallery/20x20@2/drawer.png diff --git a/examples/quickcontrols/gallery/icons/gallery/20x20@2/menu.png b/examples/quickcontrols/gallery/icons/gallery/20x20@2/menu.png Binary files differnew file mode 100644 index 0000000000..649c2a08c6 --- /dev/null +++ b/examples/quickcontrols/gallery/icons/gallery/20x20@2/menu.png diff --git a/examples/quickcontrols/gallery/icons/gallery/20x20@3/back.png b/examples/quickcontrols/gallery/icons/gallery/20x20@3/back.png Binary files differnew file mode 100644 index 0000000000..4402c7d30b --- /dev/null +++ b/examples/quickcontrols/gallery/icons/gallery/20x20@3/back.png diff --git a/examples/quickcontrols/gallery/icons/gallery/20x20@3/drawer.png b/examples/quickcontrols/gallery/icons/gallery/20x20@3/drawer.png Binary files differnew file mode 100644 index 0000000000..3584ed6d8b --- /dev/null +++ b/examples/quickcontrols/gallery/icons/gallery/20x20@3/drawer.png diff --git a/examples/quickcontrols/gallery/icons/gallery/20x20@3/menu.png b/examples/quickcontrols/gallery/icons/gallery/20x20@3/menu.png Binary files differnew file mode 100644 index 0000000000..9554b6952b --- /dev/null +++ b/examples/quickcontrols/gallery/icons/gallery/20x20@3/menu.png diff --git a/examples/quickcontrols/gallery/icons/gallery/20x20@4/back.png b/examples/quickcontrols/gallery/icons/gallery/20x20@4/back.png Binary files differnew file mode 100644 index 0000000000..9982478c18 --- /dev/null +++ b/examples/quickcontrols/gallery/icons/gallery/20x20@4/back.png diff --git a/examples/quickcontrols/gallery/icons/gallery/20x20@4/drawer.png b/examples/quickcontrols/gallery/icons/gallery/20x20@4/drawer.png Binary files differnew file mode 100644 index 0000000000..60d93aff7b --- /dev/null +++ b/examples/quickcontrols/gallery/icons/gallery/20x20@4/drawer.png diff --git a/examples/quickcontrols/gallery/icons/gallery/20x20@4/menu.png b/examples/quickcontrols/gallery/icons/gallery/20x20@4/menu.png Binary files differnew file mode 100644 index 0000000000..187c171cde --- /dev/null +++ b/examples/quickcontrols/gallery/icons/gallery/20x20@4/menu.png diff --git a/examples/quickcontrols/gallery/icons/gallery/index.theme b/examples/quickcontrols/gallery/icons/gallery/index.theme new file mode 100644 index 0000000000..a1bcd5e03c --- /dev/null +++ b/examples/quickcontrols/gallery/icons/gallery/index.theme @@ -0,0 +1,24 @@ +[Icon Theme] +Name=Gallery +Comment=Qt Quick Controls 2 Gallery Example Icon Theme + +Directories=20x20,20x20@2,20x20@3,20x20@4 + +[20x20] +Size=20 +Type=Fixed + +[20x20@2] +Size=20 +Scale=2 +Type=Fixed + +[20x20@3] +Size=20 +Scale=3 +Type=Fixed + +[20x20@4] +Size=20 +Scale=4 +Type=Fixed diff --git a/examples/quickcontrols/gallery/images/arrow.png b/examples/quickcontrols/gallery/images/arrow.png Binary files differnew file mode 100644 index 0000000000..9835108eb9 --- /dev/null +++ b/examples/quickcontrols/gallery/images/arrow.png diff --git a/examples/quickcontrols/gallery/images/arrow@2x.png b/examples/quickcontrols/gallery/images/arrow@2x.png Binary files differnew file mode 100644 index 0000000000..a5187d48cf --- /dev/null +++ b/examples/quickcontrols/gallery/images/arrow@2x.png diff --git a/examples/quickcontrols/gallery/images/arrow@3x.png b/examples/quickcontrols/gallery/images/arrow@3x.png Binary files differnew file mode 100644 index 0000000000..a512f648c8 --- /dev/null +++ b/examples/quickcontrols/gallery/images/arrow@3x.png diff --git a/examples/quickcontrols/gallery/images/arrow@4x.png b/examples/quickcontrols/gallery/images/arrow@4x.png Binary files differnew file mode 100644 index 0000000000..fd893ebb0d --- /dev/null +++ b/examples/quickcontrols/gallery/images/arrow@4x.png diff --git a/examples/quickcontrols/gallery/images/arrows.png b/examples/quickcontrols/gallery/images/arrows.png Binary files differnew file mode 100644 index 0000000000..3a4cc9b95f --- /dev/null +++ b/examples/quickcontrols/gallery/images/arrows.png diff --git a/examples/quickcontrols/gallery/images/arrows@2x.png b/examples/quickcontrols/gallery/images/arrows@2x.png Binary files differnew file mode 100644 index 0000000000..8c80a2b45b --- /dev/null +++ b/examples/quickcontrols/gallery/images/arrows@2x.png diff --git a/examples/quickcontrols/gallery/images/arrows@3x.png b/examples/quickcontrols/gallery/images/arrows@3x.png Binary files differnew file mode 100644 index 0000000000..22f23cefb9 --- /dev/null +++ b/examples/quickcontrols/gallery/images/arrows@3x.png diff --git a/examples/quickcontrols/gallery/images/arrows@4x.png b/examples/quickcontrols/gallery/images/arrows@4x.png Binary files differnew file mode 100644 index 0000000000..6d1afeef5c --- /dev/null +++ b/examples/quickcontrols/gallery/images/arrows@4x.png diff --git a/examples/quickcontrols/gallery/images/qt-logo.png b/examples/quickcontrols/gallery/images/qt-logo.png Binary files differnew file mode 100644 index 0000000000..dff7729515 --- /dev/null +++ b/examples/quickcontrols/gallery/images/qt-logo.png diff --git a/examples/quickcontrols/gallery/images/qt-logo@2x.png b/examples/quickcontrols/gallery/images/qt-logo@2x.png Binary files differnew file mode 100644 index 0000000000..dbd73aab77 --- /dev/null +++ b/examples/quickcontrols/gallery/images/qt-logo@2x.png diff --git a/examples/quickcontrols/gallery/images/qt-logo@3x.png b/examples/quickcontrols/gallery/images/qt-logo@3x.png Binary files differnew file mode 100644 index 0000000000..68e763b597 --- /dev/null +++ b/examples/quickcontrols/gallery/images/qt-logo@3x.png diff --git a/examples/quickcontrols/gallery/images/qt-logo@4x.png b/examples/quickcontrols/gallery/images/qt-logo@4x.png Binary files differnew file mode 100644 index 0000000000..08fd882572 --- /dev/null +++ b/examples/quickcontrols/gallery/images/qt-logo@4x.png diff --git a/examples/quickcontrols/gallery/pages/BusyIndicatorPage.qml b/examples/quickcontrols/gallery/pages/BusyIndicatorPage.qml new file mode 100644 index 0000000000..616e645688 --- /dev/null +++ b/examples/quickcontrols/gallery/pages/BusyIndicatorPage.qml @@ -0,0 +1,26 @@ +// 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: "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 + } + } +} diff --git a/examples/quickcontrols/gallery/pages/ButtonPage.qml b/examples/quickcontrols/gallery/pages/ButtonPage.qml new file mode 100644 index 0000000000..06051767e9 --- /dev/null +++ b/examples/quickcontrols/gallery/pages/ButtonPage.qml @@ -0,0 +1,44 @@ +// 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 + } + } + } +} diff --git a/examples/quickcontrols/gallery/pages/CheckBoxPage.qml b/examples/quickcontrols/gallery/pages/CheckBoxPage.qml new file mode 100644 index 0000000000..003e44c82c --- /dev/null +++ b/examples/quickcontrols/gallery/pages/CheckBoxPage.qml @@ -0,0 +1,40 @@ +// 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 + } + } + } +} diff --git a/examples/quickcontrols/gallery/pages/ComboBoxPage.qml b/examples/quickcontrols/gallery/pages/ComboBoxPage.qml new file mode 100644 index 0000000000..35c3d60d16 --- /dev/null +++ b/examples/quickcontrols/gallery/pages/ComboBoxPage.qml @@ -0,0 +1,50 @@ +// 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 { + editable: true + model: ListModel { + id: model + ListElement { text: "Banana" } + ListElement { text: "Apple" } + ListElement { text: "Coconut" } + } + onAccepted: { + if (find(editText) === -1) + model.append({text: editText}) + } + anchors.horizontalCenter: parent.horizontalCenter + } + } +} diff --git a/examples/quickcontrols/gallery/pages/DelayButtonPage.qml b/examples/quickcontrols/gallery/pages/DelayButtonPage.qml new file mode 100644 index 0000000000..4c0e8725b9 --- /dev/null +++ b/examples/quickcontrols/gallery/pages/DelayButtonPage.qml @@ -0,0 +1,27 @@ +// 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 + } + } +} diff --git a/examples/quickcontrols/gallery/pages/DelegatePage.qml b/examples/quickcontrols/gallery/pages/DelegatePage.qml new file mode 100644 index 0000000000..c57388cc6a --- /dev/null +++ b/examples/quickcontrols/gallery/pages/DelegatePage.qml @@ -0,0 +1,173 @@ +// 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 { + padding: 0 + + property var delegateComponentMap: { + "ItemDelegate": itemDelegateComponent, + "SwipeDelegate": swipeDelegateComponent, + "CheckDelegate": checkDelegateComponent, + "RadioDelegate": radioDelegateComponent, + "SwitchDelegate": switchDelegateComponent + } + + Component { + id: itemDelegateComponent + + ItemDelegate { + text: labelText + width: parent.width + } + } + + Component { + id: swipeDelegateComponent + + SwipeDelegate { + id: swipeDelegate + text: labelText + width: parent.width + + Component { + id: removeComponent + + Rectangle { + color: SwipeDelegate.pressed ? "#333" : "#444" + width: parent.width + height: parent.height + clip: true + + SwipeDelegate.onClicked: view.model.remove(ourIndex) + + Label { + font.pixelSize: swipeDelegate.font.pixelSize + text: "Remove" + color: "white" + anchors.centerIn: parent + } + } + } + + swipe.left: removeComponent + swipe.right: removeComponent + } + } + + Component { + id: checkDelegateComponent + + CheckDelegate { + text: labelText + } + } + + ButtonGroup { + id: radioButtonGroup + } + + Component { + id: radioDelegateComponent + + RadioDelegate { + text: labelText + ButtonGroup.group: radioButtonGroup + } + } + + Component { + id: switchDelegateComponent + + SwitchDelegate { + text: labelText + } + } + + ColumnLayout { + id: column + 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 + Layout.fillWidth: true + Layout.fillHeight: true + clip: true + model: ListModel { + ListElement { type: "ItemDelegate"; text: "ItemDelegate" } + ListElement { type: "ItemDelegate"; text: "ItemDelegate" } + ListElement { type: "ItemDelegate"; text: "ItemDelegate" } + ListElement { type: "SwipeDelegate"; text: "SwipeDelegate" } + ListElement { type: "SwipeDelegate"; text: "SwipeDelegate" } + ListElement { type: "SwipeDelegate"; text: "SwipeDelegate" } + ListElement { type: "CheckDelegate"; text: "CheckDelegate" } + ListElement { type: "CheckDelegate"; text: "CheckDelegate" } + ListElement { type: "CheckDelegate"; text: "CheckDelegate" } + ListElement { type: "RadioDelegate"; text: "RadioDelegate" } + ListElement { type: "RadioDelegate"; text: "RadioDelegate" } + ListElement { type: "RadioDelegate"; text: "RadioDelegate" } + ListElement { type: "SwitchDelegate"; text: "SwitchDelegate" } + ListElement { type: "SwitchDelegate"; text: "SwitchDelegate" } + ListElement { type: "SwitchDelegate"; text: "SwitchDelegate" } + } + + section.property: "type" + section.delegate: Pane { + width: listView.width + height: sectionLabel.implicitHeight + 20 + + Label { + id: sectionLabel + text: section + anchors.centerIn: parent + } + } + + delegate: Loader { + id: delegateLoader + width: listView.width + sourceComponent: delegateComponentMap[text] + + property string labelText: text + property ListView view: listView + property int ourIndex: index + + // Can't find a way to do this in the SwipeDelegate component itself, + // so do it here instead. + SequentialAnimation { + id: removeAnimation + + PropertyAction { + target: delegateLoader + property: "ListView.delayRemove" + value: true + } + NumberAnimation { + target: item + property: "height" + to: 0 + easing.type: Easing.InOutQuad + } + PropertyAction { + target: delegateLoader + property: "ListView.delayRemove" + value: false + } + } + ListView.onRemove: removeAnimation.start() + } + } + } +} diff --git a/examples/quickcontrols/gallery/pages/DialPage.qml b/examples/quickcontrols/gallery/pages/DialPage.qml new file mode 100644 index 0000000000..17c9e090ba --- /dev/null +++ b/examples/quickcontrols/gallery/pages/DialPage.qml @@ -0,0 +1,27 @@ +// 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 + } + } +} diff --git a/examples/quickcontrols/gallery/pages/DialogPage.qml b/examples/quickcontrols/gallery/pages/DialogPage.qml new file mode 100644 index 0000000000..982a7f38d4 --- /dev/null +++ b/examples/quickcontrols/gallery/pages/DialogPage.qml @@ -0,0 +1,179 @@ +// 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: 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: 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: 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: 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 + } + } + } + } + } +} diff --git a/examples/quickcontrols/gallery/pages/FramePage.qml b/examples/quickcontrols/gallery/pages/FramePage.qml new file mode 100644 index 0000000000..8526442537 --- /dev/null +++ b/examples/quickcontrols/gallery/pages/FramePage.qml @@ -0,0 +1,47 @@ +// 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 + } + } + } + } +} diff --git a/examples/quickcontrols/gallery/pages/GroupBoxPage.qml b/examples/quickcontrols/gallery/pages/GroupBoxPage.qml new file mode 100644 index 0000000000..9e24d8e6ca --- /dev/null +++ b/examples/quickcontrols/gallery/pages/GroupBoxPage.qml @@ -0,0 +1,48 @@ +// 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 + } + } + } + } +} diff --git a/examples/quickcontrols/gallery/pages/PageIndicatorPage.qml b/examples/quickcontrols/gallery/pages/PageIndicatorPage.qml new file mode 100644 index 0000000000..e83c86563e --- /dev/null +++ b/examples/quickcontrols/gallery/pages/PageIndicatorPage.qml @@ -0,0 +1,27 @@ +// 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 + } + } +} diff --git a/examples/quickcontrols/gallery/pages/ProgressBarPage.qml b/examples/quickcontrols/gallery/pages/ProgressBarPage.qml new file mode 100644 index 0000000000..d712aae10c --- /dev/null +++ b/examples/quickcontrols/gallery/pages/ProgressBarPage.qml @@ -0,0 +1,33 @@ +// 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 + } + } +} diff --git a/examples/quickcontrols/gallery/pages/RadioButtonPage.qml b/examples/quickcontrols/gallery/pages/RadioButtonPage.qml new file mode 100644 index 0000000000..644543c007 --- /dev/null +++ b/examples/quickcontrols/gallery/pages/RadioButtonPage.qml @@ -0,0 +1,39 @@ +// 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 + } + } + } +} diff --git a/examples/quickcontrols/gallery/pages/RangeSliderPage.qml b/examples/quickcontrols/gallery/pages/RangeSliderPage.qml new file mode 100644 index 0000000000..0ca235822f --- /dev/null +++ b/examples/quickcontrols/gallery/pages/RangeSliderPage.qml @@ -0,0 +1,35 @@ +// 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 + } + } +} diff --git a/examples/quickcontrols/gallery/pages/ScrollBarPage.qml b/examples/quickcontrols/gallery/pages/ScrollBarPage.qml new file mode 100644 index 0000000000..248e74ca7f --- /dev/null +++ b/examples/quickcontrols/gallery/pages/ScrollBarPage.qml @@ -0,0 +1,40 @@ +// 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 { } +} diff --git a/examples/quickcontrols/gallery/pages/ScrollIndicatorPage.qml b/examples/quickcontrols/gallery/pages/ScrollIndicatorPage.qml new file mode 100644 index 0000000000..04ce97483a --- /dev/null +++ b/examples/quickcontrols/gallery/pages/ScrollIndicatorPage.qml @@ -0,0 +1,40 @@ +// 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 { } +} diff --git a/examples/quickcontrols/gallery/pages/ScrollablePage.qml b/examples/quickcontrols/gallery/pages/ScrollablePage.qml new file mode 100644 index 0000000000..69bc0cd973 --- /dev/null +++ b/examples/quickcontrols/gallery/pages/ScrollablePage.qml @@ -0,0 +1,24 @@ +// 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 { } + } +} diff --git a/examples/quickcontrols/gallery/pages/SliderPage.qml b/examples/quickcontrols/gallery/pages/SliderPage.qml new file mode 100644 index 0000000000..fd03680a0e --- /dev/null +++ b/examples/quickcontrols/gallery/pages/SliderPage.qml @@ -0,0 +1,33 @@ +// 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 + } + } +} diff --git a/examples/quickcontrols/gallery/pages/SpinBoxPage.qml b/examples/quickcontrols/gallery/pages/SpinBoxPage.qml new file mode 100644 index 0000000000..18c9b06c1f --- /dev/null +++ b/examples/quickcontrols/gallery/pages/SpinBoxPage.qml @@ -0,0 +1,29 @@ +// 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 + } + } +} diff --git a/examples/quickcontrols/gallery/pages/StackViewPage.qml b/examples/quickcontrols/gallery/pages/StackViewPage.qml new file mode 100644 index 0000000000..4472150e56 --- /dev/null +++ b/examples/quickcontrols/gallery/pages/StackViewPage.qml @@ -0,0 +1,49 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +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() + } + } + } + } +} diff --git a/examples/quickcontrols/gallery/pages/SwipeViewPage.qml b/examples/quickcontrols/gallery/pages/SwipeViewPage.qml new file mode 100644 index 0000000000..f982f4cf26 --- /dev/null +++ b/examples/quickcontrols/gallery/pages/SwipeViewPage.qml @@ -0,0 +1,49 @@ +// 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: view.width + height: 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 + } +} diff --git a/examples/quickcontrols/gallery/pages/SwitchPage.qml b/examples/quickcontrols/gallery/pages/SwitchPage.qml new file mode 100644 index 0000000000..cca200582e --- /dev/null +++ b/examples/quickcontrols/gallery/pages/SwitchPage.qml @@ -0,0 +1,39 @@ +// 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 + } + } + } +} diff --git a/examples/quickcontrols/gallery/pages/TabBarPage.qml b/examples/quickcontrols/gallery/pages/TabBarPage.qml new file mode 100644 index 0000000000..c03e4a014c --- /dev/null +++ b/examples/quickcontrols/gallery/pages/TabBarPage.qml @@ -0,0 +1,57 @@ +// 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.width + height: swipeView.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" + } + } +} diff --git a/examples/quickcontrols/gallery/pages/TextAreaPage.qml b/examples/quickcontrols/gallery/pages/TextAreaPage.qml new file mode 100644 index 0000000000..6a09846973 --- /dev/null +++ b/examples/quickcontrols/gallery/pages/TextAreaPage.qml @@ -0,0 +1,29 @@ +// 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: pane.availableWidth / 3 + anchors.horizontalCenter: parent.horizontalCenter + + wrapMode: TextArea.Wrap + text: "TextArea\n...\n...\n..." + } + } +} diff --git a/examples/quickcontrols/gallery/pages/TextFieldPage.qml b/examples/quickcontrols/gallery/pages/TextFieldPage.qml new file mode 100644 index 0000000000..2b06894c8f --- /dev/null +++ b/examples/quickcontrols/gallery/pages/TextFieldPage.qml @@ -0,0 +1,27 @@ +// 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 + } + } +} diff --git a/examples/quickcontrols/gallery/pages/ToolTipPage.qml b/examples/quickcontrols/gallery/pages/ToolTipPage.qml new file mode 100644 index 0000000000..dd92c89b4f --- /dev/null +++ b/examples/quickcontrols/gallery/pages/ToolTipPage.qml @@ -0,0 +1,30 @@ +// 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." + } + } +} diff --git a/examples/quickcontrols/gallery/pages/TumblerPage.qml b/examples/quickcontrols/gallery/pages/TumblerPage.qml new file mode 100644 index 0000000000..4d01f02e89 --- /dev/null +++ b/examples/quickcontrols/gallery/pages/TumblerPage.qml @@ -0,0 +1,26 @@ +// 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 + } + } +} diff --git a/examples/quickcontrols/gallery/qmldir b/examples/quickcontrols/gallery/qmldir new file mode 100644 index 0000000000..6b7f86bfac --- /dev/null +++ b/examples/quickcontrols/gallery/qmldir @@ -0,0 +1 @@ +module App diff --git a/examples/quickcontrols/gallery/qtquickcontrols2.conf b/examples/quickcontrols/gallery/qtquickcontrols2.conf new file mode 100644 index 0000000000..da1a8f41d2 --- /dev/null +++ b/examples/quickcontrols/gallery/qtquickcontrols2.conf @@ -0,0 +1,8 @@ +[Material] +Primary=#41cd52 +Accent=#41cd52 +Theme=System + +[Universal] +Accent=#41cd52 +Theme=System |
