diff options
Diffstat (limited to 'src/controls/doc/src')
| -rw-r--r-- | src/controls/doc/src/qtquickcontrolsstyles-index.qdoc | 41 | ||||
| -rw-r--r-- | src/controls/doc/src/styling-circulargauge.qdoc | 145 | ||||
| -rw-r--r-- | src/controls/doc/src/styling-gauge.qdoc | 129 |
3 files changed, 315 insertions, 0 deletions
diff --git a/src/controls/doc/src/qtquickcontrolsstyles-index.qdoc b/src/controls/doc/src/qtquickcontrolsstyles-index.qdoc index d9c813e4..59951190 100644 --- a/src/controls/doc/src/qtquickcontrolsstyles-index.qdoc +++ b/src/controls/doc/src/qtquickcontrolsstyles-index.qdoc @@ -48,6 +48,11 @@ \internal */ +/*! + \group stylingtutorials + \title Styling Tutorials +*/ + /*! \page qtquickcontrolsstyles-index.html @@ -66,12 +71,48 @@ import QtQuick.Controls.Styles 1.4 \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. + + \image tumbler-flat-style.png + \caption The Flat Style Tumbler. + + \section2 Selecting Styles + + 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 Styling Views \annotatedlist viewsstyling \section1 Styling Controls \annotatedlist controlsstyling + \section1 Styling Tutorials + \annotatedlist stylingtutorials + \section1 Related information \list diff --git a/src/controls/doc/src/styling-circulargauge.qdoc b/src/controls/doc/src/styling-circulargauge.qdoc new file mode 100644 index 00000000..e0260db4 --- /dev/null +++ b/src/controls/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 stylingtutorials + + \target styling-circulargauge-needle + \section2 The Needle Component + + The \l {QtQuick.Controls.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.Controls.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.Controls.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.Controls.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.Controls.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/controls/doc/src/styling-gauge.qdoc b/src/controls/doc/src/styling-gauge.qdoc new file mode 100644 index 00000000..195cc4c8 --- /dev/null +++ b/src/controls/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 stylingtutorials + + 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.Controls.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.Controls.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.Controls.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.Controls.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 +*/ + |