Doc: Added images and missing snippets

Task-number: QTBUG-33799
Change-Id: I582518a73276d47cf63cf31411b5176a90acab6f
Reviewed-by: J-P Nurmi <jpnurmi@digia.com>

52 files changed, 348 insertions, 112 deletions

diff --git a/src/controls/ApplicationWindow.qml b/src/controls/ApplicationWindow.qml
index 240965c4..863a2223 100644
--- a/src/controls/ApplicationWindow.qml
+++ b/src/controls/ApplicationWindow.qml
@@ -51,6 +51,8 @@ import QtQuick.Controls.Private 1.0
     \ingroup applicationwindow
     \brief Provides a top-level application window.
 
+    \image applicationwindow.png
+
     ApplicationWindow is a \l Window that adds convenience for positioning items,
     such as \l MenuBar, \l ToolBar, and \l StatusBar in a platform independent
     manner.
@@ -77,6 +79,9 @@ import QtQuick.Controls.Private 1.0
         }
     }
     \endcode
+
+    The \l{Qt Quick Controls - Gallery} example is a good starting
+    point to explore this type.
 */
 
 Window {
diff --git a/src/controls/BusyIndicator.qml b/src/controls/BusyIndicator.qml
index e995579d..761c0675 100644
--- a/src/controls/BusyIndicator.qml
+++ b/src/controls/BusyIndicator.qml
@@ -49,9 +49,19 @@ import QtQuick.Controls.Private 1.0
     \ingroup controls
     \brief A busy indicator.
 
+    \image busyindicator.png
+
     The busy indicator should be used to indicate activity while content is
     being loaded or the UI is blocked waiting for a resource to become available.
 
+    The following snippet shows how to use the BusyIndicator:
+
+    \qml
+    BusyIndicator {
+        running: image.status === Image.Loading
+    }
+    \endqml
+
     You can create a custom appearance for a Busy Indicator by
     assigning a \l {QtQuick.Controls.Styles::BusyIndicatorStyle}{BusyIndicatorStyle}.
  */
diff --git a/src/controls/Button.qml b/src/controls/Button.qml
index facb711c..74d46bf1 100644
--- a/src/controls/Button.qml
+++ b/src/controls/Button.qml
@@ -49,11 +49,19 @@ import QtQuick.Controls.Private 1.0
     \ingroup controls
     \brief A push button with a text label.
 
+    \image button.png
+
     The push button is perhaps the most commonly used widget in any graphical
     user interface. Pushing (or clicking) a button commands the computer to
     perform some action or answer a question. Common examples of buttons are
     OK, Apply, Cancel, Close, Yes, No, and Help buttons.
 
+    \qml
+    Button {
+        text: "Button"
+    }
+    \endqml
+
     Button is similar to the QPushButton widget.
 
     You can create a custom appearance for a Button by
diff --git a/src/controls/Calendar.qml b/src/controls/Calendar.qml
index 11b20b37..5ba539b0 100644
--- a/src/controls/Calendar.qml
+++ b/src/controls/Calendar.qml
@@ -50,6 +50,8 @@ import QtQuick.Controls.Private 1.0
     \ingroup controls
     \brief Provides a way to select dates from a calendar
 
+    \image calendar.png
+
     Calendar allows selection of dates from a grid of days, similar to
     QCalendarWidget.
 
@@ -67,6 +69,12 @@ import QtQuick.Controls.Private 1.0
     Week numbers can be displayed by setting the weekNumbersVisible property to
     \c true.
 
+    \qml
+    Calendar{
+        weekNumbersVisible: true
+    }
+    \endqml
+
     You can create a custom appearance for Calendar by assigning a
     \l {QtQuick.Controls.Styles::CalendarStyle}{CalendarStyle}.
 */
diff --git a/src/controls/CheckBox.qml b/src/controls/CheckBox.qml
index 66b49345..524ecc92 100644
--- a/src/controls/CheckBox.qml
+++ b/src/controls/CheckBox.qml
@@ -49,6 +49,8 @@ import QtQuick.Controls.Private 1.0
     \ingroup controls
     \brief A checkbox with a text label.
 
+    \image checkbox.png
+
     A CheckBox is an option button that can be toggled on (checked) or off
     (unchecked). Checkboxes are typically used to represent features in an
     application that can be enabled or disabled without affecting others.
@@ -74,12 +76,14 @@ import QtQuick.Controls.Private 1.0
     Column {
         CheckBox {
             text: qsTr("Breakfast")
+            checked: true
         }
         CheckBox {
             text: qsTr("Lunch")
         }
         CheckBox {
             text: qsTr("Dinner")
+            checked: true
         }
     }
     \endqml
diff --git a/src/controls/ComboBox.qml b/src/controls/ComboBox.qml
index cc949153..a4a97c0b 100644
--- a/src/controls/ComboBox.qml
+++ b/src/controls/ComboBox.qml
@@ -49,7 +49,10 @@ import QtQuick.Controls.Private 1.0
     \ingroup controls
     \brief Provides a drop-down list functionality.
 
-    Add items to the comboBox by assigning it a ListModel, or a list of strings to the \l model property.
+    \image combobox.png
+
+    Add items to the ComboBox by assigning it a ListModel, or a list of strings
+    to the \l model property.
 
     \qml
        ComboBox {
diff --git a/src/controls/GroupBox.qml b/src/controls/GroupBox.qml
index 9ed90fa5..d17d8cb8 100644
--- a/src/controls/GroupBox.qml
+++ b/src/controls/GroupBox.qml
@@ -51,6 +51,8 @@ import QtQuick.Layouts 1.0
     \ingroup controls
     \brief GroupBox provides a group box frame with a title.
 
+    \image groupbox.png
+
     A group box provides a frame, a title on top and displays various other controls inside itself. Group boxes can also be checkable.
 
     Child controls in checkable group boxes are enabled or disabled depending on whether or not the group box is checked.
@@ -63,24 +65,29 @@ import QtQuick.Layouts 1.0
     The implicit size of the GroupBox is calculated based on the size of its content. If you want to anchor
     items inside the group box, you must specify an explicit width and height on the GroupBox itself.
 
-    The following example shows how we use a GroupBox with a column:
+    The following example shows how we use a GroupBox:
 
     \qml
-        GroupBox {
-            title: qsTr("Package selection")
-            Column {
-                spacing: 2
-                CheckBox {
-                    text: qsTr("Update system")
-                }
-                CheckBox {
-                    text: qsTr("Update applications")
-                }
-                CheckBox {
-                    text: qsTr("Update documentation")
-                }
+    GroupBox {
+        title: "Joining for?"
+
+        Column {
+            spacing: 10
+
+            CheckBox {
+                text: "Breakfast"
+                checked: true
+            }
+            CheckBox {
+                text: "Lunch"
+                checked: false
+            }
+            CheckBox {
+                text: "Dinner"
+                checked: true
             }
         }
+    }
     \endqml
 
     \sa CheckBox, RadioButton, Layout
diff --git a/src/controls/Label.qml b/src/controls/Label.qml
index 7ec47490..e3052f44 100644
--- a/src/controls/Label.qml
+++ b/src/controls/Label.qml
@@ -47,7 +47,9 @@ import QtQuick 2.2
     \ingroup controls
     \brief A text label.
 
-    In addition to the normal \l Text element, Label follows the font and
+    \image label.png
+
+    In addition to the normal \l Text type, Label follows the font and
     color scheme of the system.
     Use the \c text property to assign a text to the label. For other properties
     check \l Text.
diff --git a/src/controls/Menu.qml b/src/controls/Menu.qml
index 0505a0a6..30177e4b 100644
--- a/src/controls/Menu.qml
+++ b/src/controls/Menu.qml
@@ -51,6 +51,8 @@ import QtQuick.Controls.Private 1.0
     \brief Provides a menu component for use in menu bars, as context menu,
     and other popup menus.
 
+    \image menu.png
+
     \code
     Menu {
         title: "Edit"
diff --git a/src/controls/MenuBar.qml b/src/controls/MenuBar.qml
index 4d577930..19e405ae 100644
--- a/src/controls/MenuBar.qml
+++ b/src/controls/MenuBar.qml
@@ -50,19 +50,27 @@ import QtQuick.Controls.Private 1.0
     \ingroup applicationwindow
     \brief Provides a horizontal menu bar.
 
+    \image menubar.png
+
+    MenuBar can be added to an \l ApplicationWindow, providing menu options
+    to access additional functionality of the application.
+
     \code
-    MenuBar {
-        Menu {
-            title: "File"
-            MenuItem { text: "Open..." }
-            MenuItem { text: "Close" }
-        }
+    ApplicationWindow {
+        ...
+        menuBar: MenuBar {
+            Menu {
+                title: "File"
+                MenuItem { text: "Open..." }
+                MenuItem { text: "Close" }
+            }
 
-        Menu {
-            title: "Edit"
-            MenuItem { text: "Cut" }
-            MenuItem { text: "Copy" }
-            MenuItem { text: "Paste" }
+            Menu {
+                title: "Edit"
+                MenuItem { text: "Cut" }
+                MenuItem { text: "Copy" }
+                MenuItem { text: "Paste" }
+            }
         }
     }
     \endcode
diff --git a/src/controls/ProgressBar.qml b/src/controls/ProgressBar.qml
index 6a001f14..6af20e03 100644
--- a/src/controls/ProgressBar.qml
+++ b/src/controls/ProgressBar.qml
@@ -49,9 +49,22 @@ import QtQuick.Controls.Private 1.0
     \ingroup controls
     \brief A progress indicator.
 
+    \image progressbar.png
+
     The ProgressBar is used to give an indication of the progress of an operation.
     \l value is updated regularly and must be between \l minimumValue and \l maximumValue.
 
+    \code
+    Column {
+        ProgressBar {
+            value: 0.5
+        }
+        ProgressBar {
+            indeterminate: true
+        }
+    }
+    \endcode
+
     You can create a custom appearance for a ProgressBar by
     assigning a \l {QtQuick.Controls.Styles::ProgressBarStyle}{ProgressBarStyle}.
 */
diff --git a/src/controls/RadioButton.qml b/src/controls/RadioButton.qml
index 730e3448..e51abea8 100644
--- a/src/controls/RadioButton.qml
+++ b/src/controls/RadioButton.qml
@@ -49,25 +49,28 @@ import QtQuick.Controls.Private 1.0
     \ingroup controls
     \brief A radio button with a text label.
 
+    \image radiobutton.png
+
     A RadioButton is an option button that can be switched on (checked) or off
     (unchecked). Radio buttons typically present the user with a "one of many"
-    choice. In a group of radio buttons, only one radio button at a time can be
-    checked; if the user selects another button, the previously selected button
-    is switched off.
+    choices. In a group of radio buttons, only one radio button can be
+    checked at a time; if the user selects another button, the previously
+    selected button is switched off.
 
     \qml
     GroupBox {
-        title: qsTr("Search")
-        Column {
-            ExclusiveGroup { id: group }
+        title: "Tab Position"
+
+        RowLayout {
+            ExclusiveGroup { id: tabPositionGroup }
             RadioButton {
-                text: qsTr("From top")
-                exclusiveGroup: group
+                text: "Top"
                 checked: true
+                exclusiveGroup: tabPositionGroup
             }
             RadioButton {
-                text: qsTr("From cursor")
-                exclusiveGroup: group
+                text: "Bottom"
+                exclusiveGroup: tabPositionGroup
             }
         }
     }
diff --git a/src/controls/ScrollView.qml b/src/controls/ScrollView.qml
index 431fadd1..37a87215 100644
--- a/src/controls/ScrollView.qml
+++ b/src/controls/ScrollView.qml
@@ -50,6 +50,8 @@ import QtQuick.Controls.Styles 1.1
     \ingroup views
     \brief Provides a scrolling view within another Item.
 
+    \image scrollview.png
+
     A ScrollView can be used either to replace a \l Flickable or decorate an
     existing \l Flickable. Depending on the platform, it will add scroll bars and
     a content frame.
diff --git a/src/controls/Slider.qml b/src/controls/Slider.qml
index 0f7fc033..8746a769 100644
--- a/src/controls/Slider.qml
+++ b/src/controls/Slider.qml
@@ -49,13 +49,15 @@ import QtQuick.Controls.Private 1.0
     \ingroup controls
     \brief Provides a vertical or horizontal slider control.
 
+    \image slider.png
+
     The slider is the classic control for providing a bounded value. It lets
     the user move a slider handle along a horizontal or vertical groove
     and translates the handle's position into a value within the legal range.
 
     \code
     Slider {
-        onValueChanged: print(value)
+        value: 0.5
     }
     \endcode
 
diff --git a/src/controls/SpinBox.qml b/src/controls/SpinBox.qml
index 6a8a9548..c0f331b3 100644
--- a/src/controls/SpinBox.qml
+++ b/src/controls/SpinBox.qml
@@ -49,6 +49,8 @@ import QtQuick.Controls.Private 1.0
     \ingroup controls
     \brief Provides a spin box control.
 
+    \image spinbox.png
+
     SpinBox allows the user to choose a value by clicking the up or down buttons, or by
     pressing up or down on the keyboard. The user can also type the value in manually.
 
diff --git a/src/controls/SplitView.qml b/src/controls/SplitView.qml
index dadff049..e9f9dddc 100644
--- a/src/controls/SplitView.qml
+++ b/src/controls/SplitView.qml
@@ -51,6 +51,8 @@ import QtQuick.Window 2.1
     \ingroup views
     \brief Lays out items with a draggable splitter between each item.
 
+    \image splitview.png
+
     SplitView is a control that lays out items horizontally or
     vertically with a draggable splitter between each item.
 
@@ -92,26 +94,39 @@ import QtQuick.Window 2.1
     could do the following:
 
     \qml
-       SplitView {
-           anchors.fill: parent
-           orientation: Qt.Horizontal
-
-           Rectangle {
-               width: 200
-               Layout.maximumWidth: 400
-               color: "gray"
-           }
-           Rectangle {
-               id: centerItem
-               Layout.minimumWidth: 50
-               Layout.fillWidth: true
-               color: "darkgray"
-           }
-           Rectangle {
-               width: 200
-               color: "gray"
-           }
-       }
+    SplitView {
+        anchors.fill: parent
+        orientation: Qt.Horizontal
+
+        Rectangle {
+            width: 200
+            Layout.maximumWidth: 400
+            color: "lightblue"
+            Text {
+                text: "View 1"
+                anchors.centerIn: parent
+            }
+        }
+        Rectangle {
+            id: centerItem
+            Layout.minimumWidth: 50
+            Layout.fillWidth: true
+            color: "lightgray"
+            Text {
+                text: "View 2"
+                anchors.centerIn: parent
+            }
+        }
+        Rectangle {
+            width: 200
+            color: "lightgreen"
+            Text {
+                text: "View 3"
+                anchors.centerIn: parent
+            }
+        }
+    }
+
    \endqml
 */
 
diff --git a/src/controls/StackView.qml b/src/controls/StackView.qml
index 2f3d5753..bd9c4de9 100644
--- a/src/controls/StackView.qml
+++ b/src/controls/StackView.qml
@@ -51,11 +51,36 @@ import QtQuick.Controls.Private 1.0
 
     \brief Provides a stack-based navigation model.
 
+    \image stackview.png
+
     StackView implements a stack-based navigation model, which can be used
     with a set of interlinked information pages. Items are pushed onto the stack
     as the user navigates deeper into the material, and popped off again when he
     chooses to go back.
 
+    The \l{Qt Quick Controls - Touch Gallery}{touch gallery} example is a good
+    starting point to understand how StackView works. The following snippet
+    from the example shows how it can be used:
+
+    \qml
+    StackView {
+        id: stack
+        initialItem: view
+
+        Component {
+            id: view
+
+            MouseArea {
+                Text {
+                    text: stack.depth
+                    anchors.centerIn: parent
+                }
+                onClicked: stack.push(view)
+            }
+        }
+    }
+    \endqml
+
     \section1 Using StackView in an Application
     Using the StackView in the application is typically a simple matter of adding
     the StackView as a child of a Window. The stack is usually anchored to the
diff --git a/src/controls/Switch.qml b/src/controls/Switch.qml
index bafb567c..443dec4b 100644
--- a/src/controls/Switch.qml
+++ b/src/controls/Switch.qml
@@ -49,7 +49,10 @@ import QtQuick.Controls.Private 1.0
     \ingroup controls
     \brief A switch.
 
-    A Switch is an option button that can be switched on (checked) or off
+    \image switch.png
+    \caption On and Off states of a Switch.
+
+    A Switch is a toggle button that can be switched on (checked) or off
     (unchecked). Switches are typically used to represent features in an
     application that can be enabled or disabled without affecting others.
 
diff --git a/src/controls/Tab.qml b/src/controls/Tab.qml
index 8957806a..355fb44a 100644
--- a/src/controls/Tab.qml
+++ b/src/controls/Tab.qml
@@ -49,6 +49,8 @@ import QtQuick 2.2
 
     A Tab item inherits from Loader and provides a similar
     api.
+
+    \sa TabView
 */
 
 Loader {
diff --git a/src/controls/TabView.qml b/src/controls/TabView.qml
index 440606e0..f8fd3ff1 100644
--- a/src/controls/TabView.qml
+++ b/src/controls/TabView.qml
@@ -49,7 +49,30 @@ import QtQuick.Controls.Private 1.0
     \ingroup views
     \brief A control that allows the user to select one of multiple stacked items.
 
-    You can create a custom appearance for a TabView by
+    \image tabview.png
+
+    TabView provides tab-based navigation model for your application.
+    For example, the following snippet uses tabs to present rectangles of
+    different color on each tab page:
+
+    \qml
+    TabView {
+        Tab {
+            title: "Red"
+            Rectangle { color: "red" }
+        }
+        Tab {
+            title: "Blue"
+            Rectangle { color: "blue" }
+        }
+        Tab {
+            title: "Green"
+            Rectangle { color: "green" }
+        }
+    }
+    \endqml
+
+    \note You can create a custom appearance for a TabView by
     assigning a \l {QtQuick.Controls.Styles::TabViewStyle}{TabViewStyle}.
 */
 
diff --git a/src/controls/TableViewColumn.qml b/src/controls/TableViewColumn.qml
index 931d32da..75565e4b 100644
--- a/src/controls/TableViewColumn.qml
+++ b/src/controls/TableViewColumn.qml
@@ -46,6 +46,21 @@ import QtQuick 2.2
     \since 5.1
     \ingroup viewitems
     \brief Used to define columns in a \l TableView.
+
+    \image tableview.png
+
+    TableViewColumn represents a column within a TableView. It provides
+    properties to decide how the data in that column is presented.
+
+    \qml
+    TableView {
+        TableViewColumn { role: "title"; title: "Title"; width: 100 }
+        TableViewColumn { role: "author"; title: "Author"; width: 200 }
+        model: libraryModel
+    }
+    \endqml
+
+    \sa TableView
 */
 
 QtObject {
diff --git a/src/controls/TextArea.qml b/src/controls/TextArea.qml
index 27747968..74ed716e 100644
--- a/src/controls/TextArea.qml
+++ b/src/controls/TextArea.qml
@@ -48,12 +48,18 @@ import QtQuick.Controls.Private 1.0
     \ingroup controls
     \brief Displays multiple lines of editable formatted text.
 
+    \image textarea.png
+
     It can display both plain and rich text. For example:
 
     \qml
     TextArea {
         width: 240
-        text: "<b>Hello</b> <i>World!</i>"
+        text:
+            "Lorem ipsum dolor sit amet, consectetur adipisicing elit, " +
+            "sed do eiusmod tempor incididunt ut labore et dolore magna " +
+            "aliqua. Ut enim ad minim veniam, quis nostrud exercitation " +
+            "ullamco laboris nisi ut aliquip ex ea commodo cosnsequat. ";
     }
     \endqml
 
diff --git a/src/controls/TextField.qml b/src/controls/TextField.qml
index 32992b73..58498f13 100644
--- a/src/controls/TextField.qml
+++ b/src/controls/TextField.qml
@@ -49,11 +49,19 @@ import QtQuick.Controls.Private 1.0
     \ingroup controls
     \brief Displays a single line of editable plain text.
 
+    \image textfield.png
+
     TextField is used to accept a line of text input. Input constraints can be
     placed on a TextField item (for example, through a \l validator or \l
     inputMask). Setting \l echoMode to an appropriate value enables
     TextField to be used for a password input field.
 
+    \qml
+      TextField {
+          placeholderText: qsTr("Enter name")
+      }
+    \endqml
+
     You can create a custom appearance for a TextField by
     assigning a \l {QtQuick.Controls.Styles::TextFieldStyle}{TextFieldStyle}.
 
diff --git a/src/controls/ToolBar.qml b/src/controls/ToolBar.qml
index 90f9d4a3..8fe4c97d 100644
--- a/src/controls/ToolBar.qml
+++ b/src/controls/ToolBar.qml
@@ -49,6 +49,8 @@ import QtQuick.Controls.Private 1.0
     \ingroup applicationwindow
     \brief Contains ToolButton and related controls.
 
+    \image toolbar.png
+
     The common way of using ToolBar is in relation to \l ApplicationWindow. It
     provides styling and is generally designed to work well with ToolButton as
     well as other controls.
@@ -61,15 +63,26 @@ import QtQuick.Controls.Private 1.0
     Otherwise the height is platform dependent.
 
     \code
-    import QtQuick.Controls 1.2
-    import QtQuick.Layouts 1.0
-
     ApplicationWindow {
-        toolBar: ToolBar {
+        ...
+        toolBar:ToolBar {
             RowLayout {
-                ToolButton { ... }
-                ToolButton { ... }
-                ToolButton { ... }
+                anchors.fill: parent
+                ToolButton {
+                    iconSource: "new.png"
+                }
+                ToolButton {
+                    iconSource: "open.png"
+                }
+                ToolButton {
+                    iconSource: "save-as.png"
+                }
+                Item { Layout.fillWidth: true }
+                CheckBox {
+                    text: "Enabled"
+                    checked: true
+                    Layout.alignment: Qt.AlignRight
+                }
             }
         }
     }
diff --git a/src/controls/ToolButton.qml b/src/controls/ToolButton.qml
index 8bc466ea..d688e2b6 100644
--- a/src/controls/ToolButton.qml
+++ b/src/controls/ToolButton.qml
@@ -49,14 +49,34 @@ import QtQuick.Controls.Private 1.0
     \ingroup controls
     \brief Provides a button type that is typically used within a ToolBar.
 
-     ToolButton is functionally similar to \l {QtQuick.Controls::}{Button}, but
-     can provide a look that is more suitable within a \l ToolBar.
+    \image toolbar.png
 
-     \code
-     ToolButton {
-        iconSource: "edit-cut.png"
-     }
-     \endcode
+    ToolButton is functionally similar to \l {QtQuick.Controls::}{Button}, but
+    can provide a look that is more suitable within a \l ToolBar.
+
+    \qml
+    ApplicationWindow {
+        ...
+        toolBar:ToolBar {
+            RowLayout {
+                ToolButton {
+                    iconSource: "new.png"
+                }
+                ToolButton {
+                    iconSource: "open.png"
+                }
+                ToolButton {
+                    iconSource: "save-as.png"
+                }
+                Item { Layout.fillWidth: true }
+                CheckBox {
+                    text: "Enabled"
+                    checked: true
+                }
+            }
+        }
+    }
+    \endqml
 
     You can create a custom appearance for a ToolButton by
     assigning a \l {QtQuick.Controls.Styles::ButtonStyle}{ButtonStyle}.
diff --git a/src/controls/doc/images/applicationwindow.png b/src/controls/doc/images/applicationwindow.png
new file mode 100644
index 00000000..f9d99d88
--- /dev/null
+++ b/src/controls/doc/images/applicationwindow.png
diff --git a/src/controls/doc/images/busyindicator.png b/src/controls/doc/images/busyindicator.png
new file mode 100644
index 00000000..99b36f35
--- /dev/null
+++ b/src/controls/doc/images/busyindicator.png
diff --git a/src/controls/doc/images/button.png b/src/controls/doc/images/button.png
new file mode 100644
index 00000000..f0742d05
--- /dev/null
+++ b/src/controls/doc/images/button.png
diff --git a/src/controls/doc/images/calendar.png b/src/controls/doc/images/calendar.png
new file mode 100644
index 00000000..a053dae2
--- /dev/null
+++ b/src/controls/doc/images/calendar.png
diff --git a/src/controls/doc/images/checkbox.png b/src/controls/doc/images/checkbox.png
new file mode 100644
index 00000000..daa7e68d
--- /dev/null
+++ b/src/controls/doc/images/checkbox.png
diff --git a/src/controls/doc/images/combobox.png b/src/controls/doc/images/combobox.png
new file mode 100644
index 00000000..63a6d3e8
--- /dev/null
+++ b/src/controls/doc/images/combobox.png
diff --git a/src/controls/doc/images/groupbox.png b/src/controls/doc/images/groupbox.png
new file mode 100644
index 00000000..1a55a521
--- /dev/null
+++ b/src/controls/doc/images/groupbox.png
diff --git a/src/controls/doc/images/label.png b/src/controls/doc/images/label.png
new file mode 100644
index 00000000..d55331ff
--- /dev/null
+++ b/src/controls/doc/images/label.png
diff --git a/src/controls/doc/images/menu.png b/src/controls/doc/images/menu.png
new file mode 100644
index 00000000..9d13faed
--- /dev/null
+++ b/src/controls/doc/images/menu.png
diff --git a/src/controls/doc/images/menubar.png b/src/controls/doc/images/menubar.png
new file mode 100644
index 00000000..6624bbef
--- /dev/null
+++ b/src/controls/doc/images/menubar.png
diff --git a/src/controls/doc/images/progressbar-intermediate.png b/src/controls/doc/images/progressbar-intermediate.png
new file mode 100644
index 00000000..17ac780b
--- /dev/null
+++ b/src/controls/doc/images/progressbar-intermediate.png
diff --git a/src/controls/doc/images/progressbar.png b/src/controls/doc/images/progressbar.png
new file mode 100644
index 00000000..eecd874c
--- /dev/null
+++ b/src/controls/doc/images/progressbar.png
diff --git a/src/controls/doc/images/radiobutton.png b/src/controls/doc/images/radiobutton.png
new file mode 100644
index 00000000..86e0bb81
--- /dev/null
+++ b/src/controls/doc/images/radiobutton.png
diff --git a/src/controls/doc/images/scrollview.png b/src/controls/doc/images/scrollview.png
new file mode 100644
index 00000000..d43cf2a2
--- /dev/null
+++ b/src/controls/doc/images/scrollview.png
diff --git a/src/controls/doc/images/slider.png b/src/controls/doc/images/slider.png
new file mode 100644
index 00000000..6a670d6c
--- /dev/null
+++ b/src/controls/doc/images/slider.png
diff --git a/src/controls/doc/images/spinbox.png b/src/controls/doc/images/spinbox.png
new file mode 100644
index 00000000..438ab1cc
--- /dev/null
+++ b/src/controls/doc/images/spinbox.png
diff --git a/src/controls/doc/images/splitview.png b/src/controls/doc/images/splitview.png
new file mode 100644
index 00000000..ae725d0d
--- /dev/null
+++ b/src/controls/doc/images/splitview.png
diff --git a/src/controls/doc/images/stackview.png b/src/controls/doc/images/stackview.png
new file mode 100644
index 00000000..6a9857e6
--- /dev/null
+++ b/src/controls/doc/images/stackview.png
diff --git a/src/controls/doc/images/switch.png b/src/controls/doc/images/switch.png
new file mode 100644
index 00000000..7e52b686
--- /dev/null
+++ b/src/controls/doc/images/switch.png
diff --git a/src/controls/doc/images/tableview.png b/src/controls/doc/images/tableview.png
index e7e5e27d..07070e43 100644
--- a/src/controls/doc/images/tableview.png
+++ b/src/controls/doc/images/tableview.png
diff --git a/src/controls/doc/images/tabview.png b/src/controls/doc/images/tabview.png
new file mode 100644
index 00000000..dbc89c68
--- /dev/null
+++ b/src/controls/doc/images/tabview.png
diff --git a/src/controls/doc/images/textarea.png b/src/controls/doc/images/textarea.png
new file mode 100644
index 00000000..7de2a968
--- /dev/null
+++ b/src/controls/doc/images/textarea.png
diff --git a/src/controls/doc/images/textfield.png b/src/controls/doc/images/textfield.png
new file mode 100644
index 00000000..1326e6a3
--- /dev/null
+++ b/src/controls/doc/images/textfield.png
diff --git a/src/controls/doc/images/toolbar.png b/src/controls/doc/images/toolbar.png
new file mode 100644
index 00000000..9f9204b6
--- /dev/null
+++ b/src/controls/doc/images/toolbar.png
diff --git a/src/controls/qquickaction.cpp b/src/controls/qquickaction.cpp
index 3d13f90b..12f5e504 100644
--- a/src/controls/qquickaction.cpp
+++ b/src/controls/qquickaction.cpp
@@ -58,6 +58,8 @@ QT_BEGIN_NAMESPACE
     \inqmlmodule QtQuick.Controls
     \brief Action provides an abstract user interface action that can be bound to items
 
+    \image menubar.png
+
     In applications many common commands can be invoked via menus, toolbar buttons, and keyboard
     shortcuts. Since the user expects each command to be performed in the same way, regardless of
     the user interface used, it is useful to represent each command as an \e action.
@@ -68,18 +70,11 @@ QT_BEGIN_NAMESPACE
 
     QtQuick Controls supports actions in \l {QtQuick.Controls::}{Button}, \l ToolButton, and \l MenuItem.
 
-    Example:
-    \qml
-        Action {
-            id: openAction
-            text: "&Open"
-            shortcut: "Ctrl+O"
-            iconSource: "images/document-open.png"
-            onTriggered: fileDialog.open()
-            tooltip: "Open an Image"
-        }
-    \endqml
-
+    \quotefromfile gallery/main.qml
+    \dots
+    \skipto Action
+    \printto SystemPalette
+    \dots
 */
 
 /*!
diff --git a/src/controls/qquickexclusivegroup.cpp b/src/controls/qquickexclusivegroup.cpp
index 7e991123..ba844ef3 100644
--- a/src/controls/qquickexclusivegroup.cpp
+++ b/src/controls/qquickexclusivegroup.cpp
@@ -97,34 +97,32 @@ static bool isChecked(const QObject *o)
     }
     \endcode
 
-    Several controls already support ExclusiveGroup, e.g. \l Action, \l MenuItem, \l {QtQuick.Controls::}{Button}, and \l RadioButton.
+    Several controls already support ExclusiveGroup, e.g. \l Action,
+    \l MenuItem, \l {QtQuick.Controls::}{Button}, and \l RadioButton.
 
-    Since ExclusiveGroup only supports \l Action as child items, we need to manually assign the \c exclusiveGroup
-    property for other objects.
+    As ExclusiveGroup only supports \l Action as child items, we need to manually
+    assign the \c exclusiveGroup property for other objects.
 
     \code
-    ExclusiveGroup { id: textAlignmentGroup }
-
-    Menu {
-        MenuItem {
-            text: "Alignt Left"
-            checkable: true
-            exclusiveGroup: textAlignmentGroup
-        }
-        MenuItem {
-            text: "Alignt Right"
-            checkable: true
-            exclusiveGroup: textAlignmentGroup
-        }
-        MenuItem {
-            text: "Center"
-            checkable: true
-            exclusiveGroup: textAlignmentGroup
-        }
-        MenuItem {
-            text: "Justify"
-            checkable: true
-            exclusiveGroup: textAlignmentGroup
+    GroupBox {
+        id: group2
+        title: qsTr("Tab Position")
+        Layout.fillWidth: true
+        RowLayout {
+            ExclusiveGroup { id: tabPositionGroup }
+            RadioButton {
+                id: topButton
+                text: qsTr("Top")
+                checked: true
+                exclusiveGroup: tabPositionGroup
+                Layout.minimumWidth: 100
+            }
+            RadioButton {
+                id: bottomButton
+                text: qsTr("Bottom")
+                exclusiveGroup: tabPositionGroup
+                Layout.minimumWidth: 100
+            }
         }
     }
     \endcode
diff --git a/src/controls/qquickmenuitem.cpp b/src/controls/qquickmenuitem.cpp
index 0167bebd..ef048e82 100644
--- a/src/controls/qquickmenuitem.cpp
+++ b/src/controls/qquickmenuitem.cpp
@@ -142,6 +142,38 @@ void QQuickMenuBase::setVisualItem(QQuickItem *item)
     \ingroup menus
     \brief MenuSeparator provides a separator for items inside a menu.
 
+    \image menu.png
+
+    \code
+    Menu {
+        text: "Edit"
+
+        MenuItem {
+            text: "Cut"
+            shortcut: "Ctrl+X"
+            onTriggered: ...
+        }
+
+        MenuItem {
+            text: "Copy"
+            shortcut: "Ctrl+C"
+            onTriggered: ...
+        }
+
+        MenuItem {
+            text: "Paste"
+            shortcut: "Ctrl+V"
+            onTriggered: ...
+        }
+        MenuSeparator { }
+        MenuItem {
+            text: "Do Nothing"
+            shortcut: "Ctrl+E,Shift+Ctrl+X"
+            enabled: false
+        }
+    }
+    \endcode
+
     \sa Menu, MenuItem
 */
 
@@ -259,6 +291,8 @@ void QQuickMenuText::updateIcon()
     \inqmlmodule QtQuick.Controls
     \brief MenuItem provides an item to add in a menu or a menu bar.
 
+    \image menu.png
+
     \code
     Menu {
         text: "Edit"