diff options
Diffstat (limited to 'examples/quickcontrols/gallery/pages')
27 files changed, 1267 insertions, 0 deletions
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 + } + } +} |