update docs

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

en/application-dev/reference/apis/js-apis-uitest.md

 # UiTest
 
->**NOTE**<br>The initial APIs of this module are supported since API version 8. Newly added APIs will be marked with a superscript to indicate their earliest API version.
+The **UiTest** module provides APIs that you can use to simulate UI actions during testing, such as clicks, double-clicks, long-clicks, and swipes.
+
+This module provides the following functions:
+
+- [By](#by): provides UI component feature description APIs for component filtering and matching.
+- [UiComponent](#uicomponent): represents a component on the UI and provides APIs for obtaining component attributes, clicking a component, scrolling to search for a component, and text injection.
+- [UiDriver](#uidriver): works as the entry class and provides APIs for features such as component matching/search, key injection, coordinate clicking/sliding, and screenshot.
+
+>**NOTE**
 >
+>The initial APIs of this module are supported since API version 8. Newly added APIs will be marked with a superscript to indicate their earliest API version.
 
 
 ## Modules to Import
@@ -12,14 +21,14 @@ import {UiDriver,BY,MatchPattern} from '@ohos.uitest'
 
 ## By
 
-The UiTest framework provides a wide range of UI component feature description APIs in the **By** class to filter and match components.<br>
+The UiTest framework provides a wide range of UI component feature description APIs in the **By** class to filter and match components.
 The API capabilities provided by the **By** class exhibit the following features: <br>1. Allow one or more attributes as the match conditions. For example, you can specify both the **text** and **id** attributes to find the target component. <br>2. Provide multiple match patterns for component attributes. <br>3. Support absolute positioning and relative positioning for components. APIs such as [By.isBefore](#byisbefore) and [By.isAfter](#byisafter) can be used to specify the features of adjacent components to assist positioning. <br>All APIs provided in the **By** class are synchronous. You are advised to use the static constructor **BY** to create a **By** object in chain mode.
 
 ```js
 BY.text('123').type('button')
 ```
 
-### By.text
+### text
 
 text(txt: string, pattern?: MatchPattern): By
 
@@ -128,11 +137,11 @@ let by = BY.type('button') // Use the static constructor BY to create a By objec
 ```
 
 
-### By.clickable
+### clickable
 
 clickable(b?: bool): By
 
-Specifies the clickable attribute of the target component.
+Specifies the clickable status of the target component.
 
 **System capability**: SystemCapability.Test.UiTest
 
@@ -151,7 +160,7 @@ Specifies the clickable attribute of the target component.
 **Example**
 
 ```js
-let by = BY.clickable(true) // Use the static constructor BY to create a By object and specify the clickable status attribute of the target component.
+let by = BY.clickable(true) // Use the static constructor BY to create a By object and specify the clickable status of the target component.
 ```
 
 
@@ -159,7 +168,7 @@ let by = BY.clickable(true) // Use the static constructor BY to create a By obje
 
 scrollable(b?: bool): By
 
-Specifies the scrollable status attribute of the target component.
+Specifies the scrollable status of the target component.
 
 **System capability**: SystemCapability.Test.UiTest
 
@@ -178,14 +187,14 @@ Specifies the scrollable status attribute of the target component.
 **Example**
 
 ```js
-let by = BY.scrollable(true) // Use the static constructor BY to create a By object and specify the scrollable status attribute of the target component.
+let by = BY.scrollable(true) // Use the static constructor BY to create a By object and specify the scrollable status of the target component.
 ```
 
 ### By.enabled
 
 enabled(b?: bool): By
 
-Specifies the enabled status attribute of the target component.
+Specifies the enabled status of the target component.
 
 **System capability**: SystemCapability.Test.UiTest
 
@@ -204,14 +213,14 @@ Specifies the enabled status attribute of the target component.
 **Example**
 
 ```js
-let by = BY.enabled(true) // Use the static constructor BY to create a By object and specify the enabled status attribute of the target component.
+let by = BY.enabled(true) // Use the static constructor BY to create a By object and specify the enabled status of the target component.
 ```
 
 ### By.focused
 
 focused(b?: bool): By
 
-Specifies the focused status attribute of the target component.
+Specifies the focused status of the target component.
 
 **System capability**: SystemCapability.Test.UiTest
 
@@ -230,14 +239,14 @@ Specifies the focused status attribute of the target component.
 **Example**
 
 ```js
-let by = BY.focused(true) // Use the static constructor BY to create a By object and specify the focused status attribute of the target component.
+let by = BY.focused(true) // Use the static constructor BY to create a By object and specify the focused status of the target component.
 ```
 
 ### By.selected
 
 selected(b?: bool): By
 
-Specifies the selected status attribute of the target component.
+Specifies the selected status of the target component.
 
 **System capability**: SystemCapability.Test.UiTest
 
@@ -256,7 +265,7 @@ Specifies the selected status attribute of the target component.
 **Example**
 
 ```js
-let by = BY.selected(true) // Use the static constructor BY to create a By object and specify the selected status attribute of the target component.
+let by = BY.selected(true) // Use the static constructor BY to create a By object and specify the selected status of the target component.
 ```
 
 ### By.isBefore
@@ -316,6 +325,7 @@ let by = BY.isAfter(BY.text('123')) // Use the static constructor BY to create a
 In **UiTest**, the **UiComponent** class represents a component on the UI and provides APIs for obtaining component attributes, clicking a component, scrolling to search for a component, and text injection.
 All APIs provided in this class use a promise to return the result and must be invoked using **await**.
 
+
 ### UiComponent.click
 
 click(): Promise\<void>
@@ -639,7 +649,7 @@ async function demo() {
 
 ### UiComponent.scrollSearch
 
-scrollSearch(by: By): Promise\<UiComponent>
+scrollSearch(by:By): Promise\<UiComponent>
 
 Scrolls on this component to search for the target component (applicable to component that support scrolling, such as **\<List>**).
 
@@ -667,12 +677,14 @@ async function demo() {
 }
 ```
 
+
+
 ## UiDriver
 
-The **UiDriver** class is the main entry to the **uitest** test framework. It provides APIs for features such as component matching/search, key injection, coordinate clicking/sliding, and screenshot.
+The **UiDriver** class is the main entry to the UiTest framework. It provides APIs for features such as component matching/search, key injection, coordinate clicking/sliding, and screenshot.
 All APIs provided by this class, except for **UiDriver.create()**, use a promise to return the result and must be invoked using **await**.
 
-### UiDriver.create
+### create
 
 static create(): UiDriver
 
@@ -746,7 +758,7 @@ async function demo() {
 }
 ```
 
-### UiDriver.findComponents
+### findComponents
 
 findComponents(by: By): Promise\<Array\<UiComponent>>
 
@@ -850,8 +862,8 @@ Clicks a specific point of this **UiDriver** object based on the given coordinat
 
 | Name| Type  | Mandatory| Description                                  |
 | ------ | ------ | ---- | -------------------------------------- |
-| x      | number | Yes  | X coordinate of the target point.|
-| y      | number | Yes  | Y coordinate of the target point.|
+| x      | number | Yes  | X-coordinate of the target point.|
+| y      | number | Yes  | Y-coordinate of the target point.|
 
 **Example**
 
@@ -874,8 +886,8 @@ Double-clicks a specific point of this **UiDriver** object based on the given co
 
 | Name| Type  | Mandatory| Description                                  |
 | ------ | ------ | ---- | -------------------------------------- |
-| x      | number | Yes  | X coordinate of the target point.|
-| y      | number | Yes  | Y coordinate of the target point.|
+| x      | number | Yes  | X-coordinate of the target point.|
+| y      | number | Yes  | Y-coordinate of the target point.|
 
 **Example**
 
@@ -886,7 +898,7 @@ async function demo() {
 }
 ```
 
-### UiDriver.longClick
+### longClick
 
 longClick(x: number, y: number): Promise\<void>
 
@@ -898,8 +910,8 @@ Long-clicks a specific point of this **UiDriver** object based on the given coor
 
 | Name| Type  | Mandatory| Description                                  |
 | ------ | ------ | ---- | -------------------------------------- |
-| x      | number | Yes  | X coordinate of the target point.|
-| y      | number | Yes  | Y coordinate of the target point.|
+| x      | number | Yes  | X-coordinate of the target point.|
+| y      | number | Yes  | Y-coordinate of the target point.|
 
 **Example**
 
@@ -912,7 +924,7 @@ async function demo() {
 
 ### UiDriver.swipe
 
-swipe(startx: number, starty: number, endx: number, endy: number): Promise\<void>
+swipe(startx: number, starty: number, endx: number, endy: number, speed: number): Promise\<void>
 
 Swipes on this **UiDriver** object from the start point to the end point based on the given coordinates.
 
@@ -920,12 +932,13 @@ Swipes on this **UiDriver** object from the start point to the end point based o
 
 **Parameters**
 
-| Name| Type  | Mandatory| Description                                  |
-| ------ | ------ | ---- | -------------------------------------- |
-| startx | number | Yes  | X coordinate of the start point.|
-| starty | number | Yes  | Y coordinate of the start point.|
-| endx   | number | Yes  | X coordinate of the end point.|
-| endy   | number | Yes  | Y coordinate of the end point.|
+| Name| Type  | Mandatory| Description                                    |
+| ------ | ------ | ---- | ---------------------------------------- |
+| startx | number | Yes  | X-coordinate of the start point.  |
+| starty | number | Yes  | Y-coordinate of the start point.  |
+| endx   | number | Yes  | X-coordinate of the end point.  |
+| endy   | number | Yes  | Y-coordinate of the end point.  |
+| speed  | number | No  | Scroll speed, in pixels/s. The default value is **600**.|
 
 **Example**
 
@@ -965,6 +978,7 @@ async function demo() {
 }
 ```
 
+
 ## MatchPattern
 
 Enumerates the match patterns supported for component attributes.
@@ -977,5 +991,3 @@ Enumerates the match patterns supported for component attributes.
 | CONTAINS    | 1    | Containing the given value.  |
 | STARTS_WITH | 2    | Starting from the given value.|
 | ENDS_WITH   | 3    | Ending with the given value.|
-
-### 

en/application-dev/reference/arkui-js/js-components-svg-text.md

@@ -2,11 +2,12 @@
 
 The  **<text\>**  component is used to display a piece of textual information.
 
->![](../../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 text content must be written in the content area. The  **tspan**  sub-element label can be nested to segment the text content. The  **textPath**  sub-element label can be nested to draw the text content based on the specified path.
->-   **<text\>**  can be nested only by the parent element label  **svg**.
->-   Only the default font  **sans-serif**  is supported.
+> **NOTE** 
+>
+> -   This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+> -   The text content must be written in the content area. The  **tspan**  sub-element label can be nested to segment the text content. The  **textPath**  sub-element label can be nested to draw the text content based on the specified path.
+> -   **<text\>**  can be nested only by the parent element label  **svg**.
+> -   Only the default font  **sans-serif**  is supported.
 
 ## Required Permissions
 
@@ -14,7 +15,7 @@ None
 
 ## Child Components
 
-**Tspan**,  **textpath**,  **animate**, and  **animateTransform are**  supported.
+**\<tspan>**,  **\<textpath>**,  **\<animate>**, and **\<animateTransform>** are supported.
 
 ## Attributes
 
@@ -39,7 +40,7 @@ The attributes in the following table are supported.
 
 ## Example
 
-```
+```css
 /* xxx.css */
 .container {    
     flex-direction: row;
@@ -50,7 +51,7 @@ The attributes in the following table are supported.
 }
 ```
 
-```
+```html
 <!-- xxx.hml -->
 <div class="container">
   <svg>
@@ -72,7 +73,7 @@ The attributes in the following table are supported.
 
 Attribute animation example
 
-```
+```css
 /* xxx.css  */
 .container {
     flex-direction: row;
@@ -83,11 +84,12 @@ Attribute animation example
 }
 ```
 
-```
+```html
 <!-- xxx.hml -->
 <div class="container">
   <svg>
     <text y="50" font-size="30" fill="blue">
+        text attribute x|opacity|rotate
       <animate attributeName="x" from="100" by="400" dur="3s" repeatCount="indefinite"></animate>
       <animate attributeName="opacity" from="0.01" to="0.99" dur="3s" repeatCount="indefinite"></animate>
       <animate attributeName="rotate" from="0" to="360" dur="3s" repeatCount="indefinite"></animate>
@@ -99,7 +101,7 @@ Attribute animation example
 
 ![](figures/text-animate-part1.gif)
 
-```
+```html
 <!-- xxx.hml -->
 <div class="container">
   <svg>
@@ -114,7 +116,7 @@ Attribute animation example
 
 ![](figures/text-animate-part2.gif)
 
-```
+```html
 <!-- xxx.hml -->
 <div class="container">
   <svg>

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

 # Gradient Color
 
+Create a more gorgeous look for a component by applying a gradient color effect to it.
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
+> **NOTE**
+>
 > This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
@@ -15,31 +17,32 @@ None
 
 | Name | Type | Default Value | Description |
 | -------- | -------- | -------- | -------- |
-| linearGradient | {<br/>angle?: [Angle](../../ui/ts-types.md),<br/>direction?:GradientDirection,<br/>colors: Array<[ColorStop](../../ui/ts-types.md)><br/>repeating?: boolean<br/>} | - | Linear gradient.<br/>**angle**: angle of the linear gradient.<br/>**direction**: direction of the linear gradient.<br/>**colors**: description of the gradient colors.<br/>**repeating**: whether the colors are repeated. |
+| linearGradient | {<br/>angle?: [Angle](../../ui/ts-types.md),<br/>direction?:GradientDirection,<br/>colors: Array<[ColorStop](../../ui/ts-types.md)><br/>repeating?: boolean<br/>} | - | Linear gradient.<br/>**angle**: angle of the linear gradient.<br/>**direction**: direction of the linear gradient. It does not take effect when **angle** is set.<br/>**colors**: description of the gradient colors.<br/>**repeating**: whether the colors are repeated. |
 | sweepGradient | {<br/>center: Point,<br/>start?: angle,<br/>end?: angle,<br/>colors: Array<[ColorStop](../../ui/ts-types.md)><br/>repeating?: boolean<br/>} | - | Angle gradient.<br/>**center**: center point of the angle gradient.<br/>**start**: start point of the angle gradient.<br/>**end**: end point of the angle gradient.<br/>**colors**: description of the gradient colors.<br/>**repeating**: whether the colors are repeated. |
 | radialGradient | {<br/>center: Point,<br/>radius: Length,<br/>colors: Array<[ColorStop](../../ui/ts-types.md)><br/>repeating: boolean<br/>} | - | Radial gradient.<br/>**center**: center point of the radial gradient.<br/>**radius**: radius of the radial gradient.<br/>**colors**: description of the gradient colors.<br/>**repeating**: whether the colors are repeated. |
 
+- GradientDirection
 
-- GradientDirection enums
-  **GradientDirection** is used to describe the gradient direction.
+  Enumerates the gradient directions.
 
-    | Name | Description | 
+  | Name | Description |
   | -------- | -------- |
-  | Left | The gradient direction is from right to left. | 
-  | Top | The gradient direction is from bottom to top. | 
-  | Right | The gradient direction is from left to right. | 
-  | Bottom | The gradient direction is from top to bottom. | 
-  | LeftTop | The gradient direction is upper left. | 
-  | LeftBottom | The gradient direction is lower left. | 
-  | RightTop | The gradient direction is upper right. | 
-  | RightBottom | The gradient direction is lower right. | 
-  | None | No gradient. | 
+  | Left | The gradient direction is from right to left. |
+  | Top | The gradient direction is from bottom to top. |
+  | Right | The gradient direction is from left to right. |
+  | Bottom | The gradient direction is from top to bottom. |
+  | LeftTop | The gradient direction is upper left. |
+  | LeftBottom | The gradient direction is lower left. |
+  | RightTop | The gradient direction is upper right. |
+  | RightBottom | The gradient direction is lower right. |
+  | None | No gradient. |
 
 
 ## Example
 
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ColorGradientExample {
@@ -51,7 +54,6 @@ struct ColorGradientExample {
         .height(50)
         .linearGradient({
           angle: 90,
-          direction: GradientDirection.Left,
           colors: [[0xAEE1E1, 0.0], [0xD3E0DC, 0.3], [0xFCD1D1, 1.0]]
         })
       Text('sweepGradient').fontSize(12).width('90%').fontColor(0xCCCCCC)

en/application-dev/ui/ts-custom-component-initialization.md

@@ -5,32 +5,32 @@ The member variables of a component can be initialized in either of the followin
 
 
 - Local initialization. For example:
-    
+  
   ```
   @State counter: Counter = new Counter()
   ```
 
 - Initialization using constructor parameters. For example:
-    
+  
   ```
-  MyComponent(counter: $myCounter)
+  MyComponent({counter: $myCounter})
   ```
 
 
 The allowed method depends on the decorator of the state variable, as shown in the following table.
 
 
-  | Decorator Type | Local Initialization | Initialization Using Constructor Parameters | 
+| Decorator Type | Local Initialization | Initialization Using Constructor Parameters |
 | -------- | -------- | -------- |
-| @State | Mandatory | Optional | 
-| @Prop | Forbidden | Mandatory | 
-| @Link | Forbidden | Mandatory | 
-| @StorageLink | Mandatory | Forbidden | 
-| @StorageProp | Mandatory | Forbidden | 
-| @Provide | Mandatory | Optional | 
-| @Consume | Forbidden | Forbidden | 
-| @ObjectLink | Forbidden | Mandatory | 
-| Normal member variable | Recommended | Optional | 
+| @State | Mandatory | Optional |
+| @Prop | Forbidden | Mandatory |
+| @Link | Forbidden | Mandatory |
+| @StorageLink | Mandatory | Forbidden |
+| @StorageProp | Mandatory | Forbidden |
+| @Provide | Mandatory | Optional |
+| @Consume | Forbidden | Forbidden |
+| @ObjectLink | Forbidden | Mandatory |
+| Normal member variable | Recommended | Optional |
 
 
 As indicated by the preceding table:
@@ -44,14 +44,14 @@ As indicated by the preceding table:
 Comply with the following rules when using constructors to initialize member variables:
 
 
-  | From the Variable in the Parent Component (Below) to the Variable in the Child Component (Right) | @State | @Link | @Prop | Normal Variable | 
+| From the Variable in the Parent Component (Below) to the Variable in the Child Component (Right) | @State | @Link | @Prop | Normal Variable |
 | -------- | -------- | -------- | -------- | -------- |
-| @State | Not allowed | Allowed | Allowed | Allowed | 
-| @Link | Not allowed | Allowed | Not recommended | Allowed | 
-| @Prop | Not allowed | Not allowed | Allowed | Allowed | 
-| @StorageLink | Not allowed | Allowed | Not allowed | Allowed | 
-| @StorageProp | Not allowed | Not allowed | Not allowed | Allowed | 
-| Normal variable | Allowed | Not allowed | Not allowed | Allowed | 
+| @State | Not allowed | Allowed | Allowed | Allowed |
+| @Link | Not allowed | Allowed | Not recommended | Allowed |
+| @Prop | Not allowed | Not allowed | Allowed | Allowed |
+| @StorageLink | Not allowed | Allowed | Not allowed | Allowed |
+| @StorageProp | Not allowed | Not allowed | Not allowed | Allowed |
+| Normal variable | Allowed | Not allowed | Not allowed | Allowed |
 
 
 As indicated by the preceding table:
@@ -59,7 +59,7 @@ As indicated by the preceding table:
 
 - The normal variables of the parent component can be used to initialize the @State decorated variables of the child component, but not the @Link or @Prop decorated variables.
 
-- The @State decorated variable of the parent component can be used to initialize the @Prop, @Link (using $), or normal variables of the child component, but not the @State decorated variables of the child component.
+- The @State decorated variable of the parent component can be used to initialize the @Prop, @Link (using `$`), or normal variables of the child component, but not the @State decorated variables of the child component.
 
 - The @Link decorated variables of the parent component can be used to initialize the @Link decorated or normal variables of the child component. However, initializing the @State decorated members of the child component can result in a syntax error. In addition, initializing the @Prop decorated variables is not recommended.
 
@@ -72,7 +72,7 @@ As indicated by the preceding table:
 
 ## Example
 
-  
+
 ```
 @Entry
 @Component
@@ -97,7 +97,7 @@ struct CompA {
         Row() {
             CompB({bLink: $aLink,         // valid init a @Link with reference of another @Link,
                 bProp: this.aState})    // valid init a @Prop with value of a @State
-            CompB({aLink: $aState,  // invalid: type missmatch expected ref to ClassA, provided reference to boolean
+            CompB({aLink: $aState,  // invalid: type mismatch expected ref to ClassA, provided reference to boolean
                 bProp: false})           // valid init a @Prop by constants value
         }
     }