1 files changed, 129 insertions, 0 deletions
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
+*/
+