From f8b3225c4ac19b57dd0665f27876d5a5190f2ecb Mon Sep 17 00:00:00 2001 From: "ester.zhou" Date: Tue, 1 Mar 2022 17:17:19 +0800 Subject: [PATCH] update docs Signed-off-by: ester.zhou --- .../arkui-ts/ts-basic-components-button.md | 4 +- .../reference/arkui-ts/ts-container-column.md | 189 +++++++----------- 2 files changed, 74 insertions(+), 119 deletions(-) diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-button.md b/en/application-dev/reference/arkui-ts/ts-basic-components-button.md index 0c017d6aff..8f39a509ef 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-button.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-button.md @@ -9,9 +9,9 @@ The **** component represents a component that can trigger actions. None -## Child Component +## Child Components -This component can contain child components. +This component can contain a single child component. ## APIs diff --git a/en/application-dev/reference/arkui-ts/ts-container-column.md b/en/application-dev/reference/arkui-ts/ts-container-column.md index 5aebfdd7ca..a1638e11f8 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-column.md +++ b/en/application-dev/reference/arkui-ts/ts-container-column.md @@ -1,134 +1,89 @@ -# Column +# Column ->![](../../public_sys-resources/icon-note.gif) **NOTE:** ->This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** +> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. -The **** component lays out child components vertically. -## Required Permissions +The **** component lays out child components vertically. + + +## Required Permissions None -## Child Components - -This component can contain child components. - -## APIs - -Column\(value:\{space?: Length\}\) - -- Parameters - - - - - - - - - - - - - - - - -

Name

-

Type

-

Mandatory

-

Default Value

-

Description

-

space

-

Length

-

No

-

0

-

Space between any two adjacent child components in the vertical layout.

-
- - -## Attributes - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Description

-

alignItems

-

HorizontalAlign

-

Center

-

Alignment mode of child components in the horizontal direction.

-
- -- HorizontalAlign enums - - - - - - - - - - - - - - - - -

Name

-

Description

-

Start

-

Aligned with the start edge in the same direction as the language in use.

-

Center

-

Center alignment. This is the default alignment mode.

-

End

-

Aligned with the end edge in the same direction as the language in use.

-
- - -## Example + +## Child Components + +Supported + + +## APIs + +Column(value:{space?: Length}) + + +- Parameters + | Name| Type| Mandatory| Default Value| Description| + | -------- | -------- | -------- | -------- | -------- | + | space | Length | No| 0 | Space between two adjacent child components in the vertical layout.| + + +## Attributes + +| Name| Type| Default Value| Description| +| -------- | -------- | -------- | -------- | +| alignItems | HorizontalAlign | HorizontalAlign.Center | Alignment mode of the child components in the horizontal direction.| +| justifyContent8+ | [FlexAlign](ts-container-flex.md) | FlexAlign.Start | Alignment mode of the child components in the vertical direction.| + +- HorizontalAlign enums + | Name| Description| + | -------- | -------- | + | Start | Aligned with the start edge in the same direction as the language in use.| + | Center | Center aligned. This is the default alignment mode.| + | End | Aligned with the end edge in the same direction as the language in use.| + + + +## Example ``` @Entry @Component struct ColumnExample { build() { - Column({ space: 5 }) { - Text('space').fontSize(9).fontColor(0xCCCCCC).width('90%') - Column({ space: 5 }) { - Column().width('100%').height(50).backgroundColor(0xAFEEEE) - Column().width('100%').height(50).backgroundColor(0x00FFFF) - }.width('90%').height(107).border({ width: 1 }) - - Text('alignItems(Start)').fontSize(9).fontColor(0xCCCCCC).width('90%') - Column() { - Column().width('50%').height(50).backgroundColor(0xAFEEEE) - Column().width('50%').height(50).backgroundColor(0x00FFFF) - }.alignItems(HorizontalAlign.Start).width('90%').border({ width: 1 }) - - Text('alignItems(End)').fontSize(9).fontColor(0xCCCCCC).width('90%') - Column() { - Column().width('50%').height(50).backgroundColor(0xAFEEEE) - Column().width('50%').height(50).backgroundColor(0x00FFFF) - }.alignItems(HorizontalAlign.End).width('90%').border({ width: 1 }) + Column() { + Text('space').fontSize(9).fontColor(0xCCCCCC).width('90%') + Column({ space: 5 }) { + Column().width('100%').height(30).backgroundColor(0xAFEEEE) + Column().width('100%').height(30).backgroundColor(0x00FFFF) + }.width('90%').height(100).border({ width: 1 }) + + Text('alignItems(Start)').fontSize(9).fontColor(0xCCCCCC).width('90%') + Column() { + Column().width('50%').height(30).backgroundColor(0xAFEEEE) + Column().width('50%').height(30).backgroundColor(0x00FFFF) + }.alignItems(HorizontalAlign.Start).width('90%').border({ width: 1 }) + + Text('alignItems(End)').fontSize(9).fontColor(0xCCCCCC).width('90%') + Column() { + Column().width('50%').height(30).backgroundColor(0xAFEEEE) + Column().width('50%').height(30).backgroundColor(0x00FFFF) + }.alignItems(HorizontalAlign.End).width('90%').border({ width: 1 }) + + Text('justifyContent(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%') + Column() { + Column().width('30%').height(30).backgroundColor(0xAFEEEE) + Column().width('30%').height(30).backgroundColor(0x00FFFF) + }.height('15%').border({ width: 1 }).justifyContent(FlexAlign.Center) + + Text('justifyContent(End)').fontSize(9).fontColor(0xCCCCCC).width('90%') + Column() { + Column().width('30%').height(30).backgroundColor(0xAFEEEE) + Column().width('30%').height(30).backgroundColor(0x00FFFF) + }.height('15%').border({ width: 1 }).justifyContent(FlexAlign.End) }.width('100%').padding({ top: 5 }) } } ``` -![](figures/column.gif) - +![zh-cn_image_0000001219982721](figures/Column.png) -- GitLab