diff options
| author | Mitch Curtis <mitch.curtis@theqtcompany.com> | 2016-05-02 15:11:27 +0200 |
|---|---|---|
| committer | Mitch Curtis <mitch.curtis@qt.io> | 2016-05-10 12:50:04 +0000 |
| commit | 064a7ac884aa47cb3f679c703873305b5817ade3 (patch) | |
| tree | 821be353aac713a215db700d7b369fa3b2f494da /src | |
| parent | 28b2f4b090f971c79bc1e2f9afa2b1424c0bd642 (diff) | |
customize.qdoc: Use standalone snippets
So that we don't refer to internal types, as these make copying and
pasting snippets difficult.
Change-Id: I6f3b943d2eed48beb7a64690c707924e2c5a8078
Reviewed-by: J-P Nurmi <jpnurmi@qt.io>
Diffstat (limited to 'src')
66 files changed, 1591 insertions, 581 deletions
diff --git a/src/imports/controls/doc/images/qtquickcontrols2-busyindicator-custom.png b/src/imports/controls/doc/images/qtquickcontrols2-busyindicator-custom.png Binary files differnew file mode 100644 index 00000000..8bae4909 --- /dev/null +++ b/src/imports/controls/doc/images/qtquickcontrols2-busyindicator-custom.png diff --git a/src/imports/controls/doc/images/qtquickcontrols2-button-custom.png b/src/imports/controls/doc/images/qtquickcontrols2-button-custom.png Binary files differnew file mode 100644 index 00000000..e418da04 --- /dev/null +++ b/src/imports/controls/doc/images/qtquickcontrols2-button-custom.png diff --git a/src/imports/controls/doc/images/qtquickcontrols2-checkbox-custom.png b/src/imports/controls/doc/images/qtquickcontrols2-checkbox-custom.png Binary files differnew file mode 100644 index 00000000..03a3d0a5 --- /dev/null +++ b/src/imports/controls/doc/images/qtquickcontrols2-checkbox-custom.png diff --git a/src/imports/controls/doc/images/qtquickcontrols2-checkdelegate-custom.png b/src/imports/controls/doc/images/qtquickcontrols2-checkdelegate-custom.png Binary files differnew file mode 100644 index 00000000..2503c5c6 --- /dev/null +++ b/src/imports/controls/doc/images/qtquickcontrols2-checkdelegate-custom.png diff --git a/src/imports/controls/doc/images/qtquickcontrols2-combobox-custom.png b/src/imports/controls/doc/images/qtquickcontrols2-combobox-custom.png Binary files differnew file mode 100644 index 00000000..badf1b52 --- /dev/null +++ b/src/imports/controls/doc/images/qtquickcontrols2-combobox-custom.png diff --git a/src/imports/controls/doc/images/qtquickcontrols2-dial-custom.png b/src/imports/controls/doc/images/qtquickcontrols2-dial-custom.png Binary files differnew file mode 100644 index 00000000..98643b9f --- /dev/null +++ b/src/imports/controls/doc/images/qtquickcontrols2-dial-custom.png diff --git a/src/imports/controls/doc/images/qtquickcontrols2-frame-custom.png b/src/imports/controls/doc/images/qtquickcontrols2-frame-custom.png Binary files differnew file mode 100644 index 00000000..94f491fc --- /dev/null +++ b/src/imports/controls/doc/images/qtquickcontrols2-frame-custom.png diff --git a/src/imports/controls/doc/images/qtquickcontrols2-groupbox-custom.png b/src/imports/controls/doc/images/qtquickcontrols2-groupbox-custom.png Binary files differnew file mode 100644 index 00000000..7759cf38 --- /dev/null +++ b/src/imports/controls/doc/images/qtquickcontrols2-groupbox-custom.png diff --git a/src/imports/controls/doc/images/qtquickcontrols2-itemdelegate-custom.png b/src/imports/controls/doc/images/qtquickcontrols2-itemdelegate-custom.png Binary files differnew file mode 100644 index 00000000..9e3fa0c1 --- /dev/null +++ b/src/imports/controls/doc/images/qtquickcontrols2-itemdelegate-custom.png diff --git a/src/imports/controls/doc/images/qtquickcontrols2-label-custom.png b/src/imports/controls/doc/images/qtquickcontrols2-label-custom.png Binary files differnew file mode 100644 index 00000000..563c74b1 --- /dev/null +++ b/src/imports/controls/doc/images/qtquickcontrols2-label-custom.png diff --git a/src/imports/controls/doc/images/qtquickcontrols2-menu-custom.png b/src/imports/controls/doc/images/qtquickcontrols2-menu-custom.png Binary files differnew file mode 100644 index 00000000..8b8c6cc6 --- /dev/null +++ b/src/imports/controls/doc/images/qtquickcontrols2-menu-custom.png diff --git a/src/imports/controls/doc/images/qtquickcontrols2-pageindicator-custom.png b/src/imports/controls/doc/images/qtquickcontrols2-pageindicator-custom.png Binary files differnew file mode 100644 index 00000000..c1f98288 --- /dev/null +++ b/src/imports/controls/doc/images/qtquickcontrols2-pageindicator-custom.png diff --git a/src/imports/controls/doc/images/qtquickcontrols2-pane-custom.png b/src/imports/controls/doc/images/qtquickcontrols2-pane-custom.png Binary files differnew file mode 100644 index 00000000..6b429379 --- /dev/null +++ b/src/imports/controls/doc/images/qtquickcontrols2-pane-custom.png diff --git a/src/imports/controls/doc/images/qtquickcontrols2-progressbar-custom.png b/src/imports/controls/doc/images/qtquickcontrols2-progressbar-custom.png Binary files differnew file mode 100644 index 00000000..bb461b65 --- /dev/null +++ b/src/imports/controls/doc/images/qtquickcontrols2-progressbar-custom.png diff --git a/src/imports/controls/doc/images/qtquickcontrols2-radiobutton-custom.png b/src/imports/controls/doc/images/qtquickcontrols2-radiobutton-custom.png Binary files differnew file mode 100644 index 00000000..85262f9c --- /dev/null +++ b/src/imports/controls/doc/images/qtquickcontrols2-radiobutton-custom.png diff --git a/src/imports/controls/doc/images/qtquickcontrols2-radiodelegate-custom.png b/src/imports/controls/doc/images/qtquickcontrols2-radiodelegate-custom.png Binary files differnew file mode 100644 index 00000000..be6a9d08 --- /dev/null +++ b/src/imports/controls/doc/images/qtquickcontrols2-radiodelegate-custom.png diff --git a/src/imports/controls/doc/images/qtquickcontrols2-rangeslider-custom.png b/src/imports/controls/doc/images/qtquickcontrols2-rangeslider-custom.png Binary files differnew file mode 100644 index 00000000..d481b4e9 --- /dev/null +++ b/src/imports/controls/doc/images/qtquickcontrols2-rangeslider-custom.png diff --git a/src/imports/controls/doc/images/qtquickcontrols2-scrollbar-custom.png b/src/imports/controls/doc/images/qtquickcontrols2-scrollbar-custom.png Binary files differnew file mode 100644 index 00000000..2e582a70 --- /dev/null +++ b/src/imports/controls/doc/images/qtquickcontrols2-scrollbar-custom.png diff --git a/src/imports/controls/doc/images/qtquickcontrols2-scrollindicator-custom.png b/src/imports/controls/doc/images/qtquickcontrols2-scrollindicator-custom.png Binary files differnew file mode 100644 index 00000000..75963dc1 --- /dev/null +++ b/src/imports/controls/doc/images/qtquickcontrols2-scrollindicator-custom.png diff --git a/src/imports/controls/doc/images/qtquickcontrols2-slider-custom.png b/src/imports/controls/doc/images/qtquickcontrols2-slider-custom.png Binary files differnew file mode 100644 index 00000000..2323b79f --- /dev/null +++ b/src/imports/controls/doc/images/qtquickcontrols2-slider-custom.png diff --git a/src/imports/controls/doc/images/qtquickcontrols2-spinbox-custom.png b/src/imports/controls/doc/images/qtquickcontrols2-spinbox-custom.png Binary files differnew file mode 100644 index 00000000..64acb6f9 --- /dev/null +++ b/src/imports/controls/doc/images/qtquickcontrols2-spinbox-custom.png diff --git a/src/imports/controls/doc/images/qtquickcontrols2-stackview-custom.png b/src/imports/controls/doc/images/qtquickcontrols2-stackview-custom.png Binary files differnew file mode 100644 index 00000000..8890f14d --- /dev/null +++ b/src/imports/controls/doc/images/qtquickcontrols2-stackview-custom.png diff --git a/src/imports/controls/doc/images/qtquickcontrols2-swipedelegate-custom.png b/src/imports/controls/doc/images/qtquickcontrols2-swipedelegate-custom.png Binary files differnew file mode 100644 index 00000000..25ae9e77 --- /dev/null +++ b/src/imports/controls/doc/images/qtquickcontrols2-swipedelegate-custom.png diff --git a/src/imports/controls/doc/images/qtquickcontrols2-switch-custom.png b/src/imports/controls/doc/images/qtquickcontrols2-switch-custom.png Binary files differnew file mode 100644 index 00000000..5293a8b9 --- /dev/null +++ b/src/imports/controls/doc/images/qtquickcontrols2-switch-custom.png diff --git a/src/imports/controls/doc/images/qtquickcontrols2-switchdelegate-custom.png b/src/imports/controls/doc/images/qtquickcontrols2-switchdelegate-custom.png Binary files differnew file mode 100644 index 00000000..d7f5430b --- /dev/null +++ b/src/imports/controls/doc/images/qtquickcontrols2-switchdelegate-custom.png diff --git a/src/imports/controls/doc/images/qtquickcontrols2-tabbar-custom.png b/src/imports/controls/doc/images/qtquickcontrols2-tabbar-custom.png Binary files differnew file mode 100644 index 00000000..3203e619 --- /dev/null +++ b/src/imports/controls/doc/images/qtquickcontrols2-tabbar-custom.png diff --git a/src/imports/controls/doc/images/qtquickcontrols2-textarea-custom.png b/src/imports/controls/doc/images/qtquickcontrols2-textarea-custom.png Binary files differnew file mode 100644 index 00000000..7ed0c2cf --- /dev/null +++ b/src/imports/controls/doc/images/qtquickcontrols2-textarea-custom.png diff --git a/src/imports/controls/doc/images/qtquickcontrols2-textfield-custom.png b/src/imports/controls/doc/images/qtquickcontrols2-textfield-custom.png Binary files differnew file mode 100644 index 00000000..acca494f --- /dev/null +++ b/src/imports/controls/doc/images/qtquickcontrols2-textfield-custom.png diff --git a/src/imports/controls/doc/images/qtquickcontrols2-toolbar-custom.png b/src/imports/controls/doc/images/qtquickcontrols2-toolbar-custom.png Binary files differnew file mode 100644 index 00000000..9e07ce57 --- /dev/null +++ b/src/imports/controls/doc/images/qtquickcontrols2-toolbar-custom.png diff --git a/src/imports/controls/doc/images/qtquickcontrols2-toolbutton-custom.png b/src/imports/controls/doc/images/qtquickcontrols2-toolbutton-custom.png Binary files differnew file mode 100644 index 00000000..f590af7d --- /dev/null +++ b/src/imports/controls/doc/images/qtquickcontrols2-toolbutton-custom.png diff --git a/src/imports/controls/doc/images/qtquickcontrols2-tumbler-custom.png b/src/imports/controls/doc/images/qtquickcontrols2-tumbler-custom.png Binary files differnew file mode 100644 index 00000000..39a2c509 --- /dev/null +++ b/src/imports/controls/doc/images/qtquickcontrols2-tumbler-custom.png diff --git a/src/imports/controls/doc/snippets/qtquickcontrols2-busyindicator-custom.qml b/src/imports/controls/doc/snippets/qtquickcontrols2-busyindicator-custom.qml new file mode 100644 index 00000000..82ed9cdc --- /dev/null +++ b/src/imports/controls/doc/snippets/qtquickcontrols2-busyindicator-custom.qml @@ -0,0 +1,88 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see http://www.qt.io/terms-conditions. For further +** information use the contact form at http://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: http://www.gnu.org/copyleft/fdl.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +//! [file] +import QtQuick 2.6 +import QtQuick.Controls 2.0 + +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 { + x: item.width / 2 - width / 2 + y: item.height / 2 - height / 2 + implicitWidth: 10 + implicitHeight: 10 + radius: 5 + color: "#21be2b" + transform: [ + Translate { + y: -Math.min(item.width, item.height) * 0.5 + 5 + }, + Rotation { + angle: index / repeater.count * 360 + origin.x: 5 + origin.y: 5 + } + ] + } + } + } + } +} +//! [file] diff --git a/src/imports/controls/doc/snippets/qtquickcontrols2-button-custom.qml b/src/imports/controls/doc/snippets/qtquickcontrols2-button-custom.qml new file mode 100644 index 00000000..eac6b831 --- /dev/null +++ b/src/imports/controls/doc/snippets/qtquickcontrols2-button-custom.qml @@ -0,0 +1,55 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see http://www.qt.io/terms-conditions. For further +** information use the contact form at http://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: http://www.gnu.org/copyleft/fdl.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +//! [file] +import QtQuick 2.6 +import QtQuick.Controls 2.0 + +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/imports/controls/doc/snippets/qtquickcontrols2-checkbox-custom.qml b/src/imports/controls/doc/snippets/qtquickcontrols2-checkbox-custom.qml new file mode 100644 index 00000000..0465ec80 --- /dev/null +++ b/src/imports/controls/doc/snippets/qtquickcontrols2-checkbox-custom.qml @@ -0,0 +1,66 @@ +/**************************************************************************** +** +** Copyright (C) 2015 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see http://www.qt.io/terms-conditions. For further +** information use the contact form at http://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: http://www.gnu.org/copyleft/fdl.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +//! [file] +import QtQuick 2.6 +import QtQuick.Controls 2.0 + +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" + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + leftPadding: control.indicator.width + control.spacing + } +} +//! [file] diff --git a/src/imports/controls/doc/snippets/qtquickcontrols2-checkdelegate-custom.qml b/src/imports/controls/doc/snippets/qtquickcontrols2-checkdelegate-custom.qml new file mode 100644 index 00000000..483f9838 --- /dev/null +++ b/src/imports/controls/doc/snippets/qtquickcontrols2-checkdelegate-custom.qml @@ -0,0 +1,75 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see http://www.qt.io/terms-conditions. For further +** information use the contact form at http://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: http://www.gnu.org/copyleft/fdl.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +//! [file] +import QtQuick 2.6 +import QtQuick.Controls 2.0 + +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 + horizontalAlignment: Text.AlignLeft + 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/imports/controls/doc/snippets/qtquickcontrols2-combobox-custom.qml b/src/imports/controls/doc/snippets/qtquickcontrols2-combobox-custom.qml new file mode 100644 index 00000000..d4b0b194 --- /dev/null +++ b/src/imports/controls/doc/snippets/qtquickcontrols2-combobox-custom.qml @@ -0,0 +1,86 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see http://www.qt.io/terms-conditions. For further +** information use the contact form at http://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: http://www.gnu.org/copyleft/fdl.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +//! [file] +import QtQuick 2.6 +import QtQuick.Controls 2.0 + +ComboBox { + id: control + model: ["First", "Second", "Third"] + + delegate: ItemDelegate { + width: control.width + text: modelData + font.weight: control.currentIndex === index ? Font.DemiBold : Font.Normal + highlighted: control.highlightedIndex == index + } + + indicator: Canvas { + x: control.width - width - control.rightPadding + y: control.topPadding + (control.availableHeight - height) / 2 + width: 12 + height: 8 + contextType: "2d" + + Connections { + target: control + onPressedChanged: indicator.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" + horizontalAlignment: Text.AlignLeft + 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 + } +} +//! [file] diff --git a/src/imports/controls/doc/snippets/qtquickcontrols2-dial-custom.qml b/src/imports/controls/doc/snippets/qtquickcontrols2-dial-custom.qml new file mode 100644 index 00000000..658acc4b --- /dev/null +++ b/src/imports/controls/doc/snippets/qtquickcontrols2-dial-custom.qml @@ -0,0 +1,67 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see http://www.qt.io/terms-conditions. For further +** information use the contact form at http://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: http://www.gnu.org/copyleft/fdl.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +//! [file] +import QtQuick 2.6 +import QtQuick.Controls 2.0 + +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: background.x + background.width / 2 - handle.width / 2 + y: background.y + background.height / 2 - handle.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(background.width, background.height) * 0.4 + handle.height / 2 + }, + Rotation { + angle: control.angle + origin.x: handle.width / 2 + origin.y: handle.height / 2 + } + ] + } +} +//! [file] diff --git a/src/imports/controls/doc/snippets/qtquickcontrols2-checkbox.qml b/src/imports/controls/doc/snippets/qtquickcontrols2-frame-custom.qml index 31dc23a9..d11c431e 100644 --- a/src/imports/controls/doc/snippets/qtquickcontrols2-checkbox.qml +++ b/src/imports/controls/doc/snippets/qtquickcontrols2-frame-custom.qml @@ -1,6 +1,6 @@ /**************************************************************************** ** -** Copyright (C) 2015 The Qt Company Ltd. +** Copyright (C) 2016 The Qt Company Ltd. ** Contact: http://www.qt.io/licensing/ ** ** This file is part of the documentation of the Qt Toolkit. @@ -25,9 +25,19 @@ ** ****************************************************************************/ -import QtQuick 2.0 +//! [file] +import QtQuick 2.6 import QtQuick.Controls 2.0 -CheckBox { - text: "CheckBox" +Frame { + background: Rectangle { + color: "transparent" + border.color: "#21be2b" + radius: 2 + } + + Label { + text: qsTr("Content goes here!") + } } +//! [file] diff --git a/src/imports/controls/doc/snippets/qtquickcontrols2-scrollbar.qml b/src/imports/controls/doc/snippets/qtquickcontrols2-groupbox-custom.qml index dc2c03d1..cb9ed049 100644 --- a/src/imports/controls/doc/snippets/qtquickcontrols2-scrollbar.qml +++ b/src/imports/controls/doc/snippets/qtquickcontrols2-groupbox-custom.qml @@ -1,6 +1,6 @@ /**************************************************************************** ** -** Copyright (C) 2015 The Qt Company Ltd. +** Copyright (C) 2016 The Qt Company Ltd. ** Contact: http://www.qt.io/licensing/ ** ** This file is part of the documentation of the Qt Toolkit. @@ -25,28 +25,25 @@ ** ****************************************************************************/ -import QtQuick 2.0 +//! [file] +import QtQuick 2.6 import QtQuick.Controls 2.0 -Frame { - width: 100 - height: 100 +GroupBox { + id: control + title: qsTr("GroupBox") - ScrollBar { - size: 0.3 - position: 0.2 - active: true - orientation: Qt.Vertical - height: parent.height - anchors.right: parent.right + background: Rectangle { + y: control.topPadding - control.padding + width: parent.width + height: parent.height - control.topPadding + control.padding + color: "transparent" + border.color: "#21be2b" + radius: 2 } - ScrollBar { - size: 0.6 - position: 0.3 - active: true - orientation: Qt.Horizontal - width: parent.width - anchors.bottom: parent.bottom + Label { + text: qsTr("Content goes here!") } } +//! [file] diff --git a/src/imports/controls/doc/snippets/qtquickcontrols2-itemdelegate-custom.qml b/src/imports/controls/doc/snippets/qtquickcontrols2-itemdelegate-custom.qml new file mode 100644 index 00000000..002aae69 --- /dev/null +++ b/src/imports/controls/doc/snippets/qtquickcontrols2-itemdelegate-custom.qml @@ -0,0 +1,61 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see http://www.qt.io/terms-conditions. For further +** information use the contact form at http://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: http://www.gnu.org/copyleft/fdl.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +//! [file] +import QtQuick 2.6 +import QtQuick.Controls 2.0 + +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 + visible: control.text + horizontalAlignment: Text.AlignLeft + 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/imports/controls/doc/snippets/qtquickcontrols2-busyindicator.qml b/src/imports/controls/doc/snippets/qtquickcontrols2-label-custom.qml index f895718c..98dbdc5e 100644 --- a/src/imports/controls/doc/snippets/qtquickcontrols2-busyindicator.qml +++ b/src/imports/controls/doc/snippets/qtquickcontrols2-label-custom.qml @@ -1,6 +1,6 @@ /**************************************************************************** ** -** Copyright (C) 2015 The Qt Company Ltd. +** Copyright (C) 2016 The Qt Company Ltd. ** Contact: http://www.qt.io/licensing/ ** ** This file is part of the documentation of the Qt Toolkit. @@ -25,8 +25,12 @@ ** ****************************************************************************/ -import QtQuick 2.0 +//! [file] +import QtQuick 2.6 import QtQuick.Controls 2.0 -BusyIndicator { +Label { + text: qsTr("Label") + color: "#21be2b" } +//! [file] diff --git a/src/imports/controls/doc/snippets/qtquickcontrols2-menu-custom.qml b/src/imports/controls/doc/snippets/qtquickcontrols2-menu-custom.qml new file mode 100644 index 00000000..a6971232 --- /dev/null +++ b/src/imports/controls/doc/snippets/qtquickcontrols2-menu-custom.qml @@ -0,0 +1,60 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see http://www.qt.io/terms-conditions. For further +** information use the contact form at http://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: http://www.gnu.org/copyleft/fdl.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +//! [file] +import QtQuick 2.6 +import QtQuick.Controls 2.0 + +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 + background: Rectangle { + implicitWidth: 200 + implicitHeight: 200 + color: "#ffffff" + border.color: "#353637" + } + + MenuItem { + text: qsTr("New...") + } + MenuItem { + text: qsTr("Open...") + } + MenuItem { + text: qsTr("Save") + } +} +} +//! [file] diff --git a/src/imports/controls/doc/snippets/qtquickcontrols2-menu.qml b/src/imports/controls/doc/snippets/qtquickcontrols2-pageindicator-custom.qml index 363d2d3e..7942cd5b 100644 --- a/src/imports/controls/doc/snippets/qtquickcontrols2-menu.qml +++ b/src/imports/controls/doc/snippets/qtquickcontrols2-pageindicator-custom.qml @@ -1,6 +1,6 @@ /**************************************************************************** ** -** Copyright (C) 2015 The Qt Company Ltd. +** Copyright (C) 2016 The Qt Company Ltd. ** Contact: http://www.qt.io/licensing/ ** ** This file is part of the documentation of the Qt Toolkit. @@ -25,27 +25,28 @@ ** ****************************************************************************/ -import QtQuick 2.0 +//! [file] +import QtQuick 2.6 import QtQuick.Controls 2.0 -Item { - id: window - width: menu.contentItem.width - height: menu.contentItem.height - visible: true +PageIndicator { + count: 5 + currentIndex: 2 - Menu { - id: menu - contentItem.parent: window + delegate: Rectangle { + implicitWidth: 8 + implicitHeight: 8 - MenuItem { - text: "New..." - } - MenuItem { - text: "Open..." - } - MenuItem { - text: "Save" + radius: width / 2 + color: "#21be2b" + + opacity: index === currentIndex ? 0.95 : pressed ? 0.7 : 0.45 + + Behavior on opacity { + OpacityAnimator { + duration: 100 + } } } } +//! [file] diff --git a/src/imports/controls/doc/snippets/qtquickcontrols2-button.qml b/src/imports/controls/doc/snippets/qtquickcontrols2-pane-custom.qml index 9398fc88..80519939 100644 --- a/src/imports/controls/doc/snippets/qtquickcontrols2-button.qml +++ b/src/imports/controls/doc/snippets/qtquickcontrols2-pane-custom.qml @@ -1,6 +1,6 @@ /**************************************************************************** ** -** Copyright (C) 2015 The Qt Company Ltd. +** Copyright (C) 2016 The Qt Company Ltd. ** Contact: http://www.qt.io/licensing/ ** ** This file is part of the documentation of the Qt Toolkit. @@ -25,9 +25,17 @@ ** ****************************************************************************/ -import QtQuick 2.0 +//! [file] +import QtQuick 2.6 import QtQuick.Controls 2.0 -Button { - text: "Button" +Pane { + background: Rectangle { + color: "#eeeeee" + } + + Label { + text: qsTr("Content goes here!") + } } +//! [file] diff --git a/src/imports/controls/doc/snippets/qtquickcontrols2-slider.qml b/src/imports/controls/doc/snippets/qtquickcontrols2-progressbar-custom.qml index 8363e862..00c9ae67 100644 --- a/src/imports/controls/doc/snippets/qtquickcontrols2-slider.qml +++ b/src/imports/controls/doc/snippets/qtquickcontrols2-progressbar-custom.qml @@ -25,9 +25,33 @@ ** ****************************************************************************/ -import QtQuick 2.0 +//! [file] +import QtQuick 2.6 import QtQuick.Controls 2.0 -Slider { +ProgressBar { + id: control value: 0.5 + + background: Rectangle { + implicitWidth: 200 + implicitHeight: 4 + x: control.leftPadding + y: parent.height / 2 - height / 2 + color: "#e6e6e6" + radius: 2 + } + + contentItem: Item { + implicitWidth: background.implicitWidth + implicitHeight: background.implicitHeight + + Rectangle { + width: control.visualPosition * background.width + height: parent.height + radius: 2 + color: "#17a81a" + } + } } +//! [file] diff --git a/src/imports/controls/doc/snippets/qtquickcontrols2-radiobutton.qml b/src/imports/controls/doc/snippets/qtquickcontrols2-radiobutton-custom.qml index 2b41fb65..dba262be 100644 --- a/src/imports/controls/doc/snippets/qtquickcontrols2-radiobutton.qml +++ b/src/imports/controls/doc/snippets/qtquickcontrols2-radiobutton-custom.qml @@ -25,9 +25,42 @@ ** ****************************************************************************/ -import QtQuick 2.0 +//! [file] +import QtQuick 2.6 import QtQuick.Controls 2.0 RadioButton { - text: "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" + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + leftPadding: control.indicator.width + control.spacing + } } +//! [file] diff --git a/src/imports/controls/doc/snippets/qtquickcontrols2-radiodelegate-custom.qml b/src/imports/controls/doc/snippets/qtquickcontrols2-radiodelegate-custom.qml new file mode 100644 index 00000000..6efb7803 --- /dev/null +++ b/src/imports/controls/doc/snippets/qtquickcontrols2-radiodelegate-custom.qml @@ -0,0 +1,75 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see http://www.qt.io/terms-conditions. For further +** information use the contact form at http://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: http://www.gnu.org/copyleft/fdl.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +//! [file] +import QtQuick 2.6 +import QtQuick.Controls 2.0 + +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 + horizontalAlignment: Text.AlignLeft + 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/imports/controls/doc/snippets/qtquickcontrols2-rangeslider.qml b/src/imports/controls/doc/snippets/qtquickcontrols2-rangeslider-custom.qml index a41fbfad..7e488d14 100644 --- a/src/imports/controls/doc/snippets/qtquickcontrols2-rangeslider.qml +++ b/src/imports/controls/doc/snippets/qtquickcontrols2-rangeslider-custom.qml @@ -25,10 +25,52 @@ ** ****************************************************************************/ -import QtQuick 2.0 +//! [file] +import QtQuick 2.6 import QtQuick.Controls 2.0 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 + first.visualPosition * (control.availableWidth - width) + y: control.topPadding + control.availableHeight / 2 - height / 2 + implicitWidth: 26 + implicitHeight: 26 + radius: 13 + color: first.pressed ? "#f0f0f0" : "#f6f6f6" + border.color: "#bdbebf" + } + + second.handle: Rectangle { + x: control.leftPadding + second.visualPosition * (control.availableWidth - width) + y: control.topPadding + control.availableHeight / 2 - height / 2 + implicitWidth: 26 + implicitHeight: 26 + radius: 13 + color: second.pressed ? "#f0f0f0" : "#f6f6f6" + border.color: "#bdbebf" + } } +//! [file] diff --git a/src/imports/controls/doc/snippets/qtquickcontrols2-scrollbar-custom.qml b/src/imports/controls/doc/snippets/qtquickcontrols2-scrollbar-custom.qml new file mode 100644 index 00000000..0bf13b3c --- /dev/null +++ b/src/imports/controls/doc/snippets/qtquickcontrols2-scrollbar-custom.qml @@ -0,0 +1,46 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see http://www.qt.io/terms-conditions. For further +** information use the contact form at http://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: http://www.gnu.org/copyleft/fdl.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +//! [file] +import QtQuick 2.6 +import QtQuick.Controls 2.0 + +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" + } +} +//! [file] diff --git a/src/imports/controls/doc/snippets/qtquickcontrols2-dial.qml b/src/imports/controls/doc/snippets/qtquickcontrols2-scrollindicator-custom.qml index 2db73616..5720f4f7 100644 --- a/src/imports/controls/doc/snippets/qtquickcontrols2-dial.qml +++ b/src/imports/controls/doc/snippets/qtquickcontrols2-scrollindicator-custom.qml @@ -1,6 +1,6 @@ /**************************************************************************** ** -** Copyright (C) 2015 The Qt Company Ltd. +** Copyright (C) 2016 The Qt Company Ltd. ** Contact: http://www.qt.io/licensing/ ** ** This file is part of the documentation of the Qt Toolkit. @@ -25,8 +25,21 @@ ** ****************************************************************************/ -import QtQuick 2.0 +//! [file] +import QtQuick 2.6 import QtQuick.Controls 2.0 -Dial { +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/imports/controls/doc/snippets/qtquickcontrols2-slider-custom.qml b/src/imports/controls/doc/snippets/qtquickcontrols2-slider-custom.qml new file mode 100644 index 00000000..ebc11f46 --- /dev/null +++ b/src/imports/controls/doc/snippets/qtquickcontrols2-slider-custom.qml @@ -0,0 +1,64 @@ +/**************************************************************************** +** +** Copyright (C) 2015 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see http://www.qt.io/terms-conditions. For further +** information use the contact form at http://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: http://www.gnu.org/copyleft/fdl.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +//! [file] +import QtQuick 2.6 +import QtQuick.Controls 2.0 + +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/imports/controls/doc/snippets/qtquickcontrols2-spinbox-custom.qml b/src/imports/controls/doc/snippets/qtquickcontrols2-spinbox-custom.qml new file mode 100644 index 00000000..99549b8c --- /dev/null +++ b/src/imports/controls/doc/snippets/qtquickcontrols2-spinbox-custom.qml @@ -0,0 +1,96 @@ +/**************************************************************************** +** +** Copyright (C) 2015 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see http://www.qt.io/terms-conditions. For further +** information use the contact form at http://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: http://www.gnu.org/copyleft/fdl.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +//! [file] +import QtQuick 2.6 +import QtQuick.Controls 2.0 + +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: up.pressed ? "#e4e4e4" : "#f6f6f6" + border.color: control.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: down.pressed ? "#e4e4e4" : "#f6f6f6" + border.color: control.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/imports/controls/doc/snippets/qtquickcontrols2-scrollindicator.qml b/src/imports/controls/doc/snippets/qtquickcontrols2-stackview-custom.qml index 47fe97f8..3e40ea2d 100644 --- a/src/imports/controls/doc/snippets/qtquickcontrols2-scrollindicator.qml +++ b/src/imports/controls/doc/snippets/qtquickcontrols2-stackview-custom.qml @@ -1,6 +1,6 @@ /**************************************************************************** ** -** Copyright (C) 2015 The Qt Company Ltd. +** Copyright (C) 2016 The Qt Company Ltd. ** Contact: http://www.qt.io/licensing/ ** ** This file is part of the documentation of the Qt Toolkit. @@ -25,28 +25,29 @@ ** ****************************************************************************/ -import QtQuick 2.0 +//! [file] +import QtQuick 2.6 import QtQuick.Controls 2.0 -Frame { - width: 100 - height: 100 +StackView { + id: control - ScrollIndicator { - size: 0.3 - position: 0.2 - active: true - orientation: Qt.Vertical - height: parent.height - anchors.right: parent.right + popEnter: Transition { + XAnimator { + from: (control.mirrored ? -1 : 1) * -control.width + to: 0 + duration: 400 + easing.type: Easing.OutCubic + } } - ScrollIndicator { - size: 0.6 - position: 0.3 - active: true - orientation: Qt.Horizontal - width: parent.width - anchors.bottom: parent.bottom + popExit: Transition { + XAnimator { + from: 0 + to: (control.mirrored ? -1 : 1) * control.width + duration: 400 + easing.type: Easing.OutCubic + } } } +//! [file] diff --git a/src/imports/controls/doc/snippets/qtquickcontrols2-swipedelegate-custom.qml b/src/imports/controls/doc/snippets/qtquickcontrols2-swipedelegate-custom.qml new file mode 100644 index 00000000..bd58de8b --- /dev/null +++ b/src/imports/controls/doc/snippets/qtquickcontrols2-swipedelegate-custom.qml @@ -0,0 +1,74 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see http://www.qt.io/terms-conditions. For further +** information use the contact form at http://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: http://www.gnu.org/copyleft/fdl.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +//! [file] +import QtQuick 2.6 +import QtQuick.Controls 2.0 + +SwipeDelegate { + id: control + text: qsTr("SwipeDelegate") + + Component { + id: component + + Rectangle { + color: control.exposure.active && control.down ? "#333" : "#444" + width: parent.width + height: parent.height + clip: true + + Label { + text: qsTr("Press me!") + color: "#21be2b" + anchors.centerIn: parent + } + } + } + + exposure.left: component + exposure.right: component + + contentItem: Text { + text: control.text + font: control.font + color: control.enabled ? (control.down ? "#17a81a" : "#21be2b") : "#bdbebf" + elide: Text.ElideRight + visible: control.text + horizontalAlignment: Text.AlignLeft + verticalAlignment: Text.AlignVCenter + + Behavior on x { + enabled: !control.down + NumberAnimation { + easing.type: Easing.InOutCubic + duration: 400 + } + } + } +} +//! [file] diff --git a/src/imports/controls/doc/snippets/qtquickcontrols2-swipedelegate.qml b/src/imports/controls/doc/snippets/qtquickcontrols2-swipedelegate.qml deleted file mode 100644 index 775aebfe..00000000 --- a/src/imports/controls/doc/snippets/qtquickcontrols2-swipedelegate.qml +++ /dev/null @@ -1,89 +0,0 @@ -/**************************************************************************** -** -** Copyright (C) 2016 The Qt Company Ltd. -** Contact: http://www.qt.io/licensing/ -** -** This file is part of the documentation of the Qt Toolkit. -** -** $QT_BEGIN_LICENSE:FDL$ -** Commercial License Usage -** Licensees holding valid commercial Qt licenses may use this file in -** accordance with the commercial license agreement provided with the -** Software or, alternatively, in accordance with the terms contained in -** a written agreement between you and The Qt Company. For licensing terms -** and conditions see http://www.qt.io/terms-conditions. For further -** information use the contact form at http://www.qt.io/contact-us. -** -** GNU Free Documentation License Usage -** Alternatively, this file may be used under the terms of the GNU Free -** Documentation License version 1.3 as published by the Free Software -** Foundation and appearing in the file included in the packaging of -** this file. Please review the following information to ensure -** the GNU Free Documentation License version 1.3 requirements -** will be met: http://www.gnu.org/copyleft/fdl.html. -** $QT_END_LICENSE$ -** -****************************************************************************/ - -import QtQuick 2.6 -import QtQuick.Controls 2.0 - -ListView { - id: listView - width: 100 - height: 120 - clip: true - - model: ListModel { - ListElement { name: "Apple" } - ListElement { name: "Orange" } - ListElement { name: "Pear" } - } - - delegate: SwipeDelegate { - id: rootDelegate - width: listView.width - text: modelData - - ListView.onRemove: SequentialAnimation { - PropertyAction { - target: rootDelegate - property: "ListView.delayRemove" - value: true - } - NumberAnimation { - target: rootDelegate - property: "height" - to: 0 - easing.type: Easing.InOutQuad - } - PropertyAction { - target: rootDelegate - property: "ListView.delayRemove" - value: false - } - } - - onClicked: if (exposure.active) ListView.view.model.remove(index) - - Component { - id: removeComponent - - Rectangle { - color: rootDelegate.exposed && rootDelegate.pressed ? "#333" : "#444" - width: parent.width - height: parent.height - clip: true - - Label { - text: "Remove" - color: "white" - anchors.centerIn: parent - } - } - } - - exposure.left: removeComponent - exposure.right: removeComponent - } -} diff --git a/src/imports/controls/doc/snippets/qtquickcontrols2-toolbutton.qml b/src/imports/controls/doc/snippets/qtquickcontrols2-swipeview-custom.qml index 625e214d..04b12512 100644 --- a/src/imports/controls/doc/snippets/qtquickcontrols2-toolbutton.qml +++ b/src/imports/controls/doc/snippets/qtquickcontrols2-swipeview-custom.qml @@ -25,11 +25,15 @@ ** ****************************************************************************/ -import QtQuick 2.0 +//! [file] +import QtQuick 2.6 import QtQuick.Controls 2.0 -ToolBar { - ToolButton { - text: "ToolButton" +SwipeView { + id: control + + background: Rectangle { + color: "#eeeeee" } } +//! [file] diff --git a/src/imports/controls/doc/snippets/qtquickcontrols2-switch.qml b/src/imports/controls/doc/snippets/qtquickcontrols2-switch-custom.qml index 56ef3985..698c1a05 100644 --- a/src/imports/controls/doc/snippets/qtquickcontrols2-switch.qml +++ b/src/imports/controls/doc/snippets/qtquickcontrols2-switch-custom.qml @@ -25,9 +25,41 @@ ** ****************************************************************************/ -import QtQuick 2.0 +//! [file] +import QtQuick 2.6 import QtQuick.Controls 2.0 Switch { - text: "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" + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + leftPadding: control.indicator.width + control.spacing + } } +//! [file] diff --git a/src/imports/controls/doc/snippets/qtquickcontrols2-switchdelegate-custom.qml b/src/imports/controls/doc/snippets/qtquickcontrols2-switchdelegate-custom.qml new file mode 100644 index 00000000..8d0daa0a --- /dev/null +++ b/src/imports/controls/doc/snippets/qtquickcontrols2-switchdelegate-custom.qml @@ -0,0 +1,74 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see http://www.qt.io/terms-conditions. For further +** information use the contact form at http://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: http://www.gnu.org/copyleft/fdl.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +//! [file] +import QtQuick 2.6 +import QtQuick.Controls 2.0 + +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 + horizontalAlignment: Text.AlignLeft + 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/imports/controls/doc/snippets/qtquickcontrols2-tabbar-custom.qml b/src/imports/controls/doc/snippets/qtquickcontrols2-tabbar-custom.qml new file mode 100644 index 00000000..1873fba9 --- /dev/null +++ b/src/imports/controls/doc/snippets/qtquickcontrols2-tabbar-custom.qml @@ -0,0 +1,49 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see http://www.qt.io/terms-conditions. For further +** information use the contact form at http://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: http://www.gnu.org/copyleft/fdl.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +//! [file] +import QtQuick 2.6 +import QtQuick.Controls 2.0 + +TabBar { + id: control + + background: Rectangle { + color: "#eeeeee" + } + + TabButton { + text: qsTr("Home") + } + TabButton { + text: qsTr("Discover") + } + TabButton { + text: qsTr("Activity") + } +} +//! [file] diff --git a/src/imports/controls/doc/snippets/qtquickcontrols2-textarea.qml b/src/imports/controls/doc/snippets/qtquickcontrols2-textarea-custom.qml index 52077f90..f70c7135 100644 --- a/src/imports/controls/doc/snippets/qtquickcontrols2-textarea.qml +++ b/src/imports/controls/doc/snippets/qtquickcontrols2-textarea-custom.qml @@ -1,6 +1,6 @@ /**************************************************************************** ** -** Copyright (C) 2015 The Qt Company Ltd. +** Copyright (C) 2016 The Qt Company Ltd. ** Contact: http://www.qt.io/licensing/ ** ** This file is part of the documentation of the Qt Toolkit. @@ -25,9 +25,18 @@ ** ****************************************************************************/ -import QtQuick 2.0 +//! [file] +import QtQuick 2.6 import QtQuick.Controls 2.0 TextArea { + id: control placeholderText: qsTr("Enter description") + + background: Rectangle { + implicitWidth: 200 + implicitHeight: 40 + border.color: control.enabled ? "#21be2b" : "transparent" + } } +//! [file] diff --git a/src/imports/controls/doc/snippets/qtquickcontrols2-textfield.qml b/src/imports/controls/doc/snippets/qtquickcontrols2-textfield-custom.qml index 53ffd6d6..0deb0e5c 100644 --- a/src/imports/controls/doc/snippets/qtquickcontrols2-textfield.qml +++ b/src/imports/controls/doc/snippets/qtquickcontrols2-textfield-custom.qml @@ -1,6 +1,6 @@ /**************************************************************************** ** -** Copyright (C) 2015 The Qt Company Ltd. +** Copyright (C) 2016 The Qt Company Ltd. ** Contact: http://www.qt.io/licensing/ ** ** This file is part of the documentation of the Qt Toolkit. @@ -25,9 +25,19 @@ ** ****************************************************************************/ -import QtQuick 2.0 +//! [file] +import QtQuick 2.6 import QtQuick.Controls 2.0 TextField { - text: "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/imports/controls/doc/snippets/qtquickcontrols2-toolbar-custom.qml b/src/imports/controls/doc/snippets/qtquickcontrols2-toolbar-custom.qml new file mode 100644 index 00000000..3e98808c --- /dev/null +++ b/src/imports/controls/doc/snippets/qtquickcontrols2-toolbar-custom.qml @@ -0,0 +1,59 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see http://www.qt.io/terms-conditions. For further +** information use the contact form at http://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: http://www.gnu.org/copyleft/fdl.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.6 +import QtQuick.Layouts 1.0 +import QtQuick.Controls 2.0 + +//! [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/imports/controls/doc/snippets/qtquickcontrols2-toolbutton-custom.qml b/src/imports/controls/doc/snippets/qtquickcontrols2-toolbutton-custom.qml new file mode 100644 index 00000000..10491cb5 --- /dev/null +++ b/src/imports/controls/doc/snippets/qtquickcontrols2-toolbutton-custom.qml @@ -0,0 +1,55 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see http://www.qt.io/terms-conditions. For further +** information use the contact form at http://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: http://www.gnu.org/copyleft/fdl.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +//! [file] +import QtQuick 2.6 +import QtQuick.Controls 2.0 + +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/imports/controls/doc/snippets/qtquickcontrols2-combobox.qml b/src/imports/controls/doc/snippets/qtquickcontrols2-tooltip-custom.qml index b42dd92c..94d9c12e 100644 --- a/src/imports/controls/doc/snippets/qtquickcontrols2-combobox.qml +++ b/src/imports/controls/doc/snippets/qtquickcontrols2-tooltip-custom.qml @@ -1,6 +1,6 @@ /**************************************************************************** ** -** Copyright (C) 2015 The Qt Company Ltd. +** Copyright (C) 2016 The Qt Company Ltd. ** Contact: http://www.qt.io/licensing/ ** ** This file is part of the documentation of the Qt Toolkit. @@ -25,19 +25,24 @@ ** ****************************************************************************/ -import QtQuick 2.0 +//! [file] +import QtQuick 2.6 import QtQuick.Controls 2.0 Item { - id: root - width: combo.width - height: combo.height + combo.popup.contentItem.height - //! [1] - ComboBox { - id: combo - model: ["First", "Second", "Third"] - popup.contentItem.parent: root - popup.contentItem.y: combo.height +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" } - //! [1] } +} +//! [file] diff --git a/src/imports/controls/doc/snippets/qtquickcontrols2-tumbler.qml b/src/imports/controls/doc/snippets/qtquickcontrols2-tumbler-custom.qml index 77ddd6b2..d2b4f960 100644 --- a/src/imports/controls/doc/snippets/qtquickcontrols2-tumbler.qml +++ b/src/imports/controls/doc/snippets/qtquickcontrols2-tumbler-custom.qml @@ -1,6 +1,6 @@ /**************************************************************************** ** -** Copyright (C) 2015 The Qt Company Ltd. +** Copyright (C) 2016 The Qt Company Ltd. ** Contact: http://www.qt.io/licensing/ ** ** This file is part of the documentation of the Qt Toolkit. @@ -25,9 +25,55 @@ ** ****************************************************************************/ -import QtQuick 2.0 +//! [file] +import QtQuick 2.6 import QtQuick.Controls 2.0 Tumbler { - model: 5 + id: control + model: 15 + visibleItemCount: 5 + + 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) / (visibleItemCount / 2) + } + + 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/imports/controls/doc/src/qtquickcontrols2-customize.qdoc b/src/imports/controls/doc/src/qtquickcontrols2-customize.qdoc index a201fbb4..19f1889e 100644 --- a/src/imports/controls/doc/src/qtquickcontrols2-customize.qdoc +++ b/src/imports/controls/doc/src/qtquickcontrols2-customize.qdoc @@ -330,26 +330,19 @@ \section1 Customization Reference - The following snippets present the default implementations of various - items. These can be used as a starting point to implement a custom look and - feel. + The following snippets present examples where the default style's controls + have been customized using the same approach as the + \l {Customizing a Control} section. The code can be used as a starting + point to implement a custom look and feel. \section2 Customizing BusyIndicator BusyIndicator consists of two visual items: \l {Control::background}{background} and \l {Control::contentItem}{contentItem}. - \section3 Background + \image qtquickcontrols2-busyindicator-custom.png - \image qtquickcontrols2-busyindicator-background.png - - BusyIndicator has no background item by default. - - \section3 Content item - - \image qtquickcontrols2-busyindicator-contentItem.png - - \snippet BusyIndicator.qml contentItem + \snippet qtquickcontrols2-busyindicator-custom.qml file \section2 Customizing Button @@ -357,17 +350,9 @@ Button consists of two visual items: \l {Control::background}{background} and \l {Control::contentItem}{content item}. - \section3 Background - - \image qtquickcontrols2-button-background.png - - \snippet Button.qml background + \image qtquickcontrols2-button-custom.png - \section3 Content item - - \image qtquickcontrols2-button-contentItem.png - - \snippet Button.qml contentItem + \snippet qtquickcontrols2-button-custom.qml file \section2 Customizing CheckBox @@ -375,47 +360,18 @@ CheckBox consists of three visual items: \l {Control::background}{background}, \l {Control::contentItem}{contentItem} and \l {AbstractButton::indicator}{indicator}. - \section3 Background - - \image qtquickcontrols2-checkbox-background.png - - CheckBox has no background item by default. - - \section3 Content item - - \image qtquickcontrols2-checkbox-contentItem.png - - \snippet CheckBox.qml contentItem - - \section3 Indicator - - \image qtquickcontrols2-checkbox-indicator.png - - \snippet CheckBox.qml indicator + \image qtquickcontrols2-checkbox-custom.png + \snippet qtquickcontrols2-checkbox-custom.qml file \section2 Customizing CheckDelegate CheckDelegate consists of three visual items: \l {Control::background}{background}, \l {Control::contentItem}{contentItem} and \l {AbstractButton::indicator}{indicator}. - \section3 Background - - \image qtquickcontrols2-checkdelegate-background.png - - \snippet CheckDelegate.qml background - - \section3 Content item - - \image qtquickcontrols2-checkdelegate-contentItem.png - - \snippet CheckDelegate.qml contentItem - - \section3 Indicator + \image qtquickcontrols2-checkdelegate-custom.png - \image qtquickcontrols2-checkdelegate-indicator.png - - \snippet CheckDelegate.qml indicator + \snippet qtquickcontrols2-checkdelegate-custom.qml file \section2 Customizing ComboBox @@ -424,29 +380,9 @@ \l {Control::contentItem}{content item}, \l {ComboBox::popup}{popup}, and \l {ComboBox::delegate}{delegate}. - \section3 Background - - \image qtquickcontrols2-combobox-background.png - - \snippet ComboBox.qml background - - \section3 Content item - - \image qtquickcontrols2-combobox-contentItem.png - - \snippet ComboBox.qml contentItem - - \section3 Popup - - \image qtquickcontrols2-combobox-popup.png - - \snippet ComboBox.qml popup - - \section3 Delegate - - \image qtquickcontrols2-combobox-delegate.png + \image qtquickcontrols2-combobox-custom.png - \snippet ComboBox.qml delegate + \snippet qtquickcontrols2-combobox-custom.qml file \section2 Customizing Dial @@ -454,17 +390,9 @@ Dial consists of two visual items: \l {Control::background}{background} and \l {Dial::handle}{handle}. - \section3 Background + \image qtquickcontrols2-dial-custom.png - \image qtquickcontrols2-dial-background.png - - \snippet Dial.qml background - - \section3 Indicator - - \image qtquickcontrols2-dial-handle.png - - \snippet Dial.qml handle + \snippet qtquickcontrols2-dial-custom.qml file \section2 Customizing Drawer @@ -472,20 +400,25 @@ Drawer can have a visual \l {Control::background}{background} item. - \section3 Background - - \snippet Drawer.qml background + \code + background: Rectangle { + Rectangle { + x: parent.width - 1 + width: 1 + height: parent.height + color: "#21be2b" + } + } + \endcode \section2 Customizing Frame Frame consists of one visual item: \l {Control::background}{background}. - \section3 Background - - \image qtquickcontrols2-frame-background.png + \image qtquickcontrols2-frame-custom.png - \snippet Frame.qml background + \snippet qtquickcontrols2-frame-custom.qml file \section2 Customizing GroupBox @@ -493,17 +426,9 @@ GroupBox consists of two visual items: \l {Control::background}{background} and \l {GroupBox::label}{label}. - \section3 Background + \image qtquickcontrols2-groupbox-custom.png - \image qtquickcontrols2-groupbox-background.png - - \snippet GroupBox.qml background - - \section3 Label - - \image qtquickcontrols2-groupbox-label.png - - \snippet GroupBox.qml label + \snippet qtquickcontrols2-groupbox-custom.qml file \section2 Customizing ItemDelegate @@ -511,43 +436,33 @@ ItemDelegate consists of three visual items: \l {Control::background}{background}, \l {Control::contentItem}{content item} and \l {AbstractButton::indicator}{indicator}. - \section3 Background - - \image qtquickcontrols2-itemdelegate-background.png - - \snippet ItemDelegate.qml background + \image qtquickcontrols2-itemdelegate-custom.png - \section3 Content item - - \image qtquickcontrols2-itemdelegate-contentItem.png - - \snippet ItemDelegate.qml contentItem - - \section3 Indicator - - ItemDelegate has no indicator item by default. + \snippet qtquickcontrols2-itemdelegate-custom.qml file \section2 Customizing Label Label can have a visual \l {Label::background}{background} item. - \section3 Background - - \image qtquickcontrols2-label-background.png + \image qtquickcontrols2-label-custom.png - Label has no background item by default. + \snippet qtquickcontrols2-label-custom.qml file \section2 Customizing Menu Menu consists of a \l {Popup::}{contentItem}. - \section3 Content item - - \image qtquickcontrols2-menu-contentItem.png - - \snippet Menu.qml contentItem + \quotefromfile qtquickcontrols2-menu-custom.qml + \skipto import QtQuick 2.6 + \printuntil import QtQuick.Controls 2.0 + \skipto Menu + \printto contentItem.parent: window + \skipline contentItem.parent: window + \printuntil text: qsTr("Save") + \printuntil } + \printuntil } \section2 Customizing MenuItem @@ -560,34 +475,18 @@ PageIndicator consists of a \l {Control::background}{background}, \l {Control::contentItem}{content item}, and \l {PageIndicator::delegate}{delegate}. - \section3 Background - - \image qtquickcontrols2-pageindicator-background.png - - PageIndicator has no background item by default. - - \section3 Content item - - \image qtquickcontrols2-pageindicator-contentItem.png + \image qtquickcontrols2-pageindicator-custom.png - \snippet PageIndicator.qml contentItem - - \section3 Delegate - - \image qtquickcontrols2-pageindicator-delegate.png - - \snippet PageIndicator.qml delegate + \snippet qtquickcontrols2-pageindicator-custom.qml file \section2 Customizing Pane Pane consists of a \l {Control::background}{background}. - \section3 Background + \image qtquickcontrols2-pane-custom.png - \image qtquickcontrols2-pane-background.png - - \snippet Pane.qml background + \snippet qtquickcontrols2-pane-custom.qml file \section2 Customizing ProgressBar @@ -595,17 +494,9 @@ ProgressBar consists of two visual items: \l {Control::background}{background} and \l {Control::contentItem}{content item}. - \section3 Background - - \image qtquickcontrols2-progressbar-background.png + \image qtquickcontrols2-progressbar-custom.png - \snippet ProgressBar.qml background - - \section3 Content item - - \image qtquickcontrols2-progressbar-contentItem.png - - \snippet ProgressBar.qml contentItem + \snippet qtquickcontrols2-progressbar-custom.qml file \section2 Customizing RadioButton @@ -613,23 +504,9 @@ RadioButton consists of three visual items: \l {Control::background}{background}, \l {Control::contentItem}{content item} and \l {AbstractButton::indicator}{indicator}. - \section3 Background - - \image qtquickcontrols2-radiobutton-background.png - - RadioButton has no background item by default. - - \section3 Content item + \image qtquickcontrols2-radiobutton-custom.png - \image qtquickcontrols2-radiobutton-contentItem.png - - \snippet RadioButton.qml contentItem - - \section3 Indicator - - \image qtquickcontrols2-radiobutton-indicator.png - - \snippet RadioButton.qml indicator + \snippet qtquickcontrols2-radiobutton-custom.qml file \section2 Customizing RadioDelegate @@ -637,23 +514,9 @@ RadioDelegate consists of three visual items: \l {Control::background}{background}, \l {Control::contentItem}{contentItem} and \l {AbstractButton::indicator}{indicator}. - \section3 Background - - \image qtquickcontrols2-radiodelegate-background.png + \image qtquickcontrols2-radiodelegate-custom.png - \snippet RadioDelegate.qml background - - \section3 Content item - - \image qtquickcontrols2-radiodelegate-contentItem.png - - \snippet RadioDelegate.qml contentItem - - \section3 Indicator - - \image qtquickcontrols2-radiodelegate-indicator.png - - \snippet RadioDelegate.qml indicator + \snippet qtquickcontrols2-radiodelegate-custom.qml file \section2 Customizing RangeSlider @@ -663,23 +526,9 @@ \l {RangeSlider::first}{first.handle} and \l {RangeSlider::second.handle}{second.handle}. - \section3 Background - - \image qtquickcontrols2-rangeslider-background.png - - \snippet RangeSlider.qml background - - \section3 First Handle - - \image qtquickcontrols2-rangeslider-first-handle.png + \image qtquickcontrols2-rangeslider-custom.png - \snippet RangeSlider.qml firstHandle - - \section3 Second Handle - - \image qtquickcontrols2-rangeslider-second-handle.png - - \snippet RangeSlider.qml secondHandle + \snippet qtquickcontrols2-rangeslider-custom.qml file \section2 Customizing ScrollBar @@ -687,17 +536,9 @@ ScrollBar consists of two visual items: \l {Control::background}{background} and \l {Control::contentItem}{content item}. - \section3 Background - - \image qtquickcontrols2-scrollbar-background.png - - ScrollBar has no background item by default. - - \section3 Content item + \image qtquickcontrols2-scrollbar-custom.png - \image qtquickcontrols2-scrollbar-contentItem.png - - \snippet ScrollBar.qml contentItem + \snippet qtquickcontrols2-scrollbar-custom.qml file \section2 Customizing ScrollIndicator @@ -705,17 +546,9 @@ ScrollIndicator consists of two visual items: \l {Control::background}{background} and \l {Control::contentItem}{content item}. - \section3 Background - - \image qtquickcontrols2-scrollindicator-background.png - - ScrollIndicator has no background item by default. - - \section3 Content item - - \image qtquickcontrols2-scrollindicator-contentItem.png + \image qtquickcontrols2-scrollindicator-custom.png - \snippet ScrollIndicator.qml contentItem + \snippet qtquickcontrols2-scrollindicator-custom.qml file \section2 Customizing Slider @@ -723,17 +556,9 @@ Slider consists of two visual items: \l {Control::background}{background}, and \l {Slider::handle}{handle}. - \section3 Background + \image qtquickcontrols2-slider-custom.png - \image qtquickcontrols2-slider-background.png - - \snippet Slider.qml background - - \section3 Handle - - \image qtquickcontrols2-slider-handle.png - - \snippet Slider.qml handle + \snippet qtquickcontrols2-slider-custom.qml file \section2 Customizing SpinBox @@ -742,29 +567,9 @@ \l {Control::contentItem}{contentItem}, \l {SpinBox::up.indicator}{up indicator}, and \l {SpinBox::down.indicator}{down indicator}. - \section3 Background - - \image qtquickcontrols2-spinbox-background.png - - \snippet SpinBox.qml background - - \section3 Content item - - \image qtquickcontrols2-spinbox-contentItem.png - - \snippet SpinBox.qml contentItem - - \section3 Down indicator - - \image qtquickcontrols2-spinbox-down.png + \image qtquickcontrols2-spinbox-custom.png - \snippet SpinBox.qml down.indicator - - \section3 Up indicator - - \image qtquickcontrols2-spinbox-up.png - - \snippet SpinBox.qml up.indicator + \snippet qtquickcontrols2-spinbox-custom.qml file \section2 Customizing StackView @@ -773,58 +578,18 @@ item, and it allows customizing the transitions that are used for push, pop, and replace operations. - \section3 Push enter - - \snippet StackView.qml pushEnter - - \section3 Push exit - - \snippet StackView.qml pushExit - - \section3 Pop enter - - \snippet StackView.qml popEnter - - \section3 Pop exit - - \snippet StackView.qml popExit - - \section3 Replace enter - - \snippet StackView.qml replaceEnter - - \section3 Replace exit - - \snippet StackView.qml replaceExit + \snippet qtquickcontrols2-stackview-custom.qml file \section2 Customizing SwipeDelegate - SwipeDelegate consists of five visual items: \l {Control::background}{background}, + SwipeDelegate consists of six visual items: \l {Control::background}{background}, \l {Control::contentItem}{content item}, \l {AbstractButton::indicator}{indicator}, - \c exposure.left, and \c exposure.right. - - \section3 Background - - \image qtquickcontrols2-swipedelegate-background.png - - \snippet SwipeDelegate.qml background - - \section3 Content item - - \image qtquickcontrols2-swipedelegate-contentItem.png - - \snippet SwipeDelegate.qml contentItem - - \section3 Indicator + \c exposure.left, \c exposure.right, and \c exposure.behind. - SwipeDelegate has no indicator item by default. + \image qtquickcontrols2-swipedelegate-custom.png - \section3 Left, right, and behind - - \image qtquickcontrols2-swipedelegate.gif - - By default, there are no left, right, or behind items defined. + \snippet qtquickcontrols2-swipedelegate-custom.qml file \section2 Customizing SwipeView @@ -833,13 +598,7 @@ item. The navigation is implemented by the \l {Control::contentItem} {content item}. - \section3 Background - - SwipeView has no background item by default. - - \section3 Content item - - \snippet SwipeView.qml contentItem + \snippet qtquickcontrols2-swipeview-custom.qml file \section2 Customizing Switch @@ -847,84 +606,61 @@ Switch consists of three visual items: \l {Control::background}{background}, \l {Control::contentItem}{content item} and \l {AbstractButton::indicator}{indicator}. - \section3 Background - - \image qtquickcontrols2-switch-background.png - - Switch has no background item by default. - - \section3 Content item - - \image qtquickcontrols2-switch-contentItem.png - - \snippet Switch.qml contentItem - - \section3 Indicator - - \image qtquickcontrols2-switch-indicator.png - - \snippet Switch.qml indicator + \image qtquickcontrols2-switch-custom.png + \snippet qtquickcontrols2-switch-custom.qml file \section2 Customizing SwitchDelegate SwitchDelegate consists of three visual items: \l {Control::background}{background}, \l {Control::contentItem}{contentItem} and \l {AbstractButton::indicator}{indicator}. - \section3 Background - - \image qtquickcontrols2-switchdelegate-background.png - - \snippet SwitchDelegate.qml background - - \section3 Content item + \image qtquickcontrols2-switchdelegate-custom.png - \image qtquickcontrols2-switchdelegate-contentItem.png + \snippet qtquickcontrols2-switchdelegate-custom.qml file - \snippet SwitchDelegate.qml contentItem - \section3 Indicator - - \image qtquickcontrols2-switchdelegate-indicator.png - - \snippet SwitchDelegate.qml indicator + \section2 Customizing TabBar + TabBar consists of two visual items: \l {Control::background}{background}, + and \l {Control::contentItem}{contentItem}. - \section2 Customizing TabBar + \image qtquickcontrols2-tabbar-custom.png - TODO + \snippet qtquickcontrols2-tabbar-custom.qml file \section2 Customizing TabButton - TODO + TabButton can be customized in the same manner as + \l {Customizing Button}{Button}. \section2 Customizing TextArea - TODO + TextArea consists of a \l {TextArea::background}{background} item. + \image qtquickcontrols2-textarea-custom.png + + \snippet qtquickcontrols2-textarea-custom.qml file - \section2 Customizing TextField - TextField offers a customizable \l {TextField::background}{background} item. + \section2 Customizing TextField - \section3 Background + TextField consists of a \l {TextField::background}{background} item. - \image qtquickcontrols2-textfield-background.png + \image qtquickcontrols2-textfield-custom.png - \snippet TextField.qml background + \snippet qtquickcontrols2-textfield-custom.qml file \section2 Customizing ToolBar ToolBar consists of one visual item: \l {Control::background}{background}. - \section3 Background - - \image qtquickcontrols2-toolbar-background.png + \image qtquickcontrols2-toolbar-custom.png - \snippet ToolBar.qml background + \snippet qtquickcontrols2-toolbar-custom.qml file \section2 Customizing ToolButton @@ -932,17 +668,9 @@ ToolButton consists of two visual items: \l {Control::background}{background} and \l {Control::contentItem}{content item}. - \section3 Background - - \image qtquickcontrols2-toolbutton-background.png + \image qtquickcontrols2-toolbutton-custom.png - \snippet ToolButton.qml background - - \section3 Content item - - \image qtquickcontrols2-toolbutton-contentItem.png - - \snippet ToolButton.qml contentItem + \snippet qtquickcontrols2-toolbutton-custom.qml file \section2 Customizing ToolTip @@ -950,17 +678,13 @@ ToolTip consists of two visual items: \l {Popup::background}{background} and \l {Popup::contentItem}{content item}. - \section3 Background - - \image qtquickcontrols2-tooltip-background.png - - \snippet ToolTip.qml background - - \section3 Content item - - \image qtquickcontrols2-tooltip-contentItem.png - - \snippet ToolTip.qml contentItem + \quotefromfile qtquickcontrols2-tooltip-custom.qml + \skipto import QtQuick 2.6 + \printuntil import QtQuick.Controls 2.0 + \skipto ToolTip + \printuntil } + \printuntil } + \printuntil } \section2 Customizing Tumbler @@ -970,21 +694,7 @@ \l {Control::contentItem}{contentItem}, and \l {Tumbler::delegate}{delegate}. - \section3 Background - - \image qtquickcontrols2-tumbler-background.png - - Tumbler has no background item by default. - - \section3 Content Item - - \image qtquickcontrols2-tumbler-contentItem.png - - \snippet Tumbler.qml contentItem - - \section3 Delegate - - \image qtquickcontrols2-tumbler-delegate.png + \image qtquickcontrols2-tumbler-custom.png - \snippet Tumbler.qml delegate + \snippet qtquickcontrols2-tumbler-custom.qml file */ |
