diff options
17 files changed, 469 insertions, 1 deletions
@@ -5,6 +5,7 @@ /examples/quick/controls/calendar/calendar /examples/quick/controls/gallery/gallery /examples/quick/controls/splitview/splitview +/examples/quick/controls/styles/styles /examples/quick/controls/tableview/tableview /examples/quick/controls/touch/touch /examples/quick/controls/texteditor/texteditor diff --git a/examples/quick/controls/controls.pro b/examples/quick/controls/controls.pro index 2913e298..134a25e3 100644 --- a/examples/quick/controls/controls.pro +++ b/examples/quick/controls/controls.pro @@ -5,7 +5,8 @@ SUBDIRS += \ splitview \ tableview \ touch \ - basiclayouts + basiclayouts \ + styles qtHaveModule(widgets) { SUBDIRS += texteditor diff --git a/examples/quick/controls/styles/images/bubble.png b/examples/quick/controls/styles/images/bubble.png Binary files differnew file mode 100644 index 00000000..62aa1efe --- /dev/null +++ b/examples/quick/controls/styles/images/bubble.png diff --git a/examples/quick/controls/styles/images/button-pressed.png b/examples/quick/controls/styles/images/button-pressed.png Binary files differnew file mode 100644 index 00000000..d64cdaa7 --- /dev/null +++ b/examples/quick/controls/styles/images/button-pressed.png diff --git a/examples/quick/controls/styles/images/button.png b/examples/quick/controls/styles/images/button.png Binary files differnew file mode 100644 index 00000000..8ab41cc8 --- /dev/null +++ b/examples/quick/controls/styles/images/button.png diff --git a/examples/quick/controls/styles/images/progress-background.png b/examples/quick/controls/styles/images/progress-background.png Binary files differnew file mode 100644 index 00000000..55a069df --- /dev/null +++ b/examples/quick/controls/styles/images/progress-background.png diff --git a/examples/quick/controls/styles/images/progress-fill.png b/examples/quick/controls/styles/images/progress-fill.png Binary files differnew file mode 100644 index 00000000..b588c958 --- /dev/null +++ b/examples/quick/controls/styles/images/progress-fill.png diff --git a/examples/quick/controls/styles/images/slider-handle.png b/examples/quick/controls/styles/images/slider-handle.png Binary files differnew file mode 100644 index 00000000..ac4d4a0d --- /dev/null +++ b/examples/quick/controls/styles/images/slider-handle.png diff --git a/examples/quick/controls/styles/images/tab.png b/examples/quick/controls/styles/images/tab.png Binary files differnew file mode 100644 index 00000000..74fefab7 --- /dev/null +++ b/examples/quick/controls/styles/images/tab.png diff --git a/examples/quick/controls/styles/images/tab_selected.png b/examples/quick/controls/styles/images/tab_selected.png Binary files differnew file mode 100644 index 00000000..665400cc --- /dev/null +++ b/examples/quick/controls/styles/images/tab_selected.png diff --git a/examples/quick/controls/styles/images/textfield.png b/examples/quick/controls/styles/images/textfield.png Binary files differnew file mode 100644 index 00000000..1d4a38ab --- /dev/null +++ b/examples/quick/controls/styles/images/textfield.png diff --git a/examples/quick/controls/styles/main.cpp b/examples/quick/controls/styles/main.cpp new file mode 100644 index 00000000..0193c4f9 --- /dev/null +++ b/examples/quick/controls/styles/main.cpp @@ -0,0 +1,52 @@ +/**************************************************************************** +** +** Copyright (C) 2014 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** This file is part of the Qt Quick Controls module of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names +** of its contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +#include <QGuiApplication> +#include <QQmlApplicationEngine> + +int main(int argc, char *argv[]) +{ + QGuiApplication app(argc, argv); + + QQmlApplicationEngine engine; + engine.load(QUrl(QStringLiteral("qrc:/main.qml"))); + + return app.exec(); +} diff --git a/examples/quick/controls/styles/main.qml b/examples/quick/controls/styles/main.qml new file mode 100644 index 00000000..e804b4a8 --- /dev/null +++ b/examples/quick/controls/styles/main.qml @@ -0,0 +1,378 @@ +/**************************************************************************** +** +** Copyright (C) 2014 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** This file is part of the Qt Quick Controls module of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names +** of its contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.2 +import QtQuick.Window 2.2 +import QtQuick.Layouts 1.1 +import QtQuick.Controls 1.2 +import QtQuick.Controls.Styles 1.2 +import QtQuick.Particles 2.0 + +Window { + id: window + width: 640 + height: 480 + visible: true + title: qsTr("Styles Example") + + property int columnWidth: window.width / 5 + + GridLayout { + rowSpacing: 12 + columnSpacing: 30 + anchors.top: parent.top + anchors.horizontalCenter: parent.horizontalCenter + anchors.margins: 30 + + Button { + text: "Button" + implicitWidth: columnWidth + } + Button { + text: "Button" + style: ButtonStyle { + background: BorderImage { + source: control.pressed ? "images/button-pressed.png" : "images/button.png" + border.left: 4 ; border.right: 4 ; border.top: 4 ; border.bottom: 4 + } + } + implicitWidth: columnWidth + } + Button { + text: "Button" + style: buttonStyle + implicitWidth: columnWidth + } + + TextField { + Layout.row: 1 + implicitWidth: columnWidth + } + TextField { + style: TextFieldStyle { + background: BorderImage { + source: "images/textfield.png" + border.left: 4 ; border.right: 4 ; border.top: 4 ; border.bottom: 4 + } + } + implicitWidth: columnWidth + } + TextField { + style: textFieldStyle + implicitWidth: columnWidth + } + + Slider { + id: slider1 + Layout.row: 2 + value: 0.5 + implicitWidth: columnWidth + } + Slider { + id: slider2 + value: 0.5 + implicitWidth: columnWidth + style: SliderStyle { + groove: BorderImage { + height: 6 + border.top: 1 + border.bottom: 1 + source: "images/progress-background.png" + border.left: 6 + border.right: 6 + BorderImage { + anchors.verticalCenter: parent.verticalCenter + source: "images/progress-fill.png" + border.left: 5 ; border.top: 1 + border.right: 5 ; border.bottom: 1 + width: styleData.handlePosition + height: parent.height + } + } + handle: Item { + width: 13 + height: 13 + Image { + anchors.centerIn: parent + source: "images/slider-handle.png" + } + } + } + } + Slider { + id: slider3 + value: 0.5 + implicitWidth: columnWidth + style: sliderStyle + } + + ProgressBar { + Layout.row: 3 + value: slider1.value + implicitWidth: columnWidth + } + ProgressBar { + value: slider2.value + implicitWidth: columnWidth + style: progressBarStyle + } + ProgressBar { + value: slider3.value + implicitWidth: columnWidth + style: progressBarStyle2 + } + + CheckBox { + text: "CheckBox" + Layout.row: 4 + implicitWidth: columnWidth + } + + RadioButton { + text: "RadioButton" + implicitWidth: columnWidth + } + + ComboBox { + model: ["Paris", "Oslo", "New York"] + implicitWidth: columnWidth + } + + TabView { + Layout.row: 5 + Layout.columnSpan: 3 + Layout.fillWidth: true + implicitHeight: 30 + Tab { title: "One" ; Item {} } + Tab { title: "Two" ; Item {} } + Tab { title: "Three" ; Item {} } + Tab { title: "Four" ; Item {} } + } + + TabView { + Layout.row: 6 + Layout.columnSpan: 3 + Layout.fillWidth: true + implicitHeight: 30 + Tab { title: "One" ; Item {}} + Tab { title: "Two" ; Item {}} + Tab { title: "Three" ; Item {}} + Tab { title: "Four" ; Item {}} + style: tabViewStyle + } + } + + // Style delegates: + + property Component buttonStyle: ButtonStyle { + background: Rectangle { + implicitHeight: 22 + implicitWidth: columnWidth + color: control.pressed ? "darkGray" : control.activeFocus ? "#cdd" : "#ccc" + antialiasing: true + border.color: "gray" + radius: height/2 + Rectangle { + anchors.fill: parent + anchors.margins: 1 + color: "transparent" + antialiasing: true + visible: !control.pressed + border.color: "#aaffffff" + radius: height/2 + } + } + } + + property Component textFieldStyle: TextFieldStyle { + background: Rectangle { + implicitWidth: columnWidth + color: "#f0f0f0" + antialiasing: true + border.color: "gray" + radius: height/2 + Rectangle { + anchors.fill: parent + anchors.margins: 1 + color: "transparent" + antialiasing: true + border.color: "#aaffffff" + radius: height/2 + } + } + } + + property Component sliderStyle: SliderStyle { + handle: Rectangle { + width: 18 + height: 18 + color: control.pressed ? "darkGray" : "lightGray" + border.color: "gray" + antialiasing: true + radius: height/2 + Rectangle { + anchors.fill: parent + anchors.margins: 1 + color: "transparent" + antialiasing: true + border.color: "#eee" + radius: height/2 + } + } + + groove: Rectangle { + height: 8 + implicitWidth: columnWidth + implicitHeight: 22 + + antialiasing: true + color: "#ccc" + border.color: "#777" + radius: height/2 + Rectangle { + anchors.fill: parent + anchors.margins: 1 + color: "transparent" + antialiasing: true + border.color: "#66ffffff" + radius: height/2 + } + } + } + + property Component progressBarStyle: ProgressBarStyle { + background: BorderImage { + source: "images/progress-background.png" + border.left: 2 ; border.right: 2 ; border.top: 2 ; border.bottom: 2 + } + progress: Item { + clip: true + BorderImage { + anchors.fill: parent + anchors.rightMargin: (control.value < control.maximumValue) ? -4 : 0 + source: "images/progress-fill.png" + border.left: 10 ; border.right: 10 + Rectangle { + width: 1 + color: "#a70" + opacity: 0.8 + anchors.top: parent.top + anchors.bottom: parent.bottom + anchors.bottomMargin: 1 + anchors.right: parent.right + visible: control.value < control.maximumValue + anchors.rightMargin: -parent.anchors.rightMargin + } + } + ParticleSystem { id: bubbles; running: visible } + ImageParticle { + id: fireball + system: bubbles + source: "images/bubble.png" + opacity: 0.7 + } + Emitter { + system: bubbles + anchors.bottom: parent.bottom + anchors.margins: 4 + anchors.bottomMargin: -4 + anchors.left: parent.left + anchors.right: parent.right + size: 4 + sizeVariation: 4 + acceleration: PointDirection { y: -6; xVariation: 3 } + emitRate: 6 * control.value + lifeSpan: 3000 + } + } + } + + property Component progressBarStyle2: ProgressBarStyle { + background: Rectangle { + implicitWidth: columnWidth + implicitHeight: 24 + color: "#f0f0f0" + border.color: "gray" + } + progress: Rectangle { + color: "#ccc" + border.color: "gray" + Rectangle { + color: "transparent" + border.color: "#44ffffff" + anchors.fill: parent + anchors.margins: 1 + } + } + } + + property Component tabViewStyle: TabViewStyle { + tabOverlap: 16 + frameOverlap: 4 + tabsMovable: true + + frame: Rectangle { + gradient: Gradient { + GradientStop { color: "#e5e5e5" ; position: 0 } + GradientStop { color: "#e0e0e0" ; position: 1 } + } + border.color: "#898989" + Rectangle { anchors.fill: parent ; anchors.margins: 1 ; border.color: "white" ; color: "transparent" } + } + tab: Item { + property int totalOverlap: tabOverlap * (control.count - 1) + implicitWidth: Math.min ((styleData.availableWidth + totalOverlap)/control.count - 4, image.sourceSize.width) + implicitHeight: image.sourceSize.height + BorderImage { + id: image + anchors.fill: parent + source: styleData.selected ? "images/tab_selected.png" : "images/tab.png" + border.left: 30 + smooth: false + border.right: 30 + } + Text { + text: styleData.title + anchors.centerIn: parent + } + } + leftCorner: Item { implicitWidth: 12 } + } +} diff --git a/examples/quick/controls/styles/styles.pro b/examples/quick/controls/styles/styles.pro new file mode 100644 index 00000000..03648f4c --- /dev/null +++ b/examples/quick/controls/styles/styles.pro @@ -0,0 +1,10 @@ +TEMPLATE = app +TARGET = styles +QT += qml quick + +SOURCES += \ + main.cpp +RESOURCES += \ + styles.qrc +OTHER_FILES += \ + main.qml diff --git a/examples/quick/controls/styles/styles.qrc b/examples/quick/controls/styles/styles.qrc new file mode 100644 index 00000000..d2300c6f --- /dev/null +++ b/examples/quick/controls/styles/styles.qrc @@ -0,0 +1,14 @@ +<RCC> + <qresource prefix="/"> + <file>main.qml</file> + <file>images/bubble.png</file> + <file>images/button.png</file> + <file>images/button-pressed.png</file> + <file>images/progress-background.png</file> + <file>images/progress-fill.png</file> + <file>images/slider-handle.png</file> + <file>images/tab.png</file> + <file>images/tab_selected.png</file> + <file>images/textfield.png</file> + </qresource> +</RCC> diff --git a/src/controls/doc/images/qtquickcontrols-example-styles.png b/src/controls/doc/images/qtquickcontrols-example-styles.png Binary files differnew file mode 100644 index 00000000..901ff75c --- /dev/null +++ b/src/controls/doc/images/qtquickcontrols-example-styles.png diff --git a/src/controls/doc/src/qtquickcontrols-examples.qdoc b/src/controls/doc/src/qtquickcontrols-examples.qdoc index 4f1ab219..8b8c1469 100644 --- a/src/controls/doc/src/qtquickcontrols-examples.qdoc +++ b/src/controls/doc/src/qtquickcontrols-examples.qdoc @@ -465,3 +465,15 @@ \endcode \include examples-run.qdocinc */ + +/*! + \example styles + \title Qt Quick Controls - Styles Example + \ingroup qtquickcontrols_examples + \brief Demonstrates custom styles + \image qtquickcontrols-example-styles.png + + This example shows how to create custom styles for \l{Qt Quick Controls}. + + \include examples-run.qdocinc +*/ |
