Update docs (17923)

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

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

@@ -22,7 +22,7 @@ Since API version 9, this API is supported in ArkTS widgets.
 | 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.                    |
+| color  | string | Yes   | '#ffffff' | Gradient color to set. For details about the color notation, see the description of the string type in [ResourceColor](ts-types.md#resourcecolor).                    |
 
 
 **Example**

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

@@ -13,8 +13,8 @@ Create a more gorgeous look for a component by applying a gradient color effect
 | Name             | Type                                        | Description                              |
 | -------------- | -------------------------------------------- | ----------------------------------- |
 | linearGradient | {<br>angle?: number \| string,<br>direction?: [GradientDirection](ts-appendix-enums.md#gradientdirection),<br>colors: Array&lt;[ColorStop](ts-basic-components-gauge.md#colorstop)&gt;,<br>repeating?: boolean<br>} | Linear gradient.<br>- **angle**: start angle of the linear gradient. A positive value indicates a clockwise rotation from the origin, (0, 0).<br>  Default value: **180**<br>- **direction**: direction of the linear gradient. It does not take effect when **angle** is set.<br>  Default value: **GradientDirection.Bottom**<br>- **colors**: colors of the linear gradient.<br>- **repeating**: whether the colors are repeated.<br>  Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.|
-| sweepGradient  | {<br>center: Point,<br>start?: number \| string,<br>end?: number \| string,<br>rotation?: number\|string,<br>colors: Array&lt;[ColorStop](ts-basic-components-gauge.md#colorstop)&gt;,<br>repeating?: boolean<br>} | Sweep gradient, which can sweep around the specified center point in the 0–360 degree range. If the rotation angle exceeds the range, a monochrome color instead of a gradient will be drawn.<br>- **center**: center point of the sweep gradient, that is, the coordinates relative to the upper left corner of the current component.<br>- **start**: start point of the sweep gradient.<br> Default value: **0**<br>- **end**: end point of the sweep gradient.<br> Default value: **0**<br>- **rotation**: rotation angle of the sweep gradient.<br> Default value: **0**<br>- **colors**: colors of the sweep gradient.<br>- **repeating**: whether the colors are repeated.<br>  Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>A value less than 0 evaluates to the value **0**. A value greater than 360 evaluates to the value **1**.<br>When the data type of **start**, **end**, and **rotation** is string, the value **"90"** or **"90%"** is equivalent to **90**.|
-| radialGradient | {<br>center: Point,<br> radius: number \| string,<br>colors: Array&lt;[ColorStop](ts-basic-components-gauge.md#colorstop)&gt;,<br>repeating?: boolean<br>} | Radial gradient.<br>- **center**: center point of the radial gradient, that is, the coordinates relative to the upper left corner of the current component.<br>- **radius**: radius of the radial gradient.<br> Value range: [0, +∞)<br> **NOTE**<br>A value less than 0 evaluates to the value **0**.<br>- **colors**: colors of the radial gradient.<br>- **repeating**: whether the colors are repeated.<br>  Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| sweepGradient  | {<br>center: [Point](./ts-drawing-components-polygon.md#point),<br>start?: number \| string,<br>end?: number \| string,<br>rotation?: number\|string,<br>colors: Array&lt;[ColorStop](ts-basic-components-gauge.md#colorstop)&gt;,<br>repeating?: boolean<br>} | Sweep gradient, which can sweep around the specified center point in the 0–360 degree range. If the rotation angle exceeds the range, a monochrome color instead of a gradient will be drawn.<br>- **center**: center point of the sweep gradient, that is, the coordinates relative to the upper left corner of the current component.<br>- **start**: start point of the sweep gradient.<br> Default value: **0**<br>- **end**: end point of the sweep gradient.<br> Default value: **0**<br>- **rotation**: rotation angle of the sweep gradient.<br> Default value: **0**<br>- **colors**: colors of the sweep gradient.<br>- **repeating**: whether the colors are repeated.<br>  Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>A value less than 0 evaluates to the value **0**. A value greater than 360 evaluates to the value **1**.<br>When the data type of **start**, **end**, and **rotation** is string, the value **"90"** or **"90%"** is equivalent to **90**.|
+| radialGradient | {<br>center: [Point](./ts-drawing-components-polygon.md#point),<br> radius: number \| string,<br>colors: Array&lt;[ColorStop](ts-basic-components-gauge.md#colorstop)&gt;,<br>repeating?: boolean<br>} | Radial gradient.<br>- **center**: center point of the radial gradient, that is, the coordinates relative to the upper left corner of the current component.<br>- **radius**: radius of the radial gradient.<br> Value range: [0, +∞)<br> **NOTE**<br>A value less than 0 evaluates to the value **0**.<br>- **colors**: colors of the radial gradient.<br>- **repeating**: whether the colors are repeated.<br>  Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.|
 
 
 ## Example

en/application-dev/reference/js-service-widget-ui/js-service-widget-common-gradient.md

@@ -33,17 +33,17 @@ background: repeating-linear-gradient(direction/angle, color, color, ...);
 
 The color can be specified in any of the following formats: \#ff0000, \#ffff0000, rgb(255, 0, 0), and rgba(255, 0, 0, 1). At least two colors must be specified.
 
-- Parameters
+**Parameters**
 
-  | Name       | Type                                      | Default Value                         | Mandatory  | Description                                      |
-  | --------- | ---------------------------------------- | ---------------------------- | ---- | ---------------------------------------- |
-  | direction | to <side-or-corner>  <side-or-corner> = [left \| right] \|\| [top \| bottom] | to bottom (gradient from top to bottom)| No   | Transition direction. For example, **to left** (gradient from right to left) or **to bottom right** (gradient from upper left corner to lower right corner).|
-  | angle     | <deg>                              | 180deg                       | No   | Transition direction, which is the angle between the gradient line and the y-axis (in the clockwise direction), with the geometric center of the element being the origin of coordinates and the horizontal axis being the x-axis.|
-  | color     | <color> [<length>\|<percentage>] | -                            | Yes   | Colors among which smooth transitions are rendered.                     |
+| Name       | Type                                      | Default Value                         | Mandatory  | Description                                      |
+| --------- | ---------------------------------------- | ---------------------------- | ---- | ---------------------------------------- |
+| direction | to <side-or-corner>  <side-or-corner> = [left \| right] \|\| [top \| bottom] | to bottom (gradient from top to bottom)| No   | Transition direction. For example, **to left** (gradient from right to left) or **to bottom right** (gradient from upper left corner to lower right corner).|
+| angle     | <deg>                              | 180deg                       | No   | Transition direction, which is the angle between the gradient line and the y-axis (in the clockwise direction), with the geometric center of the element being the origin of coordinates and the horizontal axis being the x-axis.|
+| color     | <color> [<length>\|<percentage>] | -                            | Yes   | Colors among which smooth transitions are rendered.                     |
 
-- Example
+**Example**
 
-    1. Gradient from top to bottom (default)
+1. Gradient from top to bottom (default)
 
    ```css
    #gradient {
@@ -56,8 +56,7 @@ The color can be specified in any of the following formats: \#ff0000, \#ffff0000
 
    ![111](figures/111.PNG)
 
-  2. Gradient at an angle of 45°
-
+2. Gradient at an angle of 45°
 
    ```css
    /* Gradient at an angle of 45°, changing from red to green */
@@ -66,17 +65,16 @@ The color can be specified in any of the following formats: \#ff0000, \#ffff0000
 
       ![222](figures/222.PNG)
 
-  3. Gradient from left to right
+3. Gradient from left to right
 
    ```css
    /* Gradient from left to right, which is available in the 270 px width between the left 90 px and the left 360 px (600*0.6) */
    background: linear-gradient(to right, rgb(255, 0, 0) 90px, rgb(0, 255, 0) 60%);
    ```
 
-
     ![333](figures/333.PNG)
 
-  4.   Repeating gradient
+4. Repeating gradient
 
    ```css
      /* Repeating gradient from left to right, the area of which is 30 px (60 – 30) and the opacity is 0.5 */

en/application-dev/ui/arkts-common-components-xcomponent.md

@@ -107,7 +107,7 @@ extern "C" __attribute__((constructor)) void RegisterModule(void)
 
 ### Parsing the NativeXComponent Instance
 
-**NativeXComponent** provides an instance at the native layer for the **\<XComponent>**, which can be used as a bridge for binding with the **\<XComponent>** at the JS layer. The NDK APIs provided by the **\<XComponent>** depend on this instance. For details about the NKD APIs, see [Native XComponent](../reference/native-apis/_o_h___native_x_component.md).
+**NativeXComponent** provides an instance at the native layer for the **\<XComponent>**, which can be used as a bridge for binding with the **\<XComponent>** at the JS layer. The NDK APIs provided by the **\<XComponent>** depend on this instance. For details about the NDK APIs, see [Native XComponent](../reference/native-apis/_o_h___native_x_component.md).
 
 
 The **NativeXComponent** instance can be obtained by parsing the callback (that is, the **Init** function in [NAPI module registration](#registering-the-n-api-module)) when the module is loaded.
@@ -189,9 +189,10 @@ XComponent({ id: 'xcomponentId1', type: 'surface', libraryname: 'nativerender' }
 - **id**: corresponds to an **\<XComponent>** and must be unique. Generally, you can use the **OH_NativeXComponent_GetXComponentId** API on the native side to obtain the corresponding ID and bind the corresponding **\<XComponent>**.
 
 - **libraryname**: name of the loaded module, which must be the same as the value of **nm_modname** used when the Napi module is registered on the native side.
-  >**NOTE**
+
+  > **NOTE**
   >
-  >   An application loads modules to implement cross-language invoking in either of the following ways:
+  > An application loads modules to implement cross-language invoking in either of the following modes:
   > 
   > 1. Use the **import** mode of the NAPI.
   >
@@ -199,20 +200,22 @@ XComponent({ id: 'xcomponentId1', type: 'surface', libraryname: 'nativerender' }
   > import nativerender from "libnativerender.so"
   > ```
   >
-  > 2. Use the **\<XComponent>**, which, in essence, is to use the NAPI mechanism.
-  >    The difference between this loading mode and the **import** loading mode is that when the dynamic library is loaded, the **NativeXComponent** instance of the **\<XComponent>** is exposed to the native layer of the application so that you can use the NDK APIs of the **\<XComponent>**.
+  > 2. Use the **\<XComponent>**.
+  >
+  >    While this mode also uses the NAPI mechanism as the **import** mode, it enables you to use the NDK APIs of the **\<XComponent>**, by having the **NativeXComponent** instance of the **\<XComponent>** exposed to the native layer of the application when the dynamic library is loaded.
 
-- onLoad event
+- **onLoad** event
   - Trigger time: when the surface of the **\<XComponent>** is prepared.
   - **context** parameter: where the native API exposed on the module is mounted. Its usage is similar to the usage of the **context2** instance obtained after the module is directly loaded using **import context2 from "libnativerender.so"**.
   - Time sequence: When the **onLoad** event is subject to the surface. The following figure shows the time sequence of the **onLoad** event and the **OnSurfaceCreated** event on the native side.
 
-     ![onLoad](figures /onLoad.png)
+     ![onLoad](figures/onLoad.png)
+
+- **onDestroy** event
 
-- onDestroy event
   Trigger time: when the **\<XComponent>** is destroyed, in the same manner as that when an ArkUI component is destroyed. The following figure shows the time sequence of the **onDestroy** event and the **OnSurfaceDestroyed** event on the native side.
 
-  ![onDestroy](figures /onDestroy.png)
+  ![onDestroy](figures/onDestroy.png)
 
 
 ### Writing Media Data
@@ -221,7 +224,7 @@ The surface held by the **\<XComponent>** complies with the producer-consumer mo
 
 In OpenHarmony, components that comply with the producer design, such as the camera and video player, can write data to the surface held by the **\<XComponent>** and display the data through the **\<XComponent>**.
 
-![Picture 1](figures /Picture 1.png)
+![picture-1](figures/picture-1.png)
 
 You can bind the **\<XComponent>** to the **XComponentController** to obtain the surface ID (**surfaceId**, which uniquely identifies a surface) and send it to the corresponding component API.