diff options
Diffstat (limited to 'src/imports/controls/doc/snippets')
34 files changed, 1490 insertions, 190 deletions
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] |