diff options
Diffstat (limited to 'src/extras/doc')
53 files changed, 1065 insertions, 0 deletions
diff --git a/src/extras/doc/compat/qtquickextras.qdocconf b/src/extras/doc/compat/qtquickextras.qdocconf new file mode 100644 index 000000000..d36fd9098 --- /dev/null +++ b/src/extras/doc/compat/qtquickextras.qdocconf @@ -0,0 +1,5 @@ +include(../qtquickextras-compat.qdocconf) + +# Workaround for qdoc not parsing relative include paths correctly +exampledirs += ../../../../examples +imagedirs += ../images diff --git a/src/extras/doc/images/circulargauge-angles.png b/src/extras/doc/images/circulargauge-angles.png Binary files differnew file mode 100644 index 000000000..fb93bcaa3 --- /dev/null +++ b/src/extras/doc/images/circulargauge-angles.png diff --git a/src/extras/doc/images/circulargauge-needle-example-2.png b/src/extras/doc/images/circulargauge-needle-example-2.png Binary files differnew file mode 100644 index 000000000..a2b5f3228 --- /dev/null +++ b/src/extras/doc/images/circulargauge-needle-example-2.png diff --git a/src/extras/doc/images/circulargauge-needle.png b/src/extras/doc/images/circulargauge-needle.png Binary files differnew file mode 100644 index 000000000..b2780b413 --- /dev/null +++ b/src/extras/doc/images/circulargauge-needle.png diff --git a/src/extras/doc/images/circulargauge-reversed.png b/src/extras/doc/images/circulargauge-reversed.png Binary files differnew file mode 100644 index 000000000..aeadfbcc7 --- /dev/null +++ b/src/extras/doc/images/circulargauge-reversed.png diff --git a/src/extras/doc/images/circulargauge-tickmark-indices-values.png b/src/extras/doc/images/circulargauge-tickmark-indices-values.png Binary files differnew file mode 100644 index 000000000..d117f4833 --- /dev/null +++ b/src/extras/doc/images/circulargauge-tickmark-indices-values.png diff --git a/src/extras/doc/images/circulargauge.png b/src/extras/doc/images/circulargauge.png Binary files differnew file mode 100644 index 000000000..f88aa01f5 --- /dev/null +++ b/src/extras/doc/images/circulargauge.png diff --git a/src/extras/doc/images/delaybutton-activated.png b/src/extras/doc/images/delaybutton-activated.png Binary files differnew file mode 100644 index 000000000..d78d77382 --- /dev/null +++ b/src/extras/doc/images/delaybutton-activated.png diff --git a/src/extras/doc/images/delaybutton-progress.png b/src/extras/doc/images/delaybutton-progress.png Binary files differnew file mode 100644 index 000000000..07a13256f --- /dev/null +++ b/src/extras/doc/images/delaybutton-progress.png diff --git a/src/extras/doc/images/delaybutton.png b/src/extras/doc/images/delaybutton.png Binary files differnew file mode 100644 index 000000000..510abc0bf --- /dev/null +++ b/src/extras/doc/images/delaybutton.png diff --git a/src/extras/doc/images/dial.png b/src/extras/doc/images/dial.png Binary files differnew file mode 100644 index 000000000..d0e4d5ace --- /dev/null +++ b/src/extras/doc/images/dial.png diff --git a/src/extras/doc/images/gauge-minorTickmark-example.png b/src/extras/doc/images/gauge-minorTickmark-example.png Binary files differnew file mode 100644 index 000000000..591120d6d --- /dev/null +++ b/src/extras/doc/images/gauge-minorTickmark-example.png diff --git a/src/extras/doc/images/gauge-temperature.png b/src/extras/doc/images/gauge-temperature.png Binary files differnew file mode 100644 index 000000000..95fc16794 --- /dev/null +++ b/src/extras/doc/images/gauge-temperature.png diff --git a/src/extras/doc/images/gauge-tickmark-example.png b/src/extras/doc/images/gauge-tickmark-example.png Binary files differnew file mode 100644 index 000000000..c46fb8a5b --- /dev/null +++ b/src/extras/doc/images/gauge-tickmark-example.png diff --git a/src/extras/doc/images/gauge.png b/src/extras/doc/images/gauge.png Binary files differnew file mode 100644 index 000000000..7e03307bf --- /dev/null +++ b/src/extras/doc/images/gauge.png diff --git a/src/extras/doc/images/piemenu-boundingItem-example.png b/src/extras/doc/images/piemenu-boundingItem-example.png Binary files differnew file mode 100644 index 000000000..f5c312b63 --- /dev/null +++ b/src/extras/doc/images/piemenu-boundingItem-example.png diff --git a/src/extras/doc/images/piemenu-boundingItem-null-example.png b/src/extras/doc/images/piemenu-boundingItem-null-example.png Binary files differnew file mode 100644 index 000000000..9ddb4f676 --- /dev/null +++ b/src/extras/doc/images/piemenu-boundingItem-null-example.png diff --git a/src/extras/doc/images/piemenu-menuitem-example.png b/src/extras/doc/images/piemenu-menuitem-example.png Binary files differnew file mode 100644 index 000000000..57a2f9562 --- /dev/null +++ b/src/extras/doc/images/piemenu-menuitem-example.png diff --git a/src/extras/doc/images/piemenu.png b/src/extras/doc/images/piemenu.png Binary files differnew file mode 100644 index 000000000..95078eae6 --- /dev/null +++ b/src/extras/doc/images/piemenu.png diff --git a/src/extras/doc/images/qtquickextras-example-dashboard.png b/src/extras/doc/images/qtquickextras-example-dashboard.png Binary files differnew file mode 100644 index 000000000..979a2d03c --- /dev/null +++ b/src/extras/doc/images/qtquickextras-example-dashboard.png diff --git a/src/extras/doc/images/qtquickextras-example-flat.png b/src/extras/doc/images/qtquickextras-example-flat.png Binary files differnew file mode 100644 index 000000000..f10bdc184 --- /dev/null +++ b/src/extras/doc/images/qtquickextras-example-flat.png diff --git a/src/extras/doc/images/qtquickextras-example-gallery.png b/src/extras/doc/images/qtquickextras-example-gallery.png Binary files differnew file mode 100644 index 000000000..1895912c7 --- /dev/null +++ b/src/extras/doc/images/qtquickextras-example-gallery.png diff --git a/src/extras/doc/images/statusindicator-active.png b/src/extras/doc/images/statusindicator-active.png Binary files differnew file mode 100644 index 000000000..c5ebc09dd --- /dev/null +++ b/src/extras/doc/images/statusindicator-active.png diff --git a/src/extras/doc/images/statusindicator-green.png b/src/extras/doc/images/statusindicator-green.png Binary files differnew file mode 100644 index 000000000..88dcb1ed2 --- /dev/null +++ b/src/extras/doc/images/statusindicator-green.png diff --git a/src/extras/doc/images/statusindicator-inactive.png b/src/extras/doc/images/statusindicator-inactive.png Binary files differnew file mode 100644 index 000000000..27488d5ee --- /dev/null +++ b/src/extras/doc/images/statusindicator-inactive.png diff --git a/src/extras/doc/images/styling-circulargauge-background-example.png b/src/extras/doc/images/styling-circulargauge-background-example.png Binary files differnew file mode 100644 index 000000000..e816c6f63 --- /dev/null +++ b/src/extras/doc/images/styling-circulargauge-background-example.png diff --git a/src/extras/doc/images/styling-circulargauge-knob-example.png b/src/extras/doc/images/styling-circulargauge-knob-example.png Binary files differnew file mode 100644 index 000000000..793a36c24 --- /dev/null +++ b/src/extras/doc/images/styling-circulargauge-knob-example.png diff --git a/src/extras/doc/images/styling-circulargauge-minorTickmark-example.png b/src/extras/doc/images/styling-circulargauge-minorTickmark-example.png Binary files differnew file mode 100644 index 000000000..f3f2d8d7a --- /dev/null +++ b/src/extras/doc/images/styling-circulargauge-minorTickmark-example.png diff --git a/src/extras/doc/images/styling-circulargauge-needle-example.png b/src/extras/doc/images/styling-circulargauge-needle-example.png Binary files differnew file mode 100644 index 000000000..08049fc95 --- /dev/null +++ b/src/extras/doc/images/styling-circulargauge-needle-example.png diff --git a/src/extras/doc/images/styling-circulargauge-tickmark-example.png b/src/extras/doc/images/styling-circulargauge-tickmark-example.png Binary files differnew file mode 100644 index 000000000..01c71cd11 --- /dev/null +++ b/src/extras/doc/images/styling-circulargauge-tickmark-example.png diff --git a/src/extras/doc/images/styling-circulargauge-tickmarkLabel-example.png b/src/extras/doc/images/styling-circulargauge-tickmarkLabel-example.png Binary files differnew file mode 100644 index 000000000..7520827ee --- /dev/null +++ b/src/extras/doc/images/styling-circulargauge-tickmarkLabel-example.png diff --git a/src/extras/doc/images/styling-gauge-font-size.png b/src/extras/doc/images/styling-gauge-font-size.png Binary files differnew file mode 100644 index 000000000..97d7ebb26 --- /dev/null +++ b/src/extras/doc/images/styling-gauge-font-size.png diff --git a/src/extras/doc/images/styling-gauge-foreground.png b/src/extras/doc/images/styling-gauge-foreground.png Binary files differnew file mode 100644 index 000000000..5a4f65b96 --- /dev/null +++ b/src/extras/doc/images/styling-gauge-foreground.png diff --git a/src/extras/doc/images/styling-gauge-minorTickmark.png b/src/extras/doc/images/styling-gauge-minorTickmark.png Binary files differnew file mode 100644 index 000000000..34e361927 --- /dev/null +++ b/src/extras/doc/images/styling-gauge-minorTickmark.png diff --git a/src/extras/doc/images/styling-gauge-tickmark.png b/src/extras/doc/images/styling-gauge-tickmark.png Binary files differnew file mode 100644 index 000000000..1cd4fb8b7 --- /dev/null +++ b/src/extras/doc/images/styling-gauge-tickmark.png diff --git a/src/extras/doc/images/styling-gauge-valueBar.png b/src/extras/doc/images/styling-gauge-valueBar.png Binary files differnew file mode 100644 index 000000000..581b8240d --- /dev/null +++ b/src/extras/doc/images/styling-gauge-valueBar.png diff --git a/src/extras/doc/images/togglebutton-checked.png b/src/extras/doc/images/togglebutton-checked.png Binary files differnew file mode 100644 index 000000000..d40b382b8 --- /dev/null +++ b/src/extras/doc/images/togglebutton-checked.png diff --git a/src/extras/doc/images/togglebutton-unchecked.png b/src/extras/doc/images/togglebutton-unchecked.png Binary files differnew file mode 100644 index 000000000..7db5b84ba --- /dev/null +++ b/src/extras/doc/images/togglebutton-unchecked.png diff --git a/src/extras/doc/images/tumbler-flat-style.png b/src/extras/doc/images/tumbler-flat-style.png Binary files differnew file mode 100644 index 000000000..9ec5402a3 --- /dev/null +++ b/src/extras/doc/images/tumbler-flat-style.png diff --git a/src/extras/doc/images/tumbler.png b/src/extras/doc/images/tumbler.png Binary files differnew file mode 100644 index 000000000..5b15c57fd --- /dev/null +++ b/src/extras/doc/images/tumbler.png diff --git a/src/extras/doc/qtquickextras-compat.qdocconf b/src/extras/doc/qtquickextras-compat.qdocconf new file mode 100644 index 000000000..ad171f47a --- /dev/null +++ b/src/extras/doc/qtquickextras-compat.qdocconf @@ -0,0 +1,17 @@ +include($QT_INSTALL_DOCS/global/qt-defines.qdocconf) +include($QT_INSTALL_DOCS/global/qt-cpp-ignore.qdocconf) + +naturallanguage = en_US +outputencoding = UTF-8 +sourceencoding = UTF-8 + +examples.fileextensions = "*.cpp *.h *.js *.xq *.svg *.xml *.ui *.qhp *.qhcp *.qml *.css" +examples.imageextensions = "*.png *.jpg *.gif" + +headers.fileextensions = "*.ch *.h *.h++ *.hh *.hpp *.hxx" +sources.fileextensions = "*.c++ *.cc *.cpp *.cxx *.mm *.qml *.qdoc" + +#include the external websites +sourcedirs += externalsites + +include(qtquickextras-project.qdocconf) diff --git a/src/extras/doc/qtquickextras-project.qdocconf b/src/extras/doc/qtquickextras-project.qdocconf new file mode 100644 index 000000000..0e0104c18 --- /dev/null +++ b/src/extras/doc/qtquickextras-project.qdocconf @@ -0,0 +1,59 @@ +include($QT_INSTALL_DOCS/global/macros.qdocconf) +include($QT_INSTALL_DOCS/global/compat.qdocconf) +#include($QT_INSTALL_DOCS/global/manifest-meta.qdocconf) +include($QT_INSTALL_DOCS/global/qt-html-templates-offline.qdocconf) + +project = QtQuickExtras +description = Qt Quick Extras Reference Documentation +url = http://doc.qt.digia.com/QtQuickExtras/ +version = 1.3 + +qhp.projects = QtQuickExtras + +qhp.QtQuickExtras.file = qtquickextras.qhp +qhp.QtQuickExtras.namespace = org.qt-project.qtquickextras.1.3 +qhp.QtQuickExtras.virtualFolder = qtquickextras +qhp.QtQuickExtras.indexTitle = Qt Quick Extras +qhp.QtQuickExtras.indexRoot = +#qhp.QtQuickExtras.extraFiles = style/qtquickextras.css + +qhp.QtQuickExtras.filterAttributes = qtquickextras 1.3 qtrefdoc +qhp.QtQuickExtras.customFilters.Qt.name = QtQuickExtras 1.3 +qhp.QtQuickExtras.customFilters.Qt.filterAttributes = qtquickextras 1.3 + +qhp.QtQuickExtras.subprojects = qtquickextrasstyles + +qhp.QtQuickExtras.subprojects.qtquickextrasqmltypes.title = Controls QML Types +qhp.QtQuickExtras.subprojects.qtquickextrasqmltypes.indexTitle = Qt Quick Controls QML Types +qhp.QtQuickExtras.subprojects.qtquickextrasqmltypes.selectors = fake:qmlclass # cannot choose qmltypes from a specific group QTBUG-32985 +qhp.QtQuickExtras.subprojects.qtquickextrasqmltypes.sortPages = true + +qhp.QtQuickExtras.subprojects.qtquickextrasstyles.title = Qt Quick Extras Styles Structure +qhp.QtQuickExtras.subprojects.qtquickextrasstyles.indexTitle = Qt Quick Extras Styles Structure +qhp.QtQuickExtras.subprojects.qtquickextrasstyles.type = manual + +# QTBUG-35596: If you're using a shadow build of Qt >= 5.3.1, then uncomment the following line and comment out indexes += ... +#depends = qtqml qtquick qtdoc qtquickcontrols +indexes += $QT_INSTALL_DOCS/qtqml/qtqml.index \ + $QT_INSTALL_DOCS/qtquick/qtquick.index \ + $QT_INSTALL_DOCS/qtdoc/qtdoc.index \ + $QT_INSTALL_DOCS/qtquickcontrols/qtquickcontrols.index + +# Specify the install path under QT_INSTALL_EXAMPLES +# Examples will be installed under quick/extras - +# 'extras' subdirectory is given as part of \example commands +exampledirs += ../../../examples/quick \ + snippets +examplesinstallpath = quick + +headerdirs += ../ + +sourcedirs += ../ + +#sources += ../Private/<stuff> \ + +imagedirs += images + +navigation.landingpage = "Qt Quick Extras" +navigation.qmltypespage = "Qt Quick Extras QML Types" +buildversion = "Qt Quick Extras 1.3" diff --git a/src/extras/doc/qtquickextras.qdocconf b/src/extras/doc/qtquickextras.qdocconf new file mode 100644 index 000000000..10117442a --- /dev/null +++ b/src/extras/doc/qtquickextras.qdocconf @@ -0,0 +1,4 @@ +include($QT_INSTALL_DOCS/global/qt-cpp-defines.qdocconf) +include($QT_INSTALL_DOCS/global/fileextensions.qdocconf) + +include(qtquickextras-project.qdocconf) diff --git a/src/extras/doc/snippets/circulargauge-background-range.qml b/src/extras/doc/snippets/circulargauge-background-range.qml new file mode 100644 index 000000000..619fc465e --- /dev/null +++ b/src/extras/doc/snippets/circulargauge-background-range.qml @@ -0,0 +1,121 @@ +/**************************************************************************** +** +** 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$ +** +****************************************************************************/ + +//! [range] +import QtQuick 2.0 +import QtQuick.Controls 1.1 +import QtQuick.Extras 1.3 +import QtQuick.Extras.Styles 1.3 +import QtQuick.Extras.Private 1.0 + +Rectangle { + width: 300 + height: 300 + color: "#494d53" + + CircularGauge { + id: gauge + anchors.centerIn: parent + style: CircularGaugeStyle { + id: style + + //! [background] + function degreesToRadians(degrees) { + return degrees * (Math.PI / 180); + } + + + background: Canvas { + onPaint: { + var ctx = getContext("2d"); + ctx.reset(); + + ctx.beginPath(); + ctx.strokeStyle = "#e34c22"; + ctx.lineWidth = outerRadius * 0.02; + + ctx.arc(outerRadius, outerRadius, outerRadius - ctx.lineWidth / 2, + degreesToRadians(valueToAngle(80) - 90), degreesToRadians(valueToAngle(100) - 90)); + ctx.stroke(); + } + } + //! [background] + + //! [tickmark] + tickmark: Rectangle { + visible: styleData.value < 80 || styleData.value % 10 == 0 + implicitWidth: outerRadius * 0.02 + antialiasing: true + implicitHeight: outerRadius * 0.06 + color: styleData.value >= 80 ? "#e34c22" : "#e5e5e5" + } + //! [tickmark] + + //! [minorTickmark] + minorTickmark: Rectangle { + visible: styleData.value < 80 + implicitWidth: outerRadius * 0.01 + antialiasing: true + implicitHeight: outerRadius * 0.03 + color: "#e5e5e5" + } + //! [minorTickmark] + + //! [tickmarkLabel] + tickmarkLabel: Text { + font.pixelSize: Math.max(6, outerRadius * 0.1) + text: styleData.value + color: styleData.value >= 80 ? "#e34c22" : "#e5e5e5" + antialiasing: true + } + //! [tickmarkLabel] + + //! [needle] + needle: Rectangle { + y: outerRadius * 0.15 + implicitWidth: outerRadius * 0.03 + implicitHeight: outerRadius * 0.9 + antialiasing: true + color: "#e5e5e5" + } + //! [needle] + + //! [foreground] + foreground: Item { + Rectangle { + width: outerRadius * 0.2 + height: width + radius: width / 2 + color: "#e5e5e5" + anchors.centerIn: parent + } + } + //! [foreground] + } + } +} +//! [range] diff --git a/src/extras/doc/snippets/circulargauge-tickmark-indices-values.qml b/src/extras/doc/snippets/circulargauge-tickmark-indices-values.qml new file mode 100644 index 000000000..33781baaa --- /dev/null +++ b/src/extras/doc/snippets/circulargauge-tickmark-indices-values.qml @@ -0,0 +1,85 @@ +/**************************************************************************** +** +** 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$ +** +****************************************************************************/ + +//! [tickmarks] +import QtQuick 2.0 +import QtQuick.Extras 1.3 +import QtQuick.Extras.Styles 1.3 + +Rectangle { + width: 400 + height: 400 + + CircularGauge { + id: gauge + anchors.fill: parent + style: CircularGaugeStyle { + labelInset: outerRadius * 0.2 + + tickmarkLabel: null + + tickmark: Text { + text: styleData.value + + Text { + anchors.horizontalCenter: parent.horizontalCenter + anchors.top: parent.bottom + text: styleData.index + color: "blue" + } + } + + minorTickmark: Text { + text: styleData.value + font.pixelSize: 8 + + Text { + anchors.horizontalCenter: parent.horizontalCenter + anchors.top: parent.bottom + text: styleData.index + font.pixelSize: 8 + color: "blue" + } + } + } + + Text { + id: indexText + text: "Major and minor indices" + anchors.horizontalCenter: parent.horizontalCenter + anchors.bottom: valueText.top + color: "blue" + } + Text { + id: valueText + text: "Major and minor values" + anchors.horizontalCenter: parent.horizontalCenter + anchors.bottom: parent.bottom + } + } +} +//! [tickmarks] diff --git a/src/extras/doc/snippets/styling-gauge.qml b/src/extras/doc/snippets/styling-gauge.qml new file mode 100644 index 000000000..48cb95edf --- /dev/null +++ b/src/extras/doc/snippets/styling-gauge.qml @@ -0,0 +1,93 @@ +/**************************************************************************** +** +** 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$ +** +****************************************************************************/ + +//! [all] +import QtQuick 2.2 +import QtQuick.Controls 1.1 +import QtQuick.Extras 1.3 +import QtQuick.Extras.Styles 1.3 + +Rectangle { + width: 100 + height: 220 + color: "#494d53" + + Gauge { + value: 50 + tickmarkStepSize: 20 + minorTickmarkCount: 1 + //! [font-size] + font.pixelSize: 15 + //! [font-size] + anchors.centerIn: parent + anchors.horizontalCenterOffset: -4 + + style: GaugeStyle { + //! [valueBar] + valueBar: Rectangle { + color: "#e34c22" + implicitWidth: 28 + } + //! [valueBar] + + //! [foreground] + foreground: null + //! [foreground] + + //! [tickmark] + tickmark: Item { + implicitWidth: 8 + implicitHeight: 4 + + Rectangle { + x: control.tickmarkAlignment === Qt.AlignLeft + || control.tickmarkAlignment === Qt.AlignTop ? parent.implicitWidth : -28 + width: 28 + height: parent.height + color: "#ffffff" + } + } + //! [tickmark] + + //! [minorTickmark] + minorTickmark: Item { + implicitWidth: 8 + implicitHeight: 2 + + Rectangle { + x: control.tickmarkAlignment === Qt.AlignLeft + || control.tickmarkAlignment === Qt.AlignTop ? parent.implicitWidth : -28 + width: 28 + height: parent.height + color: "#ffffff" + } + } + //! [minorTickmark] + } + } +} +//! [all] diff --git a/src/extras/doc/src/qtquickextras-examples.qdoc b/src/extras/doc/src/qtquickextras-examples.qdoc new file mode 100644 index 000000000..c966e48d0 --- /dev/null +++ b/src/extras/doc/src/qtquickextras-examples.qdoc @@ -0,0 +1,67 @@ +/**************************************************************************** +** +** 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$ +** +****************************************************************************/ + +/*! + \group qtquickextras-examples + \ingroup all-examples + \title Qt Quick Extras Examples + \brief A collection of examples for \l{Qt Quick Extras}. + + Below is a listing of the examples for \l{Qt Quick Extras}. +*/ + +/*! + \example extras/gallery + \title Qt Quick Extras - Gallery + \ingroup qtquickextras-examples + \brief An interactive showcase of the various controls. + \image qtquickextras-example-gallery.png + + This example project demonstrates the various UI controls provided by + \l{Qt Quick Extras}. +*/ + +/*! + \example extras/dashboard + \title Qt Quick Extras - Dashboard + \ingroup qtquickextras-examples + \brief A car dashboard created using several CircularGauge controls. + \image qtquickextras-example-dashboard.png + + This example project demonstrates the use of \l CircularGauge to create a car dashboard. +*/ + +/*! + \example extras/flat + \title Qt Quick Extras - Flat + \ingroup qtquickextras-examples + \brief An interactive showcase of the flat style. + \image qtquickextras-example-flat.png + + This example project demonstrates the Flat style, a modern look for + both the Qt Quick Controls and Qt Quick Extras. +*/ diff --git a/src/extras/doc/src/qtquickextras-index.qdoc b/src/extras/doc/src/qtquickextras-index.qdoc new file mode 100644 index 000000000..18e407110 --- /dev/null +++ b/src/extras/doc/src/qtquickextras-index.qdoc @@ -0,0 +1,56 @@ +/**************************************************************************** +** +** 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$ +** +****************************************************************************/ + +/*! + \page index.html + \title Qt Quick Extras + + \brief The Qt Quick Extras module provides a set of UI controls for Qt + Quick. + + The Qt Quick Extras module provides a specialized set of + controls that can be used to build interfaces in Qt Quick. + + The module requires \l{Qt Quick} 2.2, and \l{Qt Quick Controls} 1.1. + + Visit the \l{Qt Quick Extras Overview} page to get started. + + \section1 Controls + Controls are typically items that are used to present or receive input from + the user. + \annotatedlist extras + + \section1 Related information + + \list + \li \l{Qt Quick} + \li \l{Qt Quick Extras Overview} + \li \l{Qt Quick Extras QML Types}{Qt Quick Extras QML Types} + \li \l{Qt Quick Extras Examples} + \li \l{Qt Quick Extras Styles} + \endlist +*/ diff --git a/src/extras/doc/src/qtquickextras-overview.qdoc b/src/extras/doc/src/qtquickextras-overview.qdoc new file mode 100644 index 000000000..63732c507 --- /dev/null +++ b/src/extras/doc/src/qtquickextras-overview.qdoc @@ -0,0 +1,106 @@ +/**************************************************************************** +** +** 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$ +** +****************************************************************************/ + +/*! + \page qtquickextras-overview.html + \title Qt Quick Extras Overview + \brief A set of UI controls to create user interfaces in Qt Quick + + Qt Quick Extras provide a set of UI controls to create user + interfaces in Qt Quick. + + \section1 Getting Started + + \section2 Building + + If you are building Qt Quick Extras from source, you can follow + the steps used for most Qt modules: + + \code + qmake + make + make install + \endcode + + \section2 Documentation + + To build this documentation, you should use an in-source build of Qt or + install Qt from a binary package. + + The steps to build the documentation are: + + \code + qmake + make docs + \endcode + + \section2 Using the Controls + + The QML types can be imported into your application using the following + import statement in your \c {.qml} file. + + \code + import QtQuick.Extras 1.3 + \endcode + + \section1 Interactive controls + + \annotatedlist extras-interactive + + \section1 Non-interactive controls + + \annotatedlist extras-non-interactive + + \section1 Creating a basic example + + A basic example of a QML file that makes use of controls is shown here: + + \code + import QtQuick 2.2 + import QtQuick.Extras 1.3 + + Rectangle { + DelayButton { + anchors.centerIn: parent + } + } + \endcode + + For an interactive showcase of the controls provided by + \l{Qt Quick Extras}, you can look at + the \l{Qt Quick Extras - Gallery}{Gallery} example. + + \image qtquickextras-example-gallery.png + + \section1 Related information + + \list + \li \l{Qt Quick} + \li \l{Qt Quick Extras} + \li \l{Qt Quick Extras Examples} + \endlist +*/ diff --git a/src/extras/doc/src/qtquickextras.qdoc b/src/extras/doc/src/qtquickextras.qdoc new file mode 100644 index 000000000..835b14fd1 --- /dev/null +++ b/src/extras/doc/src/qtquickextras.qdoc @@ -0,0 +1,48 @@ +/**************************************************************************** +** +** 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$ +** +****************************************************************************/ + +/*! + \qmlmodule QtQuick.Extras 1.3 + \title Qt Quick Extras QML Types + \ingroup qmlmodules + \brief Provides QML types for user interfaces. + + The \l{Qt Quick Extras} module provides specialized controls + for creating user interfaces. These QML types work in conjunction with + \l{Qt Quick} and \l{Qt Quick Controls}. + + Controls can be styled using the + \l{Qt Quick Extras Styles QML Types}{Styles QML Types}. + + The QML types can be imported into your application using the + following import statement in your .qml file. + + \code + import QtQuick.Extras 1.3 + \endcode + +*/ diff --git a/src/extras/doc/src/qtquickextrasstyles-index.qdoc b/src/extras/doc/src/qtquickextrasstyles-index.qdoc new file mode 100644 index 000000000..6af24bb7a --- /dev/null +++ b/src/extras/doc/src/qtquickextrasstyles-index.qdoc @@ -0,0 +1,130 @@ +/**************************************************************************** +** +** 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$ +** +****************************************************************************/ + +/*! + \group extrasstyling + \title Styling Extras Controls +*/ + +/*! + \page qtquickextrasstyles-index.html + \title Qt Quick Extras Styles + \brief The Qt Quick Extras Styles submodule provides custom + styles for Qt Quick Extras. + + The Qt Quick Extras Styles module allows custom styling for + \l {Qt Quick Extras}. + + The submodule requires \l{Qt Quick} 2.2. + + \section1 Getting started + + The QML types can be imported into your application using the following + import statement in your \c {.qml} file. + + \code + import QtQuick.Extras.Styles 1.3 + \endcode + + \section1 Styles + + \section2 Base Style + + The Base Style is the default style used when none is specified. It is also + used as a fallback when the specified style cannot be found. + + \image tumbler.png + \caption The Base Style Tumbler. + + \section2 Flat Style + + The Flat Style is designed for touch devices. It was introduced in Qt Quick + Extras Controls 1.3 and requires Qt 5.4. + + \image tumbler-flat-style.png + \caption The Flat Style Tumbler. + + \section2 Selecting Styles + + Qt Quick Extras follow Qt Quick Controls' styling system. You + can apply a different style to the controls by setting the + \e QT_QUICK_CONTROLS_STYLE environment variable to the name of the style. + For example, to use the Flat style, you can do the following: + + \code + QT_QUICK_CONTROLS_STYLE=Flat ./app + \endcode + + This can also be done in C++, using qputenv(): + + \code + qputenv("QT_QUICK_CONTROLS_STYLE", "Flat"); + \endcode + + \section1 Control Styles + \annotatedlist extrasstyles + + \section1 Styling Tutorials + \annotatedlist extrasstyling + + \section1 Related information + + \list + \li \l{Qt Quick} + \li \l{Qt Quick Extras} + \li \l{Qt Quick Extras Styles QML Types} + \endlist +*/ + +/*! + \page qtquickextrasstyles-structure.html + \title Qt Quick Extras Styles Structure + \list + \li \l{Qt Quick Extras Styles} + \list + \li \l{Qt Quick Extras Styles QML Types}{Styles QMl Types} + \endlist + \endlist +*/ + +/*! + \qmlmodule QtQuick.Extras.Styles 1.0 + \title Qt Quick Extras Styles QML Types + \ingroup qmlmodules + \brief Provides QML types for Qt Quick Extras styles. + + The \l{Qt Quick Extras} module provides a set of QML types for + handling styles. + + Some of the controls allow custom styling similar to widget style sheets. + A styling object is usually a collection of properties that control behavior + and simple delegates that can be replaced with custom QML snippets. + + \code + import QtQuick.Extras.Styles 1.3 + \endcode +*/ diff --git a/src/extras/doc/src/styling-circulargauge.qdoc b/src/extras/doc/src/styling-circulargauge.qdoc new file mode 100644 index 000000000..9cf940876 --- /dev/null +++ b/src/extras/doc/src/styling-circulargauge.qdoc @@ -0,0 +1,145 @@ +/**************************************************************************** +** +** 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$ +** +****************************************************************************/ + +/*! + \page styling-circulargauge.html + \title Styling CircularGauge + \brief Tutorial for styling CircularGauge. + \ingroup extrasstyling + + \target styling-circulargauge-needle + \section2 The Needle Component + + The \l {QtQuick.Extras.Styles::CircularGaugeStyle::}{needle} + component is rotated around the gauge to represent the current value. + + Starting from the default style, we'll add a very basic white needle: + + \snippet circulargauge-background-range.qml needle + + \image styling-circulargauge-needle-example.png + + As mentioned in the documentation for \l {QtQuick.Extras.Styles::} + {CircularGaugeStyle}, \c implicitWidth + and \c implicitHeight properties need to be set. This is so that the needle + can be positioned properly. We always scale items by the + \l {QtQuick.Extras.Styles::CircularGaugeStyle::}{outerRadius} + property of the style, ensuring the control resizes gracefully. + + We offset the needle vertically so that its back sits beyond the knob. + + \target styling-circulargauge-foreground + \section2 The Foreground Component + + We've now changed the needle, but the default knob is still there; let's + replace it. The \l {QtQuick.Extras.Styles::CircularGaugeStyle::} + {foreground} component defines the default knob, so we can specify our own by + overriding it (note that we could also set it to \c null if we didn't want a + foreground): + + \snippet circulargauge-background-range.qml foreground + + \image styling-circulargauge-knob-example.png + + Firstly, we create a circle from the Rectangle item by setting the radius to + be half the width (either width or height will work here; they are always + equal in this case). We make it a child of the Item, because the foreground + fills the gauge. We then center it within the Item. + + We set the color of the knob to the same white that we used before. + + \target styling-circulargauge-tickmarkLabel + \section2 The Tickmark Label Component + + Suppose we want to caution the user if the value displayed by the gauge goes + above or below a certain range. We could present this range to the user in + several ways: + + \list A + \li Change the color of the tickmarks depending on \c styleData.value + \li Add an image to the background + \li Draw it with \l {QtQuick::}{Canvas} + \endlist + + We'll choose options 1 and 3, as they are more flexible than using an + image. + + Firstly, let's change the color of the three highest tickmark labels: + + \snippet circulargauge-background-range.qml tickmarkLabel + + \image styling-circulargauge-tickmarkLabel-example.png tickmarkLabel + + We also change the color of the rest of the labels to the same white that + we used for the needle and knob. + + \target styling-circulargauge-tickmark + \section2 The Tickmark Component + + Now let's do the same for the three highest tickmarks: + + \snippet circulargauge-background-range.qml tickmark + + \image styling-circulargauge-tickmark-example.png tickmark + + \target styling-circulargauge-minorTickmark + \section2 The Minor Tickmark Component + + For the minor tickmarks, we'll only show those which are not higher than + \c 80: + + \snippet circulargauge-background-range.qml minorTickmark + + \image styling-circulargauge-minorTickmark-example.png minorTickmark + + This is because we'll draw something between that range in the next section. + + \target styling-circulargauge-background + \section2 The Background Component + + We'll display the range that indicates caution with an orange arc: + + \snippet circulargauge-background-range.qml background + + We define a function to convert degrees to radians, which are the + units used by \l {QtQuick::}{Canvas}. + + Next, we do the drawing of the range using Canvas. We draw an arc between + \c 80 and \c 100, using the + \l {QtQuick.Extras.Styles::CircularGaugeStyle::}{valueToAngle()} + function provided by CircularGaugeStyle. Note that we subtract \c 90 degrees + before converting to radians, as our origin is north and Canvas' is east. + + The finished product: + + \image styling-circulargauge-background-example.png background + + The complete code for this example is as follows: + + \snippet circulargauge-background-range.qml range +*/ + diff --git a/src/extras/doc/src/styling-gauge.qdoc b/src/extras/doc/src/styling-gauge.qdoc new file mode 100644 index 000000000..accdd425e --- /dev/null +++ b/src/extras/doc/src/styling-gauge.qdoc @@ -0,0 +1,129 @@ +/**************************************************************************** +** +** 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$ +** +****************************************************************************/ + +/*! + \page styling-gauge.html + \title Styling Gauge + \brief Tutorial for styling the Gauge control. + \ingroup extrasstyling + + As GaugeStyle's documentation adequately covers common use cases, this + tutorial will cover a different scenario: one where the gauge's tickmarks + cover the value bar, instead of being aligned to the left or right of it. + + \target styling-gauge-valueBar + \section2 The Value Bar Component + + The \l {QtQuick.Extras.Styles::GaugeStyle::}{valueBar} + component is resized according to the gauge's value; if the value is low, + the bar will be small, and vice versa. + + Starting from the default style, we'll change the color of the value bar to + orange, and increase its width slightly: + + \snippet styling-gauge.qml valueBar + + \image styling-gauge-valueBar.png + + As mentioned in the documentation for GaugeStyle, \c implicitWidth needs to + be set when defining your own value bar. + + \target styling-gauge-foreground + \section2 The Foreground Component + + The \l {QtQuick.Extras.Styles::GaugeStyle::}{foreground} + component covers the full width and height of the value bar, even when the + value bar is not at its highest. By default, the foreground component + provides a "sheen". We'll choose to discard this, and leave it empty + instead: + + \snippet styling-gauge.qml foreground + + \image styling-gauge-foreground.png + + \target styling-gauge-tickmark + \section2 The Tickmark Component + + The \l {QtQuick.Extras.Styles::GaugeStyle::}{tickmark} + component sits to the left or right of the value bar, depending on the + control's \l {Gauge::tickmarkAlignment}{tickmarkAlignment}. In order to + have the tickmarks cover the width of the value bar instead, we need to do + two things: + \list 1 + \li Remove the space the tickmarks previously assumed so that there is + just enough space for margins between the tickmarks and value bar. + \li Position the tickmarks according to the control's orientation and + tickmark alignment. + \endlist + + \snippet styling-gauge.qml tickmark + + In this case we chose \c 8 pixel margins, so we set the \c implicitWidth of + the tickmarks to that. + + We account for every possible orientation and tickmark alignment, something + that is not necessary if the gauge will only ever have one orientation and + alignment. For example, if the gauge will always be of a vertical + orientation and the tickmarks left-aligned, then it is enough to set the + \c x property of the \c Rectangle to the following: + + \code + x: parent.implicitWidth + \endcode + + The value bar is \c 28 pixels wide, so we give the same width to our + tickmarks so that they cover the width of it. + + \image styling-gauge-tickmark.png + + \target styling-gauge-minorTickmark + \section2 The Minor Tickmark Component + + The \l {QtQuick.Extras.Styles::GaugeStyle::}{minorTickmark} + component is almost identical to its larger counterpart, except that its + width does not affect the layout of the gauge's components. We'll do + similar adjustments to the ones in the previous section - the only + difference being the height: + + \snippet styling-gauge.qml minorTickmark + + \image styling-gauge-minorTickmark.png + + \target styling-gauge-font-size + \section2 Adjusting Font Size + + Finally, we increase the \l {Gauge::font}{font} size to \c 15 pixels: + + \snippet styling-gauge.qml font-size + \image styling-gauge-font-size.png + + \target styling-gauge-complete + \section2 Complete Source Code + + \snippet styling-gauge.qml all +*/ + |
