Update docs (10117)

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>

en/application-dev/reference/arkui-ts/ts-container-badge.md

@@ -7,11 +7,6 @@ The **\<Badge>** 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 **\<Badge>** 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 **<Badge>** 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)

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.<br>Default value: **0**|
+| space | string \| number | No| Vertical spacing between two adjacent child components.<br>Since API version 9, this parameter does not take effect when it is set to a negative number.<br>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 })
   }
 }

en/application-dev/reference/arkui-ts/ts-container-columnsplit.md

 # ColumnSplit
 
-
 The **\<ColumnSplit>** 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 **\<RowSplit>**, the divider of **\<ColumnSplit>** 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%')
   }

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.<br>Default value: **NavigationType.Push**|
+| target | string         | Yes  | Path of the target page to be redirected to.    |
+| type   | [NavigationType](#navigationtype) | No  | Navigation type.<br>Default value: **NavigationType.Push**|
 
 ## NavigationType
 
@@ -37,9 +37,9 @@ Navigator(value?: {target: string, type?: NavigationType})
 | Name  | Parameter   | Description                                                        |
 | ------ | ------- | ------------------------------------------------------------ |
 | active | boolean | Whether the **\<Navigator>** 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.<br>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.<br>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 })
   }

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.<br>Default value: **PanelType.Foldable**|
-| mode | PanelMode | Initial status of the panel.|
+| type | [PanelType](#paneltype)| Type of the panel.<br>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.<br>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) =&gt; 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)<sup>9+</sup> |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) =&gt; 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)<sup>9+</sup> |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}`)

en/application-dev/reference/arkui-ts/ts-container-relativecontainer.md

@@ -9,22 +9,16 @@ The **\<RelativeContainer>** 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 **\<RelativeContainer>**. 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 **\<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. 
+   * The child component size set on the frontend page is not affected by the **\<RelativeContainer>** 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%')
   }

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.<br>Default value: **0**, in vp |
+| space | string \| number | No| Horizontal spacing between two adjacent child components.<br>Since API version 9, this parameter does not take effect when it is set to a negative number.<br>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.<br>Default value: **VerticalAlign.Center**|
-| justifyContent<sup>8+</sup> | [FlexAlign](ts-appendix-enums.md#flexalign) | Alignment mode of the child components in the horizontal direction.<br>Default value: **FlexAlign.Start** |
+| justifyContent<sup>8+</sup> | [FlexAlign](ts-appendix-enums.md#flexalign) | Alignment mode of the child components in the horizontal direction.<br>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)

en/application-dev/reference/arkui-ts/ts-container-rowsplit.md

@@ -26,6 +26,8 @@ RowSplit()
 >  **NOTE**
 >
 >  Similar to **\<RowSplit>**, the divider of **\<RowSplit>** 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