Doc: add a TabBar example with explicitly sized tabs

Task-number: QTBUG-55129
Change-Id: I0770996f741b431f9b003810df94fab8416b4cd3
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>

3 files changed, 66 insertions, 3 deletions

diff --git a/src/imports/controls/doc/images/qtquickcontrols2-tabbar-explicit.png b/src/imports/controls/doc/images/qtquickcontrols2-tabbar-explicit.png
new file mode 100644
index 00000000..cdfee3d0
--- /dev/null
+++ b/src/imports/controls/doc/images/qtquickcontrols2-tabbar-explicit.png
diff --git a/src/imports/controls/doc/snippets/screenshots/qtquickcontrols2-tabbar-explicit.qml b/src/imports/controls/doc/snippets/screenshots/qtquickcontrols2-tabbar-explicit.qml
new file mode 100644
index 00000000..f3e24f10
--- /dev/null
+++ b/src/imports/controls/doc/snippets/screenshots/qtquickcontrols2-tabbar-explicit.qml
@@ -0,0 +1,52 @@
+/****************************************************************************
+**
+** 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
+
+Item {
+    width: 360
+    height: childrenRect.height
+
+//! [1]
+TabBar {
+    width: parent.width
+    TabButton {
+        text: "First"
+        width: implicitWidth
+    }
+    TabButton {
+        text: "Second"
+        width: implicitWidth
+    }
+    TabButton {
+        text: "Third"
+        width: implicitWidth
+    }
+}
+//! [1]
+}
diff --git a/src/quicktemplates2/qquicktabbar.cpp b/src/quicktemplates2/qquicktabbar.cpp
index 27df1c99..6d11f72a 100644
--- a/src/quicktemplates2/qquicktabbar.cpp
+++ b/src/quicktemplates2/qquicktabbar.cpp
@@ -60,13 +60,24 @@ QT_BEGIN_NAMESPACE
 
     \snippet qtquickcontrols2-tabbar.qml 1
 
-    \section2 Flickable Tabs
+    \section2 Resizing Tabs
 
     By default, TabBar resizes its buttons to fit the width of the control.
     The available space is distributed equally to each button. The default
     resizing behavior can be overridden by setting an explicit width for the
-    buttons. If the total width of the buttons exceeds the available width
-    of the tab bar, it automatically becomes flickable.
+    buttons.
+
+    The following example illustrates how to keep each tab button at their
+    implicit size instead of being resized to fit the tabbar:
+
+    \borderedimage qtquickcontrols2-tabbar-explicit.png
+
+    \snippet qtquickcontrols2-tabbar-explicit.qml 1
+
+    \section2 Flickable Tabs
+
+    If the total width of the buttons exceeds the available width of the tab bar,
+    it automatically becomes flickable.
 
     \image qtquickcontrols2-tabbar-flickable.png