提交 a3268232 编写于 作者: E ester.zhou

Update doc (12915)

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 35e7a42a
...@@ -16,7 +16,7 @@ The **\<RelativeContainer>** component is used for element alignment in complex ...@@ -16,7 +16,7 @@ The **\<RelativeContainer>** component is used for element alignment in complex
* A child component can set the container or another child component as the anchor. * A child component can set the container or another child component as the anchor.
* To show in the **\<RelativeContainer>**, child components must have an ID. The container ID is fixed at **__container__**. * To show in the **\<RelativeContainer>**, child components must have an ID. The container ID is fixed at **__container__**.
* Three positions of the child component in a direction can use three positions of the container or another child components in the same direction as anchors. If anchors are set for more than two positions in a single direction, the third position is skipped. * Three positions of the child component in a direction can use three positions of the container or another child components in the same direction as anchors. If anchors are set for more than two positions in a single direction, the third position is skipped.
* The child component size set on the frontend page is not affected by the **\<RelativeContainer>** rules. * The child component size set on the frontend page is not affected by the **\<RelativeContainer>** rules. If two or more **alignRules** values are set for one direction of the child component, you are not advised to set the size for this direction.
* If offset is required after the alignment, it can be set through **offset**. * If offset is required after the alignment, it can be set through **offset**.
* Exceptions * Exceptions
* When a mutual or circular dependency occurs, none of the child components in the container are drawn. * When a mutual or circular dependency occurs, none of the child components in the container are drawn.
...@@ -39,62 +39,60 @@ RelativeContainer() ...@@ -39,62 +39,60 @@ RelativeContainer()
struct Index { struct Index {
build() { build() {
Row() { Row() {
Button("Extra button").width(100).height(50)
RelativeContainer() { RelativeContainer() {
Button("Button 1") Row().width(100).height(100)
.width(120) .backgroundColor("#FF3333")
.height(30)
.alignRules({ .alignRules({
middle: { anchor: "__container__", align: HorizontalAlign.Center }, top: {anchor: "__container__", align: VerticalAlign.Top},
left: {anchor: "__container__", align: HorizontalAlign.Start}
}) })
.id("bt1") .id("row1")
.borderWidth(1)
.borderColor(Color.Black)
Text("This is text 2") Row().width(100).height(100)
.fontSize(20) .backgroundColor("#FFCC00")
.padding(10)
.alignRules({ .alignRules({
bottom: { anchor: "__container__", align: VerticalAlign.Bottom }, top: {anchor: "__container__", align: VerticalAlign.Top},
top: { anchor: "bt1", align: VerticalAlign.Bottom }, right: {anchor: "__container__", align: HorizontalAlign.End}
right: { anchor: "bt1", align: HorizontalAlign.Center }
}) })
.id("tx2") .id("row2")
.borderWidth(1)
.borderColor(Color.Black) Row().height(100)
.height(30) .backgroundColor("#FF6633")
Button("Button 3")
.width(100)
.height(100)
.alignRules({ .alignRules({
left: { anchor: "bt1", align: HorizontalAlign.End }, top: {anchor: "row1", align: VerticalAlign.Bottom},
top: { anchor: "tx2", align: VerticalAlign.Center }, left: {anchor: "row1", align: HorizontalAlign.End},
bottom: { anchor: "__container__", align: VerticalAlign.Bottom } right: {anchor: "row2", align: HorizontalAlign.Start}
}) })
.id("bt3") .id("row3")
.borderWidth(1)
.borderColor(Color.Black)
Text("This is text 4") Row()
.fontSize(20) .backgroundColor("#FF9966")
.padding(10)
.alignRules({ .alignRules({
left: { anchor: "tx2", align: HorizontalAlign.End }, top: {anchor: "row3", align: VerticalAlign.Bottom},
right: { anchor: "__container__", align: HorizontalAlign.End }, bottom: {anchor: "__container__", align: VerticalAlign.Bottom},
top: { anchor: "__container__", align: VerticalAlign.Top }, left: {anchor: "__container__", align: HorizontalAlign.Start},
bottom: { anchor: "bt3", align: VerticalAlign.Top } right: {anchor: "row1", align: HorizontalAlign.End}
}) })
.id("tx4") .id("row4")
.borderWidth(1)
.borderColor(Color.Black) Row()
.backgroundColor("#FF66FF")
.alignRules({
top: {anchor: "row3", align: VerticalAlign.Bottom},
bottom: {anchor: "__container__", align: VerticalAlign.Bottom},
left: {anchor: "row2", align: HorizontalAlign.Start},
right: {anchor: "__container__", align: HorizontalAlign.End}
})
.id("row5")
} }
.width(200).height(200) .width(300).height(300)
.backgroundColor(Color.Orange) .margin({left: 100})
.border({width:2, color: "#6699FF"})
} }
.height('100%') .height('100%')
} }
} }
``` ```
![relative container](figures/relativecontainer.png) ![relative container](figures/relativecontainer.png)
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册