diff --git a/en/application-dev/reference/arkui-ts/figures/Column.png b/en/application-dev/reference/arkui-ts/figures/Column.png index 90bb7a5557e42ccc9b6509f96f54328d7a27eea1..27321b5a24798d6d423cbf76eab974f4ebc2d0fb 100644 Binary files a/en/application-dev/reference/arkui-ts/figures/Column.png and b/en/application-dev/reference/arkui-ts/figures/Column.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/badge.png b/en/application-dev/reference/arkui-ts/figures/badge.png new file mode 100644 index 0000000000000000000000000000000000000000..0041374b52a2be5a93f620dabed0cba74990ee6f Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/badge.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218470.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218470.gif deleted file mode 100644 index 016da55bb5d98a3d2787d870bf2575fbaf383990..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218470.gif and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/relativecontainer.png b/en/application-dev/reference/arkui-ts/figures/relativecontainer.png index ebe9c3c7f6ba5ba6756b61f757894cc3f69014bf..574fcaa48023d14a579eaa843ebc59f1b961a29f 100644 Binary files a/en/application-dev/reference/arkui-ts/figures/relativecontainer.png and b/en/application-dev/reference/arkui-ts/figures/relativecontainer.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/row.png b/en/application-dev/reference/arkui-ts/figures/row.png index 6bf426a5f019e76b7b3a0953643988690eb67b1e..d7fced9fe4a9fc618dee88ae95cc2f04a34bb3c3 100644 Binary files a/en/application-dev/reference/arkui-ts/figures/row.png and b/en/application-dev/reference/arkui-ts/figures/row.png differ diff --git a/en/application-dev/reference/arkui-ts/ts-container-badge.md b/en/application-dev/reference/arkui-ts/ts-container-badge.md index 7d51379bea19538c5e1c5498d2165373331ed924..7517dbe5e8a15ea5357aa89f88b5c0e22ba90903 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-badge.md +++ b/en/application-dev/reference/arkui-ts/ts-container-badge.md @@ -7,11 +7,6 @@ The **\** component is a container that can be attached to another compon > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. -## Required Permissions - -None - - ## Child Components This component supports only one child component. @@ -19,7 +14,7 @@ This component supports only one child component. ## APIs -Method 1: Badge(value: {count: number, position?: BadgePosition, maxCount?: number, style: BadgeStyle}) +**Method 1**: Badge(value: {count: number, position?: BadgePosition, maxCount?: number, style: BadgeStyle}) Create a badge. @@ -27,36 +22,38 @@ Create a badge. | Name| Type| Mandatory| Default Value| Description| | -------- | -------- | -------- | -------- | -------- | | count | number | Yes| - | Number of notifications.| -| position | BadgePosition | No| BadgePosition.RightTop | Position to display the badge relative to the parent component.| +| position | [BadgePosition](#badgeposition) | No| BadgePosition.RightTop | Position to display the badge relative to the parent component.| | maxCount | number | No| 99 | Maximum number of notifications. When the maximum number is reached, only **maxCount+** is displayed.| -| style | BadgeStyle | Yes| - | Style of the **\** component, including the text color, text size, badge color, and badge size.| +| style | [BadgeStyle](#badgestyle) | Yes| - | Style of the badge, including the font color, font size, badge color, and badge size.| -Method 2: Badge(value: {value: string, position?: BadgePosition, style: BadgeStyle}) +**Method 2**: Badge(value: {value: string, position?: BadgePosition, style: BadgeStyle}) Creates a badge based on the given string. -- Parameters - | Name| Type| Mandatory| Default Value| Description| - | -------- | -------- | -------- | -------- | -------- | - | value | string | Yes| - | Prompt content.| - | position | BadgePosition | No| BadgePosition.RightTop | Position to display the badge relative to the parent component.| - | style | BadgeStyle | Yes| - | Style of the **** component, including the text color, text size, badge color, and badge size.| - -- BadgeStyle - | Name| Type| Mandatory| Default Value| Description| - | -------- | -------- | -------- | -------- | -------- | - | color | [ResourceColor](ts-types.md#resourcecolor) | No| Color.White | Text color.| - | fontSize | number \| string | No| 10 | Text size.| - | badgeSize | number \| string | Yes| - | Badge size.| - | badgeColor | [ResourceColor](ts-types.md#resourcecolor) | No| Color.Red | Badge color.| - -- BadgePosition enums - | Name| Description| - | -------- | -------- | - | RightTop | The badge is displayed in the upper right corner of the parent component.| - | Right | The badge is vertically centered on the right of the parent component.| - | Left | The badge is vertically centered on the left of the parent component.| +**Parameters** + +| Name| Type| Mandatory| Default Value| Description| +| -------- | -------- | -------- | -------- | -------- | +| value | string | Yes| - | Prompt content.| +| position | [BadgePosition](#badgeposition) | No| BadgePosition.RightTop | Position to display the badge relative to the parent component.| +| style | [BadgeStyle](#badgestyle) | Yes| - | Style of the badge, including the font color, font size, badge color, and badge size.| + +## BadgePosition + +| Name| Description| +| -------- | -------- | +| RightTop | The badge is displayed in the upper right corner of the parent component.| +| Right | The badge is vertically centered on the right of the parent component.| +| Left | The badge is vertically centered on the left of the parent component.| + +## BadgeStyle +| Name | Type | Mandatory| Default Value | Description | +| ---------- | ------------------------------------------ | ---- | ----------- | ------------------------------------------- | +| color | [ResourceColor](ts-types.md#resourcecolor) | No | Color.White | Font color. | +| fontSize | number \| string | No | 10 | Font size, in vp. | +| badgeSize | number \| string | No | 16 | Badge size, in vp. This parameter cannot be set in percentage. If it is set to an invalid value, the default value is used.| +| badgeColor | [ResourceColor](ts-types.md#resourcecolor) | No | Color.Red | Badge color. | ## Example @@ -69,40 +66,88 @@ struct BadgeExample { @State message: string = 'new' build() { - Flex({ justifyContent: FlexAlign.SpaceAround }) { - Badge({ - count: this.counts, - maxCount: 99, - style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red } - }) { - Button('message') - .onClick(() => { - this.counts++ - }) - .width(100).height(50).backgroundColor(0x317aff) - }.width(100).height(50) - - Badge({ - value: this.message, - style: { color: 0xFFFFFF, fontSize: 9, badgeSize: 20, badgeColor: Color.Blue } - }) { - Text('message') - .width(80).height(50).fontSize(16).lineHeight(37) - .borderRadius(10).textAlign(TextAlign.Center).backgroundColor(0xF3F4ED) - }.width(80).height(50) - - Badge({ - value: ' ', - position: BadgePosition.Right, - style: { badgeSize: 6, badgeColor: Color.Red } - }) { - Text('message') - .width(90).height(50).fontSize(16).lineHeight(37) - .borderRadius(10).textAlign(TextAlign.Center).backgroundColor(0xF3F4ED) - }.width(90).height(50) - }.width('100%').margin({ top: 5 }) + Column() { + Text('numberBadge').width('80%') + Row({ space: 10 }) { + // Number badge. The default value of maxCount is 99. If the number of notifications exceeds 99, 99+ is displayed. + Badge({ + count: this.counts, + maxCount: 99, + position: BadgePosition.RightTop, + style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red } + }) { + Button('message') + .onClick(() => { + this.counts++ + }) + .width(100).height(50).backgroundColor(0x317aff) + }.width(100).height(50) + + // Number badge + Badge({ + count: this.counts, + maxCount: 99, + position: BadgePosition.Left, + style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red } + }) { + Button('message') + .onClick(() => { + this.counts++ + }) + .width(100).height(50).backgroundColor(0x317aff) + }.width(100).height(50) + + + // Number badge + Badge({ + count: this.counts, + maxCount: 99, + position: BadgePosition.Right, + style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red } + }) { + Button('message') + .onClick(() => { + this.counts++ + }) + .width(100).height(50).backgroundColor(0x317aff) + }.width(100).height(50) + }.margin(10) + + Text('stringBadge').width('80%') + Row({ space: 30 }) { + Badge({ + value: this.message, + style: { color: 0xFFFFFF, fontSize: 9, badgeSize: 20, badgeColor: Color.Blue } + }) { + Text('message') + .width(80) + .height(50) + .fontSize(16) + .lineHeight(37) + .borderRadius(10) + .textAlign(TextAlign.Center) + .backgroundColor(0xF3F4ED) + }.width(80).height(50) + + // When value is null, the dot-style badge is used. + Badge({ + value: '', + position: BadgePosition.Right, + style: { badgeSize: 6, badgeColor: Color.Red } + }) { + Text('message') + .width(90) + .height(50) + .fontSize(16) + .lineHeight(37) + .borderRadius(10) + .textAlign(TextAlign.Center) + .backgroundColor(0xF3F4ED) + }.width(90).height(50) + }.margin(10) + } } } ``` -![en-us_image_0000001212218470](figures/en-us_image_0000001212218470.gif) +![badge](figures/badge.png) 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 cd687513dcef6b4ea5e95b5e481f81592e2244fb..913ba5cd08576515707930d267cfa72f860f3d7a 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-column.md +++ b/en/application-dev/reference/arkui-ts/ts-container-column.md @@ -14,13 +14,13 @@ Supported ## APIs -Column(value?:{space?: string | number}) +Column(value?: {space?: string | number}) **Parameters** | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | -| space | string \| number | No| Space between two adjacent child components in the vertical layout.
Default value: **0**| +| space | string \| number | No| Vertical spacing between two adjacent child components.
Since API version 9, this parameter does not take effect when it is set to a negative number.
Default value: **0**| ## Attributes @@ -40,35 +40,44 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the struct ColumnExample { build() { 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) + // Set the vertical spacing between two adjacent child components to 5. + 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 }) + + // Set the alignment mode of the child components in the horizontal direction. + 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('alignItems(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%') + Column() { + Column().width('50%').height(30).backgroundColor(0xAFEEEE) + Column().width('50%').height(30).backgroundColor(0x00FFFF) + }.alignItems(HorizontalAlign.Center).width('90%').border({ width: 1 }) + + // Set the alignment mode of the child components in the vertical direction. + Text('justifyContent(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%') + Column() { + Column().width('90%').height(30).backgroundColor(0xAFEEEE) + Column().width('90%').height(30).backgroundColor(0x00FFFF) + }.height(100).border({ width: 1 }).justifyContent(FlexAlign.Center) + + Text('justifyContent(End)').fontSize(9).fontColor(0xCCCCCC).width('90%') + Column() { + Column().width('90%').height(30).backgroundColor(0xAFEEEE) + Column().width('90%').height(30).backgroundColor(0x00FFFF) + }.height(100).border({ width: 1 }).justifyContent(FlexAlign.End) }.width('100%').padding({ top: 5 }) } } diff --git a/en/application-dev/reference/arkui-ts/ts-container-columnsplit.md b/en/application-dev/reference/arkui-ts/ts-container-columnsplit.md index a82ecf1919213ac307a457d56ff8ef4509d7fea9..24e4923172aee965e6d4da321ae6c0b0447b7b0c 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-columnsplit.md +++ b/en/application-dev/reference/arkui-ts/ts-container-columnsplit.md @@ -1,18 +1,11 @@ # ColumnSplit - The **\** lays out child components vertically and inserts a horizontal divider between every two child components. > **NOTE** > > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. - -## Required Permissions - -None - - ## Child Components Supported @@ -32,7 +25,8 @@ ColumnSplit() > **NOTE** > > Similar to **\**, the divider of **\** can be dragged to a position that just fully holds a component. - +> +> Dragging is not supported in the Previewer. Check the drag effect on a real device. ## Example @@ -51,7 +45,7 @@ struct ColumnSplitExample { Text('4').width('100%').height(50).backgroundColor(0xD2B48C).textAlign(TextAlign.Center) Text('5').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) } - .resizeable(true) + .resizeable(true) // The divider can be dragged. .width('90%').height('60%') }.width('100%') } diff --git a/en/application-dev/reference/arkui-ts/ts-container-navigator.md b/en/application-dev/reference/arkui-ts/ts-container-navigator.md index 341e95bb621df65519f5b31abbeaadd77db65394..c2596b7551b78f8d148c77f77386cc120057746c 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-navigator.md +++ b/en/application-dev/reference/arkui-ts/ts-container-navigator.md @@ -20,8 +20,8 @@ Navigator(value?: {target: string, type?: NavigationType}) | Name| Type | Mandatory| Description | | ------ | -------------- | ---- | ---------------------------------------------- | -| target | string | Yes | Path of the target page to be redirected to. | -| type | NavigationType | No | Navigation type.
Default value: **NavigationType.Push**| +| target | string | Yes | Path of the target page to be redirected to. | +| type | [NavigationType](#navigationtype) | No | Navigation type.
Default value: **NavigationType.Push**| ## NavigationType @@ -37,9 +37,9 @@ Navigator(value?: {target: string, type?: NavigationType}) | Name | Parameter | Description | | ------ | ------- | ------------------------------------------------------------ | | active | boolean | Whether the **\** component is activated. If the component is activated, the corresponding navigation takes effect.| -| params | object | Data that needs to be passed to the target page during redirection. You can use **router.getParams()** to obtain the data on the target page.| -| target | string | Path of the target page to be redirected to. | -| type | NavigationType | Navigation mode.
Default value: **NavigationType.Push**| +| params | object | Data that needs to be passed to the target page during redirection. You can use [router.getParams()](../apis/js-apis-router.md#routergetparams) to obtain the data on the target page.| +| target | string | Path of the target page to be redirected to. The target page must be added to the **main_pages.json** file. | +| type | [NavigationType](#navigationtype) | Navigation type.
Default value: **NavigationType.Push**| ## Example @@ -56,8 +56,8 @@ struct NavigatorExample { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { Navigator({ target: 'pages/container/navigator/Detail', type: NavigationType.Push }) { Text('Go to ' + this.Text['name'] + ' page') - .width('100%').textAlign(TextAlign.Center) - }.params({ text: this.Text }) + .width('100%').textAlign(TextAlign.Center) + }.params({ text: this.Text}) // Transfer parameters to the Detail page. Navigator() { Text('Back to previous page').width('100%').textAlign(TextAlign.Center) @@ -72,11 +72,12 @@ struct NavigatorExample { ```ts // Detail.ets -import router from '@system.router' +import router from '@ohos.router' @Entry @Component struct DetailExample { + // Receive the input parameters of Navigator.ets. @State text: any = router.getParams().text build() { @@ -86,7 +87,7 @@ struct DetailExample { } Text('This is ' + this.text['name'] + ' page') - .width('100%').textAlign(TextAlign.Center) + .width('100%').textAlign(TextAlign.Center) } .width('100%').height(200).padding({ left: 35, right: 35, top: 35 }) } diff --git a/en/application-dev/reference/arkui-ts/ts-container-panel.md b/en/application-dev/reference/arkui-ts/ts-container-panel.md index ce907f03c845685b6976fbe87be17e36b9377762..f67b201b355af588018e87b35e84844762444ee2 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-panel.md +++ b/en/application-dev/reference/arkui-ts/ts-container-panel.md @@ -20,15 +20,15 @@ Panel(show: boolean) | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | -| show | boolean | Yes| Whether the panel is shown or hidden.| +| show | boolean | Yes| Whether the panel is shown.| ## Attributes | Name| Type| Description| | -------- | -------- | -------- | -| type | PanelType | Type of the panel.
Default value: **PanelType.Foldable**| -| mode | PanelMode | Initial status of the panel.| +| type | [PanelType](#paneltype)| Type of the panel.
Default value: **PanelType.Foldable**| +| mode | [PanelMode](#panelmode) | Initial status of the panel.| | dragBar | boolean | Whether to enable a drag bar. The value **true** means that the drag bar will be displayed, and **false** means the opposite.
Default value: **true**| | fullHeight | string \| number | Panel height in the **PanelMode.Full** mode.| | halfHeight | string \| number | Panel height in the **PanelMode.Half** mode. The default value is half of the screen height.| @@ -57,8 +57,8 @@ Panel(show: boolean) | Name| Description| | -------- | -------- | -| onChange(event: (width: number, height: number, mode: PanelMode) => void) | Triggered when the status of the panel changes. The returned height value is the height of the content area. When the value of **dragBar** is **true**, the height of the panel is the **dragBar** height plus the height of the content area.| -| onHeightChange(callback: (value: number) => void)9+ |Triggered when the status of the panel changes. The returned height value is the height of the content area. When the value of **dragBar** is **true**, the height of the panel is the **dragBar** height plus the height of the content area. For user experience purposes, the panel can be slid to only this height: **fullHeight** - 8 vp.| +| onChange(event: (width: number, height: number, mode: PanelMode) => void) | Triggered when the status of the panel changes. The returned height value is the height of the content area. When the value of **dragBar** is **true**, the panel height is the sum of the drag bar height and content area height.| +| onHeightChange(callback: (value: number) => void)9+ |Triggered when the height of the panel changes. The returned height value is the height of the content area, in px by default. When the value of **dragBar** is **true**, the panel height is the sum of the drag bar height and content area height. For user experience purposes, the panel can be slid to only this height: **fullHeight** - 8 vp.| ## Example @@ -70,7 +70,7 @@ struct PanelExample { @State show: boolean = false build() { - Stack() { + Column() { Text('2021-09-30 Today Calendar: 1.afternoon......Click for details') .width('90%').height(50).borderRadius(10) .backgroundColor(0xFFFFFF).padding({ left: 20 }) @@ -85,7 +85,7 @@ struct PanelExample { } } .type(PanelType.Foldable).mode(PanelMode.Half) - .dragBar(true) // The dragbar is enabled by default. + .dragBar(true) // The drag bar is enabled by default. .halfHeight(500) // The panel height is half of the screen height by default. .onChange((width: number, height: number, mode: PanelMode) => { console.info(`width:${width},height:${height},mode:${mode}`) diff --git a/en/application-dev/reference/arkui-ts/ts-container-relativecontainer.md b/en/application-dev/reference/arkui-ts/ts-container-relativecontainer.md index fad507a1481444959f732c8a9dd537c63de83b86..86d00d6916c5a3ec66b866f3078fa6daf39d1bf7 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-relativecontainer.md +++ b/en/application-dev/reference/arkui-ts/ts-container-relativecontainer.md @@ -9,22 +9,16 @@ The **\** component is used for element alignment in complex ## Rules * Components in a container are aligned horizontally or vertically. - * Alignment modes in the horizontal direction can be left, center, or right, achieved by the **HorizontalAlign.Start**, **HorizontalAlign.Center**, and **HorizontalAlign.End** attributes of the container, respectively. + * Alignment modes in the horizontal direction can be left, middle, or right, achieved by the **HorizontalAlign.Start**, **HorizontalAlign.Center**, and **HorizontalAlign.End** attributes of the container, respectively. * Alignment modes in the vertical direction can be top, center, or bottom, achieved by the **VerticalAlign.Top**, **VerticalAlign.Center**, and **VerticalAlign.Bottom** attributes of the container, respectively. - * A child component can set the container or another child component as the anchor point. - * An ID must be set for the child components in the **\**. The container ID is fixed at **__container__**. - * By default, a child component without an ID is positioned in the upper left corner of the container. - * Three positions in a direction of the child component can use three positions in the same direction of the container or another child components as anchor points. When anchor points are set for more than two positions in the same direction, the third position is skipped. - * When anchor points are set for more than two positions in the same direction, the width and height of the child component do not take effect. + * A child component can set the container or another child component as the anchor. + * To show in the **\**, 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. + * The child component size set on the frontend page is not affected by the **\** rules. * If offset is required after the alignment, it can be set through **offset**. * Exceptions - * When a mutual or circular dependency occurs, all child components in the container are not drawn. - * If anchors are set for more than two positions in the same direction but the anchor positions are reversed, the size of the child component is 0, that is, the child component is not drawn. - -## Required Permissions - -None - + * When a mutual or circular dependency occurs, none of the child components in the container are drawn. + * If anchors are set for more than two positions in a single direction but the anchor positions are reversed, the size of the child component is 0, which means that the child component is not drawn. ## Child Components @@ -41,47 +35,61 @@ RelativeContainer() @Entry @Component struct Index { - build() { Row() { - Button("Extra button").width(100).height(50) - RelativeContainer() { - Button("Button 1").width(120).height(30) - .alignRules({ - middle: { anchor: "__container__", align: HorizontalAlign.Center }, - }) - .id("bt1").borderWidth(1).borderColor(Color.Black) - Text("This is text 2").fontSize(20).padding(10) - .alignRules({ - bottom: { anchor: "__container__", align: VerticalAlign.Bottom }, - top: { anchor: "bt1", align: VerticalAlign.Bottom }, - right:{ anchor: "bt1", align: HorizontalAlign.Center } - }).id("tx2").borderWidth(1).borderColor(Color.Black).height(30) - - LoadingProgress().color(Color.Blue) - .alignRules({ - left: { anchor: "bt1", align: HorizontalAlign.End }, - top: { anchor: "tx2", align: VerticalAlign.Center }, - bottom: { anchor: "__container__", align: VerticalAlign.Bottom } - }).id("lp3").borderWidth(1).borderColor(Color.Black) - .height(30).width(30) - - Gauge({ value: 50, min: 0, max: 100 }) - .startAngle(210).endAngle(150) - .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1], [0xD94838, 1]]) - .strokeWidth(20) - .width(50).height(50) - .alignRules({ - left: { anchor: "tx2", align: HorizontalAlign.End }, - right:{ anchor: "__container__", align: HorizontalAlign.End }, - top: { anchor: "__container__", align: VerticalAlign.Top }, - bottom: { anchor: "lp3", align: VerticalAlign.Top } - }).id("g4").borderWidth(1).borderColor(Color.Black) - - } - .width(200).height(200) - .backgroundColor(Color.Orange) - + Button("Extra button").width(100).height(50) + + RelativeContainer() { + Button("Button 1") + .width(120) + .height(30) + .alignRules({ + middle: { anchor: "__container__", align: HorizontalAlign.Center }, + }) + .id("bt1") + .borderWidth(1) + .borderColor(Color.Black) + + Text("This is text 2") + .fontSize(20) + .padding(10) + .alignRules({ + bottom: { anchor: "__container__", align: VerticalAlign.Bottom }, + top: { anchor: "bt1", align: VerticalAlign.Bottom }, + right: { anchor: "bt1", align: HorizontalAlign.Center } + }) + .id("tx2") + .borderWidth(1) + .borderColor(Color.Black) + .height(30) + + Button("Button 3") + .width(100) + .height(100) + .alignRules({ + left: { anchor: "bt1", align: HorizontalAlign.End }, + top: { anchor: "tx2", align: VerticalAlign.Center }, + bottom: { anchor: "__container__", align: VerticalAlign.Bottom } + }) + .id("bt3") + .borderWidth(1) + .borderColor(Color.Black) + + Text("This is text 4") + .fontSize(20) + .padding(10) + .alignRules({ + left: { anchor: "tx2", align: HorizontalAlign.End }, + right: { anchor: "__container__", align: HorizontalAlign.End }, + top: { anchor: "__container__", align: VerticalAlign.Top }, + bottom: { anchor: "bt3", align: VerticalAlign.Top } + }) + .id("tx4") + .borderWidth(1) + .borderColor(Color.Black) + } + .width(200).height(200) + .backgroundColor(Color.Orange) } .height('100%') } diff --git a/en/application-dev/reference/arkui-ts/ts-container-row.md b/en/application-dev/reference/arkui-ts/ts-container-row.md index d8b0cf68c9a9914d44f121f6d9ac0bb3ffe947c9..6e7d1843e0222844d5fdf46cd537dfda346d9958 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-row.md +++ b/en/application-dev/reference/arkui-ts/ts-container-row.md @@ -20,7 +20,7 @@ Row(value?:{space?: number | string }) | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | -| space | string \| number | No| Space between two adjacent child components in the horizontal layout.
Default value: **0**, in vp | +| space | string \| number | No| Horizontal spacing between two adjacent child components.
Since API version 9, this parameter does not take effect when it is set to a negative number.
Default value: **0**, in vp| ## Attributes @@ -28,7 +28,7 @@ Row(value?:{space?: number | string }) | Name| Type| Description| | -------- | -------- | -------- | | alignItems | [VerticalAlign](ts-appendix-enums.md#verticalalign) | Alignment mode of child components in the vertical direction.
Default value: **VerticalAlign.Center**| -| justifyContent8+ | [FlexAlign](ts-appendix-enums.md#flexalign) | Alignment mode of the child components in the horizontal direction.
Default value: **FlexAlign.Start** | +| justifyContent8+ | [FlexAlign](ts-appendix-enums.md#flexalign) | Alignment mode of the child components in the horizontal direction.
FlexAlign.Start | ## Example @@ -40,38 +40,41 @@ Row(value?:{space?: number | string }) struct RowExample { build() { Column({ space: 5 }) { + // Set the horizontal spacing between two adjacent child components to 5. Text('space').fontSize(9).fontColor(0xCCCCCC).width('90%') - Row({ space: 5 }) { - Row().width('30%').height(50).backgroundColor(0xAFEEEE) - Row().width('30%').height(50).backgroundColor(0x00FFFF) - }.width('90%').height(107).border({ width: 1 }) - - Text('alignItems(Top)').fontSize(9).fontColor(0xCCCCCC).width('90%') - Row() { - Row().width('30%').height(50).backgroundColor(0xAFEEEE) - Row().width('30%').height(50).backgroundColor(0x00FFFF) - }.alignItems(VerticalAlign.Top).height('15%').border({ width: 1 }) - - Text('alignItems(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%') - Row() { - Row().width('30%').height(50).backgroundColor(0xAFEEEE) - Row().width('30%').height(50).backgroundColor(0x00FFFF) - }.alignItems(VerticalAlign.Center).height('15%').border({ width: 1 }) - - Text('justifyContent(End)').fontSize(9).fontColor(0xCCCCCC).width('90%') - Row() { - Row().width('30%').height(50).backgroundColor(0xAFEEEE) - Row().width('30%').height(50).backgroundColor(0x00FFFF) - }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.End) - - Text('justifyContent(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%') - Row() { - Row().width('30%').height(50).backgroundColor(0xAFEEEE) - Row().width('30%').height(50).backgroundColor(0x00FFFF) - }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.Center) + Row({ space: 5 }) { + Row().width('30%').height(50).backgroundColor(0xAFEEEE) + Row().width('30%').height(50).backgroundColor(0x00FFFF) + }.width('90%').height(107).border({ width: 1 }) + + // Set the alignment mode of the child components in the vertical direction. + Text('alignItems(Bottom)').fontSize(9).fontColor(0xCCCCCC).width('90%') + Row() { + Row().width('30%').height(50).backgroundColor(0xAFEEEE) + Row().width('30%').height(50).backgroundColor(0x00FFFF) + }.width('90%').alignItems(VerticalAlign.Bottom).height('15%').border({ width: 1 }) + + Text('alignItems(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%') + Row() { + Row().width('30%').height(50).backgroundColor(0xAFEEEE) + Row().width('30%').height(50).backgroundColor(0x00FFFF) + }.width('90%').alignItems(VerticalAlign.Center).height('15%').border({ width: 1 }) + + // Set the alignment mode of the child components in the horizontal direction. + Text('justifyContent(End)').fontSize(9).fontColor(0xCCCCCC).width('90%') + Row() { + Row().width('30%').height(50).backgroundColor(0xAFEEEE) + Row().width('30%').height(50).backgroundColor(0x00FFFF) + }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.End) + + Text('justifyContent(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%') + Row() { + Row().width('30%').height(50).backgroundColor(0xAFEEEE) + Row().width('30%').height(50).backgroundColor(0x00FFFF) + }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.Center) }.width('100%') } } ``` -![en_us_image_0000001174422908](figures/row.png) +![row](figures/row.png) diff --git a/en/application-dev/reference/arkui-ts/ts-container-rowsplit.md b/en/application-dev/reference/arkui-ts/ts-container-rowsplit.md index 4858f2c37345ea8d074fdd68dae68860a57e20ee..32c8053f54110080f242cc6f71e5dbdfbbe7f41f 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-rowsplit.md +++ b/en/application-dev/reference/arkui-ts/ts-container-rowsplit.md @@ -26,6 +26,8 @@ RowSplit() > **NOTE** > > Similar to **\**, the divider of **\** can be dragged to a position that just fully holds a component. +> +> Dragging is not supported in the Previewer. Check the drag effect on a real device. ## Example