diff options
| -rw-r--r-- | doc/src/declarative/anchor-layout.qdoc | 32 | ||||
| -rw-r--r-- | doc/src/declarative/tutorial2.qdoc | 8 | ||||
| -rw-r--r-- | doc/src/declarative/tutorial3.qdoc | 2 |
3 files changed, 21 insertions, 21 deletions
diff --git a/doc/src/declarative/anchor-layout.qdoc b/doc/src/declarative/anchor-layout.qdoc index 69e2eda..6f047a4 100644 --- a/doc/src/declarative/anchor-layout.qdoc +++ b/doc/src/declarative/anchor-layout.qdoc @@ -1,20 +1,20 @@ -/*! +/*! \page anchor-layout.html \target anchor-layout \title Anchor-based Layout -In additional to the more traditional Fx layouts GridLayout, HorizontalLayout, and VerticalLayout, QML also provides a way to layout items using the concept of anchors. Each visual Fx item can be thought of as having a set of 6 invisible "anchor lines": \e left, \e horizontalCenter, \e right, \e top, \e verticalCenter, and \e bottom. +In addition to the more traditional \l Grid, \l Row, and \l Column, QML also provides a way to layout items using the concept of anchors. Each item can be thought of as having a set of 6 invisible "anchor lines": \e left, \e horizontalCenter, \e right, \e top, \e verticalCenter, and \e bottom. \image edges_qml.png The Fx anchoring system allows you to define relationships between the anchor lines of different items. For example, you can write: \code -Rectangle { id: rect1; ... } -Rectangle { id: rect2; anchors.left: rect1.right; ... } +Rectangle { id: Rect1; ... } +Rectangle { id: Rect2; anchors.left: Rect1.right; ... } \endcode -In this case, the left edge of \e rect2 is bound to the right edge of rect1, producing the following: +In this case, the left edge of \e Rect2 is bound to the right edge of Rect1, producing the following: \image edge1.png @@ -25,19 +25,19 @@ The anchoring system also allows you to specify margins and offsets. Margins spe The following example specifies a left margin: \code -Rectangle { id: rect1; ... } -Rectangle { id: rect2; anchors.left: rect1.right; anchors.leftMargin: 5; ... } +Rectangle { id: Rect1; ... } +Rectangle { id: Rect2; anchors.left: Rect1.right; anchors.leftMargin: 5; ... } \endcode -In this case, a margin of 5 pixels is reserved to the left of \e rect2, producing the following: +In this case, a margin of 5 pixels is reserved to the left of \e Rect2, producing the following: \image edge2.png You can specify multiple anchors. For example: \code -Rectangle { id: rect1; ... } -Rectangle { id: rect2; anchors.left: rect1.right; anchors.top: rect1.bottom; ... } +Rectangle { id: Rect1; ... } +Rectangle { id: Rect2; anchors.left: Rect1.right; anchors.top: Rect1.bottom; ... } \endcode \image edge3.png @@ -45,9 +45,9 @@ Rectangle { id: rect2; anchors.left: rect1.right; anchors.top: rect1.bottom; ... By specifying multiple horizontal or vertical anchors you can control the size of an item. For example: \code -Rectangle { id: rect1; x: 0; ... } -Rectangle { id: rect2; anchors.left: rect1.right; anchors.right: rect3.left; ... } -Rectangle { id: rect3; x: 150; ... } +Rectangle { id: Rect1; x: 0; ... } +Rectangle { id: Rect2; anchors.left: Rect1.right; anchors.right: Rect3.left; ... } +Rectangle { id: Rect3; x: 150; ... } \endcode \image edge4.png @@ -56,12 +56,12 @@ Rectangle { id: rect3; x: 150; ... } For performance reasons, you can only anchor an item to its siblings and direct parent. For example, the following anchor would be considered invalid and would produce a warning: -\code +\badcode Item { id: group1 } - Rectangle { id: rect1; ... } + Rectangle { id: Rect1; ... } } Item id: group2"> - Rectangle { id: rect2; anchors.left: rect1.right; ... } // invalid anchor! + Rectangle { id: Rect2; anchors.left: Rect1.right; ... } // invalid anchor! } \endcode diff --git a/doc/src/declarative/tutorial2.qdoc b/doc/src/declarative/tutorial2.qdoc index 9c1e98b..c6fd06b 100644 --- a/doc/src/declarative/tutorial2.qdoc +++ b/doc/src/declarative/tutorial2.qdoc @@ -46,7 +46,7 @@ Rectangle { y: 30 anchors.horizontalCenter: Page.horizontalCenter } - GridLayout { + Grid { id: ColorPicker x: 0 anchors.bottom: Page.bottom @@ -91,7 +91,7 @@ Rectangle { Our cell component is basically a colored rectangle. -The \c anchors.fill property is a convenient way to set the size of an element. In this case the \c Rect will have the same size as its parent. +The \c anchors.fill property is a convenient way to set the size of an element. In this case the \c Rectangle will have the same size as its parent. We bind the \c color property of this \c Rectangle to the color property of our component. @@ -109,7 +109,7 @@ The \c onClicked property sets the \c color property of the element named \e Hel \section2 The main QML file \code -GridLayout { +Grid { id: ColorPicker x: 0 anchors.bottom: Page.bottom @@ -124,7 +124,7 @@ GridLayout { } \endcode -In the main QML file, the only thing we have to do is to create a color picker by putting 6 cells with different colors in a grid layout. +In the main QML file, the only thing we have to do is to create a color picker by putting 6 cells with different colors in a grid. [Previous: \l tutorial1] [Next: \l tutorial3] diff --git a/doc/src/declarative/tutorial3.qdoc b/doc/src/declarative/tutorial3.qdoc index 1330c43..a0d842c 100644 --- a/doc/src/declarative/tutorial3.qdoc +++ b/doc/src/declarative/tutorial3.qdoc @@ -48,7 +48,7 @@ Rectangle { ] } MouseRegion { id: MouseRegion; anchors.fill: HelloText } - GridLayout { + Grid { id: ColorPicker x: 0 anchors.bottom: Page.bottom |