Update docs (10240)

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

en/application-dev/reference/arkui-ts/ts-basic-components-richtext.md

@@ -2,17 +2,20 @@
 
 The **\<RichText>** component parses and displays HTML text.
 
-> **NOTE**
+>  **NOTE**
 >
 > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
+## Required Permissions
+
+None
 ## Child Components
 
 Not supported
 
 ## APIs
 
-RichText(content:string)
+RichText(content: string)
 
 **Parameters**
 
@@ -42,7 +45,7 @@ RichText(content:string)
 | \<u>\</u> | Defines text that should be styled differently or have a non-textual annotation, such as misspelt words or a proper name in Chinese text. It is recommended that you avoid using the \<u> tag where it could be confused with a hyperlink.| \<p>\<u>This is an underlined paragraph\</u>\</p> |
 | \<style>\</style> | Used to embed CSS within an HTML document.| \<style>h1{color:red;}p{color:blue;}\</style> |
 | style | Defines the inline style of an element and is placed inside the tag. Use quotation marks (') to separate the styling text and use semicolons (;) to separate styles, for example, **style='width: 500px;height: 500px;border: 1px solid;margin: 0 auto;'**.| \<h1 style='color:blue;text-align:center'>This is a heading\</h1>\<p style='color:green'>This is a paragraph\</p> |
-| \<script>\</script> | Used to embed or reference a client-side script, such as JavaScript.| \<script>document.write("Hello World!")\</script> |
+| \<script>\</script> | Embeds or references a client-side script, such as JavaScript. | \<script>document.write("Hello World!")\</script> |
 
 ## Example
 

en/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md

@@ -24,9 +24,9 @@ LongPressGesture(value?: { fingers?: number, repeat?: boolean, duration?: number
 
 | Name| Description|
 | -------- | -------- |
-| onAction(event:(event?: [GestureEvent](ts-gesture-settings.md)) => void) | Callback invoked when a long press gesture is recognized.|
-| onActionEnd(event:(event?: [GestureEvent](ts-gesture-settings.md)) => void) | Callback invoked when the finger used for a long press gesture is lift.|
-| onActionCancel(event: () => void) | Callback invoked when a tap cancellation event is received after a long press gesture is recognized.|
+| onAction(event:(event?: [GestureEvent](ts-gesture-settings.md#gestureevent)) => void) | Invoked when a long press gesture is recognized.|
+| onActionEnd(event:(event?: [GestureEvent](ts-gesture-settings.md#gestureevent)) => void) | Invoked when the finger used for a long press gesture is lift.|
+| onActionCancel(event: () => void) | Invoked when a tap cancellation event is received after a long press gesture is recognized.|
 
 
 ## Example

en/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md

@@ -15,24 +15,24 @@ PanGesture(value?: { fingers?: number, direction?: PanDirection, distance?: numb
 
 **Parameters**
 
-| Name      | Type         | Mandatory | Description                              |
-| --------- | ------------ | --------- | ---------------------------------------- |
-| fingers   | number       | No        | Minimum number of fingers to trigger a pan gesture. The value ranges from 1 to 10.<br>Default value: **1** |
-| direction | PanDirection | No        | Pan direction. The enumerated value supports the AND (&amp;) and OR (\|) operations.<br>Default value: **PanDirection.All** |
-| distance  | number       | No        | Minimum pan distance to trigger the gesture, in vp.<br>Default value: **5**<br>**NOTE**<br>If a pan gesture and tab swipe occur at the same time, set **distance** to **1** so that the gesture can be more easily recognized. |
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| fingers | number | No| Minimum number of fingers to trigger a pan gesture. The value ranges from 1 to 10.<br>Default value: **1**|
+| direction | PanDirection | No| Pan direction. The enumerated value supports the AND (&amp;) and OR (\|) operations.<br>Default value: **PanDirection.All**|
+| distance | number | No| Minimum pan distance to trigger the gesture, in vp.<br>Default value: **5**<br>**NOTE**<br>If a pan gesture and tab swipe occur at the same time, set **distance** to **1** so that the gesture can be more easily recognized.|
 
 ## PanDirection enums
 
-| Name       | Description           |
-| ---------- | --------------------- |
-| All        | All directions.       |
-| Horizontal | Horizontal panning.   |
-| Vertical   | Vertical panning.     |
-| Left       | Panning to the left.  |
-| Right      | Panning to the right. |
-| Up         | Panning up.           |
-| Down       | Panning down.         |
-| None       | Panning disabled.     |
+| Name| Description|
+| -------- | -------- |
+| All | All directions.|
+| Horizontal | Horizontal panning.|
+| Vertical | Vertical panning.|
+| Left | Panning to the left.|
+| Right | Panning to the right.|
+| Up | Panning up.|
+| Down | Panning down.|
+| None | Panning disabled.|
 
 
 ## PanGestureOptions
@@ -47,21 +47,21 @@ See the **PanGesture** parameters.
 
 **APIs**
 
-| Name                              | Description                 |
-| --------------------------------- | --------------------------- |
-| setDirection(value: PanDirection) | Sets the direction.         |
-| setDistance(value: number)        | Sets the distance.          |
-| setFingers(value: number)         | Sets the number of fingers. |
+| Name| Description|
+| -------- | -------- |
+| setDirection(value: PanDirection) | Sets the direction.|
+| setDistance(value: number) | Sets the distance.|
+| setFingers(value: number) | Sets the number of fingers.|
 
 
 ## Events
 
-| Name                                     | Description                              |
-| ---------------------------------------- | ---------------------------------------- |
-| onActionStart(event: (event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Callback invoked when a pan gesture is recognized. |
-| onActionUpdate(event: (event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Callback invoked when the pan gesture status is updated. |
-| onActionEnd(event: (event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Callback invoked when the finger used for a pan gesture is lift. |
-| onActionCancel(event: () =&gt; void)     | Callback invoked when a tap cancellation event is received after a pan gesture is recognized. |
+| Name| Description|
+| -------- | -------- |
+| onActionStart(event: (event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Invoked when a pan gesture is recognized.|
+| onActionUpdate(event: (event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Invoked when the pan gesture status is updated.|
+| onActionEnd(event: (event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Invoked when the finger used for a pan gesture is lift.|
+| onActionCancel(event: () =&gt; void) | Invoked when a tap cancellation event is received after a pan gesture is recognized.|
 
 
 ## Example
@@ -115,3 +115,13 @@ struct PanGestureExample {
   }
 }
 ```
+
+**Diagrams**
+
+Pannig to the left:
+
+![en-us_image_0000001174264374](figures/en-us_image_0000001174264374.png) 
+
+Click **Set PanGesture Trigger Condition** to two fingers moving toward the lower left corner.
+
+ ![en-us_image1_0000001174264374](figures/en-us_image1_0000001174264374.png) 

en/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md

@@ -13,20 +13,20 @@ PinchGesture(value?: { fingers?: number, distance?: number })
 
 **Parameters**
 
-| Name     | Type   | Mandatory | Description                              |
-| -------- | ------ | --------- | ---------------------------------------- |
-| fingers  | number | No        | Minimum number of fingers to trigger a pinch. The value ranges from 2 to 5.<br>Default value: **2** |
-| distance | number | No        | Minimum recognition distance, in vp.<br>Default value: **3** |
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| fingers | number | No| Minimum number of fingers to trigger a pinch. The value ranges from 2 to 5.<br>Default value: **2**|
+| distance | number | No| Minimum recognition distance, in vp.<br>Default value: **3**|
 
 
 ## Events
 
-| Name                                     | Description                              |
-| ---------------------------------------- | ---------------------------------------- |
-| onActionStart(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when a pinch gesture is recognized. |
-| onActionUpdate(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when the user moves the finger in a pinch gesture on the screen. |
-| onActionEnd(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when the finger used for a pinch gesture is lift. |
-| onActionCancel(event: () =&gt; void)     | Triggered when a tap cancellation event is received after a pinch gesture is recognized. |
+| Name| Description|
+| -------- | -------- |
+| onActionStart(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when a pinch gesture is recognized.|
+| onActionUpdate(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when the user moves the finger in a pinch gesture on the screen.|
+| onActionEnd(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when the finger used for a pinch gesture is lift.|
+| onActionCancel(event: () =&gt; void) | Triggered when a tap cancellation event is received after a pinch gesture is recognized.|
 
 
 ## Example

en/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md

@@ -23,10 +23,10 @@ RotationGesture(value?: { fingers?: number, angle?: number })
 
 | Parameter| Description|
 | -------- | -------- |
-| onActionStart(event:(event?: [GestureEvent](ts-gesture-settings.md)) => void) | Triggered when a rotation gesture is recognized.|
-| onActionUpdate(event:(event?: [GestureEvent](ts-gesture-settings.md)) => void) | Triggered when the user moves the finger in a rotation gesture on the screen.|
-| onActionEnd(event:(event?: [GestureEvent](ts-gesture-settings.md)) => void) | Triggered when the finger used for the rotation gesture is lift.|
-| onActionCancel(event: () => void) | Triggered when a tap cancellation event is received after the rotation gesture is recognized.|
+| onActionStart(event:(event?: [GestureEvent](ts-gesture-settings.md)) => void) | Triggered when a rotation gesture is recognized.|
+| onActionUpdate(event:(event?: [GestureEvent](ts-gesture-settings.md)) => void) | Triggered when the user moves the finger in a rotation gesture on the screen.|
+| onActionEnd(event:(event?: [GestureEvent](ts-gesture-settings.md)) => void) | Triggered when the finger used for the rotation gesture is lift.|
+| onActionCancel(event: () => void) | Triggered when a tap cancellation event is received after the rotation gesture is recognized.|
 
 
 ## Example
@@ -49,7 +49,7 @@ struct RotationGestureExample {
       .padding(20)
       .border({ width: 3 })
       .margin(80)
-      .rotate({ angle: this.angle })
+      .rotate({ z: 1, angle: this.angle })
       // The gesture event is triggered by rotating with two fingers.
       .gesture(
       RotationGesture()

en/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md

@@ -13,27 +13,27 @@ SwipeGesture(value?: { fingers?: number; direction?: SwipeDirection; speed?: num
 
 **Parameters**
 
-| Name      | Type           | Mandatory | Description                              |
-| --------- | -------------- | --------- | ---------------------------------------- |
-| fingers   | number         | No        | Minimum number of fingers to trigger a swipe gesture. The value ranges from 1 to 10.<br>Default value: **1** |
-| direction | SwipeDirection | No        | Swipe direction.<br>Default value: **SwipeDirection.All** |
-| speed     | number         | No        | Minimum speed of the swipe gesture, in vp/s.<br>Default value: **100** |
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| fingers | number | No| Minimum number of fingers to trigger a swipe gesture. The value ranges from 1 to 10.<br>Default value: **1**|
+| direction | [swipeDirection](#swipedirection)| No| Swipe direction.<br>Default value: **SwipeDirection.All**|
+| speed | number | No| Minimum speed of the swipe gesture, in vp/s.<br>Default value: **100**|
 
 ## SwipeDirection
 
-| Name       | Description           |
-| ---------- | --------------------- |
-| All        | All directions.       |
-| Horizontal | Horizontal direction. |
-| Vertical   | Vertical direction.   |
-| None       | Swiping disabled.     |
+| Name| Description|
+| -------- | -------- |
+| All | All directions.|
+| Horizontal | Horizontal direction.|
+| Vertical | Vertical direction.|
+| None | Swiping disabled.|
 
 
 ## Events
 
-| Name                                     | Description                              |
-| ---------------------------------------- | ---------------------------------------- |
-| onAction(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when a swipe gesture is recognized. |
+| Name| Description|
+| -------- | -------- |
+| onAction(event:(event?: [GestureEvent](ts-gesture-settings.md#gestureevent)) =&gt; void) | Triggered when a swipe gesture is recognized.|
 
 ## Example
 
@@ -55,7 +55,7 @@ struct SwipeGestureExample {
       .width(300)
       .height(200)
       .margin(100)
-      .rotate({ angle: this.rotateAngle })
+      .rotate({ z: 1, angle: this.rotateAngle })
       // The gesture event is triggered by swiping vertically with one finger.
       .gesture(
       SwipeGesture({ direction: SwipeDirection.Vertical })

en/application-dev/reference/arkui-ts/ts-combined-gestures.md

 # Combined Gestures
 
+Continuous recognition, parallel recognition, and exclusive recognition are supported for A group of gestures.
 
 > **NOTE**
 >
-> Combined gestures are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-
-
-## Required Permissions
-
-None
+> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
 ## APIs
 
 GestureGroup(mode: GestureMode, ...gesture: GestureType[])
 
-**Parameters**
-
-| Name | Type | Mandatory | Default Value | Description |
-| -------- | -------- | -------- | -------- | -------- |
-| mode | GestureMode | Yes | - | Recognition mode of combined gestures. |
-| gesture | [TapGesture](ts-basic-gestures-tapgesture.md)<br/>\| [LongPressGesture](ts-basic-gestures-longpressgesture.md)<br/>\| [PanGesture](ts-basic-gestures-pangesture.md)<br/>\| [PinchGesture](ts-basic-gestures-pinchgesture.md)<br/>\| [RotationGesture](ts-basic-gestures-rotationgesture.md) | Yes | - | Variable-length parameter, indicating one or more basic gesture types. These gestures are recognized in combination. |
+- Parameters
+  | Name| Type| Mandatory| Default Value| Description|
+  | -------- | -------- | -------- | -------- | -------- |
+  | mode | [GestureMode](#gesturemode)                                                  | Yes| - | Recognition mode of combined gestures.|
+  | gesture | [TapGesture](ts-basic-gestures-tapgesture.md)<br>\| [LongPressGesture](ts-basic-gestures-longpressgesture.md)<br>\| [PanGesture](ts-basic-gestures-pangesture.md)<br>\| [PinchGesture](ts-basic-gestures-pinchgesture.md)<br>\| [RotationGesture](ts-basic-gestures-rotationgesture.md) | Yes| - | Variable-length parameter, indicating one or more basic gesture types. These gestures are recognized in combination.|
 
 ## GestureMode
-| Name | Description |
+| Name| Description|
 | -------- | -------- |
-| Sequence | Sequential recognition: Gestures are recognized in the registration sequence until all gestures are recognized successfully. When one gesture fails to be recognized, all gestures fail to be recognized. |
-| Parallel | Parallel recognition. Registered gestures are recognized concurrently until all gestures are recognized. The recognition result of each gesture does not affect each other. |
-| Exclusive | Exclusive recognition. Registered gestures are identified concurrently. If one gesture is successfully recognized, gesture recognition ends. |
+| Sequence | Sequential recognition: Gestures are recognized in the registration sequence until all gestures are recognized successfully. When one gesture fails to be recognized, all gestures fail to be recognized.|
+| Parallel | Parallel recognition. Registered gestures are recognized concurrently until all gestures are recognized. The recognition result of each gesture does not affect each other.|
+| Exclusive | Exclusive recognition. Registered gestures are identified concurrently. If one gesture is successfully recognized, gesture recognition ends.|
 
 
 ## Events
 
-| Name | Description |
+| Name| Description|
 | -------- | -------- |
-| onCancel(event: () =&gt; void) | Callback for the **GestureMode.Sequence** cancellation event. |
+| onCancel(event: () =&gt; void) | Callback for the GestureMode.Sequence cancellation event.|
 
 
 ## Example
 
-
 ```ts
 // xxx.ets
 @Entry
 @Component
 struct GestureGroupExample {
-  @State count: number = 0
-  @State offsetX: number = 0
-  @State offsetY: number = 0
-  @State borderStyles: BorderStyle = BorderStyle.Solid
+  @State count: number = 0;
+  @State offsetX: number = 0;
+  @State offsetY: number = 0;
+  @State positionX: number = 0;
+  @State positionY: number = 0;
+  @State borderStyles: BorderStyle = BorderStyle.Solid;
 
   build() {
-    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
+    Column() {
       Text('sequence gesture\n' + 'LongPress onAction:' + this.count + '\nPanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY)
-    }.translate({ x: this.offsetX, y: this.offsetY, z: 5 })
-    .height(100).width(200).padding(10).margin(80).border({ width: 1, style: this.borderStyles })
+    }
+    .translate({ x: this.offsetX, y: this.offsetY, z: 0 })
+    .height(150)
+    .width(200)
+    .padding(20)
+    .margin(20)
+    .border({ width: 3, style: this.borderStyles })
     .gesture(
-      GestureGroup(GestureMode.Sequence,
-        LongPressGesture({ repeat: true })
-          .onAction((event: GestureEvent) => {
-            if (event.repeat) {this.count++}
-            console.log('LongPress onAction')
-          })
-          .onActionEnd(() => {
-            console.log('LongPress end')
-          }),
-        PanGesture({})
-          .onActionStart(() => {
-            this.borderStyles = BorderStyle.Dashed
-            console.log('pan start')
-          })
-          .onActionUpdate((event: GestureEvent) => {
-            this.offsetX = event.offsetX
-            this.offsetY = event.offsetY
-            console.log('pan update')
-          })
-      )
+      // The following combined gestures are recognized in sequential recognition mode. If the long press gesture event is not triggered correctly, the drag gesture event will not be triggered.
+    GestureGroup(GestureMode.Sequence,
+    LongPressGesture({ repeat: true })
+      .onAction((event: GestureEvent) => {
+        if (event.repeat) {
+          this.count++;
+        }
+        console.info('LongPress onAction');
+      })
+      .onActionEnd(() => {
+        console.info('LongPress end');
+      }),
+    PanGesture()
+      .onActionStart(() => {
+        this.borderStyles = BorderStyle.Dashed;
+        console.info('pan start');
+      })
+      .onActionUpdate((event: GestureEvent) => {
+        this.offsetX = this.positionX + event.offsetX;
+        this.offsetY = this.positionY + event.offsetY;
+        console.info('pan update');
+      })
+      .onActionEnd(() => {
+        this.positionX = this.offsetX;
+        this.positionY = this.offsetY;
+        this.borderStyles = BorderStyle.Solid;
+        console.info('pan end');
+      })
+    )
       .onCancel(() => {
-        console.log('sequence gesture canceled')
+        console.info('sequence gesture canceled');
       })
     )
   }
 }
 ```
 
-![en-us_image_0000001212058490](figures/en-us_image_0000001212058490.gif)
+Diagram:
+
+In sequence recognition mode the long press gesture event is triggered first.
+
+![en-us_image_0000001174104384](figures/en-us_image_0000001174104384.png)
+
+After the long press gesture is recognized, the drag gesture event is triggered.
+
+ ![en-us_image1_0000001174104384](figures/en-us_image1_0000001174104384.png) 

en/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md

@@ -4,13 +4,7 @@ The **\<Canvas>** component can be used to customize drawings.
 
 > **NOTE**
 > 
-> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
-
-
-
-## Required Permissions
-
-None
+>  This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
 ## Child Components
 
@@ -36,7 +30,7 @@ In addition to the [universal events](ts-universal-events-click.md), the followi
 
 | Name                           | Parameter  | Description                  |
 | ----------------------------- | ---- | -------------------- |
-| onReady(event: () => void) | -   | Triggered when a canvas is ready. |
+| onReady(event: () => void) | -   | Triggered when the canvas is ready. |
 
 
 **Example**

en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md

@@ -17,40 +17,41 @@ Adds a color stop for the **CanvasGradient** object based on the specified offse
 
 **Parameters**
 
-  | Name    | Type    | Mandatory  | Default Value      | Description                          |
-  | ------ | ------ | ---- | --------- | ---------------------------- |
-  | offset | number | Yes   | 0         | Relative position of the gradient stop along the gradient vector. The value ranges from 0 to 1.|
-  | color  | string | Yes   | '#ffffff' | Gradient color to set.                    |
+| Name    | Type    | Mandatory  | Default Value      | Description                          |
+| ------ | ------ | ---- | --------- | ---------------------------- |
+| offset | number | Yes   | 0         | Relative position of the gradient stop along the gradient vector. The value ranges from 0 to 1.|
+| color  | string | Yes   | '#ffffff' | Gradient color to set.                    |
 
 
 **Example**
 
   ```ts
-  // xxx.ets
-  @Entry
-  @Component
-  struct Page45 {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-
-    build() {
-      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-        Canvas(this.context)
-          .width('100%')
-          .height('100%')
-          .backgroundColor('#ffff00')
-          .onReady(() =>{
-            var grad = this.context.createLinearGradient(50,0, 300,100)
-            grad.addColorStop(0.0, 'red')
-            grad.addColorStop(0.5, 'white')
-            grad.addColorStop(1.0, 'green')
-            this.context.fillStyle = grad
-            this.context.fillRect(0, 0, 500, 500)
-          })
-      }
-      .width('100%')
-      .height('100%')
-    }}
+// xxx.ets
+@Entry
+@Component
+struct Page45 {
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+
+  build() {
+    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+      Canvas(this.context)
+        .width('100%')
+        .height('100%')
+        .backgroundColor('#ffff00')
+        .onReady(() => {
+          var grad = this.context.createLinearGradient(50, 0, 300, 100)
+          grad.addColorStop(0.0, 'red')
+          grad.addColorStop(0.5, 'white')
+          grad.addColorStop(1.0, 'green')
+          this.context.fillStyle = grad
+          this.context.fillRect(0, 0, 500, 500)
+        })
+    }
+    .width('100%')
+    .height('100%')
+  }
+}
   ```
   ![en-us_image_0000001256858381](figures/en-us_image_0000001256858381.png)
 

en/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md

@@ -10,10 +10,10 @@ An **ImageBitmap** object stores pixel data rendered on a canvas.
 
 ## Attributes
 
-| Name| Type| Description| 
+| Name| Type| Description|
 | -------- | -------- | -------- |
-| width | number | Pixel width of the **ImageBitmap** object.| 
-| height | number | Pixel height of the **ImageBitmap** object.| 
+| width | number | Pixel width of the **ImageBitmap** object.|
+| height | number | Pixel height of the **ImageBitmap** object.|
 
 **Example**
 

en/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md

@@ -10,11 +10,11 @@ An **ImageData** object stores pixel data rendered on a canvas.
 
 ## Attributes
 
-| Name| Type| Description| 
+| Name| Type| Description|
 | -------- | -------- | -------- |
-| width | number | Actual width of the rectangle on the canvas, in pixels.| 
-| height | number | Actual height of the rectangle on the canvas, in pixels.| 
-| data | Uint8ClampedArray | A one-dimensional array of color values. The values range from 0 to 255.| 
+| width | number | Actual width of the rectangle on the canvas, in pixels.|
+| height | number | Actual height of the rectangle on the canvas, in pixels.|
+| data | Uint8ClampedArray | A one-dimensional array of color values. The values range from 0 to 255.|
 
 **Example**
 

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

 # GridContainer
 
+The **\<GridContainer>** component lays out components vertically. It is used only in the grid layout.
 
-> ![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 **&lt;GridContainer&gt;** component lays out components vertically. It is used only in the grid layout.
-
-
-## Required Permissions
-
-None
+>  **NOTE**
+>
+>  This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
 ## Child Components
 
-This component can contain child components.
+Supported
 
 
 ## APIs
 
-GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeType, gutter?: Length, margin?: Length})
+GridContainer(value?: { columns?: number | 'auto', sizeType?: SizeType, gutter?: number | string, margin?: number | string})
 
-- Parameter
-    | Name | Type | Mandatory | Default Value | Description |
-  | -------- | -------- | -------- | -------- | -------- |
-  | columns | number \| 'auto' | No | 'auto' | Total number of columns in the current layout. |
-  | sizeType | SizeType | No | SizeType.Auto | Device size type. |
-  | gutter | Length | No | - | Gutter of the grid layout. |
-  | margin | Length | No | - | Margin of the grid layout. |
+**Parameters**
 
-- SizeType enums
-    | Name | Description | 
-  | -------- | -------- |
-  | XS | Device of the minimum size. | 
-  | SM | Small-sized device. | 
-  | MD | Medium-sized device. | 
-  | LG | Large-sized device. | 
-  | Auto | Auto. The size type is selected based on the device type. | 
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| columns | number \| 'auto' | No| Total number of columns in the current layout.<br>Default value: **'auto'**|
+| sizeType | SizeType | No| Device size type.<br>Default value: **SizeType.Auto**|
+| gutter | number \| string | No| Gutter of the grid layout. This parameter cannot be set to a percentage. |
+| margin | number \| string | No| Margin of the grid layout. This parameter cannot be set to a percentage. |
+
+## SizeType
+
+| Name| Description|
+| -------- | -------- |
+| XS | Device of the minimum size.|
+| SM | Small-sized device.|
+| MD | Medium-sized device.|
+| LG | Large-sized device.|
+| Auto | Auto. The size type is selected based on the device type.|
 
 
 ## Attributes
 
-Universal attributes and [attributes](ts-container-column.md#attributes) of the **&lt;Column&gt;** component are supported.
+The universal attributes and attributes of the **[<Column\>](ts-container-column.md#attributes)** component are supported.
 
 
 ## Events
 
-Universal events are supported.
+The universal events are supported.
 
 
 ## Example
 
-
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct GridContainerExample {

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

@@ -4,7 +4,9 @@ The **\<Scroll>** component scrolls the content when the layout size of a compon
 
 >  **NOTE**
 >  - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
->  - The prerequisite for the component to rebound is that the component is scrolled.
+>  - When nesting a **\<List>** within this component, specify the width and height for the **\<List>** under scenarios where consistently high performance is required. If the width and height are not specified, this component will load all content of the **\<List>**.
+>  - This component can scroll only when the size on the main axis is less than the content size.
+>  - This component can produce a bounce effect only when there is more than one screen of content.
 
 
 ## Child Components
@@ -22,11 +24,11 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 
 | Name            | Type                                    | Description       |
 | -------------- | ---------------------------------------- | --------- |
-| scrollable     | ScrollDirection                          | Scroll direction.<br>Default value: **ScrollDirection.Vertical**|
-| scrollBar      | [BarState](ts-appendix-enums.md#barstate) | Scrollbar status.<br>Default value: **BarState.Off**|
-| scrollBarColor | string \| number \| Color   | Color of the scrollbar.|
+| scrollable     | [ScrollDirection](#scrolldirection)                        | Scroll direction.<br>Default value: **ScrollDirection.Vertical**|
+| scrollBar      | [BarState](ts-appendix-enums.md#barstate) | Scrollbar status.<br>Default value: **BarState.Auto**|
+| scrollBarColor | string \| number \| [Color](ts-appendix-enums.md#color)   | Color of the scrollbar.|
 | scrollBarWidth | string \| number         | Width of the scrollbar.|
-| edgeEffect     | [EdgeEffect](ts-appendix-enums.md#edgeeffect)            | Scroll effect. For details, see **EdgeEffect**.<br>Default value: **EdgeEffect.Spring**|
+| edgeEffect     | [EdgeEffect](ts-appendix-enums.md#edgeeffect)            | Scroll effect. For details, see **EdgeEffect**.<br>Default value: **EdgeEffect.None**|
 
 ## ScrollDirection
 | Name      | Description                    |
@@ -34,15 +36,20 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 | Horizontal | Only horizontal scrolling is supported.    |
 | Vertical   | Only vertical scrolling is supported.    |
 | None       | Scrolling is disabled.              |
-| Free<sup>(deprecated) </sup> | Vertical or horizontal scrolling is supported.<br> This API is deprecated since API version 9.|
+| Free<sup>(deprecated) </sup> | Vertical or horizontal scrolling is supported.<br>This API is deprecated since API version 9.|
 
 ## Events
 
-| Name                                                        | Description                                                  |
-| ----------------------------------------------------------- | ------------------------------------------------------------ |
-| onScroll(event: (xOffset: number, yOffset: number) => void) | Invoked to return the horizontal and vertical offsets during scrolling when the specified scroll event occurs. |
-| onScrollEdge(event: (side: Edge) => void)                   | Invoked when scrolling reaches the edge.                     |
-| onScrollEnd(event: () => void)                              | Invoked when scrolling stops.                                |
+| Name                                                        | Description                                                    |
+| ------------------------------------------------------------ | ------------------------------------------------------------ |
+| onScrollBegin<sup>9+</sup>(event: (dx: number, dy: number) => { dxRemain: number, dyRemain: number }) | Invoked when scrolling starts.<br>Parameters:<br>- **dx**: amount to scroll by in the horizontal direction.<br>- **dy**: amount to scroll by in the vertical direction.<br>Return value:<br>- **dxRemain**: remaining amount to scroll by in the horizontal direction.<br>- **dyRemain**: remaining amount to scroll by in the vertical direction.|
+| onScroll(event: (xOffset: number, yOffset: number) => void)  | Invoked to return the horizontal and vertical offsets during scrolling when the specified scroll event occurs.         |
+| onScrollEdge(event: (side: Edge) => void)                    | Invoked when scrolling reaches the edge.                                        |
+| onScrollEnd(event: () => void)                               | Invoked when scrolling stops.                                          |
+
+>  **NOTE**
+>
+>  If the **onScrollBegin** event and **scrollBy** API are used to implement nested scrolling, you must set **edgeEffect** of the scrolling child node to **None**. For example, if a **\<List>** is nested in the **\<Scroll>** component, the **edgeEffect** attribute of the **\<List>** must be set to **EdgeEffect.None**.
 
 ## Scroller
 
@@ -67,18 +74,24 @@ Scrolls to the specified position.
 
 | Name   | Type                                                    | Mandatory| Description                                                    |
 | --------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
-| xOffset   | number \| string                                                       | Yes  | Horizontal scrolling offset.                                              |
-| yOffset   | number \| string                                                       | Yes  | Vertical scrolling offset.                                              |
-| animation | {<br>duration: number,<br>curve: [Curve](ts-appendix-enums.md#curve)<br>} | No  | Animation configuration, which includes the following:<br>- **duration**: scrolling duration.<br>- **curve**: scrolling curve.|
+| xOffset   | Length                                                       | Yes  | Horizontal scrolling offset.                                              |
+| yOffset   | Length                                                       | Yes  | Vertical scrolling offset.                                              |
+| animation | {<br>duration: number,<br>curve: [Curve](ts-animatorproperty.md)<br>} | No  | Animation configuration, which includes the following:<br>- **duration**: scrolling duration.<br>- **curve**: scrolling curve.|
 
 
 ### scrollEdge
 
-scrollEdge(value: [Edge](ts-appendix-enums.md#edge)): void
+scrollEdge(value: Edge): void
 
 
 Scrolls to the edge of the container.
 
+**Parameters**
+
+| Name  | Type| Mandatory  | Description     |
+| ----- | ---- | ---- | --------- |
+| value | [Edge](ts-appendix-enums.md#edge) | Yes   | Edge position to scroll to.|
+
 
 ### scrollPage
 
@@ -91,7 +104,7 @@ Scrolls to the next or previous page.
 | Name      | Type   | Mandatory  | Description                          |
 | --------- | ------- | ---- | ------------------------------ |
 | next      | boolean | Yes   | Whether to turn to the next page. The value **true** means to scroll to the next page, and **false** means to scroll to the previous page.|
-| direction | [Axis](ts-appendix-enums.md#axis)    | No   | Scrolling direction: horizontal or vertical.               |
+| direction<sup>(deprecated) </sup> | [Axis](ts-appendix-enums.md#axis)    | No   | Scrolling direction: horizontal or vertical.<br> This API is deprecated since API version 9.               |
 
 
 ### currentOffset
@@ -101,6 +114,13 @@ currentOffset()
 
 Obtains the scrolling offset.
 
+**Return value**
+
+| Type                                      | Description                                      |
+| ---------------------------------------- | ---------------------------------------- |
+| {<br>xOffset: number,<br>yOffset: number<br>} | **xOffset**: horizontal scrolling offset.<br>**yOffset**: vertical scrolling offset.|
+
+
 ### scrollToIndex
 
 scrollToIndex(value: number): void
@@ -120,15 +140,36 @@ Scrolls to the item with the specified index.
 | value  | number   | Yes  | Index of the item to be scrolled to in the list.|
 
 
+### scrollBy<sup>9+</sup>
+
+scrollBy(dx: Length, dy: Length): void
+
+
+Scrolls by the specified amount.
+
+
+>  **NOTE**
+>
+>  Only the **\<Scroll>** component is supported.
+
+**Parameters**
+
+| Name  | Type  | Mandatory  | Description             |
+| ----- | ------ | ---- | ----------------- |
+| dx | Length | Yes   | Amount to scroll by in the horizontal direction. The percentage format is not supported.|
+| dy | Length | Yes   | Amount to scroll by in the vertical direction. The percentage format is not supported.|
+
+
 ## Example
+### Example 1
 
 ```ts
 // xxx.ets
 @Entry
 @Component
 struct ScrollExample {
-  scroller: Scroller = new Scroller()
-  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+  scroller: Scroller = new Scroller();
+  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
 
   build() {
     Stack({ alignContent: Alignment.TopStart }) {
@@ -146,38 +187,99 @@ struct ScrollExample {
           }, item => item)
         }.width('100%')
       }
-      .scrollable(ScrollDirection.Vertical)
-      .scrollBar(BarState.On)
-      .scrollBarColor(Color.Gray)
-      .scrollBarWidth(30)
+      .scrollable(ScrollDirection.Vertical)  // The scrollbar scrolls in the vertical direction.
+      .scrollBar(BarState.On)  // The scrollbar is always displayed.
+      .scrollBarColor(Color.Gray)  // Color of the scrollbar.
+      .scrollBarWidth(30) // Width of the scrollbar.
+      .edgeEffect(EdgeEffect.None)
       .onScroll((xOffset: number, yOffset: number) => {
-        console.info(xOffset + ' ' + yOffset)
+        console.info(xOffset + ' ' + yOffset);
       })
       .onScrollEdge((side: Edge) => {
-        console.info('To the edge')
+        console.info('To the edge');
       })
       .onScrollEnd(() => {
-        console.info('Scroll Stop')
+        console.info('Scroll Stop');
       })
 
+      Button('scroll 150')
+        .onClick(() => { // Click to scroll down to 150.0 vp.
+          this.scroller.scrollBy(0,150);
+        })
+        .margin({ top: 10, left: 20 })
       Button('scroll 100')
         .onClick(() => { // Click to scroll down by 100.0 vp.
-          this.scroller.scrollTo({ xOffset: 0, yOffset: this.scroller.currentOffset().yOffset + 100 })
+          this.scroller.scrollTo({ xOffset: 0, yOffset: this.scroller.currentOffset().yOffset + 100 });
         })
-        .margin({ top: 10, left: 20 })
+        .margin({ top: 60, left: 20 })
       Button('back top')
         .onClick(() => { // Click to go back to the top.
-          this.scroller.scrollEdge(Edge.Top)
+          this.scroller.scrollEdge(Edge.Top);
         })
-        .margin({ top: 60, left: 20 })
+        .margin({ top: 110, left: 20 })
       Button('next page')
         .onClick(() => { // Click to go to the next page.
-          this.scroller.scrollPage({ next: true })
+          this.scroller.scrollPage({ next: true });
         })
-        .margin({ top: 110, left: 20 })
+        .margin({ top: 170, left: 20 })
     }.width('100%').height('100%').backgroundColor(0xDCDCDC)
   }
 }
 ```
 
 ![en-us_image_0000001256978363](figures/en-us_image_0000001256978363.gif)
+
+### Example 2
+```ts
+@Entry
+@Component
+struct NestedScroll {
+  @State listPosition: number = 0; // 0 indicates scrolling to the top of the list, 1 indicates scrolling to the middle of the list, and 2 indicates scrolling to the bottom of the list.
+  private arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+  private scroller: Scroller = new Scroller();
+
+  build() {
+    Flex() {
+      Scroll(this.scroller) {
+        Column() {
+          Text("Scroll Area")
+            .width("100%").height("40%").backgroundColor(0X330000FF)
+            .fontSize(16).textAlign(TextAlign.Center)
+
+          List({ space: 20 }) {
+            ForEach(this.arr, (item) => {
+              ListItem() {
+                Text("ListItem" + item)
+                  .width("100%").height("100%").borderRadius(15)
+                  .fontSize(16).textAlign(TextAlign.Center).backgroundColor(Color.White)
+              }.width("100%").height(100)
+            }, item => item)
+          }
+          .width("100%").height("50%").edgeEffect(EdgeEffect.None)
+          .onReachStart(() => {
+            this.listPosition = 0;
+          })
+          .onReachEnd(() => {
+            this.listPosition = 2;
+          })
+          .onScrollBegin((dx: number, dy: number) => {
+            if ((this.listPosition == 0 && dy >= 0) || (this.listPosition == 2 && dy <= 0)) {
+              this.scroller.scrollBy(0, -dy);
+              return { dxRemain: dx, dyRemain: 0 };
+            }
+            this.listPosition = 1;
+            return { dxRemain: dx, dyRemain: dy };
+          })
+
+          Text("Scroll Area")
+            .width("100%").height("40%").backgroundColor(0X330000FF)
+            .fontSize(16).textAlign(TextAlign.Center)
+        }
+      }
+      .width("100%").height("100%")
+    }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding(20)
+  }
+}
+```
+
+![NestedScroll](figures/NestedScroll.gif)

en/application-dev/reference/arkui-ts/ts-gesture-settings.md

@@ -137,4 +137,4 @@ struct GestureSettingsExample {
 }
 ```
 
-![en-us_image_0000001257058419](figures/en-us_image_0000001257058419.gif)
+![zh-cn_image_0000001210195016](figures/zh-cn_image_0000001210195016.gif)

en/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md

 # Time Picker Dialog Box
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
-> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
-
 You can display a time picker in a dialog box to allow users to select a time from the given range, which is from 00:00 to 23:59 by default.
 
-## Required Permissions
-
-None
+>  **NOTE**
+>
+> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
 ## TimePickerDialog.show
 
@@ -16,22 +13,23 @@ show(options?: TimePickerDialogOptions)
 Defines and displays a time picker dialog box.
 
 - options parameters
-  | Name| Type| Mandatory| Default Value| Description|
-  | -------- | -------- | -------- | -------- | -------- |
-  | selected | Date | No| Current system time| Time of the selected item.|
-  | useMilitaryTime | boolean | No| false | Whether to display time in 24-hour format.|
-  | onAccept | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult)) => void | No| - | Triggered when the OK button in the dialog box is clicked.|
-  | onCancel | () => void | No| - | Triggered when the Cancel button in the dialog box is clicked.|
-  | onChange | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult)) => void | No| - | Triggered when the selected item in the picker changes.|
+  | Name| Type| Mandatory| Description|
+  | -------- | -------- | -------- | -------- |
+  | selected | Date | No| Selected time.<br>Default value: current system time|
+  | useMilitaryTime | boolean | No| Whether to display time in 24-hour format. The 12-hour format is used by default.<br>Default value: **false**|
+  | onAccept | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult)) => void | No| Callback invoked when the OK button in the dialog box is clicked.|
+  | onCancel | () => void | No| Callback invoked when the Cancel button in the dialog box is clicked.|
+  | onChange | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult)) => void | No| Callback invoked when the selected time changes.|
 
 ## Example
 
 ### Time Picker Sample Code (24-Hour Clock)
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct TimePickerDialogExample01 {
-  @State isUseMilitaryTime: boolean = true
+  @State isUseMilitaryTime: boolean = true;
 
   build() {
     Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center,
@@ -40,13 +38,13 @@ struct TimePickerDialogExample01 {
         TimePickerDialog.show({
           useMilitaryTime: this.isUseMilitaryTime,
           onAccept: (value: TimePickerResult) => {
-            console.info("TimePickerDialog:onAccept()" + JSON.stringify(value))
+            console.info("TimePickerDialog:onAccept()" + JSON.stringify(value));
           },
           onCancel: () => {
-            console.info("TimePickerDialog:onCancel()")
+            console.info("TimePickerDialog:onCancel()");
           },
           onChange: (value: TimePickerResult) => {
-            console.info("TimePickerDialog:onChange()" + JSON.stringify(value))
+            console.info("TimePickerDialog:onChange()" + JSON.stringify(value));
           }
         })
       })
@@ -54,12 +52,16 @@ struct TimePickerDialogExample01 {
   }
 }
 ```
+  ![en-us_image_0000001118642010](figures/en-us_image_0000001118642010.gif)  
+
 ### Time Picker Sample Code (12-Hour Clock)
-```
+
+```ts
+// xxx.ets
 @Entry
 @Component
 struct TimePickerDialogExample02 {
-  @State isUseMilitaryTime: boolean = false
+  @State isUseMilitaryTime: boolean = false;
 
   build() {
     Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center,
@@ -68,13 +70,13 @@ struct TimePickerDialogExample02 {
         TimePickerDialog.show({
           useMilitaryTime: this.isUseMilitaryTime,
           onAccept: (value: TimePickerResult) => {
-            console.info("TimePickerDialog:onAccept()" + JSON.stringify(value))
+            console.info("TimePickerDialog:onAccept()" + JSON.stringify(value));
           },
           onCancel: () => {
-            console.info("TimePickerDialog:onCancel()")
+            console.info("TimePickerDialog:onCancel()");
           },
           onChange: (value: TimePickerResult) => {
-            console.info("TimePickerDialog:onChange()" + JSON.stringify(value))
+            console.info("TimePickerDialog:onChange()" + JSON.stringify(value));
           }
         })
       })
@@ -82,3 +84,5 @@ struct TimePickerDialogExample02 {
   }
 }
 ```
+
+ ![en-us_image_0000001118642020](figures/en-us_image_0000001118642020.gif)  
\ No newline at end of file

en/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md

@@ -4,19 +4,14 @@
 
 >  **NOTE**
 >
->  The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
-
-
-## Required Permissions
-
-None
+> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
 
 ## Attributes
 
-| Name  | Type  | Default Value | Description                |
-| ---- | ------ | ---- | ------------------ |
-| id   | string | ''   | Unique ID you assigned to the component.|
+| Name  | Type    | Description                        |
+| -----| -------- | ----------------------------- |
+| id   | string   | Unique ID you assigned to the component.<br>Default value: **''**|
 
 
 ## APIs
@@ -26,101 +21,109 @@ None
 
 getInspectorByKey(id: string): string
 
-Obtains all attributes of the component with the specified ID, excluding the information about child components. This is a system API. 
+Obtains all attributes of the component with the specified ID, excluding the information about child components.
+This is a system API. 
+
+**Parameters**
 
-- Parameters
-  | Name  | Type    | Mandatory  | Default Value | Description         |
-  | ---- | ------ | ---- | ---- | ----------- |
-  | id   | string | Yes   | -    | ID of the component whose attributes are to be obtained.|
+| Name  | Type     | Mandatory    | Description       |
+| ---- | -------- | ---- | -------------|
+| id   | string   | Yes   | ID of the component whose attributes are to be obtained.|
 
-- Return value
-  | Type    | Description             |
-  | ------ | --------------- |
-  | string | JSON string of the component attribute list.|
+**Return value**
+
+| Type       | Description            |
+| -------| -------------- |
+| string | JSON string of the component attribute list.|
 
 ### getInspectorTree
 
 getInspectorTree(): string
 
-Obtains the component tree and component attributes. This is a system API. 
+Obtains the component tree and component attributes.
+This is a system API. 
 
-- Return value
+**Return value**
 
-  | Type    | Description                 |
-  | ------ | ------------------- |
-  | string | JSON string of the component tree and component attribute list.|
+| Type    | Description                           |
+| ------ | --------------------------- |
+| string | JSON string of the component tree and component attribute list.|
 
 ### sendEventByKey
 
 sendEventByKey(id: string, action: number, params: string): boolean
 
-Sends an event to the component with the specified ID. This is a system API. 
+Sends an event to the component with the specified ID.
+This is a system API. 
+
+**Parameters**
+
+| Name      | Type     | Mandatory      | Description                        |
+| ------ | -------| ---- | -------------------------- |
+| id     | string | Yes   | ID of the component to which the event is to be sent.                     |
+| action | number | Yes   | Type of the event to be sent. The options are as follows:<br>- **10**: click event.<br>- **11**: long-click event.|
+| params | string | Yes   | Event parameters. If there is no parameter, pass an empty string **""**.           |
 
-- Parameters
-  | Name    | Type    | Mandatory  | Default Value | Description                                      |
-  | ------ | ------ | ---- | ---- | ---------------------------------------- |
-  | id     | string | Yes   | -    | ID of the component to which the event is to be sent.                            |
-  | action | number | Yes   | -    | Type of the event to be sent. The options are as follows:<br>- **10**: click event.<br>- **11**: long click event.|
-  | params | string | Yes   | -    | Event parameters. If there is no parameter, pass an empty string **""**.                  |
+**Return value**
 
-- Return value
-  | Type     | Description                            |
-  | ------- | ------------------------------ |
-  | boolean | Returns **true** if the component with the specified ID is found; returns **false** otherwise.|
+| Type         | Description                        |
+| -------- | --------------------------|
+| boolean  | Returns **true** if the component with the specified ID is found; returns **false** otherwise.|
 
 ### sendTouchEvent
 
 sendTouchEvent(event: TouchObject): boolean
 
-Sends a touch event. This is a system API. 
+Sends a touch event.
+This is a system API. 
 
-- Parameters
+**Parameters**
 
-  | Name   | Type         | Mandatory  | Default Value | Description                                      |
-  | ----- | ----------- | ---- | ---- | ---------------------------------------- |
-  | event | TouchObject | Yes   | -    | Location where a touch event is triggered. For details, see [TouchEvent](ts-universal-events-touch.md#touchevent).|
+| Name     | Type           | Mandatory | Description                                                        |
+| ----- | ----------- | ---- | ------------------------------------------------------------ |
+| event | [TouchObject](ts-universal-events-touch.md#touchobject) | Yes   | Location where a touch event is triggered. For details, see [TouchEvent](ts-universal-events-touch.md#touchevent).|
 
-- Return value
+**Return value**
 
-  | Type     | Description                        |
-  | ------- | -------------------------- |
-  | boolean | Returns **true** if the event is sent successfully; returns **false** otherwise.|
+| Type     | Description                        |
+| ------- | ---------------------------|
+| boolean | Returns **true** if the event is sent successfully; returns **false** otherwise.|
 
 ### sendKeyEvent
 
 sendKeyEvent(event: KeyEvent): boolean
 
-Sends a key event. This is a system API. 
+Sends a key event.
 
-- Parameters
+**Parameters**
 
-  | Name   | Type      | Mandatory  | Default Value | Description                                      |
-  | ----- | -------- | ---- | ---- | ---------------------------------------- |
-  | event | KeyEvent | Yes   | -    | Key event. For details, see [KeyEvent](ts-universal-events-key.md#keyevent).|
+| Name   | Type    | Mandatory     | Description                                                        |
+| ----- | -------- | ----  | ------------------------------------------------------------ |
+| event | [KeyEvent](ts-universal-events-key.md#keyevent) | Yes    | Key event. For details, see [KeyEvent](ts-universal-events-key.md#keyevent).|
 
-- Return value
+**Return value**
 
-  | Type     | Description                         |
-  | ------- | --------------------------- |
-  | boolean | Returns **true** if the event is sent successfully; returns **false** otherwise.|
+| Type     | Description                          |
+| ------- | ------------------------------|
+| boolean | Returns **true** if the event is sent successfully; returns **false** otherwise.|
 
 ### sendMouseEvent
 
 sendMouseEvent(event: MouseEvent): boolean
 
-Sends a mouse event. This is a system API. 
+Sends a mouse event.
 
-- Parameters
+**Parameters**
 
-  | Name   | Type        | Mandatory  | Default Value | Description                                      |
-  | ----- | ---------- | ---- | ---- | ---------------------------------------- |
-  | event | MouseEvent | Yes   | -    | Mouse event. For details, see [MouseEvent](ts-universal-mouse-key.md#mouseevent).|
+| Name    | Type      | Mandatory      | Description                                    |
+| ----- | ---------- | ----  | --------------------------------------- |
+| event | [MouseEvent](ts-universal-mouse-key.md#mouseevent) | Yes   | Mouse event. For details, see [MouseEvent](ts-universal-mouse-key.md#mouseevent).|
 
-- Return value
+**Return value**
 
-  | Type     | Description                         |
-  | ------- | --------------------------- |
-  | boolean | Returns **true** if the event is sent successfully; returns **false** otherwise.|
+| Type     | Description                                |
+| ------- | ---------------------------------- |
+| boolean | Returns **true** if the event is sent successfully; returns **false** otherwise.|
 
 ## Example
 
@@ -133,6 +136,7 @@ class Utils {
   static rect_bottom;
   static rect_value;
 
+  // Obtain the coordinates of the rectangular area occupied by the component.
   static getComponentRect(key) {
     let strJson = getInspectorByKey(key);
     let obj = JSON.parse(strJson);
@@ -172,32 +176,32 @@ struct IdExample {
         console.info(getInspectorTree())
         this.text = "Button 'click to start' is clicked"
         setTimeout(() => {
-          sendEventByKey("longclick", 11, "")
+          sendEventByKey("longClick", 11, "") // Send a long-click event to the component whose ID is "longClick".
         }, 2000)
       }).id('click')
 
       Button() {
-        Text('longclick').fontSize(25).fontWeight(FontWeight.Bold)
+        Text('longClick').fontSize(25).fontWeight(FontWeight.Bold)
       }.margin({ top: 20 }).backgroundColor('#0D9FFB')
       .gesture(
       LongPressGesture().onActionEnd(() => {
         console.info('long clicked')
-        this.text = "Button 'longclick' is longclicked"
+        this.text = "Button 'longClick' is longclicked"
         setTimeout(() => {
-          let rect = Utils.getComponentRect('onTouch')
+          let rect = Utils.getComponentRect('onTouch') // Obtain the coordinates of the rectangular area occupied by the component whose ID is "onTouch".
           let touchPoint: TouchObject = {
             id: 1,
-            x: rect.left + (rect.right - rect.left) / 2,
-            y: rect.top + (rect.bottom - rect.top) / 2,
+            x: rect.left + (rect.right - rect.left) / 2, // X coordinate of the component center.
+            y: rect.top + (rect.bottom - rect.top) / 2, // Y coordinate of the component center.
             type: TouchType.Down,
-            screenX: rect.left + (rect.right - rect.left) / 2,
-            screenY: rect.left + (rect.right - rect.left) / 2,
+            screenX: rect.left + (rect.right - rect.left) / 2, // X coordinate of the component center.
+            screenY: rect.left + (rect.right - rect.left) / 2, // Y coordinate of the component center.
           }
-          sendTouchEvent(touchPoint)
+          sendTouchEvent(touchPoint) // Send a touch event.
           touchPoint.type = TouchType.Up
-          sendTouchEvent(touchPoint)
+          sendTouchEvent(touchPoint) // Send a touch event.
         }, 2000)
-      })).id('longclick')
+      })).id('longClick')
 
       Button() {
         Text('onTouch').fontSize(25).fontWeight(FontWeight.Bold)
@@ -206,14 +210,14 @@ struct IdExample {
         console.info('onTouch is clicked')
         this.text = "Button 'onTouch' is clicked"
         setTimeout(() => {
-          let rect = Utils.getComponentRect('onMouse')
+          let rect = Utils.getComponentRect('onMouse') // Obtain the coordinates of the rectangular area occupied by the component whose ID is "onMouse".
           let mouseEvent: MouseEvent = {
             button: MouseButton.Left,
             action: MouseAction.Press,
-            x: rect.left + (rect.right - rect.left) / 2,
-            y: rect.top + (rect.bottom - rect.top) / 2,
-            screenX: rect.left + (rect.right - rect.left) / 2,
-            screenY: rect.top + (rect.bottom - rect.top) / 2,
+            x: rect.left + (rect.right - rect.left) / 2, // X coordinate of the component center.
+            y: rect.top + (rect.bottom - rect.top) / 2, // Y coordinate of the component center.
+            screenX: rect.left + (rect.right - rect.left) / 2, // X coordinate of the component center.
+            screenY: rect.top + (rect.bottom - rect.top) / 2, // Y coordinate of the component center.
             timestamp: 1,
             target: {
               area: {
@@ -231,7 +235,7 @@ struct IdExample {
             },
             source: SourceType.Mouse
           }
-          sendMouseEvent(mouseEvent)
+          sendMouseEvent(mouseEvent) // Send a mouse event.
         }, 2000)
       }).id('onTouch')
 
@@ -251,7 +255,7 @@ struct IdExample {
             metaKey: 0,
             timestamp: 0
           }
-          sendKeyEvent(keyEvent)
+          sendKeyEvent(keyEvent) // Send a key event.
         }, 2000)
       }).id('onMouse')
 

en/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md

@@ -10,10 +10,10 @@
 
 | Name        | Type                                    | Description                                      |
 | ---------- | ---------------------------------------- | ---------------------------------------- |
-| flexBasis  | string \| number             | Base size of a component in the main axis of the parent container.<br>Default value: **'auto'** (indicating that the base size of the component in the main axis is the original size of the component)|
+| flexBasis  | string \| number                         | Base size of a component in the main axis of the parent container.<br>Default value: **'auto'** (indicating that the base size of the component in the main axis is the original size of the component)|
 | flexGrow   | number                                   | Percentage of the parent container's remaining space that is allocated to the component.<br>Default value: **0**      |
-| flexShrink | number                                   | Percentage of the parent container's shrink size that is allocated to the component.<br>Default value: **1**    |
-| alignSelf  | [ItemAlign](ts-appendix-enums.md#itemalign) | he default **alignItems** configuration in the parent container.<br>Default value: **ItemAlign.Auto** |
+| flexShrink | number                                   | Percentage of the parent container's shrink size that is allocated to the component.<br>When the parent container is **\<Row>** or **\<Column>**, the default value is **0**.<br> When the parent container is **\<Flex>**, the default value is **1**.      |
+| alignSelf  | [ItemAlign](ts-appendix-enums.md#itemalign) | Alignment mode of the child components along the cross axis, which overwrites the default **alignItems** configuration in the parent container.<br>Default value: **ItemAlign.Auto**|
 
 
 ## Example
@@ -23,7 +23,6 @@
 @Entry
 @Component
 struct FlexExample {
-
   build() {
     Column({ space: 5 }) {
       Text('flexBasis').fontSize(9).fontColor(0xCCCCCC).width('90%')
@@ -109,4 +108,4 @@ struct FlexExample {
 }
 ```
 
-![en-us_image_0000001212378394](figures/en-us_image_0000001212378394.png)
+![en-us_image_0000001219744197](figures/en-us_image_0000001219744197.png)

en/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md

@@ -12,7 +12,7 @@ You can set the opacity of a component.
 
 | Name     | Type                                    | Description                                      |
 | ------- | ---------------------------------------- | ---------------------------------------- |
-| opacity | number \| [Resource](ts-types.md#resource) | Opacity of a component. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent.<br/>**NOTE**<br/>A child component can inherit this attribute of its parent component.<br>Default value: **1** |
+| opacity | number \| [Resource](ts-types.md#resource) | Opacity of the component. The value ranges from 0 to 1. The value **1** means opaque, and **0** means completely transparent. When being completely transparent, the component is hidden, but still takes up space in the layout.<br>**NOTE**<br>A child component can inherit this attribute of its parent component. Default value: **1**|
 
 
 ## Example
@@ -30,6 +30,10 @@ struct OpacityExample {
       Text().width('90%').height(50).opacity(0.7).backgroundColor(0xAFEEEE)
       Text('opacity(0.4)').fontSize(9).width('90%').fontColor(0xCCCCCC)
       Text().width('90%').height(50).opacity(0.4).backgroundColor(0xAFEEEE)
+      Text('opacity(0.1)').fontSize(9).width('90%').fontColor(0xCCCCCC)
+      Text().width('90%').height(50).opacity(0.1).backgroundColor(0xAFEEEE)
+      Text('opacity(0)').fontSize(9).width('90%').fontColor(0xCCCCCC)
+      Text().width('90%').height(50).opacity(0).backgroundColor(0xAFEEEE)
     }
     .width('100%')
     .padding({ top: 5 })
@@ -37,4 +41,4 @@ struct OpacityExample {
 }
 ```
 
-![en-us_image_0000001256858385](figures/en-us_image_0000001256858385.gif)
+![opacity.png](figures/opacity.png)

en/application-dev/ui/ui-js-building-ui-layout-text.md

 # Adding Title and Paragraph Text
 
-
-The <text> component is most commonly used to display text in title and paragraph areas. You can set attributes and styles for a <text> component and add the text to be displayed between the <text> and </text> tags. For details about the attributes and styles, see [text](../reference/arkui-js/js-components-basic-text.md). The following is an example of adding title and paragraph text on a page:
-
+The **\<text>** component is most commonly used to display text in title and paragraph areas. You can set attributes and styles for a **\<text>** component and add the text to be displayed between the **\<text>** and **\</text>** tags. For details about the attributes and styles, see [text](../reference/arkui-js/js-components-basic-text.md). The following is an example of adding title and paragraph text on a page:
 
 
 ```
@@ -15,15 +13,16 @@ The &lt;text&gt; component is most commonly used to display text in title and pa
 ```
 
 
-
 ```
 /* xxx.css */
 .container {
   flex-direction: column;
   margin-top: 20px;
   margin-left: 30px;
+  font-weight: 700;
 }
 .title-text {
+  width: 95%;
   color: #1a1a1a;
   font-size: 50px;
   margin-top: 40px;
@@ -37,14 +36,15 @@ The &lt;text&gt; component is most commonly used to display text in title and pa
 ```
 
 
-
 ```
 // xxx.js
 export default {
   data: {
-    headTitle: 'Capture the Beauty in This Moment',
+    headTitle: 'Capture the Beauty in Moment',
     paragraphFirst: 'Capture the beauty of light during the transition and fusion of ice and water. At the instant of movement and stillness, softness and rigidity, force and beauty, condensing moving moments.',
     paragraphSecond: 'Reflecting the purity of nature, the innovative design upgrades your visual entertainment and ergonomic comfort. Effortlessly capture what you see and let it speak for what you feel.',
   },
 }
 ```
+
+ ![en-us_image_0000001118642600](figures/en-us_image_0000001118642600.PNG) 

en/application-dev/ui/ui-js-components-grid.md

-# <grid-container> Development
+# Grid Layout
 
 
-The **<grid-container>** component is the root container of the grid layout. Within the root container, you can use **<grid-row>** and **<grid-col>** for the grid layout. For details, see [grid-container](../reference/arkui-js/js-components-grid-container.md).
+The **\<grid-container>** component is the root container of the grid layout. Within the root container, you can use **\<grid-row>** and **\<grid-col>** for the grid layout. For details, see [Grid-container](../reference/arkui-js/js-components-grid-container.md).
 
 
-## Creating a &lt;grid-container&gt; Component
+## Creating a \<grid-container> Component
 
-Create a **&lt;grid-container&gt;** component in the .hml file under **pages/index** and add a [**&lt;grid-row&gt;**](../reference/arkui-js/js-components-grid-row.md) child component.
+Create a **\<grid-container>** component in the .hml file under **pages/index** and add a [\<Grid-row>](../reference/arkui-js/js-components-grid-row.md) child component.
 
 
-```
+```html
 <!-- index.hml -->
 <div class="container">
   <grid-container id="mygrid" columns="5" gutter="20px" style="background-color: pink;">
@@ -22,7 +22,7 @@ Create a **&lt;grid-container&gt;** component in the .hml file under **pages/ind
 ```
 
 
-```
+```css
 /* xxx.css */
 .container{
   flex-direction: column;
@@ -35,16 +35,17 @@ Create a **&lt;grid-container&gt;** component in the .hml file under **pages/ind
 
 ![en-us_image_0000001276162725](figures/en-us_image_0000001276162725.png)
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
-> **&lt;grid-container&gt;** supports only **&lt;grid-row&gt;** as a child component.
+> **NOTE**
+>
+> **\<grid-container>** supports only **\<grid-row>** as a child component.
 
 
 ## Methods
 
-Click the **&lt;grid-container&gt;** component to call the **getColumns**, **getColumnWidth**, and **getGutterWidth** methods to return the number of columns in the grid container, and column width and gutter width of the grid container. Press and hold the component to call the **getSizeType** method to return the size-responsive type of the grid container (**xs**|**sm**|**md**|**lg**).
+Touch the **\<grid-container>** component to call the **getColumns**, **getColumnWidth**, and **getGutterWidth** methods to return the number of columns in the grid container, and column width and gutter width of the grid container. Press and hold the component to call the **getSizeType** method to return the size-responsive type of the grid container (**xs**|**sm**|**md**|**lg**).
 
 
-```
+```html
 <!-- index.hml -->
 <div class="container">
   <grid-container id="mygrid" columns="6" gutter="20px" style="background-color: pink;padding-top: 100px;" 
@@ -61,7 +62,7 @@ Click the **&lt;grid-container&gt;** component to call the **getColumns**, **get
 ```
 
 
-```
+```css
 /* xxx.css */
 .container{
   flex-direction: column;
@@ -73,7 +74,7 @@ Click the **&lt;grid-container&gt;** component to call the **getColumns**, **get
 ```
 
 
-```
+```js
 // index.js
 import prompt from '@system.prompt';
 export default {
@@ -108,12 +109,12 @@ export default {
 ![en-us_image_0000001231843088](figures/en-us_image_0000001231843088.gif)
 
 
-## Adding &lt;grid-col&gt;
+## Adding \<grid-col>
 
-After adding a **&lt;grid-row&gt;** child component to **&lt;grid-container&gt;**, add a **&lt;grid-col&gt;** child component to **&lt;grid-row&gt;** to form a layout.
+After adding a **\<grid-row>** child component to **\<grid-container>**, add a **\<grid-col>** child component to **\<grid-row>** to form a layout.
 
 
-```
+```html
 <!-- index.hml -->
 <div class="container">
   <grid-container id="mygrid" columns="4" gutter="0" style="background-color: pink;" onclick="getColumns" onlongpress="getSizeType">
@@ -148,7 +149,7 @@ After adding a **&lt;grid-row&gt;** child component to **&lt;grid-container&gt;*
 ```
 
 
-```
+```css
 /* xxx.css */
 .container{
   flex-direction: column;
@@ -165,8 +166,9 @@ text{
 
 ![en-us_image_0000001231683124](figures/en-us_image_0000001231683124.png)
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
-> **&lt;grid-row&gt;** supports only **&lt;grid-col&gt;** as a child component. You can add content only to **&lt;grid-col&gt;**.
+> **NOTE**
+>
+> **\<grid-row>** supports only **\<grid-col>** as a child component. You can add content only to **\<grid-col>**.
 
 
 ## Example Scenario
@@ -174,7 +176,7 @@ text{
 In this example, the content in the list is output cyclically to create a grid layout. When the user pulls down the screen, the **refresh** method is triggered. In this case, a piece of data is added to the list and **setTimeout** is set to refresh the request data.
 
 
-```
+```html
 <!-- index.hml -->
 <div class="container">
   <refresh refreshing="{{fresh}}" onrefresh="refresh">
@@ -197,7 +199,7 @@ In this example, the content in the list is output cyclically to create a grid l
 ```
 
 
-```
+```css
 /* xxx.css */
 .container{
   flex-direction: column;
@@ -211,7 +213,7 @@ text{
 ```
 
 
-```
+```js
 // index.js
 import prompt from '@system.prompt';
 export default {
@@ -241,10 +243,4 @@ export default {
 ```
 
 
-![en-us_image_0000001276003501](figures/en-us_image_0000001276003501.gif)
-
+![en-us_image_0000001276003501](figures/en-us_image_0000001276003501.gif)
\ No newline at end of file
-## Samples
-
-The following sample is provided to help you better understand how to develop the **\<grid>** component:
-
-[`JsGrid`: grid (JavaScript, API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsGrid)
\ No newline at end of file

en/application-dev/ui/ui-js-components-offscreencanvas.md

-# OffscreenCanvas
+# OffscreenCanvasRenderingContext2D
 
+**OffscreenCanvasRenderingContext2D** allows you to draw rectangles, text, images, and other objects on an offscreen canvas, which is a new buffer created by the GPU outside of the current buffer. For details, see [OffscreenCanvasRenderingContext2D](../reference/arkui-js/js-offscreencanvasrenderingcontext2d.md).
 
-Create an **OffscreenCanvas** canvas and create a **getContext2d** object on the canvas. Then, create an image and set the **filter** attribute to change the image style.
+In the following example, you first create an offscreen canvas, and then create a **getContext2d** object on the canvas, which is an image, and finally set the **filter** attribute for the image.
 
-
-
-```
+```html
 <!-- xxx.hml -->
 <div class="container">
   <canvas ref="canvas1"></canvas>
@@ -24,11 +23,11 @@ Create an **OffscreenCanvas** canvas and create a **getContext2d** object on the
 </div>
 ```
 
-
-
-```
+```css
 /* xxx.css */
 .container{
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -48,9 +47,7 @@ select{
 }
 ```
 
-
-
-```
+```js
 // xxx.js
 import prompt from '@system.prompt';
 export default {
@@ -75,12 +72,10 @@ export default {
     this.img.onerror = function() {
       prompt.showToast({message:"error",duration:2000})
     };
-    var bitmap = this.offscreen.transferToImageBitmap();
-    this.ctx.transferFromImageBitmap(bitmap);
+    var bitmap = this.offscreen.transferToImageBitmap();    this.ctx.transferFromImageBitmap(bitmap);
   },
   change(e){
-    this.offCanvas.filter = e.newValue;
-    this.offCanvas.drawImage(this.img, 100, 100, 400, 300);
+    this.offCanvas.filter = e.newValue;this.offCanvas.drawImage(this.img, 100, 100, 400, 300);
     var bitmap = this.offscreen.transferToImageBitmap();
     this.ctx.transferFromImageBitmap(bitmap);
   },
@@ -93,10 +88,10 @@ export default {
 
 ## Determining the Position
 
-Use **isPointInPath** and **isPointInStroke** to determine and show whether a coordinate is within the path area and whether a coordinate is on the edge of the path.
+Use **isPointInPath** to determine whether a coordinate is within the path area and use **isPointInStroke** to determine whether a coordinate is on the edge of the path.
 
 
-```
+```html
 <!-- xxx.hml -->
 <div class="container">
   <div class="content">
@@ -110,9 +105,11 @@ Use **isPointInPath** and **isPointInStroke** to determine and show whether a co
 ```
 
 
-```
+```css
 /* xxx.css */
 .container{
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -143,7 +140,7 @@ button{
 ```
 
 
-```
+```js
 // xxx.js
 export default {
   data: {
@@ -188,4 +185,4 @@ export default {
 }
 ```
 
-![en-us_image_0000001276003489](figures/en-us_image_0000001276003489.gif)
+![en-us_image_0000001178084014](figures/en-us_image_0000001178084014.gif)