Doc: Describe managing stacked containers

Change-Id: Iee2c24067928e20abbaee3e8b3eff2b2106ba384
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

2 files changed, 30 insertions, 5 deletions

diff --git a/doc/src/qtquick/qtquick-designer.qdoc b/doc/src/qtquick/qtquick-designer.qdoc
index e1f55997a5..65e5c7de70 100644
--- a/doc/src/qtquick/qtquick-designer.qdoc
+++ b/doc/src/qtquick/qtquick-designer.qdoc
@@ -154,11 +154,14 @@
     up.
 
     To change the stacking order of an item, right-click it in the navigator or
-    on the canvas and
-    select \uicontrol {Stack (z)}. You can raise or lower the stack value of an item
+    the \uicontrol {Form Editor} and select \uicontrol {Stacked Container}. You
+    can raise or lower the stack value of an item
     or move the item to the front or back of all its siblings. To remove the
     \c z property, select \uicontrol {Reset z Property}.
 
+    You can also use a \uicontrol StackLayout item (Qt Quick Controls 2) to
+    create a stacked view. For more information, see \l {Using Layouts}.
+
     \section2 Switching Parent Items
 
     When you drag and drop instances of QML types to the canvas, Qt Quick Designer
diff --git a/doc/src/qtquick/qtquick-screens.qdoc b/doc/src/qtquick/qtquick-screens.qdoc
index a805003cb8..49bc878a27 100644
--- a/doc/src/qtquick/qtquick-screens.qdoc
+++ b/doc/src/qtquick/qtquick-screens.qdoc
@@ -260,17 +260,39 @@
         \li \l{GridLayout}{Grid Layout} provides a way of dynamically arranging
             items in a grid.
 
+        \li \l{StackLayout}{Stack Layout} provides a stack of items where only
+            one item is visible at a time.
+
     \endlist
 
-    To lay out several items in a \uicontrol {Column Layout}, \uicontrol {Row Layout}, or
-    \uicontrol {Grid Layout}, select the items on the canvas, and then select
-    \uicontrol Layout in the context menu.
+    To lay out several items in a \uicontrol {Column Layout}, \uicontrol {Row Layout},
+    \uicontrol {Grid Layout}, or \uicontrol {Stack Layout}, select the items in
+    the \uicontrol {Form Editor}, and then select \uicontrol Layout in the
+    context menu.
 
     To make an item within a layout as wide as possible while respecting the
     given constraints, select the item on the canvas and then select
     \uicontrol Layout > \uicontrol {Fill Width} in the context menu. To make the item as
     high as possible, select \uicontrol {Fill Height}.
 
+    \section3 Editing Stack Layouts
+
+    \image qtquick-designer-stacked-view.png
+
+    To add items to a \uicontrol {Stack Layout}, select the
+    \inlineimage plus.png
+    button next to the type name in the \uicontrol {Form Editor}. To move
+    between items, select the \inlineimage prev.png
+    (\uicontrol Previous) and \inlineimage next.png
+    (\uicontrol Next) buttons.
+
+    To add a tab bar to a stack layout, select \uicontrol {Stacked Container} >
+    \uicontrol {Add Tab Bar}.
+
+    To raise or lower the stacking order of an item, select
+    \uicontrol {Stacked Container} > \uicontrol {Increase Index} or
+    \uicontrol {Decrease Index}.
+
     \section2 Organizing Items
 
     From Qt 5.7, you can use the following \l{Qt Quick Controls 2} types to