diff --git a/doc/qtcreator/images/icons/align-bottom.png b/doc/qtcreator/images/icons/align-bottom.png new file mode 100644 index 00000000000..07277d74a9e Binary files /dev/null and b/doc/qtcreator/images/icons/align-bottom.png differ diff --git a/doc/qtcreator/images/icons/align-center-horizontal.png b/doc/qtcreator/images/icons/align-center-horizontal.png new file mode 100644 index 00000000000..d0af695e8df Binary files /dev/null and b/doc/qtcreator/images/icons/align-center-horizontal.png differ diff --git a/doc/qtcreator/images/icons/align-center-vertical.png b/doc/qtcreator/images/icons/align-center-vertical.png new file mode 100644 index 00000000000..8d423733511 Binary files /dev/null and b/doc/qtcreator/images/icons/align-center-vertical.png differ diff --git a/doc/qtcreator/images/icons/align-left.png b/doc/qtcreator/images/icons/align-left.png new file mode 100644 index 00000000000..3552235feb9 Binary files /dev/null and b/doc/qtcreator/images/icons/align-left.png differ diff --git a/doc/qtcreator/images/icons/align-right.png b/doc/qtcreator/images/icons/align-right.png new file mode 100644 index 00000000000..68d8ac7d3b1 Binary files /dev/null and b/doc/qtcreator/images/icons/align-right.png differ diff --git a/doc/qtcreator/images/icons/align-top.png b/doc/qtcreator/images/icons/align-top.png new file mode 100644 index 00000000000..00568f56809 Binary files /dev/null and b/doc/qtcreator/images/icons/align-top.png differ diff --git a/doc/qtcreator/images/icons/anchor-bottom.png b/doc/qtcreator/images/icons/anchor-bottom.png index 9ef1e5b3646..e6ab30a9ecb 100644 Binary files a/doc/qtcreator/images/icons/anchor-bottom.png and b/doc/qtcreator/images/icons/anchor-bottom.png differ diff --git a/doc/qtcreator/images/icons/anchor-fill.png b/doc/qtcreator/images/icons/anchor-fill.png index da8b6bf92b3..64a27939323 100644 Binary files a/doc/qtcreator/images/icons/anchor-fill.png and b/doc/qtcreator/images/icons/anchor-fill.png differ diff --git a/doc/qtcreator/images/icons/anchor-left.png b/doc/qtcreator/images/icons/anchor-left.png index 78c3c90b250..f3ebeab5000 100644 Binary files a/doc/qtcreator/images/icons/anchor-left.png and b/doc/qtcreator/images/icons/anchor-left.png differ diff --git a/doc/qtcreator/images/icons/anchor-right.png b/doc/qtcreator/images/icons/anchor-right.png index 042dc830b77..43609aa397c 100644 Binary files a/doc/qtcreator/images/icons/anchor-right.png and b/doc/qtcreator/images/icons/anchor-right.png differ diff --git a/doc/qtcreator/images/icons/anchor-top.png b/doc/qtcreator/images/icons/anchor-top.png index 4136ca624fa..896930eb640 100644 Binary files a/doc/qtcreator/images/icons/anchor-top.png and b/doc/qtcreator/images/icons/anchor-top.png differ diff --git a/doc/qtcreator/images/icons/center-horizontal.png b/doc/qtcreator/images/icons/center-horizontal.png new file mode 100644 index 00000000000..cdea461bd3d Binary files /dev/null and b/doc/qtcreator/images/icons/center-horizontal.png differ diff --git a/doc/qtcreator/images/icons/center-vertical.png b/doc/qtcreator/images/icons/center-vertical.png new file mode 100644 index 00000000000..b3be3037238 Binary files /dev/null and b/doc/qtcreator/images/icons/center-vertical.png differ diff --git a/doc/qtcreator/images/icons/distribute-bottom.png b/doc/qtcreator/images/icons/distribute-bottom.png new file mode 100644 index 00000000000..dccb5b535ae Binary files /dev/null and b/doc/qtcreator/images/icons/distribute-bottom.png differ diff --git a/doc/qtcreator/images/icons/distribute-center-horizontal.png b/doc/qtcreator/images/icons/distribute-center-horizontal.png new file mode 100644 index 00000000000..5ad6d0dff91 Binary files /dev/null and b/doc/qtcreator/images/icons/distribute-center-horizontal.png differ diff --git a/doc/qtcreator/images/icons/distribute-center-vertical.png b/doc/qtcreator/images/icons/distribute-center-vertical.png new file mode 100644 index 00000000000..1b6cc09588b Binary files /dev/null and b/doc/qtcreator/images/icons/distribute-center-vertical.png differ diff --git a/doc/qtcreator/images/icons/distribute-left.png b/doc/qtcreator/images/icons/distribute-left.png new file mode 100644 index 00000000000..92ce603cace Binary files /dev/null and b/doc/qtcreator/images/icons/distribute-left.png differ diff --git a/doc/qtcreator/images/icons/distribute-origin-bottom-right.png b/doc/qtcreator/images/icons/distribute-origin-bottom-right.png new file mode 100644 index 00000000000..ed679229597 Binary files /dev/null and b/doc/qtcreator/images/icons/distribute-origin-bottom-right.png differ diff --git a/doc/qtcreator/images/icons/distribute-origin-center.png b/doc/qtcreator/images/icons/distribute-origin-center.png new file mode 100644 index 00000000000..391d3d640f8 Binary files /dev/null and b/doc/qtcreator/images/icons/distribute-origin-center.png differ diff --git a/doc/qtcreator/images/icons/distribute-origin-none.png b/doc/qtcreator/images/icons/distribute-origin-none.png index 349f40ca26a..c4966559612 100644 Binary files a/doc/qtcreator/images/icons/distribute-origin-none.png and b/doc/qtcreator/images/icons/distribute-origin-none.png differ diff --git a/doc/qtcreator/images/icons/distribute-origin-top-left.png b/doc/qtcreator/images/icons/distribute-origin-top-left.png new file mode 100644 index 00000000000..3f20b449b59 Binary files /dev/null and b/doc/qtcreator/images/icons/distribute-origin-top-left.png differ diff --git a/doc/qtcreator/images/icons/distribute-right.png b/doc/qtcreator/images/icons/distribute-right.png new file mode 100644 index 00000000000..54527947409 Binary files /dev/null and b/doc/qtcreator/images/icons/distribute-right.png differ diff --git a/doc/qtcreator/images/icons/distribute-spacing-horizontal.png b/doc/qtcreator/images/icons/distribute-spacing-horizontal.png new file mode 100644 index 00000000000..a416a9f8d21 Binary files /dev/null and b/doc/qtcreator/images/icons/distribute-spacing-horizontal.png differ diff --git a/doc/qtcreator/images/icons/distribute-spacing-vertical.png b/doc/qtcreator/images/icons/distribute-spacing-vertical.png new file mode 100644 index 00000000000..bd1fb1a21e3 Binary files /dev/null and b/doc/qtcreator/images/icons/distribute-spacing-vertical.png differ diff --git a/doc/qtcreator/images/icons/distribute-top.png b/doc/qtcreator/images/icons/distribute-top.png new file mode 100644 index 00000000000..7f2e5749073 Binary files /dev/null and b/doc/qtcreator/images/icons/distribute-top.png differ diff --git a/doc/qtcreator/images/qmldesigner-alignment.png b/doc/qtcreator/images/qmldesigner-alignment.png index e6c6468a98f..70ad846850d 100644 Binary files a/doc/qtcreator/images/qmldesigner-alignment.png and b/doc/qtcreator/images/qmldesigner-alignment.png differ diff --git a/doc/qtcreator/images/qmldesigner-anchor-buttons.png b/doc/qtcreator/images/qmldesigner-anchor-buttons.png index 4e7e8a2fed3..28d23271d4f 100644 Binary files a/doc/qtcreator/images/qmldesigner-anchor-buttons.png and b/doc/qtcreator/images/qmldesigner-anchor-buttons.png differ diff --git a/doc/qtcreator/images/qmldesigner-anchors.png b/doc/qtcreator/images/qmldesigner-anchors.png index 6d33d222523..3b4d7d632de 100644 Binary files a/doc/qtcreator/images/qmldesigner-anchors.png and b/doc/qtcreator/images/qmldesigner-anchors.png differ diff --git a/doc/qtcreator/images/qmldesigner-binding-editor.png b/doc/qtcreator/images/qmldesigner-binding-editor.png index 0ffb326628d..35bcb93b135 100644 Binary files a/doc/qtcreator/images/qmldesigner-binding-editor.png and b/doc/qtcreator/images/qmldesigner-binding-editor.png differ diff --git a/doc/qtcreator/images/qmldesigner-distribute-objects.png b/doc/qtcreator/images/qmldesigner-distribute-objects.png deleted file mode 100644 index b7e036ba4bc..00000000000 Binary files a/doc/qtcreator/images/qmldesigner-distribute-objects.png and /dev/null differ diff --git a/doc/qtcreator/images/qmldesigner-distribute-spacing-evenly.png b/doc/qtcreator/images/qmldesigner-distribute-spacing-evenly.png deleted file mode 100644 index 937d77f679b..00000000000 Binary files a/doc/qtcreator/images/qmldesigner-distribute-spacing-evenly.png and /dev/null differ diff --git a/doc/qtcreator/images/qmldesigner-distribute-spacing-pixels.png b/doc/qtcreator/images/qmldesigner-distribute-spacing-pixels.png deleted file mode 100644 index d6f690affe2..00000000000 Binary files a/doc/qtcreator/images/qmldesigner-distribute-spacing-pixels.png and /dev/null differ diff --git a/doc/qtcreator/images/qmldesigner-set-expression.png b/doc/qtcreator/images/qmldesigner-set-expression.png index bdf0f24af9f..a6a507a6f17 100644 Binary files a/doc/qtcreator/images/qmldesigner-set-expression.png and b/doc/qtcreator/images/qmldesigner-set-expression.png differ diff --git a/doc/qtcreator/images/qtquick-layout-grid-properties.png b/doc/qtcreator/images/qtquick-layout-grid-properties.png index e6f85801d2f..2a6d744f73f 100644 Binary files a/doc/qtcreator/images/qtquick-layout-grid-properties.png and b/doc/qtcreator/images/qtquick-layout-grid-properties.png differ diff --git a/doc/qtcreator/images/qtquick-positioner-column-properties.png b/doc/qtcreator/images/qtquick-positioner-column-properties.png index 2e9872a5dd7..b025b5fe58f 100644 Binary files a/doc/qtcreator/images/qtquick-positioner-column-properties.png and b/doc/qtcreator/images/qtquick-positioner-column-properties.png differ diff --git a/doc/qtcreator/images/qtquick-positioner-flow-properties.png b/doc/qtcreator/images/qtquick-positioner-flow-properties.png index f1cc10552b7..c027a81817e 100644 Binary files a/doc/qtcreator/images/qtquick-positioner-flow-properties.png and b/doc/qtcreator/images/qtquick-positioner-flow-properties.png differ diff --git a/doc/qtcreator/images/qtquick-positioner-grid-properties.png b/doc/qtcreator/images/qtquick-positioner-grid-properties.png index 4427a11ccca..4588e39a239 100644 Binary files a/doc/qtcreator/images/qtquick-positioner-grid-properties.png and b/doc/qtcreator/images/qtquick-positioner-grid-properties.png differ diff --git a/doc/qtcreator/src/qtquick/qtquick-positioning.qdoc b/doc/qtcreator/src/qtquick/qtquick-positioning.qdoc index ad593ec587f..3dc0d3cbe6a 100644 --- a/doc/qtcreator/src/qtquick/qtquick-positioning.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-positioning.qdoc @@ -81,7 +81,8 @@ string and press \key Ctrl+Space to display a list of properties, IDs, and code snippets. When you enter a period (.) after a property name, a list of available values is displayed. Press \key Enter to accept the first - suggestion in the list and to complete the code. + suggestion in the list and to complete the code. For more information, see + \l{Completing Code}. When a binding is set, the \uicontrol Actions menu icon changes to \inlineimage icons/action-icon-binding @@ -135,21 +136,21 @@ \c {anchor.left: sibling.right}. This allows you to keep sibling components together. - In the following image, \uicontrol{Rectangle 2} is anchored to - \uicontrol {Rectangle 1} on its left and to the bottom of its parent. + In the following image, the left edge of \e rectangle1 is anchored to the + right edge of the sibling on its left side, \e rectangle, while its top + edge is anchored to the top of its parent. \image qmldesigner-anchors.png "Anchoring sibling components" - The anchors for \uicontrol{Rectangle 2} are specified as follows in code: + The anchors are specified as follows in code: \qml Rectangle { - id: rectangle2 - anchors.left: rectangle1.right - anchors.leftMargin: 78 - anchors.bottom: parent.bottom - anchors.bottomMargin: 200 - // + id: rectangle1 + anchors.left: rectangle.right + anchors.top: parent.top + anchors.leftMargin: 5 + anchors.topMargin: 30 } \endqml @@ -167,11 +168,11 @@ \image qmldesigner-alignment.png "Aligning sibling components" - Select the buttons in the \uicontrol Align group to align the top/bottom - or left/right edges of the components in the group to the one farthest away + Select the buttons in the \uicontrol Alignment field to align the top/bottom + or left/right edges of a group of components to the one farthest away from the center of the group. For example, when left-aligning, the components are aligned to the leftmost component. You can also align the - horizontal/vertical centers of components, or both, as in the image above. + horizontal/vertical centers of components, or both. In the \uicontrol {Align to} field, select whether to align the components in respect to the selection, the root component, or a \e {key component} @@ -185,33 +186,105 @@ values possible or tweak your design so that the components and spacing can be distributed perfectly. - When distributing components, you can select whether the distance between - them is calculated from their top/bottom or left/right edges or their - horizontal/vertical center. + When distributing components, select the buttons in the + \uicontrol {Distribute objects} field to determine whether the + distance between components is calculated from their top/bottom + or left/right edges or their horizontal/vertical center. - \image qmldesigner-distribute-objects.png "Distribute components buttons" - - You can distribute spacing either evenly within a target area or at + When distributing spacing, select the buttons in the + \uicontrol {Distribute spacing} field to determine whether + it is distributed evenly within a target area or at specified distances, calculated from a starting point. You can select the orientation in which the components are distributed evenly within the target area: horizontally along the x axis or vertically along the y axis. - \image qmldesigner-distribute-spacing-evenly.png "Distribute spacing evenly" - Alternatively, you can distribute spacing in pixels by selecting one of the - starting point buttons: left/right or top/bottom edge of the target area, - or its horizontal/vertical center. Note that some components might end up - outside the target area. + starting point buttons: top-left or bottom-right edge of the target area, + or its center. Note that some components might end up outside the target + area. - \image qmldesigner-distribute-spacing-pixels.png "Distribute spacing in pixels" - - You can set the space between components in pixels. You can - disable the distribution of spacing in pixels by clicking - the \inlineimage icons/distribute-origin-none.png + In the \uicontrol {Pixel spacing} field, you can set the space between + components in pixels. You can disable the distribution of spacing in + pixels by clicking the \inlineimage icons/distribute-origin-none.png button. + \section3 Summary of Aligment Buttons + + The following table summarizes the buttons available in the + \uicontrol Alignment section. + + \table + \header + \li Icon + \li Purpose + \row + \li \inlineimage icons/align-left.png + \li Aligns the left edges of the selected components to the one + farthest away from the center of the group. + \row + \li \inlineimage icons/align-center-horizontal.png + \li Aligns the horizontal centers of the selected components. + \row + \li \inlineimage icons/align-right.png + \li Aligns the right edges of the selected components. + \row + \li \inlineimage icons/align-top.png + \li Aligns the top edges of the selected components. + \row + \li \inlineimage icons/align-center-vertical.png + \li Aligns the verical centers of the selected components. + \row + \li \inlineimage icons/align-bottom.png + \li Aligns the bottom edges of the selected components. + \row + \li \inlineimage icons/distribute-left.png + \li Distributes the selected components and calculates the distance + between them from their left edges. + \row + \li \inlineimage icons/distribute-center-horizontal.png + \li Distributes the selected components and calculates the distance + between them from their horizontal centers. + \row + \li \inlineimage icons/distribute-right.png + \li Distributes the selected components and calculates the distance + between them from their right edges. + \row + \li \inlineimage icons/distribute-top.png + \li Distributes the selected components and calculates the distance + between them from their top edges. + \row + \li \inlineimage icons/distribute-center-vertical.png + \li Distributes the selected components and calculates the distance + between them from their vertical centers. + \row + \li \inlineimage icons/distribute-bottom.png + \li Distributes the selected components and calculates the distance + between them from their bottom edges. + \row + \li \inlineimage icons/distribute-spacing-horizontal.png + \li Distributes spacing between the selected components horizontally. + \row + \li \inlineimage icons/distribute-spacing-vertical.png + \li Distributes spacing between the selected components vertically. + \row + \li \inlineimage icons/distribute-origin-none.png + \li Disables the distribution of spacing in pixels. + \row + \li \inlineimage icons/distribute-origin-top-left.png + \li Sets the top-left corner of the target area as the starting point + for distributing spacing in pixels. + \row + \li \inlineimage icons/distribute-origin-center.png + \li Sets the center of the target area as the starting point + for distributing spacing in pixels. + \row + \li \inlineimage icons/distribute-origin-bottom-right.png + \li Sets the bottom-right corner of the target area as the starting + point for distributing spacing in pixels. + \endtable + \section2 Using Positioners Positioner components are containers that manage the positions of their @@ -239,7 +312,7 @@ In addition, you can specify the vertical and horizontal padding between content and the left, right, top, and bottom edges of components as values - of the fields in the \uicontrol Padding group. + of the fields in the \l Padding section. \section3 Row and Flow Positioners @@ -256,7 +329,8 @@ either left-to-right or top-to-bottom in the \uicontrol Flow field. Components are positioned next to to each other according to the value you set in the \uicontrol {Layout direction} field until the width or height of - the Flow component is exceeded, then wrapped to the next row or column. + the \uicontrol Flow component is exceeded, then wrapped to the next row or + column. You can set the layout direction to either \uicontrol LeftToRight or \uicontrol RightToLeft in the \uicontrol {Layout direction} field. If @@ -284,7 +358,7 @@ To mirror the layout, set the layout direction to \uicontrol RightToLeft. To also mirror the horizontal alignment of components, select - \uicontrol AlignRight in the \uicontrol {Horizontal item alignment} field. + \uicontrol AlignRight in the \uicontrol {Alignment H} field. \section3 Summary of Positioners @@ -328,8 +402,8 @@ Unlike positioners, layouts manage both the positions and sizes of their child components, and are therefore well suited for dynamic and resizable UIs. However, this means that you should not specify fixed positions and - sizes for the child components in the \l{2D Geometry}{Geometry} group in - \l Properties, unless their implicit sizes are not satisfactory. + sizes for the child components in the \l{2D Geometry}{Geometry - 2D} section + in \l Properties, unless their implicit sizes are not satisfactory. You can use anchors or the width and height properties of the layout itself to specify its size in respect to its non-layout parent component. However, @@ -367,14 +441,16 @@ The child components of grid layout components are arranged according to the \uicontrol Flow property. When the direction of a flow is set to \uicontrol LeftToRight, child components are positioned next to to each - other until the the number of \uicontrol Columns is reached. Then, + other until the the number of columns specified in the + \uicontrol {Columns & Rows} field is reached. Then, the auto-positioning wraps back to the beginning of the next row. \image qtquick-layout-grid-properties.png "Grid Layout properties" If you set the direction of the flow to \uicontrol TopToBottom, child - components are auto-positioned vertically using the value of the - \uicontrol Rows field to determine the maximum number of rows. + components are auto-positioned vertically using the number of rows set + in the \uicontrol {Columns & Rows} field to determine the maximum number + of rows. You can set the layout direction to either \uicontrol LeftToRight or \uicontrol RightToLeft in the \uicontrol {Layout direction} field. @@ -382,7 +458,7 @@ will be mirrored. You can specify the spacing between rows and columns in the - \uicontrol {Row spacing} and \uicontrol {Column spacing} fields. + \uicontrol Spacing field. \section3 Stack Layout