diff options
Diffstat (limited to 'src/quickcontrols/doc/snippets')
125 files changed, 3979 insertions, 0 deletions
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-action.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-action.qml new file mode 100644 index 0000000000..4f50ba46d7 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-action.qml @@ -0,0 +1,32 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +Item { + //! [action] + Action { + id: copyAction + text: qsTr("&Copy") + icon.name: "edit-copy" + shortcut: StandardKey.Copy + onTriggered: window.activeFocusItem.copy() + } + //! [action] + + //! [toolbutton] + ToolButton { + id: toolButton + action: copyAction + } + //! [toolbutton] + + //! [menuitem] + MenuItem { + id: menuItem + action: copyAction + text: qsTr("&Copy selected Text") + } + //! [menuitem] +} diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-busyindicator-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-busyindicator-custom.qml new file mode 100644 index 0000000000..3eefb11110 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-busyindicator-custom.qml @@ -0,0 +1,68 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +//! [file] +import QtQuick +import QtQuick.Controls + +BusyIndicator { + id: control + + contentItem: Item { + implicitWidth: 64 + implicitHeight: 64 + + Item { + id: item + x: parent.width / 2 - 32 + y: parent.height / 2 - 32 + width: 64 + height: 64 + opacity: control.running ? 1 : 0 + + Behavior on opacity { + OpacityAnimator { + duration: 250 + } + } + + RotationAnimator { + target: item + running: control.visible && control.running + from: 0 + to: 360 + loops: Animation.Infinite + duration: 1250 + } + + Repeater { + id: repeater + model: 6 + + Rectangle { + id: delegate + x: item.width / 2 - width / 2 + y: item.height / 2 - height / 2 + implicitWidth: 10 + implicitHeight: 10 + radius: 5 + color: "#21be2b" + + required property int index + + transform: [ + Translate { + y: -Math.min(item.width, item.height) * 0.5 + 5 + }, + Rotation { + angle: delegate.index / repeater.count * 360 + origin.x: 5 + origin.y: 5 + } + ] + } + } + } + } +} +//! [file] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-button-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-button-custom.qml new file mode 100644 index 0000000000..cf197a18ae --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-button-custom.qml @@ -0,0 +1,31 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +//! [file] +import QtQuick +import QtQuick.Controls + +Button { + id: control + text: qsTr("Button") + + contentItem: Text { + text: control.text + font: control.font + opacity: enabled ? 1.0 : 0.3 + color: control.down ? "#17a81a" : "#21be2b" + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + elide: Text.ElideRight + } + + background: Rectangle { + implicitWidth: 100 + implicitHeight: 40 + opacity: enabled ? 1 : 0.3 + border.color: control.down ? "#17a81a" : "#21be2b" + border.width: 1 + radius: 2 + } +} +//! [file] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-button-icononly.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-button-icononly.qml new file mode 100644 index 0000000000..027ecb4ed8 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-button-icononly.qml @@ -0,0 +1,10 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +Button { + icon.source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/check.png" + display: Button.IconOnly +} diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-button-textbesideicon.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-button-textbesideicon.qml new file mode 100644 index 0000000000..c2dce1d99a --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-button-textbesideicon.qml @@ -0,0 +1,11 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +Button { + text: "Button" + icon.source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/check.png" + display: Button.TextBesideIcon +} diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-button-textonly.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-button-textonly.qml new file mode 100644 index 0000000000..4b12b8acc2 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-button-textonly.qml @@ -0,0 +1,10 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +Button { + text: "Button" + display: Button.TextOnly +} diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-calendarmodel.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-calendarmodel.qml new file mode 100644 index 0000000000..af2777b123 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-calendarmodel.qml @@ -0,0 +1,32 @@ +// Copyright (C) 2021 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +//! [1] +ListView { + id: listview + + width: 200; height: 200 + snapMode: ListView.SnapOneItem + orientation: ListView.Horizontal + highlightRangeMode: ListView.StrictlyEnforceRange + + model: CalendarModel { + from: new Date(2015, 0, 1) + to: new Date(2015, 11, 31) + } + + delegate: MonthGrid { + width: listview.width + height: listview.height + + month: model.month + year: model.year + locale: Qt.locale("en_US") + } + + ScrollIndicator.horizontal: ScrollIndicator { } +} +//! [1] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-checkbox-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-checkbox-custom.qml new file mode 100644 index 0000000000..a7421af39c --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-checkbox-custom.qml @@ -0,0 +1,41 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +//! [file] +import QtQuick +import QtQuick.Controls + +CheckBox { + id: control + text: qsTr("CheckBox") + checked: true + + indicator: Rectangle { + implicitWidth: 26 + implicitHeight: 26 + x: control.leftPadding + y: parent.height / 2 - height / 2 + radius: 3 + border.color: control.down ? "#17a81a" : "#21be2b" + + Rectangle { + width: 14 + height: 14 + x: 6 + y: 6 + radius: 2 + color: control.down ? "#17a81a" : "#21be2b" + visible: control.checked + } + } + + contentItem: Text { + text: control.text + font: control.font + opacity: enabled ? 1.0 : 0.3 + color: control.down ? "#17a81a" : "#21be2b" + verticalAlignment: Text.AlignVCenter + leftPadding: control.indicator.width + control.spacing + } +} +//! [file] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-checkbox-group.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-checkbox-group.qml new file mode 100644 index 0000000000..0d676be397 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-checkbox-group.qml @@ -0,0 +1,34 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +//! [1] +Column { + ButtonGroup { + id: childGroup + exclusive: false + checkState: parentBox.checkState + } + + CheckBox { + id: parentBox + text: qsTr("Parent") + checkState: childGroup.checkState + } + + CheckBox { + checked: true + text: qsTr("Child 1") + leftPadding: indicator.width + ButtonGroup.group: childGroup + } + + CheckBox { + text: qsTr("Child 2") + leftPadding: indicator.width + ButtonGroup.group: childGroup + } +} +//! [1] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-checkdelegate-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-checkdelegate-custom.qml new file mode 100644 index 0000000000..a4f4b84d18 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-checkdelegate-custom.qml @@ -0,0 +1,50 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +//! [file] +import QtQuick +import QtQuick.Controls + +CheckDelegate { + id: control + text: qsTr("CheckDelegate") + checked: true + + contentItem: Text { + rightPadding: control.indicator.width + control.spacing + text: control.text + font: control.font + opacity: enabled ? 1.0 : 0.3 + color: control.down ? "#17a81a" : "#21be2b" + elide: Text.ElideRight + verticalAlignment: Text.AlignVCenter + } + + indicator: Rectangle { + implicitWidth: 26 + implicitHeight: 26 + x: control.width - width - control.rightPadding + y: control.topPadding + control.availableHeight / 2 - height / 2 + radius: 3 + color: "transparent" + border.color: control.down ? "#17a81a" : "#21be2b" + + Rectangle { + width: 14 + height: 14 + x: 6 + y: 6 + radius: 2 + color: control.down ? "#17a81a" : "#21be2b" + visible: control.checked + } + } + + background: Rectangle { + implicitWidth: 100 + implicitHeight: 40 + visible: control.down || control.highlighted + color: control.down ? "#bdbebf" : "#eeeeee" + } +} +//! [file] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-combobox-accepted.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-combobox-accepted.qml new file mode 100644 index 0000000000..6f5eff6b55 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-combobox-accepted.qml @@ -0,0 +1,21 @@ +// Copyright (C) 2019 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +//! [combobox] +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}) + } +} +//! [combobox] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-combobox-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-combobox-custom.qml new file mode 100644 index 0000000000..2481f6dcf8 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-combobox-custom.qml @@ -0,0 +1,90 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +//! [file] +import QtQuick +import QtQuick.Controls + +ComboBox { + id: control + model: ["First", "Second", "Third"] + + delegate: ItemDelegate { + width: control.width + contentItem: Text { + text: control.textRole + ? (Array.isArray(control.model) ? modelData[control.textRole] : model[control.textRole]) + : modelData + color: "#21be2b" + font: control.font + elide: Text.ElideRight + verticalAlignment: Text.AlignVCenter + } + highlighted: control.highlightedIndex === index + } + + indicator: Canvas { + id: canvas + x: control.width - width - control.rightPadding + y: control.topPadding + (control.availableHeight - height) / 2 + width: 12 + height: 8 + contextType: "2d" + + Connections { + target: control + function onPressedChanged() { canvas.requestPaint(); } + } + + onPaint: { + context.reset(); + context.moveTo(0, 0); + context.lineTo(width, 0); + context.lineTo(width / 2, height); + context.closePath(); + context.fillStyle = control.pressed ? "#17a81a" : "#21be2b"; + context.fill(); + } + } + + contentItem: Text { + leftPadding: 0 + rightPadding: control.indicator.width + control.spacing + + text: control.displayText + font: control.font + color: control.pressed ? "#17a81a" : "#21be2b" + verticalAlignment: Text.AlignVCenter + elide: Text.ElideRight + } + + background: Rectangle { + implicitWidth: 120 + implicitHeight: 40 + border.color: control.pressed ? "#17a81a" : "#21be2b" + border.width: control.visualFocus ? 2 : 1 + radius: 2 + } + + popup: Popup { + y: control.height - 1 + width: control.width + implicitHeight: contentItem.implicitHeight + padding: 1 + + contentItem: ListView { + clip: true + implicitHeight: contentHeight + model: control.popup.visible ? control.delegateModel : null + currentIndex: control.highlightedIndex + + ScrollIndicator.vertical: ScrollIndicator { } + } + + background: Rectangle { + border.color: "#21be2b" + radius: 2 + } + } +} +//! [file] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-combobox-find.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-combobox-find.qml new file mode 100644 index 0000000000..2513002264 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-combobox-find.qml @@ -0,0 +1,16 @@ +// Copyright (C) 2021 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +//! [find] +ComboBox { + model: ListModel { + ListElement { text: "Banana" } + ListElement { text: "Apple" } + ListElement { text: "Coconut" } + } + Component.onCompleted: currentIndex = find("Coconut") +} +//! [find] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-combobox-popup.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-combobox-popup.qml new file mode 100644 index 0000000000..8c636a3d5c --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-combobox-popup.qml @@ -0,0 +1,13 @@ +// Copyright (C) 2022 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick.Controls + +ComboBox { +//! [closePolicy] + popup.closePolicy: Popup.CloseOnEscape +//! [closePolicy] +//! [modal] + popup.modal: true +//! [modal] +} diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-combobox-textat.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-combobox-textat.qml new file mode 100644 index 0000000000..8910ba3237 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-combobox-textat.qml @@ -0,0 +1,16 @@ +// Copyright (C) 2021 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +//! [textat] +ComboBox { + model: ListModel { + ListElement { text: "Banana" } + ListElement { text: "Apple" } + ListElement { text: "Coconut" } + } + onActivated: (index) => { print(textAt(index)) } +} +//! [textat] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-combobox-valuerole.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-combobox-valuerole.qml new file mode 100644 index 0000000000..8d32201799 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-combobox-valuerole.qml @@ -0,0 +1,34 @@ +// Copyright (C) 2019 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +//! [file] +ApplicationWindow { + width: 640 + height: 480 + visible: true + + // Used as an example of a backend - this would usually be + // e.g. a C++ type exposed to QML. + QtObject { + id: backend + property int modifier + } + + ComboBox { + textRole: "text" + valueRole: "value" + // When an item is selected, update the backend. + onActivated: backend.modifier = currentValue + // Set the initial currentIndex to the value stored in the backend. + Component.onCompleted: currentIndex = indexOfValue(backend.modifier) + model: [ + { value: Qt.NoModifier, text: qsTr("No modifier") }, + { value: Qt.ShiftModifier, text: qsTr("Shift") }, + { value: Qt.ControlModifier, text: qsTr("Control") } + ] + } +} +//! [file] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-dayofweekrow-layout.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-dayofweekrow-layout.qml new file mode 100644 index 0000000000..2358f252e0 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-dayofweekrow-layout.qml @@ -0,0 +1,23 @@ +// Copyright (C) 2021 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls +import QtQuick.Layouts + +//! [1] +ColumnLayout { + DayOfWeekRow { + locale: grid.locale + Layout.fillWidth: true + } + + MonthGrid { + id: grid + month: Calendar.December + year: 2015 + locale: Qt.locale("en_US") + Layout.fillWidth: true + } +} +//! [1] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-dayofweekrow.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-dayofweekrow.qml new file mode 100644 index 0000000000..2188b4ccf1 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-dayofweekrow.qml @@ -0,0 +1,11 @@ +// Copyright (C) 2021 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +//! [1] +DayOfWeekRow { + locale: Qt.locale("en_US") +} +//! [1] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-delaybutton-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-delaybutton-custom.qml new file mode 100644 index 0000000000..a8b17ab36a --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-delaybutton-custom.qml @@ -0,0 +1,58 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +//! [file] +import QtQuick +import QtQuick.Controls + +DelayButton { + id: control + checked: true + text: qsTr("Delay\nButton") + + contentItem: Text { + text: control.text + font: control.font + opacity: enabled ? 1.0 : 0.3 + color: "white" + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + elide: Text.ElideRight + } + + background: Rectangle { + implicitWidth: 100 + implicitHeight: 100 + opacity: enabled ? 1 : 0.3 + color: control.down ? "#17a81a" : "#21be2b" + radius: size / 2 + + readonly property real size: Math.min(control.width, control.height) + width: size + height: size + anchors.centerIn: parent + + Canvas { + id: canvas + anchors.fill: parent + + Connections { + target: control + function onProgressChanged() { canvas.requestPaint(); } + } + + onPaint: { + var ctx = getContext("2d") + ctx.clearRect(0, 0, width, height) + ctx.strokeStyle = "white" + ctx.lineWidth = parent.size / 20 + ctx.beginPath() + var startAngle = Math.PI / 5 * 3 + var endAngle = startAngle + control.progress * Math.PI / 5 * 9 + ctx.arc(width / 2, height / 2, width / 2 - ctx.lineWidth / 2 - 2, startAngle, endAngle) + ctx.stroke() + } + } + } +} +//! [file] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-dial-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-dial-custom.qml new file mode 100644 index 0000000000..f1efc22c4d --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-dial-custom.qml @@ -0,0 +1,43 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +//! [file] +import QtQuick +import QtQuick.Controls + +Dial { + id: control + background: Rectangle { + x: control.width / 2 - width / 2 + y: control.height / 2 - height / 2 + width: Math.max(64, Math.min(control.width, control.height)) + height: width + color: "transparent" + radius: width / 2 + border.color: control.pressed ? "#17a81a" : "#21be2b" + opacity: control.enabled ? 1 : 0.3 + } + + handle: Rectangle { + id: handleItem + x: control.background.x + control.background.width / 2 - width / 2 + y: control.background.y + control.background.height / 2 - height / 2 + width: 16 + height: 16 + color: control.pressed ? "#17a81a" : "#21be2b" + radius: 8 + antialiasing: true + opacity: control.enabled ? 1 : 0.3 + transform: [ + Translate { + y: -Math.min(control.background.width, control.background.height) * 0.4 + handleItem.height / 2 + }, + Rotation { + angle: control.angle + origin.x: handleItem.width / 2 + origin.y: handleItem.height / 2 + } + ] + } +} +//! [file] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-dialog-modal.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-dialog-modal.qml new file mode 100644 index 0000000000..ba1580a4df --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-dialog-modal.qml @@ -0,0 +1,17 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +Item { + width: dialog.implicitWidth + height: dialog.implicitHeight +//! [1] +Dialog { + id: dialog + modal: true + standardButtons: Dialog.Ok +} +//! [1] +} diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-dialog-modeless.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-dialog-modeless.qml new file mode 100644 index 0000000000..d70c9921e2 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-dialog-modeless.qml @@ -0,0 +1,17 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +Item { + width: dialog.implicitWidth + height: dialog.implicitHeight +//! [1] +Dialog { + id: dialog + modal: false + standardButtons: Dialog.Ok +} +//! [1] +} diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-dialog.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-dialog.qml new file mode 100644 index 0000000000..4d774c4e10 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-dialog.qml @@ -0,0 +1,20 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +Item { + width: dialog.implicitWidth + height: dialog.implicitHeight +//! [1] +Dialog { + id: dialog + title: "Title" + standardButtons: Dialog.Ok | Dialog.Cancel + + onAccepted: console.log("Ok clicked") + onRejected: console.log("Cancel clicked") +} +//! [1] +} diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-dialogbuttonbox-attached.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-dialogbuttonbox-attached.qml new file mode 100644 index 0000000000..ef85771bfd --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-dialogbuttonbox-attached.qml @@ -0,0 +1,18 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +//! [1] +DialogButtonBox { + Button { + text: qsTr("Save") + DialogButtonBox.buttonRole: DialogButtonBox.AcceptRole + } + Button { + text: qsTr("Close") + DialogButtonBox.buttonRole: DialogButtonBox.DestructiveRole + } +} +//! [1] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-dialogbuttonbox.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-dialogbuttonbox.qml new file mode 100644 index 0000000000..13a927520f --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-dialogbuttonbox.qml @@ -0,0 +1,14 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +//! [1] +DialogButtonBox { + standardButtons: DialogButtonBox.Ok | DialogButtonBox.Cancel + + onAccepted: console.log("Ok clicked") + onRejected: console.log("Cancel clicked") +} +//! [1] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-frame-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-frame-custom.qml new file mode 100644 index 0000000000..de3e1a2327 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-frame-custom.qml @@ -0,0 +1,19 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +//! [file] +import QtQuick +import QtQuick.Controls + +Frame { + background: Rectangle { + color: "transparent" + border.color: "#21be2b" + radius: 2 + } + + Label { + text: qsTr("Content goes here!") + } +} +//! [file] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-frame.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-frame.qml new file mode 100644 index 0000000000..fcb128db54 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-frame.qml @@ -0,0 +1,17 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Layouts +import QtQuick.Controls + +//! [1] +Frame { + ColumnLayout { + anchors.fill: parent + CheckBox { text: qsTr("E-mail") } + CheckBox { text: qsTr("Calendar") } + CheckBox { text: qsTr("Contacts") } + } +} +//! [1] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-groupbox-checkable.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-groupbox-checkable.qml new file mode 100644 index 0000000000..0ab0822aca --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-groupbox-checkable.qml @@ -0,0 +1,24 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Layouts +import QtQuick.Controls + +//! [1] +GroupBox { + label: CheckBox { + id: checkBox + checked: true + text: qsTr("Synchronize") + } + + ColumnLayout { + anchors.fill: parent + enabled: checkBox.checked + CheckBox { text: qsTr("E-mail") } + CheckBox { text: qsTr("Calendar") } + CheckBox { text: qsTr("Contacts") } + } +} +//! [1] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-groupbox-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-groupbox-custom.qml new file mode 100644 index 0000000000..34d9df8a63 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-groupbox-custom.qml @@ -0,0 +1,33 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +//! [file] +import QtQuick +import QtQuick.Controls + +GroupBox { + id: control + title: qsTr("GroupBox") + + background: Rectangle { + y: control.topPadding - control.bottomPadding + width: parent.width + height: parent.height - control.topPadding + control.bottomPadding + color: "transparent" + border.color: "#21be2b" + radius: 2 + } + + label: Label { + x: control.leftPadding + width: control.availableWidth + text: control.title + color: "#21be2b" + elide: Text.ElideRight + } + + Label { + text: qsTr("Content goes here!") + } +} +//! [file] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-groupbox.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-groupbox.qml new file mode 100644 index 0000000000..98282ed348 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-groupbox.qml @@ -0,0 +1,18 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Layouts +import QtQuick.Controls + +//! [1] +GroupBox { + title: qsTr("Synchronize") + ColumnLayout { + anchors.fill: parent + CheckBox { text: qsTr("E-mail") } + CheckBox { text: qsTr("Calendar") } + CheckBox { text: qsTr("Contacts") } + } +} +//! [1] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-headerview-simple.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-headerview-simple.qml new file mode 100644 index 0000000000..6f2e5fac45 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-headerview-simple.qml @@ -0,0 +1,72 @@ +// Copyright (C) 2020 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +//![file] +import QtQuick +import QtQuick.Controls +import Qt.labs.qmlmodels + +ApplicationWindow { + visible: true + width: 640 + height: 480 + + //! [horizontal] + HorizontalHeaderView { + id: horizontalHeader + syncView: tableView + anchors.left: tableView.left + } + //! [horizontal] + + //! [vertical] + VerticalHeaderView { + id: verticalHeader + syncView: tableView + anchors.top: tableView.top + } + //! [vertical] + + TableView { + id: tableView + anchors.fill: parent + anchors.topMargin: horizontalHeader.height + anchors.leftMargin: verticalHeader.width + columnSpacing: 1 + rowSpacing: 1 + clip: true + + model: TableModel { + TableModelColumn { display: "name" } + TableModelColumn { display: "color" } + + rows: [ + { + "name": "cat", + "color": "black" + }, + { + "name": "dog", + "color": "brown" + }, + { + "name": "bird", + "color": "white" + } + ] + } + + delegate: Rectangle { + implicitWidth: 100 + implicitHeight: 50 + border.width: 1 + + Text { + text: display + anchors.centerIn: parent + } + } + } +} + +//![file] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-itemdelegate-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-itemdelegate-custom.qml new file mode 100644 index 0000000000..3212cbc762 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-itemdelegate-custom.qml @@ -0,0 +1,35 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +//! [file] +import QtQuick +import QtQuick.Controls + +ItemDelegate { + id: control + text: qsTr("ItemDelegate") + + contentItem: Text { + rightPadding: control.spacing + text: control.text + font: control.font + color: control.enabled ? (control.down ? "#17a81a" : "#21be2b") : "#bdbebf" + elide: Text.ElideRight + verticalAlignment: Text.AlignVCenter + } + + background: Rectangle { + implicitWidth: 100 + implicitHeight: 40 + opacity: enabled ? 1 : 0.3 + color: control.down ? "#dddedf" : "#eeeeee" + + Rectangle { + width: parent.width + height: 1 + color: control.down ? "#17a81a" : "#21be2b" + anchors.bottom: parent.bottom + } + } +} +//! [file] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-itemdelegate.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-itemdelegate.qml new file mode 100644 index 0000000000..49c12b1dff --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-itemdelegate.qml @@ -0,0 +1,24 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +//! [1] +ListView { + width: 160 + height: 240 + + model: Qt.fontFamilies() + + delegate: ItemDelegate { + text: modelData + width: parent.width + onClicked: console.log("clicked:", modelData) + + required property string modelData + } + + ScrollIndicator.vertical: ScrollIndicator { } +} +//! [1] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-label-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-label-custom.qml new file mode 100644 index 0000000000..79bc9d3c13 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-label-custom.qml @@ -0,0 +1,12 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +//! [file] +import QtQuick +import QtQuick.Controls + +Label { + text: qsTr("Label") + color: "#21be2b" +} +//! [file] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-label.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-label.qml new file mode 100644 index 0000000000..7ca63d0251 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-label.qml @@ -0,0 +1,11 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +//! [1] +Label { + text: "Label" +} +//! [1] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-material-accent.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-material-accent.qml new file mode 100644 index 0000000000..71a84fac82 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-material-accent.qml @@ -0,0 +1,19 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Layouts +import QtQuick.Controls +import QtQuick.Controls.Material + +Pane { + padding: 4 + +//! [1] +Button { + text: qsTr("Button") + highlighted: true + Material.accent: Material.Orange +} +//! [1] +} diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-material-background.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-material-background.qml new file mode 100644 index 0000000000..f9f1dd0915 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-material-background.qml @@ -0,0 +1,18 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls +import QtQuick.Controls.Material + +Pane { + padding: 4 + +//! [1] +Button { + text: qsTr("Button") + highlighted: true + Material.background: Material.Teal +} +//! [1] +} diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-material-elevation.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-material-elevation.qml new file mode 100644 index 0000000000..4f8b27e7ef --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-material-elevation.qml @@ -0,0 +1,27 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls +import QtQuick.Controls.Material + +Pane { + contentWidth: 120 + contentHeight: 120 + padding: 10 + bottomPadding: 20 + +//! [1] +Pane { + width: 120 + height: 120 + + Material.elevation: 6 + + Label { + text: qsTr("I'm a card!") + anchors.centerIn: parent + } +} +//! [1] +} diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-material-foreground.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-material-foreground.qml new file mode 100644 index 0000000000..b4a7743c16 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-material-foreground.qml @@ -0,0 +1,17 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls +import QtQuick.Controls.Material + +Pane { + padding: 4 + +//! [1] +Button { + text: qsTr("Button") + Material.foreground: Material.Pink +} +//! [1] +} diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-material-theme.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-material-theme.qml new file mode 100644 index 0000000000..4e5bf81cd9 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-material-theme.qml @@ -0,0 +1,20 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls +import QtQuick.Controls.Material + +Pane { + padding: 10 + +//! [1] +Pane { + Material.theme: Material.Dark + + Button { + text: qsTr("Button") + } +} +//! [1] +} diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-material-variant.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-material-variant.qml new file mode 100644 index 0000000000..ad824f1e34 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-material-variant.qml @@ -0,0 +1,189 @@ +// Copyright (C) 2018 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls +import QtQuick.Controls.Material +import QtQuick.Layouts + +Pane { + id: root + implicitWidth: 400 + implicitHeight: 600 + padding: 10 + + readonly property color measurementColor: "darkorange" + readonly property int barLeftMargin: 10 + readonly property int textTopMargin: 12 + + Component { + id: measurementComponent + + Rectangle { + color: root.measurementColor + width: 1 + height: parent.height + + Rectangle { + width: 5 + height: 1 + color: root.measurementColor + anchors.horizontalCenter: parent.horizontalCenter + } + + Rectangle { + width: 5 + height: 1 + color: root.measurementColor + anchors.horizontalCenter: parent.horizontalCenter + anchors.bottom: parent.bottom + } + + Text { + x: 8 + text: parent.height + height: parent.height + color: root.measurementColor + verticalAlignment: Text.AlignVCenter + } + } + } + + ColumnLayout { + anchors.fill: parent + spacing: 20 + + ColumnLayout { + spacing: root.textTopMargin + + Button { + id: button + text: qsTr("Button") + + Loader { + sourceComponent: measurementComponent + height: parent.height + anchors.left: parent.right + anchors.leftMargin: root.barLeftMargin + } + + } + Text { + text: "Roboto " + button.font.pixelSize + color: root.measurementColor + } + } + + ColumnLayout { + spacing: root.textTopMargin + + ItemDelegate { + id: itemDelegate + text: qsTr("ItemDelegate") + + Loader { + sourceComponent: measurementComponent + height: parent.height + anchors.left: parent.right + anchors.leftMargin: root.barLeftMargin + } + + } + Text { + text: "Roboto " + itemDelegate.font.pixelSize + color: root.measurementColor + } + } + + ColumnLayout { + spacing: root.textTopMargin + + CheckDelegate { + id: checkDelegate + text: qsTr("CheckDelegate") + + Loader { + sourceComponent: measurementComponent + height: parent.height + anchors.left: parent.right + anchors.leftMargin: root.barLeftMargin + } + + } + Text { + text: "Roboto " + checkDelegate.font.pixelSize + color: root.measurementColor + } + } + + ColumnLayout { + spacing: root.textTopMargin + + RadioDelegate { + id: radioDelegate + text: qsTr("RadioDelegate") + + Loader { + sourceComponent: measurementComponent + height: parent.height + anchors.left: parent.right + anchors.leftMargin: root.barLeftMargin + } + + } + Text { + text: "Roboto " + radioDelegate.font.pixelSize + color: root.measurementColor + } + } + + ColumnLayout { + spacing: root.textTopMargin + + ComboBox { + id: comboBox + model: [ qsTr("ComboBox") ] + + Loader { + sourceComponent: measurementComponent + height: parent.height + anchors.left: parent.right + anchors.leftMargin: root.barLeftMargin + } + + } + Text { + text: "Roboto " + comboBox.font.pixelSize + color: root.measurementColor + } + } + + ColumnLayout { + spacing: root.textTopMargin + + Item { + implicitWidth: groupBox.implicitWidth + implicitHeight: groupBox.implicitHeight + + GroupBox { + id: groupBox + title: qsTr("GroupBox") + } + Loader { + sourceComponent: measurementComponent + height: parent.height + anchors.left: parent.right + anchors.leftMargin: root.barLeftMargin + } + } + Text { + text: "Roboto " + groupBox.font.pixelSize + color: root.measurementColor + } + } + + Item { + Layout.fillHeight: true + } + } +} diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-menu-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-menu-custom.qml new file mode 100644 index 0000000000..f38d5f370a --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-menu-custom.qml @@ -0,0 +1,109 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +ApplicationWindow { + id: window + width: menu.width + height: menu.height + visible: true + + Component.onCompleted: menu.popup(menu.itemAt(1)) + +// Indent it like this so that the indenting in the generated doc is normal. +Menu { + id: menu + + Action { text: qsTr("Tool Bar"); checkable: true } + Action { text: qsTr("Side Bar"); checkable: true; checked: true } + Action { text: qsTr("Status Bar"); checkable: true; checked: true } + + MenuSeparator { + contentItem: Rectangle { + implicitWidth: 200 + implicitHeight: 1 + color: "#21be2b" + } + } + + Menu { + title: qsTr("Advanced") + // ... + } + + topPadding: 2 + bottomPadding: 2 + + delegate: MenuItem { + id: menuItem + implicitWidth: 200 + implicitHeight: 40 + + arrow: Canvas { + x: parent.width - width + implicitWidth: 40 + implicitHeight: 40 + visible: menuItem.subMenu + onPaint: { + var ctx = getContext("2d") + ctx.fillStyle = menuItem.highlighted ? "#ffffff" : "#21be2b" + ctx.moveTo(15, 15) + ctx.lineTo(width - 15, height / 2) + ctx.lineTo(15, height - 15) + ctx.closePath() + ctx.fill() + } + } + + indicator: Item { + implicitWidth: 40 + implicitHeight: 40 + Rectangle { + width: 26 + height: 26 + anchors.centerIn: parent + visible: menuItem.checkable + border.color: "#21be2b" + radius: 3 + Rectangle { + width: 14 + height: 14 + anchors.centerIn: parent + visible: menuItem.checked + color: "#21be2b" + radius: 2 + } + } + } + + contentItem: Text { + leftPadding: menuItem.indicator.width + rightPadding: menuItem.arrow.width + text: menuItem.text + font: menuItem.font + opacity: enabled ? 1.0 : 0.3 + color: menuItem.highlighted ? "#ffffff" : "#21be2b" + horizontalAlignment: Text.AlignLeft + verticalAlignment: Text.AlignVCenter + elide: Text.ElideRight + } + + background: Rectangle { + implicitWidth: 200 + implicitHeight: 40 + opacity: enabled ? 1 : 0.3 + color: menuItem.highlighted ? "#21be2b" : "transparent" + } + } + + background: Rectangle { + implicitWidth: 200 + implicitHeight: 40 + color: "#ffffff" + border.color: "#21be2b" + radius: 2 + } +} +} //! [eof] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-menu-instantiator.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-menu-instantiator.qml new file mode 100644 index 0000000000..cda91182df --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-menu-instantiator.qml @@ -0,0 +1,45 @@ +// Copyright (C) 2022 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +Item { + id: settings + + // This would come from a C++ type. We add a mock implementation here to make tst_snippets pass. + function displayableFilePath(path) { + return path + } + +//! [menu] +Menu { + title: qsTr("File") + + Menu { + id: recentFilesMenu + title: qsTr("Recent Files") + enabled: recentFilesInstantiator.count > 0 + + Instantiator { + id: recentFilesInstantiator + model: settings.recentFiles + delegate: MenuItem { + text: settings.displayableFilePath(modelData) + onTriggered: loadFile(modelData) + } + + onObjectAdded: (index, object) => recentFilesMenu.insertItem(index, object) + onObjectRemoved: (index, object) => recentFilesMenu.removeItem(object) + } + + MenuSeparator {} + + MenuItem { + text: qsTr("Clear Recent Files") + onTriggered: settings.clearRecentFiles() + } + } +} +//! [menu] +} diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-menubar-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-menubar-custom.qml new file mode 100644 index 0000000000..2d2d15efdf --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-menubar-custom.qml @@ -0,0 +1,60 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +ApplicationWindow { + id: window + visible: true + width: menuBar.implicitWidth + height: menuBar.height + + Component.onCompleted: menuBar.itemAt(1).highlighted = true + + header: + +// Indent it like this so that the indenting in the generated doc is normal. +MenuBar { + id: menuBar + + Menu { title: qsTr("File") } + Menu { title: qsTr("Edit") } + Menu { title: qsTr("View") } + Menu { title: qsTr("Help") } + + delegate: MenuBarItem { + id: menuBarItem + + contentItem: Text { + text: menuBarItem.text + font: menuBarItem.font + opacity: enabled ? 1.0 : 0.3 + color: menuBarItem.highlighted ? "#ffffff" : "#21be2b" + horizontalAlignment: Text.AlignLeft + verticalAlignment: Text.AlignVCenter + elide: Text.ElideRight + } + + background: Rectangle { + implicitWidth: 40 + implicitHeight: 40 + opacity: enabled ? 1 : 0.3 + color: menuBarItem.highlighted ? "#21be2b" : "transparent" + } + } + + background: Rectangle { + implicitWidth: 40 + implicitHeight: 40 + color: "#ffffff" + + Rectangle { + color: "#21be2b" + width: parent.width + height: 1 + anchors.bottom: parent.bottom + } + } +} +} //! [eof] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-menubar.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-menubar.qml new file mode 100644 index 0000000000..55064604b4 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-menubar.qml @@ -0,0 +1,43 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +//! [begin] +ApplicationWindow { + id: window + width: 320 + height: 260 + visible: true + + //! [skipfrom] + Component.onCompleted: { + menuBar.itemAt(0).triggered() + menuBar.itemAt(0).menu.itemAt(2).highlighted = true + } + //! [skipto] + + menuBar: 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") } + } + } +} +//! [end] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-menuseparator-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-menuseparator-custom.qml new file mode 100644 index 0000000000..2b66187e10 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-menuseparator-custom.qml @@ -0,0 +1,45 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +//! [file] +import QtQuick +import QtQuick.Controls + +Item { + id: window + width: menu.contentItem.width + height: menu.contentItem.height + visible: true + +// Indent it like this so that the indenting in the generated doc is normal. +Menu { + id: menu + contentItem.parent: window + + MenuItem { + text: qsTr("New...") + } + MenuItem { + text: qsTr("Open...") + } + MenuItem { + text: qsTr("Save") + } + + MenuSeparator { + padding: 0 + topPadding: 12 + bottomPadding: 12 + contentItem: Rectangle { + implicitWidth: 200 + implicitHeight: 1 + color: "#1E000000" + } + } + + MenuItem { + text: qsTr("Exit") + } +} +} +//! [file] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-menuseparator.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-menuseparator.qml new file mode 100644 index 0000000000..6be0de85bc --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-menuseparator.qml @@ -0,0 +1,36 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +//! [file] +import QtQuick +import QtQuick.Controls + +Item { + id: window + width: menu.contentItem.width + height: menu.contentItem.height + visible: true + +// Indent it like this so that the indenting in the generated doc is normal. +Menu { + id: menu + contentItem.parent: window + + MenuItem { + text: qsTr("New...") + } + MenuItem { + text: qsTr("Open...") + } + MenuItem { + text: qsTr("Save") + } + + MenuSeparator {} + + MenuItem { + text: qsTr("Exit") + } +} +} +//! [file] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-monthgrid-layout.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-monthgrid-layout.qml new file mode 100644 index 0000000000..0620ee6d0b --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-monthgrid-layout.qml @@ -0,0 +1,37 @@ +// Copyright (C) 2021 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls +import QtQuick.Layouts + +//! [1] +GridLayout { + columns: 2 + + DayOfWeekRow { + locale: grid.locale + + Layout.column: 1 + Layout.fillWidth: true + } + + WeekNumberColumn { + month: grid.month + year: grid.year + locale: grid.locale + + Layout.fillHeight: true + } + + MonthGrid { + id: grid + month: Calendar.December + year: 2015 + locale: Qt.locale("en_US") + + Layout.fillWidth: true + Layout.fillHeight: true + } +} +//! [1] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-monthgrid-localization.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-monthgrid-localization.qml new file mode 100644 index 0000000000..56a801ab75 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-monthgrid-localization.qml @@ -0,0 +1,25 @@ +// Copyright (C) 2022 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +pragma ComponentBehavior: Bound + +import QtQuick +import QtQuick.Controls + +//! [1] +MonthGrid { + id: monthGrid + month: Calendar.December + year: 2015 + locale: Qt.locale("ar") + delegate: Text { + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + opacity: model.month === monthGrid.month ? 1 : 0 + text: monthGrid.locale.toString(model.date, "d") + font: monthGrid.font + + required property var model + } +} +//! [1] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-monthgrid.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-monthgrid.qml new file mode 100644 index 0000000000..c630edbe26 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-monthgrid.qml @@ -0,0 +1,13 @@ +// Copyright (C) 2021 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +//! [1] +MonthGrid { + month: Calendar.December + year: 2015 + locale: Qt.locale("en_US") +} +//! [1] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-overlay-modal.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-overlay-modal.qml new file mode 100644 index 0000000000..d1537d73bf --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-overlay-modal.qml @@ -0,0 +1,31 @@ +// Copyright (C) 2018 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls +import QtQuick.Window + +Item { + id: root + width: 200 + height: 200 + + Binding { + target: popup + property: "visible" + value: root.Window.active + } +//! [1] +Popup { + id: popup + width: 400 + height: 400 + modal: true + visible: true + + Overlay.modal: Rectangle { + color: "#aacfdbe7" + } +} +//! [1] +} diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-overlay-modeless.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-overlay-modeless.qml new file mode 100644 index 0000000000..06ebb16fb1 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-overlay-modeless.qml @@ -0,0 +1,31 @@ +// Copyright (C) 2018 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls +import QtQuick.Window + +Item { + id: root + width: 200 + height: 200 + + Binding { + target: popup + property: "visible" + value: root.Window.active + } +//! [1] +Popup { + id: popup + width: 400 + height: 400 + dim: true + visible: true + + Overlay.modeless: Rectangle { + color: "#aacfdbe7" + } +} +//! [1] +} diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-overview.cmake b/src/quickcontrols/doc/snippets/qtquickcontrols2-overview.cmake new file mode 100644 index 0000000000..6aa63152db --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-overview.cmake @@ -0,0 +1,7 @@ +# Copyright (C) 2022 The Qt Company Ltd. +# SPDX-License-Identifier: BSD-3-Clause + +#! [0] +find_package(Qt6 REQUIRED COMPONENTS QuickControls2) +target_link_libraries(mytarget PRIVATE Qt6::QuickControls2) +#! [0] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-pageindicator-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-pageindicator-custom.qml new file mode 100644 index 0000000000..5372c41f31 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-pageindicator-custom.qml @@ -0,0 +1,31 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +//! [file] +import QtQuick +import QtQuick.Controls + +PageIndicator { + id: control + count: 5 + currentIndex: 2 + + delegate: Rectangle { + implicitWidth: 8 + implicitHeight: 8 + + radius: width / 2 + color: "#21be2b" + + opacity: index === control.currentIndex ? 0.95 : pressed ? 0.7 : 0.45 + + required property int index + + Behavior on opacity { + OpacityAnimator { + duration: 100 + } + } + } +} +//! [file] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-pageindicator-interactive.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-pageindicator-interactive.qml new file mode 100644 index 0000000000..e3e65beb22 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-pageindicator-interactive.qml @@ -0,0 +1,34 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick.Controls + +Pane { +//! [1] +SwipeView { + id: view + currentIndex: pageIndicator.currentIndex + anchors.fill: parent + + Page { + title: qsTr("Home") + } + Page { + title: qsTr("Discover") + } + Page { + title: qsTr("Activity") + } +} + +PageIndicator { + id: pageIndicator + interactive: true + count: view.count + currentIndex: view.currentIndex + + anchors.bottom: parent.bottom + anchors.horizontalCenter: parent.horizontalCenter +} +//! [1] +} diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-pageindicator.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-pageindicator.qml new file mode 100644 index 0000000000..6929565825 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-pageindicator.qml @@ -0,0 +1,11 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only +import QtQuick +import QtQuick.Controls + +//! [1] +PageIndicator { + count: 5 + currentIndex: 2 +} +//! [1] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-pane-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-pane-custom.qml new file mode 100644 index 0000000000..96e3db1f37 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-pane-custom.qml @@ -0,0 +1,17 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +//! [file] +import QtQuick +import QtQuick.Controls + +Pane { + background: Rectangle { + color: "#eeeeee" + } + + Label { + text: qsTr("Content goes here!") + } +} +//! [file] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-pane.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-pane.qml new file mode 100644 index 0000000000..ed1b80d4e8 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-pane.qml @@ -0,0 +1,17 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Layouts +import QtQuick.Controls + +//! [1] +Pane { + ColumnLayout { + anchors.fill: parent + CheckBox { text: qsTr("E-mail") } + CheckBox { text: qsTr("Calendar") } + CheckBox { text: qsTr("Contacts") } + } +} +//! [1] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-popup-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-popup-custom.qml new file mode 100644 index 0000000000..951dfa7d52 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-popup-custom.qml @@ -0,0 +1,29 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls +import QtQuick.Window + +Item { + id: root + width: 200 + height: 200 + + Binding { + target: popup + property: "visible" + value: root.Window.active + } +//! [1] +Popup { + id: popup + background: Rectangle { + implicitWidth: 200 + implicitHeight: 200 + border.color: "#444" + } + contentItem: Column {} +} +//! [1] +} diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-popup.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-popup.qml new file mode 100644 index 0000000000..5b9ec29fb2 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-popup.qml @@ -0,0 +1,22 @@ +// Copyright (C) 2018 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +Item { +//! [centerIn] +ApplicationWindow { + id: window + // ... + + Pane { + // ... + + Popup { + anchors.centerIn: Overlay.overlay + } + } +} +//! [centerIn] +} diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-progressbar-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-progressbar-custom.qml new file mode 100644 index 0000000000..7158232081 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-progressbar-custom.qml @@ -0,0 +1,32 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +//! [file] +import QtQuick +import QtQuick.Controls + +ProgressBar { + id: control + value: 0.5 + padding: 2 + + background: Rectangle { + implicitWidth: 200 + implicitHeight: 6 + color: "#e6e6e6" + radius: 3 + } + + contentItem: Item { + implicitWidth: 200 + implicitHeight: 4 + + Rectangle { + width: control.visualPosition * parent.width + height: parent.height + radius: 2 + color: "#17a81a" + } + } +} +//! [file] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-radiobutton-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-radiobutton-custom.qml new file mode 100644 index 0000000000..929fe7e8e2 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-radiobutton-custom.qml @@ -0,0 +1,41 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +//! [file] +import QtQuick +import QtQuick.Controls + +RadioButton { + id: control + text: qsTr("RadioButton") + checked: true + + indicator: Rectangle { + implicitWidth: 26 + implicitHeight: 26 + x: control.leftPadding + y: parent.height / 2 - height / 2 + radius: 13 + border.color: control.down ? "#17a81a" : "#21be2b" + + Rectangle { + width: 14 + height: 14 + x: 6 + y: 6 + radius: 7 + color: control.down ? "#17a81a" : "#21be2b" + visible: control.checked + } + } + + contentItem: Text { + text: control.text + font: control.font + opacity: enabled ? 1.0 : 0.3 + color: control.down ? "#17a81a" : "#21be2b" + verticalAlignment: Text.AlignVCenter + leftPadding: control.indicator.width + control.spacing + } +} +//! [file] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-radiodelegate-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-radiodelegate-custom.qml new file mode 100644 index 0000000000..5eb856b8b5 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-radiodelegate-custom.qml @@ -0,0 +1,50 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +//! [file] +import QtQuick +import QtQuick.Controls + +RadioDelegate { + id: control + text: qsTr("RadioDelegate") + checked: true + + contentItem: Text { + rightPadding: control.indicator.width + control.spacing + text: control.text + font: control.font + opacity: enabled ? 1.0 : 0.3 + color: control.down ? "#17a81a" : "#21be2b" + elide: Text.ElideRight + verticalAlignment: Text.AlignVCenter + } + + indicator: Rectangle { + implicitWidth: 26 + implicitHeight: 26 + x: control.width - width - control.rightPadding + y: parent.height / 2 - height / 2 + radius: 13 + color: "transparent" + border.color: control.down ? "#17a81a" : "#21be2b" + + Rectangle { + width: 14 + height: 14 + x: 6 + y: 6 + radius: 7 + color: control.down ? "#17a81a" : "#21be2b" + visible: control.checked + } + } + + background: Rectangle { + implicitWidth: 100 + implicitHeight: 40 + visible: control.down || control.highlighted + color: control.down ? "#bdbebf" : "#eeeeee" + } +} +//! [file] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-rangeslider-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-rangeslider-custom.qml new file mode 100644 index 0000000000..81bcb0d668 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-rangeslider-custom.qml @@ -0,0 +1,52 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +//! [file] +import QtQuick +import QtQuick.Controls + +RangeSlider { + id: control + first.value: 0.25 + second.value: 0.75 + + background: Rectangle { + x: control.leftPadding + y: control.topPadding + control.availableHeight / 2 - height / 2 + implicitWidth: 200 + implicitHeight: 4 + width: control.availableWidth + height: implicitHeight + radius: 2 + color: "#bdbebf" + + Rectangle { + x: control.first.visualPosition * parent.width + width: control.second.visualPosition * parent.width - x + height: parent.height + color: "#21be2b" + radius: 2 + } + } + + first.handle: Rectangle { + x: control.leftPadding + control.first.visualPosition * (control.availableWidth - width) + y: control.topPadding + control.availableHeight / 2 - height / 2 + implicitWidth: 26 + implicitHeight: 26 + radius: 13 + color: control.first.pressed ? "#f0f0f0" : "#f6f6f6" + border.color: "#bdbebf" + } + + second.handle: Rectangle { + x: control.leftPadding + control.second.visualPosition * (control.availableWidth - width) + y: control.topPadding + control.availableHeight / 2 - height / 2 + implicitWidth: 26 + implicitHeight: 26 + radius: 13 + color: control.second.pressed ? "#f0f0f0" : "#f6f6f6" + border.color: "#bdbebf" + } +} +//! [file] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-roundbutton.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-roundbutton.qml new file mode 100644 index 0000000000..d83e4abc32 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-roundbutton.qml @@ -0,0 +1,12 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +//! [1] +RoundButton { + text: "\u2713" // Unicode Character 'CHECK MARK' + onClicked: textArea.readOnly = true +} +//! [1] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollbar-active.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollbar-active.qml new file mode 100644 index 0000000000..5292bc5499 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollbar-active.qml @@ -0,0 +1,22 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +Item { + width: 100 + height: 100 + + //! [1] + Flickable { + anchors.fill: parent + + contentWidth: parent.width * 2 + contentHeight: parent.height * 2 + + ScrollBar.horizontal: ScrollBar { id: hbar; active: vbar.active } + ScrollBar.vertical: ScrollBar { id: vbar; active: hbar.active } + } + //! [1] +} diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollbar-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollbar-custom.qml new file mode 100644 index 0000000000..2a4faede61 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollbar-custom.qml @@ -0,0 +1,29 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +//! [file] +import QtQuick +import QtQuick.Controls + +ScrollBar { + id: control + size: 0.3 + position: 0.2 + active: true + orientation: Qt.Vertical + + contentItem: Rectangle { + implicitWidth: 6 + implicitHeight: 100 + radius: width / 2 + color: control.pressed ? "#81e889" : "#c2f4c6" + // Hide the ScrollBar when it's not needed. + opacity: control.policy === ScrollBar.AlwaysOn || (control.active && control.size < 1.0) ? 0.75 : 0 + + // Animate the changes in opacity (default duration is 250 ms). + Behavior on opacity { + NumberAnimation {} + } + } +} +//! [file] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollbar-non-attached.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollbar-non-attached.qml new file mode 100644 index 0000000000..6ba505b199 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollbar-non-attached.qml @@ -0,0 +1,56 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +Item { + width: 200 + height: 200 + +//! [1] +Rectangle { + id: frame + clip: true + width: 160 + height: 160 + border.color: "black" + anchors.centerIn: parent + + Text { + id: content + text: "ABC" + font.pixelSize: 160 + x: -hbar.position * width + y: -vbar.position * height + } + + ScrollBar { + id: vbar + hoverEnabled: true + active: hovered || pressed + orientation: Qt.Vertical + size: frame.height / content.height + anchors.top: parent.top + anchors.right: parent.right + anchors.bottom: parent.bottom + } + + ScrollBar { + id: hbar + hoverEnabled: true + active: hovered || pressed + orientation: Qt.Horizontal + size: frame.width / content.width + anchors.left: parent.left + anchors.right: parent.right + anchors.bottom: parent.bottom + } +} +//! [1] + +Component.onCompleted: { + hbar.active = true + vbar.active = true +} +} diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollbar-policy.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollbar-policy.qml new file mode 100644 index 0000000000..7f08912e7e --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollbar-policy.qml @@ -0,0 +1,14 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +//! [1] +Flickable { + contentHeight: 2000 + ScrollBar.vertical: ScrollBar { + policy: ScrollBar.AlwaysOn + } +} +//! [1] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollindicator-active.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollindicator-active.qml new file mode 100644 index 0000000000..0f6afdfc4d --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollindicator-active.qml @@ -0,0 +1,22 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +Item { + width: 100 + height: 100 + + //! [1] + Flickable { + anchors.fill: parent + + contentWidth: parent.width * 2 + contentHeight: parent.height * 2 + + ScrollIndicator.horizontal: ScrollIndicator { id: hbar; active: vbar.active } + ScrollIndicator.vertical: ScrollIndicator { id: vbar; active: hbar.active } + } + //! [1] +} diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollindicator-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollindicator-custom.qml new file mode 100644 index 0000000000..f447fd4c94 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollindicator-custom.qml @@ -0,0 +1,21 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +//! [file] +import QtQuick +import QtQuick.Controls + +ScrollIndicator { + id: control + size: 0.3 + position: 0.2 + active: true + orientation: Qt.Vertical + + contentItem: Rectangle { + implicitWidth: 2 + implicitHeight: 100 + color: "#c2f4c6" + } +} +//! [file] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollindicator-non-attached.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollindicator-non-attached.qml new file mode 100644 index 0000000000..063c771f1b --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollindicator-non-attached.qml @@ -0,0 +1,60 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +Item { + width: 200 + height: 200 + +//! [1] +Rectangle { + id: frame + clip: true + width: 160 + height: 160 + border.color: "black" + anchors.centerIn: parent + + Text { + id: content + text: "ABC" + font.pixelSize: 169 + + MouseArea { + id: mouseArea + drag.target: content + drag.minimumX: frame.width - width + drag.minimumY: frame.height - height + drag.maximumX: 0 + drag.maximumY: 0 + anchors.fill: content + } + } + + ScrollIndicator { + id: verticalIndicator + active: mouseArea.pressed + orientation: Qt.Vertical + size: frame.height / content.height + position: -content.y / content.height + anchors { top: parent.top; right: parent.right; bottom: parent.bottom } + } + + ScrollIndicator { + id: horizontalIndicator + active: mouseArea.pressed + orientation: Qt.Horizontal + size: frame.width / content.width + position: -content.x / content.width + anchors { left: parent.left; right: parent.right; bottom: parent.bottom } + } +} +//! [1] + +Component.onCompleted: { + horizontalIndicator.active = true; + verticalIndicator.active = true; +} +} diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollview-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollview-custom.qml new file mode 100644 index 0000000000..2f23b9fd58 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollview-custom.qml @@ -0,0 +1,57 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +Item { + width: 200 + height: 200 + + Binding { + target: control.ScrollBar.horizontal + property: "active" + value: true + } + + Binding { + target: control.ScrollBar.vertical + property: "active" + value: true + } + +//! [file] +ScrollView { + id: control + + width: 200 + height: 200 + focus: true + + Label { + text: "ABC" + font.pixelSize: 224 + } + + ScrollBar.vertical: ScrollBar { + parent: control + x: control.mirrored ? 0 : control.width - width + y: control.topPadding + height: control.availableHeight + active: control.ScrollBar.horizontal.active + } + + ScrollBar.horizontal: ScrollBar { + parent: control + x: control.leftPadding + y: control.height - height + width: control.availableWidth + active: control.ScrollBar.vertical.active + } + + background: Rectangle { + border.color: control.activeFocus ? "#21be2b" : "#bdbebf" + } +} +//! [file] +} diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollview-interactive.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollview-interactive.qml new file mode 100644 index 0000000000..3f7bc8eb6d --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollview-interactive.qml @@ -0,0 +1,14 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +//! [file] +ScrollView { + // ... + ScrollBar.horizontal.interactive: true + ScrollBar.vertical.interactive: true +} +//! [file] + diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollview-listview.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollview-listview.qml new file mode 100644 index 0000000000..053e8e395a --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollview-listview.qml @@ -0,0 +1,39 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +Item { + id: root + width: 200 + height: 200 + + Binding { + target: root.children[0].ScrollBar.horizontal + property: "active" + value: true + } + + Binding { + target: root.children[0].ScrollBar.vertical + property: "active" + value: true + } + +//! [file] +ScrollView { + width: 200 + height: 200 + + ListView { + model: 20 + delegate: ItemDelegate { + text: "Item " + index + + required property int index + } + } +} +//! [file] +} diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollview-policy.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollview-policy.qml new file mode 100644 index 0000000000..fa75cd14ed --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollview-policy.qml @@ -0,0 +1,14 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +//! [file] +ScrollView { + // ... + ScrollBar.horizontal.policy: ScrollBar.AlwaysOff + ScrollBar.vertical.policy: ScrollBar.AlwaysOn +} +//! [file] + diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollview.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollview.qml new file mode 100644 index 0000000000..e7f1adf758 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-scrollview.qml @@ -0,0 +1,36 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +Rectangle { + id: root + width: 200 + height: 200 + border.color: "#ddd" + + Binding { + target: root.children[0].ScrollBar.horizontal + property: "active" + value: true + } + + Binding { + target: root.children[0].ScrollBar.vertical + property: "active" + value: true + } + +//! [file] +ScrollView { + width: 200 + height: 200 + + Label { + text: "ABC" + font.pixelSize: 224 + } +} +//! [file] +} diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-selectionrectangle.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-selectionrectangle.qml new file mode 100644 index 0000000000..a53941e824 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-selectionrectangle.qml @@ -0,0 +1,48 @@ +// Copyright (C) 2021 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick + +import QtQuick +import QtQuick.Window +import QtQuick.Controls +import QtQml.Models +import Qt.labs.qmlmodels + +Window { + width: 480 + height: 640 + visible: true + visibility: Window.AutomaticVisibility + +//![0] + TableView { + id: tableView + anchors.fill: parent + clip: true + + model: TableModel { + TableModelColumn { display: "name" } + rows: [ { "name": "Harry" }, { "name": "Hedwig" } ] + } + + selectionModel: ItemSelectionModel { + model: tableView.model + } + + delegate: Rectangle { + implicitWidth: 100 + implicitHeight: 30 + color: selected ? "blue" : "lightgray" + + required property bool selected + + Text { text: display } + } + } + + SelectionRectangle { + target: tableView + } +//![0] +} diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-slider-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-slider-custom.qml new file mode 100644 index 0000000000..66e0bd7990 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-slider-custom.qml @@ -0,0 +1,40 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +//! [file] +import QtQuick +import QtQuick.Controls + +Slider { + id: control + value: 0.5 + + background: Rectangle { + x: control.leftPadding + y: control.topPadding + control.availableHeight / 2 - height / 2 + implicitWidth: 200 + implicitHeight: 4 + width: control.availableWidth + height: implicitHeight + radius: 2 + color: "#bdbebf" + + Rectangle { + width: control.visualPosition * parent.width + height: parent.height + color: "#21be2b" + radius: 2 + } + } + + handle: Rectangle { + x: control.leftPadding + control.visualPosition * (control.availableWidth - width) + y: control.topPadding + control.availableHeight / 2 - height / 2 + implicitWidth: 26 + implicitHeight: 26 + radius: 13 + color: control.pressed ? "#f0f0f0" : "#f6f6f6" + border.color: "#bdbebf" + } +} +//! [file] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-spinbox-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-spinbox-custom.qml new file mode 100644 index 0000000000..b32106a5bd --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-spinbox-custom.qml @@ -0,0 +1,72 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +//! [file] +import QtQuick +import QtQuick.Controls + +SpinBox { + id: control + value: 50 + editable: true + + contentItem: TextInput { + z: 2 + text: control.textFromValue(control.value, control.locale) + + font: control.font + color: "#21be2b" + selectionColor: "#21be2b" + selectedTextColor: "#ffffff" + horizontalAlignment: Qt.AlignHCenter + verticalAlignment: Qt.AlignVCenter + + readOnly: !control.editable + validator: control.validator + inputMethodHints: Qt.ImhFormattedNumbersOnly + } + + up.indicator: Rectangle { + x: control.mirrored ? 0 : parent.width - width + height: parent.height + implicitWidth: 40 + implicitHeight: 40 + color: control.up.pressed ? "#e4e4e4" : "#f6f6f6" + border.color: enabled ? "#21be2b" : "#bdbebf" + + Text { + text: "+" + font.pixelSize: control.font.pixelSize * 2 + color: "#21be2b" + anchors.fill: parent + fontSizeMode: Text.Fit + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + } + } + + down.indicator: Rectangle { + x: control.mirrored ? parent.width - width : 0 + height: parent.height + implicitWidth: 40 + implicitHeight: 40 + color: control.down.pressed ? "#e4e4e4" : "#f6f6f6" + border.color: enabled ? "#21be2b" : "#bdbebf" + + Text { + text: "-" + font.pixelSize: control.font.pixelSize * 2 + color: "#21be2b" + anchors.fill: parent + fontSizeMode: Text.Fit + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + } + } + + background: Rectangle { + implicitWidth: 140 + border.color: "#bdbebf" + } +} +//! [file] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-spinbox-double.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-spinbox-double.qml new file mode 100644 index 0000000000..fe2dfbd722 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-spinbox-double.qml @@ -0,0 +1,32 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +//! [1] +SpinBox { + id: spinbox + from: 0 + value: 110 + to: 100 * 100 + stepSize: 100 + anchors.centerIn: parent + + property int decimals: 2 + property real realValue: value / 100 + + validator: DoubleValidator { + bottom: Math.min(spinbox.from, spinbox.to) + top: Math.max(spinbox.from, spinbox.to) + } + + textFromValue: function(value, locale) { + return Number(value / 100).toLocaleString(locale, 'f', spinbox.decimals) + } + + valueFromText: function(text, locale) { + return Number.fromLocaleString(locale, text) * 100 + } +} +//! [1] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-spinbox-textual.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-spinbox-textual.qml new file mode 100644 index 0000000000..271cad0f07 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-spinbox-textual.qml @@ -0,0 +1,32 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +//! [1] +SpinBox { + id: spinBox + from: 0 + to: items.length - 1 + value: 1 // "Medium" + + property var items: ["Small", "Medium", "Large"] + + validator: RegularExpressionValidator { + regularExpression: new RegExp("(Small|Medium|Large)", "i") + } + + textFromValue: function(value) { + return items[value]; + } + + valueFromText: function(text) { + for (var i = 0; i < items.length; ++i) { + if (items[i].toLowerCase().indexOf(text.toLowerCase()) === 0) + return i + } + return spinBox.value + } +} +//! [1] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-spinbox.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-spinbox.qml new file mode 100644 index 0000000000..24fac81ca6 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-spinbox.qml @@ -0,0 +1,11 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +//! [1] +SpinBox { + value: 50 +} +//! [1] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-splitview-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-splitview-custom.qml new file mode 100644 index 0000000000..0d5452c25d --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-splitview-custom.qml @@ -0,0 +1,33 @@ +// Copyright (C) 2018 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +Item { + width: 200 + height: 100 + + //! [1] + SplitView { + id: splitView + anchors.fill: parent + + handle: Rectangle { + implicitWidth: 4 + implicitHeight: 4 + color: SplitHandle.pressed ? "#81e889" + : (SplitHandle.hovered ? Qt.lighter("#c2f4c6", 1.1) : "#c2f4c6") + } + + Rectangle { + implicitWidth: 150 + color: "#444" + } + Rectangle { + implicitWidth: 50 + color: "#666" + } + } + //! [1] +} diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-splitview-handle-containmentmask.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-splitview-handle-containmentmask.qml new file mode 100644 index 0000000000..f12bfe1da8 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-splitview-handle-containmentmask.qml @@ -0,0 +1,40 @@ +// Copyright (C) 2021 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +Item { + width: 200 + height: 100 + + //! [1] + SplitView { + id: splitView + anchors.fill: parent + + handle: Rectangle { + id: handleDelegate + implicitWidth: 4 + implicitHeight: 4 + color: SplitHandle.pressed ? "#81e889" + : (SplitHandle.hovered ? Qt.lighter("#c2f4c6", 1.1) : "#c2f4c6") + + containmentMask: Item { + x: (handleDelegate.width - width) / 2 + width: 64 + height: splitView.height + } + } + + Rectangle { + implicitWidth: 150 + color: "#444" + } + Rectangle { + implicitWidth: 50 + color: "#666" + } + } + //! [1] +} diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-stackview-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-stackview-custom.qml new file mode 100644 index 0000000000..381fbe6b95 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-stackview-custom.qml @@ -0,0 +1,29 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +//! [file] +import QtQuick +import QtQuick.Controls + +StackView { + id: control + + popEnter: Transition { + XAnimator { + from: (control.mirrored ? -1 : 1) * -control.width + to: 0 + duration: 400 + easing.type: Easing.OutCubic + } + } + + popExit: Transition { + XAnimator { + from: 0 + to: (control.mirrored ? -1 : 1) * control.width + duration: 400 + easing.type: Easing.OutCubic + } + } +} +//! [file] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-stackview-visible.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-stackview-visible.qml new file mode 100644 index 0000000000..d711a02e1a --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-stackview-visible.qml @@ -0,0 +1,52 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +//! [1] +StackView { + id: stackView + property real offset: 10 + width: 100; height: 100 + + initialItem: Component { + id: page + Rectangle { + property real pos: StackView.index * stackView.offset + property real hue: Math.random() + color: Qt.hsla(hue, 0.5, 0.8, 0.6) + border.color: Qt.hsla(hue, 0.5, 0.5, 0.9) + StackView.visible: true + } + } + + pushEnter: Transition { + id: pushEnter + ParallelAnimation { + PropertyAction { property: "x"; value: pushEnter.ViewTransition.item.pos } + NumberAnimation { properties: "y"; from: pushEnter.ViewTransition.item.pos + stackView.offset; to: pushEnter.ViewTransition.item.pos; duration: 400; easing.type: Easing.OutCubic } + NumberAnimation { property: "opacity"; from: 0; to: 1; duration: 400; easing.type: Easing.OutCubic } + } + } + popExit: Transition { + id: popExit + ParallelAnimation { + PropertyAction { property: "x"; value: popExit.ViewTransition.item.pos } + NumberAnimation { properties: "y"; from: popExit.ViewTransition.item.pos; to: popExit.ViewTransition.item.pos + stackView.offset; duration: 400; easing.type: Easing.OutCubic } + NumberAnimation { property: "opacity"; from: 1; to: 0; duration: 400; easing.type: Easing.OutCubic } + } + } + + pushExit: Transition { + id: pushExit + PropertyAction { property: "x"; value: pushExit.ViewTransition.item.pos } + PropertyAction { property: "y"; value: pushExit.ViewTransition.item.pos } + } + popEnter: Transition { + id: popEnter + PropertyAction { property: "x"; value: popEnter.ViewTransition.item.pos } + PropertyAction { property: "y"; value: popEnter.ViewTransition.item.pos } + } +} +//! [1] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-swipedelegate-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-swipedelegate-custom.qml new file mode 100644 index 0000000000..973511c418 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-swipedelegate-custom.qml @@ -0,0 +1,48 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +//! [file] +import QtQuick +import QtQuick.Controls + +SwipeDelegate { + id: control + text: qsTr("SwipeDelegate") + + Component { + id: component + + Rectangle { + color: SwipeDelegate.pressed ? "#333" : "#444" + width: parent.width + height: parent.height + clip: true + + Label { + text: qsTr("Press me!") + color: "#21be2b" + anchors.centerIn: parent + } + } + } + + swipe.left: component + swipe.right: component + + contentItem: Text { + text: control.text + font: control.font + color: control.enabled ? (control.down ? "#17a81a" : "#21be2b") : "#bdbebf" + elide: Text.ElideRight + verticalAlignment: Text.AlignVCenter + + Behavior on x { + enabled: !control.down + NumberAnimation { + easing.type: Easing.InOutCubic + duration: 400 + } + } + } +} +//! [file] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-swipedelegate-transition.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-swipedelegate-transition.qml new file mode 100644 index 0000000000..4215ea9202 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-swipedelegate-transition.qml @@ -0,0 +1,13 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +//! [1] +SwipeDelegate { + swipe.transition: Transition { + SmoothedAnimation { velocity: 3; easing.type: Easing.InOutCubic } + } +} +//! [1] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-swipedelegate.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-swipedelegate.qml new file mode 100644 index 0000000000..fb2df4f6d3 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-swipedelegate.qml @@ -0,0 +1,63 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +//! [1] +ListView { + id: listView + anchors.fill: parent + model: ListModel { + ListElement { sender: "Bob Bobbleton"; title: "How are you going?" } + ListElement { sender: "Rug Emporium"; title: "SALE! All rugs MUST go!" } + ListElement { sender: "Electric Co."; title: "Electricity bill 15/07/2016 overdue" } + ListElement { sender: "Tips"; title: "Five ways this tip will save your life" } + } + delegate: SwipeDelegate { + id: swipeDelegate + text: sender + " - " + title + width: listView.width + + required property string sender + required property string title + + ListView.onRemove: SequentialAnimation { + PropertyAction { + target: swipeDelegate + property: "ListView.delayRemove" + value: true + } + NumberAnimation { + target: swipeDelegate + property: "height" + to: 0 + easing.type: Easing.InOutQuad + } + PropertyAction { + target: swipeDelegate + property: "ListView.delayRemove" + value: false + } + } + + swipe.right: Label { + id: deleteLabel + text: qsTr("Delete") + color: "white" + verticalAlignment: Label.AlignVCenter + padding: 12 + height: parent.height + anchors.right: parent.right + + SwipeDelegate.onClicked: listView.model.remove(index) + + required property int index + + background: Rectangle { + color: deleteLabel.SwipeDelegate.pressed ? Qt.darker("tomato", 1.1) : "tomato" + } + } + } +} +//! [1] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-swipeview-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-swipeview-custom.qml new file mode 100644 index 0000000000..e77bc9a3e8 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-swipeview-custom.qml @@ -0,0 +1,15 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +//! [file] +import QtQuick +import QtQuick.Controls + +SwipeView { + id: control + + background: Rectangle { + color: "#eeeeee" + } +} +//! [file] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-swipeview-indicator.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-swipeview-indicator.qml new file mode 100644 index 0000000000..1831d92b9f --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-swipeview-indicator.qml @@ -0,0 +1,39 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +Item { + width: 200 + height: 320 + + //! [1] + SwipeView { + id: view + + currentIndex: 1 + anchors.fill: parent + + Item { + id: firstPage + } + Item { + id: secondPage + } + Item { + id: thirdPage + } + } + + PageIndicator { + id: indicator + + count: view.count + currentIndex: view.currentIndex + + anchors.bottom: view.bottom + anchors.horizontalCenter: parent.horizontalCenter + } + //! [1] +} diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-switch-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-switch-custom.qml new file mode 100644 index 0000000000..5ca4b96140 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-switch-custom.qml @@ -0,0 +1,40 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +//! [file] +import QtQuick +import QtQuick.Controls + +Switch { + id: control + text: qsTr("Switch") + + indicator: Rectangle { + implicitWidth: 48 + implicitHeight: 26 + x: control.leftPadding + y: parent.height / 2 - height / 2 + radius: 13 + color: control.checked ? "#17a81a" : "#ffffff" + border.color: control.checked ? "#17a81a" : "#cccccc" + + Rectangle { + x: control.checked ? parent.width - width : 0 + width: 26 + height: 26 + radius: 13 + color: control.down ? "#cccccc" : "#ffffff" + border.color: control.checked ? (control.down ? "#17a81a" : "#21be2b") : "#999999" + } + } + + contentItem: Text { + text: control.text + font: control.font + opacity: enabled ? 1.0 : 0.3 + color: control.down ? "#17a81a" : "#21be2b" + verticalAlignment: Text.AlignVCenter + leftPadding: control.indicator.width + control.spacing + } +} +//! [file] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-switchdelegate-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-switchdelegate-custom.qml new file mode 100644 index 0000000000..13cc7b4402 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-switchdelegate-custom.qml @@ -0,0 +1,49 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +//! [file] +import QtQuick +import QtQuick.Controls + +SwitchDelegate { + id: control + text: qsTr("SwitchDelegate") + checked: true + + contentItem: Text { + rightPadding: control.indicator.width + control.spacing + text: control.text + font: control.font + opacity: enabled ? 1.0 : 0.3 + color: control.down ? "#17a81a" : "#21be2b" + elide: Text.ElideRight + verticalAlignment: Text.AlignVCenter + } + + indicator: Rectangle { + implicitWidth: 48 + implicitHeight: 26 + x: control.width - width - control.rightPadding + y: parent.height / 2 - height / 2 + radius: 13 + color: control.checked ? "#17a81a" : "transparent" + border.color: control.checked ? "#17a81a" : "#cccccc" + + Rectangle { + x: control.checked ? parent.width - width : 0 + width: 26 + height: 26 + radius: 13 + color: control.down ? "#cccccc" : "#ffffff" + border.color: control.checked ? (control.down ? "#17a81a" : "#21be2b") : "#999999" + } + } + + background: Rectangle { + implicitWidth: 100 + implicitHeight: 40 + visible: control.down || control.highlighted + color: control.down ? "#bdbebf" : "#eeeeee" + } +} +//! [file] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-tabbar-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-tabbar-custom.qml new file mode 100644 index 0000000000..cdce972150 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-tabbar-custom.qml @@ -0,0 +1,25 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +//! [file] +import QtQuick +import QtQuick.Controls + +TabBar { + id: control + + background: Rectangle { + color: "#eeeeee" + } + + TabButton { + text: qsTr("Home") + } + TabButton { + text: qsTr("Discover") + } + TabButton { + text: qsTr("Activity") + } +} +//! [file] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-tabbar-explicit.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-tabbar-explicit.qml new file mode 100644 index 0000000000..2293984e30 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-tabbar-explicit.qml @@ -0,0 +1,28 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +Item { + width: 360 + height: childrenRect.height + +//! [1] +TabBar { + width: parent.width + TabButton { + text: "First" + width: implicitWidth + } + TabButton { + text: "Second" + width: implicitWidth + } + TabButton { + text: "Third" + width: implicitWidth + } +} +//! [1] +} diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-tabbar-flickable.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-tabbar-flickable.qml new file mode 100644 index 0000000000..3851b226bd --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-tabbar-flickable.qml @@ -0,0 +1,26 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +Item { + width: 360 + height: bar.height + +//! [1] +TabBar { + id: bar + width: parent.width + + Repeater { + model: ["First", "Second", "Third", "Fourth", "Fifth"] + + TabButton { + text: modelData + width: Math.max(100, bar.width / 5) + } + } +} +//! [1] +} diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-tabbar.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-tabbar.qml new file mode 100644 index 0000000000..3ce32c1c50 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-tabbar.qml @@ -0,0 +1,40 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Layouts +import QtQuick.Controls + +Column { + width: 300 + + //! [1] + TabBar { + id: bar + width: parent.width + TabButton { + text: qsTr("Home") + } + TabButton { + text: qsTr("Discover") + } + TabButton { + text: qsTr("Activity") + } + } + + StackLayout { + width: parent.width + currentIndex: bar.currentIndex + Item { + id: homeTab + } + Item { + id: discoverTab + } + Item { + id: activityTab + } + } + //! [1] +} diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-tabbutton.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-tabbutton.qml new file mode 100644 index 0000000000..c397092a8a --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-tabbutton.qml @@ -0,0 +1,19 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +//! [1] +TabBar { + TabButton { + text: qsTr("Home") + } + TabButton { + text: qsTr("Discover") + } + TabButton { + text: qsTr("Activity") + } +} +//! [1] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-textarea-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-textarea-custom.qml new file mode 100644 index 0000000000..39a94e13cc --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-textarea-custom.qml @@ -0,0 +1,18 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +//! [file] +import QtQuick +import QtQuick.Controls + +TextArea { + id: control + placeholderText: qsTr("Enter description") + + background: Rectangle { + implicitWidth: 200 + implicitHeight: 40 + border.color: control.enabled ? "#21be2b" : "transparent" + } +} +//! [file] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-textarea-scrollable.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-textarea-scrollable.qml new file mode 100644 index 0000000000..7f915815e3 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-textarea-scrollable.qml @@ -0,0 +1,23 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +Item { + width: 100 + height: 100 + + Binding { target: view.ScrollBar.vertical; property: "active"; value: true } + + //! [1] + ScrollView { + id: view + anchors.fill: parent + + TextArea { + text: "TextArea\n...\n...\n...\n...\n...\n...\n" + } + } + //! [1] +} diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-textfield-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-textfield-custom.qml new file mode 100644 index 0000000000..c4d0c88c2a --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-textfield-custom.qml @@ -0,0 +1,19 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +//! [file] +import QtQuick +import QtQuick.Controls + +TextField { + id: control + placeholderText: qsTr("Enter description") + + background: Rectangle { + implicitWidth: 200 + implicitHeight: 40 + color: control.enabled ? "transparent" : "#353637" + border.color: control.enabled ? "#21be2b" : "transparent" + } +} +//! [file] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-textfield-disabled.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-textfield-disabled.qml new file mode 100644 index 0000000000..aa8639190c --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-textfield-disabled.qml @@ -0,0 +1,11 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +TextField { + width: 80 + text: "Disabled" + enabled: false +} diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-textfield-focused.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-textfield-focused.qml new file mode 100644 index 0000000000..62299eeabc --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-textfield-focused.qml @@ -0,0 +1,11 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +TextField { + width: 80 + text: "Focused" + focus: true +} diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-textfield-normal.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-textfield-normal.qml new file mode 100644 index 0000000000..72a5626142 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-textfield-normal.qml @@ -0,0 +1,10 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +TextField { + width: 80 + text: "Normal" +} diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-toolbar-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-toolbar-custom.qml new file mode 100644 index 0000000000..2aabcbfbe3 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-toolbar-custom.qml @@ -0,0 +1,35 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Layouts +import QtQuick.Controls + +//! [file] +ToolBar { + id: control + + background: Rectangle { + implicitHeight: 40 + color: "#eeeeee" + + Rectangle { + width: parent.width + height: 1 + anchors.bottom: parent.bottom + color: "transparent" + border.color: "#21be2b" + } + } + + RowLayout { + anchors.fill: parent + ToolButton { + text: qsTr("Undo") + } + ToolButton { + text: qsTr("Redo") + } + } +} +//! [file] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-toolbar.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-toolbar.qml new file mode 100644 index 0000000000..cb07df80f6 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-toolbar.qml @@ -0,0 +1,39 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Layouts +import QtQuick.Controls + +Item { + id: root + width: children[0].implicitWidth * 2 + height: children[0].implicitHeight + Binding { + target: root.children[0] + property: "width" + value: root.width + } +//! [1] +ToolBar { + RowLayout { + anchors.fill: parent + ToolButton { + text: qsTr("‹") + onClicked: stack.pop() + } + Label { + text: "Title" + elide: Label.ElideRight + horizontalAlignment: Qt.AlignHCenter + verticalAlignment: Qt.AlignVCenter + Layout.fillWidth: true + } + ToolButton { + text: qsTr("⋮") + onClicked: menu.open() + } + } +} +//! [1] +} diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-toolbutton-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-toolbutton-custom.qml new file mode 100644 index 0000000000..6ec46b0adf --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-toolbutton-custom.qml @@ -0,0 +1,31 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +//! [file] +import QtQuick +import QtQuick.Controls + +ToolButton { + id: control + text: qsTr("ToolButton") + width: 120 + + contentItem: Text { + text: control.text + font: control.font + opacity: enabled ? 1.0 : 0.3 + color: control.down ? "#17a81a" : "#21be2b" + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + elide: Text.ElideRight + } + + background: Rectangle { + implicitWidth: 40 + implicitHeight: 40 + color: Qt.darker("#33333333", control.enabled && (control.checked || control.highlighted) ? 1.5 : 1.0) + opacity: enabled ? 1 : 0.3 + visible: control.down || (control.enabled && (control.checked || control.highlighted)) + } +} +//! [file] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-toolseparator-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-toolseparator-custom.qml new file mode 100644 index 0000000000..201e04b0e8 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-toolseparator-custom.qml @@ -0,0 +1,45 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Layouts +import QtQuick.Window +import QtQuick.Controls + +//! [file] +ToolBar { + RowLayout { + anchors.fill: parent + + ToolButton { + text: qsTr("Action 1") + } + ToolButton { + text: qsTr("Action 2") + } + + ToolSeparator { + padding: vertical ? 10 : 2 + topPadding: vertical ? 2 : 10 + bottomPadding: vertical ? 2 : 10 + + contentItem: Rectangle { + implicitWidth: parent.vertical ? 1 : 24 + implicitHeight: parent.vertical ? 24 : 1 + color: "#c3c3c3" + } + } + + ToolButton { + text: qsTr("Action 3") + } + ToolButton { + text: qsTr("Action 4") + } + + Item { + Layout.fillWidth: true + } + } +} +//! [file] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-toolseparator.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-toolseparator.qml new file mode 100644 index 0000000000..eb3543402d --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-toolseparator.qml @@ -0,0 +1,44 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Layouts +import QtQuick.Window +import QtQuick.Controls + +//! [1] +ToolBar { + RowLayout { + anchors.fill: parent + + ToolButton { + text: qsTr("Action 1") + } + ToolButton { + text: qsTr("Action 2") + } + + ToolSeparator {} + + ToolButton { + text: qsTr("Action 3") + } + ToolButton { + text: qsTr("Action 4") + } + + ToolSeparator {} + + ToolButton { + text: qsTr("Action 5") + } + ToolButton { + text: qsTr("Action 6") + } + + Item { + Layout.fillWidth: true + } + } +} +//! [1] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-tooltip-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-tooltip-custom.qml new file mode 100644 index 0000000000..089e6d02b9 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-tooltip-custom.qml @@ -0,0 +1,24 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +//! [file] +import QtQuick +import QtQuick.Controls + +Item { +ToolTip { + id: control + text: qsTr("A descriptive tool tip of what the button does") + + contentItem: Text { + text: control.text + font: control.font + color: "#21be2b" + } + + background: Rectangle { + border.color: "#21be2b" + } +} +} +//! [file] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-tooltip-hover.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-tooltip-hover.qml new file mode 100644 index 0000000000..289334d20d --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-tooltip-hover.qml @@ -0,0 +1,17 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +//! [1] +Button { + text: qsTr("Button") + hoverEnabled: true + + ToolTip.delay: 1000 + ToolTip.timeout: 5000 + ToolTip.visible: hovered + ToolTip.text: qsTr("This tool tip is shown after hovering the button for a second.") +} +//! [1] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-tooltip-pressandhold.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-tooltip-pressandhold.qml new file mode 100644 index 0000000000..e209ce9ce9 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-tooltip-pressandhold.qml @@ -0,0 +1,15 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +//! [1] +Button { + text: qsTr("Button") + + ToolTip.visible: pressed + ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval + ToolTip.text: qsTr("This tool tip is shown after pressing and holding the button down.") +} +//! [1] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-tooltip-slider.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-tooltip-slider.qml new file mode 100644 index 0000000000..823e7f1842 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-tooltip-slider.qml @@ -0,0 +1,29 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Window +import QtQuick.Controls + +Item { + id: root + width: slider.width + height: slider.height * 2.0 + + Binding { target: slider.anchors; property: "centerIn"; value: root } + Binding { target: slider.anchors; property: "verticalCenterOffset"; value: slider.height / 2 } + Binding { target: slider; property: "pressed"; value: root.Window.active } + + //! [1] + Slider { + id: slider + value: 0.5 + + ToolTip { + parent: slider.handle + visible: slider.pressed + text: slider.value.toFixed(1) + } + } + //! [1] +} diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-tooltip.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-tooltip.qml new file mode 100644 index 0000000000..d0cf142376 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-tooltip.qml @@ -0,0 +1,27 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Window +import QtQuick.Controls + +Item { + id: root + width: 360 + height: button.height * 2 + + property Button button: children[0] + + Binding { target: root.button; property: "down"; value: root.Window.active } + Binding { target: root.button.anchors; property: "bottom"; value: root.bottom } + Binding { target: root.button.anchors; property: "horizontalCenter"; value: root.horizontalCenter } + + //! [1] + Button { + text: qsTr("Save") + + ToolTip.visible: down + ToolTip.text: qsTr("Save the active project") + } + //! [1] +} diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-tumbler-custom.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-tumbler-custom.qml new file mode 100644 index 0000000000..3487e7316d --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-tumbler-custom.qml @@ -0,0 +1,57 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +//! [file] +import QtQuick +import QtQuick.Controls + +Tumbler { + id: control + model: 15 + + background: Item { + Rectangle { + opacity: control.enabled ? 0.2 : 0.1 + border.color: "#000000" + width: parent.width + height: 1 + anchors.top: parent.top + } + + Rectangle { + opacity: control.enabled ? 0.2 : 0.1 + border.color: "#000000" + width: parent.width + height: 1 + anchors.bottom: parent.bottom + } + } + + delegate: Text { + text: qsTr("Item %1").arg(modelData + 1) + font: control.font + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + opacity: 1.0 - Math.abs(Tumbler.displacement) / (control.visibleItemCount / 2) + + required property var modelData + required property int index + } + + Rectangle { + anchors.horizontalCenter: control.horizontalCenter + y: control.height * 0.4 + width: 40 + height: 1 + color: "#21be2b" + } + + Rectangle { + anchors.horizontalCenter: control.horizontalCenter + y: control.height * 0.6 + width: 40 + height: 1 + color: "#21be2b" + } +} +//! [file] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-tumbler-listView.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-tumbler-listView.qml new file mode 100644 index 0000000000..1b39c2aa16 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-tumbler-listView.qml @@ -0,0 +1,22 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +//! [contentItem] +Tumbler { + id: tumbler + + contentItem: ListView { + model: tumbler.model + delegate: tumbler.delegate + + snapMode: ListView.SnapToItem + highlightRangeMode: ListView.StrictlyEnforceRange + preferredHighlightBegin: height / 2 - (height / tumbler.visibleItemCount / 2) + preferredHighlightEnd: height / 2 + (height / tumbler.visibleItemCount / 2) + clip: true + } +} +//! [contentItem] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-tumbler-pathView.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-tumbler-pathView.qml new file mode 100644 index 0000000000..30e90b2ba5 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-tumbler-pathView.qml @@ -0,0 +1,33 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +//! [contentItem] +Tumbler { + id: tumbler + + contentItem: PathView { + id: pathView + model: tumbler.model + delegate: tumbler.delegate + clip: true + pathItemCount: tumbler.visibleItemCount + 1 + preferredHighlightBegin: 0.5 + preferredHighlightEnd: 0.5 + dragMargin: width / 2 + + path: Path { + startX: pathView.width / 2 + startY: -pathView.delegateHeight / 2 + PathLine { + x: pathView.width / 2 + y: pathView.pathItemCount * pathView.delegateHeight - pathView.delegateHeight / 2 + } + } + + property real delegateHeight: tumbler.availableHeight / tumbler.visibleItemCount + } +} +//! [contentItem] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-tumbler-timePicker.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-tumbler-timePicker.qml new file mode 100644 index 0000000000..a5d4b3585a --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-tumbler-timePicker.qml @@ -0,0 +1,62 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +//! [tumbler] +import QtQuick +import QtQuick.Window +import QtQuick.Controls + +Rectangle { + width: frame.implicitWidth + 10 + height: frame.implicitHeight + 10 + + function formatText(count, modelData) { + var data = count === 12 ? modelData + 1 : modelData; + return data.toString().length < 2 ? "0" + data : data; + } + + FontMetrics { + id: fontMetrics + } + + Component { + id: delegateComponent + + Label { + text: formatText(Tumbler.tumbler.count, modelData) + opacity: 1.0 - Math.abs(Tumbler.displacement) / (Tumbler.tumbler.visibleItemCount / 2) + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + font.pixelSize: fontMetrics.font.pixelSize * 1.25 + } + } + + Frame { + id: frame + padding: 0 + anchors.centerIn: parent + + Row { + id: row + + Tumbler { + id: hoursTumbler + model: 12 + delegate: delegateComponent + } + + Tumbler { + id: minutesTumbler + model: 60 + delegate: delegateComponent + } + + Tumbler { + id: amPmTumbler + model: ["AM", "PM"] + delegate: delegateComponent + } + } + } +} +//! [tumbler] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-universal-accent.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-universal-accent.qml new file mode 100644 index 0000000000..52aca6eea9 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-universal-accent.qml @@ -0,0 +1,19 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Layouts +import QtQuick.Controls +import QtQuick.Controls.Universal + +Pane { + padding: 10 + +//! [1] +Button { + text: qsTr("Button") + highlighted: true + Universal.accent: Universal.Orange +} +//! [1] +} diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-universal-background.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-universal-background.qml new file mode 100644 index 0000000000..106549f789 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-universal-background.qml @@ -0,0 +1,20 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls +import QtQuick.Controls.Universal + +Pane { + padding: 10 + +//! [1] +Pane { + Universal.background: Universal.Steel + + Button { + text: qsTr("Button") + } +} +//! [1] +} diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-universal-foreground.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-universal-foreground.qml new file mode 100644 index 0000000000..491a4f94d4 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-universal-foreground.qml @@ -0,0 +1,17 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls +import QtQuick.Controls.Universal + +Pane { + padding: 10 + +//! [1] +Button { + text: qsTr("Button") + Universal.foreground: Universal.Pink +} +//! [1] +} diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-universal-theme.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-universal-theme.qml new file mode 100644 index 0000000000..5ade2c7c55 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-universal-theme.qml @@ -0,0 +1,20 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls +import QtQuick.Controls.Universal + +Pane { + padding: 10 + +//! [1] +Pane { + Universal.theme: Universal.Dark + + Button { + text: qsTr("Button") + } +} +//! [1] +} diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-weeknumbercolumn-layout.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-weeknumbercolumn-layout.qml new file mode 100644 index 0000000000..6d1dd1ba79 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-weeknumbercolumn-layout.qml @@ -0,0 +1,25 @@ +// Copyright (C) 2021 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls +import QtQuick.Layouts + +//! [1] +RowLayout { + WeekNumberColumn { + month: grid.month + year: grid.year + locale: grid.locale + Layout.fillHeight: true + } + + MonthGrid { + id: grid + month: Calendar.December + year: 2015 + locale: Qt.locale("en_US") + Layout.fillHeight: true + } +} +//! [1] diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols2-weeknumbercolumn.qml b/src/quickcontrols/doc/snippets/qtquickcontrols2-weeknumbercolumn.qml new file mode 100644 index 0000000000..e3c757a0b8 --- /dev/null +++ b/src/quickcontrols/doc/snippets/qtquickcontrols2-weeknumbercolumn.qml @@ -0,0 +1,13 @@ +// Copyright (C) 2021 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +import QtQuick +import QtQuick.Controls + +//! [1] +WeekNumberColumn { + month: Calendar.December + year: 2015 + locale: Qt.locale("en_US") +} +//! [1] |