diff --git a/doc/images/anchor-bottom.png b/doc/images/anchor-bottom.png new file mode 100644 index 00000000000..3a96c98107a Binary files /dev/null and b/doc/images/anchor-bottom.png differ diff --git a/doc/images/anchor-fill.png b/doc/images/anchor-fill.png new file mode 100644 index 00000000000..a065729bee0 Binary files /dev/null and b/doc/images/anchor-fill.png differ diff --git a/doc/images/anchor-horizontal-center.png b/doc/images/anchor-horizontal-center.png new file mode 100644 index 00000000000..984fa0eb680 Binary files /dev/null and b/doc/images/anchor-horizontal-center.png differ diff --git a/doc/images/anchor-left.png b/doc/images/anchor-left.png new file mode 100644 index 00000000000..92637502352 Binary files /dev/null and b/doc/images/anchor-left.png differ diff --git a/doc/images/anchor-right.png b/doc/images/anchor-right.png new file mode 100644 index 00000000000..7fa48d4f75a Binary files /dev/null and b/doc/images/anchor-right.png differ diff --git a/doc/images/anchor-top.png b/doc/images/anchor-top.png new file mode 100644 index 00000000000..12dd0ff3e16 Binary files /dev/null and b/doc/images/anchor-top.png differ diff --git a/doc/images/anchor-vertical-center.png b/doc/images/anchor-vertical-center.png new file mode 100644 index 00000000000..a82090c1edb Binary files /dev/null and b/doc/images/anchor-vertical-center.png differ diff --git a/doc/src/qtquick/creator-only/creator-mobile-app-tutorial.qdoc b/doc/src/qtquick/creator-only/creator-mobile-app-tutorial.qdoc index 380192d9dd7..6f8b571bf89 100644 --- a/doc/src/qtquick/creator-only/creator-mobile-app-tutorial.qdoc +++ b/doc/src/qtquick/creator-only/creator-mobile-app-tutorial.qdoc @@ -100,7 +100,7 @@ to reference the rectangle from other places. \li Select the \uicontrol Layout tab, and then click - the \inlineimage anchor_fill.png + the \inlineimage anchor-fill.png (\uicontrol {Fill to Parent}) button to anchor the rectangle to the item. diff --git a/doc/src/qtquick/creator-only/qtquick-app-tutorial.qdoc b/doc/src/qtquick/creator-only/qtquick-app-tutorial.qdoc index 0ac4cc85d0b..55fe9f421c8 100644 --- a/doc/src/qtquick/creator-only/qtquick-app-tutorial.qdoc +++ b/doc/src/qtquick/creator-only/qtquick-app-tutorial.qdoc @@ -117,22 +117,24 @@ \li In the \uicontrol {Border color} field, set the border color to \e #808080. - \li Click \uicontrol {Layout}, and then click the top and left - anchor buttons to anchor the rectangle to the top left corner of - the page. - - \image qmldesigner-tutorial-topleftrect-layout.png "Layout tab" + \li Click \uicontrol {Layout}, and then click the + \inlineimage anchor-top.png + (\uicontrol Top) and \inlineimage anchor-left.png + (\uicontrol Left) anchor buttons to anchor the + rectangle to the top left corner of the page. \li In the \uicontrol Margin field, select \e 20 for the top anchor and \e 10 for the left anchor. + \image qmldesigner-tutorial-topleftrect-layout.png "Anchor margins" + \endlist \li Drag and drop a \uicontrol {Mouse Area} type from the \uicontrol Library to \e topLeftRect in the navigator. \li Click \uicontrol {Layout}, and then click the - \inlineimage anchor_fill.png + \inlineimage anchor-fill.png (\uicontrol {Fill to Parent}) button to anchor the mouse area to the rectangle. @@ -147,9 +149,12 @@ \li In the \uicontrol Id field, enter \e middleRightRect. - \li In \uicontrol {Layout}, select the vertical center anchor button and - then the right anchor button to - anchor the rectangle to the middle right margin of its parent. + \li In \uicontrol {Layout}, select the + \inlineimage anchor-vertical-center.png + (\uicontrol {Vertical Center} anchor button and then the + \inlineimage anchor-right.png + (\uicontrol Right) anchor button to anchor the rectangle + to the middle right margin of its parent. \li In the \uicontrol Margin field, select \e 10 for the right anchor and \e 0 for the vertical center anchor. @@ -162,8 +167,11 @@ \li In the \uicontrol Id field, enter \e bottomLeftRect. - \li In \uicontrol {Layout}, select the bottom and left anchor buttons to - anchor the rectangle to the bottom left margin of its parent. + \li In \uicontrol {Layout}, select the + \inlineimage anchor-bottom.png + (\uicontrol Bottom) and \inlineimage anchor-left.png + (\uicontrol Left) anchor buttons to anchor the rectangle + to the bottom left margin of its parent. \li In the \uicontrol Margin field, select \e 20 for the bottom anchor and \e 10 for the left anchor. diff --git a/doc/src/qtquick/qtquick-buttons.qdoc b/doc/src/qtquick/qtquick-buttons.qdoc index 0f7c5f5235e..104605a7b86 100644 --- a/doc/src/qtquick/qtquick-buttons.qdoc +++ b/doc/src/qtquick/qtquick-buttons.qdoc @@ -76,7 +76,7 @@ the rectangle and produce rounded corners for the button. \li Select \uicontrol {Layout}, and then select the - \inlineimage anchor_fill.png + \inlineimage anchor-fill.png (\uicontrol {Fill to Parent}) button to anchor the rectangle to the item. @@ -208,7 +208,7 @@ for example button_up.png. \li Click \uicontrol {Layout}, and then click the - \inlineimage anchor_fill.png + \inlineimage anchor-fill.png (\uicontrol {Fill to Parent}) button to anchor the border image to the \uicontrol Item. @@ -258,12 +258,11 @@ \endlist \li Click \uicontrol {Layout}, and then click the - \inlineimage anchor_vertical.png - (\uicontrol {Set Vertical Anchor}) and - \inlineimage anchor_horizontal.png - (\uicontrol {Set Horizontal Anchor}) - buttons to inherit the vertical and horizontal centering from - the parent. + \inlineimage anchor-vertical-center.png + (\uicontrol {Vertical Center}) and + \inlineimage anchor-horizontal-center.png + (\uicontrol {Horizontal Center}) buttons to inherit the + vertical and horizontal centering from the parent. \endlist diff --git a/doc/src/qtquick/qtquick-components.qdoc b/doc/src/qtquick/qtquick-components.qdoc index 5eea22926c5..36190f81060 100644 --- a/doc/src/qtquick/qtquick-components.qdoc +++ b/doc/src/qtquick/qtquick-components.qdoc @@ -212,7 +212,7 @@ \image qmldesigner-anchor-buttons.png "Anchor buttons" - For convenience, you can click the \inlineimage anchor_fill.png + For convenience, you can click the \inlineimage anchor-fill.png (\uicontrol {Fill to Parent}) toolbar button to apply fill anchors to an item and the \inlineimage qtcreator-anchors-reset-icon.png (\uicontrol {Reset Anchors}) button to reset the anchors to their saved