From 8eb19211a2de217532a9009cefbce3c3e5bfa1c1 Mon Sep 17 00:00:00 2001
From: "ester.zhou" <ester.zhou@huawei.com>
Date: Fri, 1 Jul 2022 17:43:06 +0800
Subject: [PATCH] update docs

Signed-off-by: ester.zhou <ester.zhou@huawei.com>
---
 .../arkui-js/js-components-media-video.md     |   9 +-
 .../arkui-ts/ts-basic-components-progress.md  |  20 +-
 .../arkui-ts/ts-basic-components-textarea.md  |   9 +-
 .../arkui-ts/ts-basic-components-textinput.md |  15 +-
 .../arkui-ts/ts-basic-components-web.md       | 160 +++++------
 .../arkui-ts/ts-container-navigator.md        |  52 ++--
 .../reference/arkui-ts/ts-gesture-settings.md |  44 ++--
 .../arkui-ts/ts-motion-path-animation.md      |  11 +-
 .../ts-universal-attributes-component-id.md   | 248 ++++++++++++++----
 .../guide/device-wlan-led-control.md          |  15 +-
 10 files changed, 368 insertions(+), 215 deletions(-)

diff --git a/en/application-dev/reference/arkui-js/js-components-media-video.md b/en/application-dev/reference/arkui-js/js-components-media-video.md
index b957ee6d96..18c3fbef3b 100644
--- a/en/application-dev/reference/arkui-js/js-components-media-video.md
+++ b/en/application-dev/reference/arkui-js/js-components-media-video.md
@@ -1,7 +1,7 @@
 # video
 
 
->  **NOTE**<br>
+>  **NOTE**
 >
 > - This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
 >
@@ -15,7 +15,7 @@
 > ]
 > ```
 
-The **\<Video>** component provides a video player.
+The **\<video>** component provides a video player.
 
 
 ## Child Components
@@ -76,7 +76,8 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods.
 | pause | - | Pauses a video.|
 | setCurrentTime | {&nbsp;currenttime:&nbsp;value&nbsp;} | Sets the video playback position, in seconds.|
 
->  **NOTE**<br>
+> **NOTE**
+>
 > The methods in the above table can be called after the **attached** callback is invoked.
 
 ## Example
@@ -89,7 +90,7 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods.
          onpaues='pauesCallback' onfinish='finishCallback' onerror='errorCallback'
          onseeking='seekingCallback' onseeked='seekedCallback' 
          ontimeupdate='timeupdateCallback'
-         style="object-fit:fit; width:80%; height:400px;"
+         style="object-fit:fill; width:80%; height:400px;"
          onclick="change_start_pause">
    </video>
 </div>
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-progress.md b/en/application-dev/reference/arkui-ts/ts-basic-components-progress.md
index 3c47386dc3..83a445ec88 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-progress.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-progress.md
@@ -1,11 +1,12 @@
 # Progress
 
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
+> **NOTE**
+>
 > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-The **&lt;Progress&gt;** component is used to provide a progress bar that displays the progress of content loading or an operation.
+The **\<Progress>** component is used to provide a progress bar that displays the progress of content loading or an operation.
 
 
 ## Required Permissions
@@ -15,17 +16,17 @@ None
 
 ## Child Components
 
-None
+Not supported
 
 
 ## APIs
 
-Progress(value: { value: number, total?: number, type?: ProgressType})
+Progress(value: {value: number, total?: number, type?: ProgressType})
 
 Creates a progress bar.
 
 - Parameters
-    | Name | Type | Mandatory | Default Value | Description |
+  | Name | Type | Mandatory | Default Value | Description |
   | -------- | -------- | -------- | -------- | -------- |
   | value | number | Yes | - | Current progress. |
   | total | number | No | 100 | Total progress. |
@@ -33,7 +34,7 @@ Creates a progress bar.
 
 
 - ProgressType enums
-    | Name | Description |
+  | Name | Description |
   | -------- | -------- |
   | Linear | Linear type. |
   | Ring<sup>8+</sup> | Ring type without scale. The ring fills up as the progress increases. |
@@ -54,7 +55,8 @@ Creates a progress bar.
 ## Example
 
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ProgressExample {
@@ -88,8 +90,8 @@ struct ProgressExample {
 
       Text('Capsule Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
       Row({ space: 40 }) {
-        Progress({ value: 10, type: ProgressType.Capsule }).width(100)
-        Progress({ value: 20, total: 150, type: ProgressType.Capsule }).color(Color.Grey).value(50).width(100)
+        Progress({ value: 10, type: ProgressType.Capsule }).width(100).height(50)
+        Progress({ value: 20, total: 150, type: ProgressType.Capsule }).color(Color.Grey).value(50).width(100).height(50)
       }
     }.width('100%').margin({ top: 30 })
   }
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md b/en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md
index b3790db035..86f53ad1d3 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md
@@ -1,7 +1,8 @@
 # TextArea
 
 
-> **NOTE**<br>
+> **NOTE**
+>
 > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
@@ -20,7 +21,7 @@ Not supported
 
 ## APIs
 
-TextArea(value?:{placeholder?: string controller?: TextAreaController})
+TextArea(value?:{placeholder?: string, controller?: TextAreaController})
 
 - Parameters
     | Name                    | Type                                     | Mandatory | Default Value | Description                            |
@@ -93,10 +94,11 @@ Sets the position of the caret.
 @Entry
 @Component
 struct TextAreaExample1 {
+  controller: TextAreaController = new TextAreaController()
   @State text: string = ''
   build() {
     Column() {
-      TextArea({ placeholder: 'input your word'})
+      TextArea({ placeholder: 'input your word', controller: this.controller})
         .placeholderColor("rgb(0,0,225)")
         .placeholderFont({ size: 30, weight: 100, family: 'cursive', style: FontStyle.Italic })
         .textAlign(TextAlign.Center)
@@ -112,6 +114,7 @@ struct TextAreaExample1 {
         })
         .onChange((value: string) => {
           this.text = value
+          this.controller.caretPosition(-1)
         })
       Text(this.text).width('90%')
     }
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-textinput.md b/en/application-dev/reference/arkui-ts/ts-basic-components-textinput.md
index 90fc8b99e2..a8276105dc 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-textinput.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-textinput.md
@@ -1,6 +1,7 @@
 # TextInput
 
-> **NOTE**<br/>
+> **NOTE**
+>
 > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
@@ -39,9 +40,8 @@ In addition to universal attributes, the following attributes are supported.
 | placeholderFont | {<br/>size?: Length,<br/>weight?: number\|[FontWeight](ts-universal-attributes-text-style.md),<br/>family?: string,<br/>style?: [FontStyle](ts-universal-attributes-text-style.md)<br/>} | - | Placeholder text style.<br/>- **size**: font size. If the value is of the number type, the unit fp is used.<br/>- **weight**: font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is **400**. A larger value indicates a larger font weight.<br/>- **family**: font family. Use commas (,) to separate multiple fonts, for example, **'Arial, sans-serif'**. The priority of the fonts is the sequence in which they are placed.<br/>- **style**: font style. |
 | enterKeyType | EnterKeyType | EnterKeyType.Done | How the Enter key is labeled. |
 | caretColor | Color | - | Color of the caret (also known as the text insertion cursor). |
-| maxLength<sup>8+</sup> | number | - | Maximum number of characters in the text input. |
+| maxLength | number | - | Maximum number of characters in the text input. |
 | inputFilter<sup>8+</sup> | {<br/>value: [ResourceStr](../../ui/ts-types.md)<sup>8+</sup>,<br/>error?: (value: string)<br/>} | - | Regular expression for input filtering. Only inputs that comply with the regular expression can be displayed. Other inputs are ignored. The specified regular expression can match single characters, but not strings. Example: ^(? =.\*\d)(? =.\*[a-z])(? =.\*[A-Z]).{8,10}$. Strong passwords containing 8 to 10 characters cannot be filtered.<br/>- **value**: regular expression to set.<br/>- **error**: error message containing the ignored content returned when regular expression matching fails. |
-| copyOption<sup>9+</sup> | boolean\|[CopyOption](ts-basic-components-text.md) | true | Whether copy and paste is allowed. |
 
 - EnterKeyType enums
   | Name | Description |
@@ -75,10 +75,10 @@ In addition to universal attributes, the following attributes are supported.
 
 ### TextInputController<sup>8+</sup>
 
-Implements the controller of the **&lt;TextInput&gt;** component.
+Implements the controller of the **\<TextInput>** component.
 
 
-### Objects to Import
+#### Objects to Import
 
 
 ```
@@ -86,7 +86,7 @@ controller: TextInputController = new TextInputController()
 ```
 
 
-### caretPosition
+#### caretPosition
 
 caretPosition(value: number): void
 
@@ -113,10 +113,9 @@ struct TextInputExample1 {
 
   build() {
     Column() {
-      TextArea({ placeholder: 'input your word' })
+      TextInput({ placeholder: 'input your word' })
         .placeholderColor("rgb(0,0,225)")
         .placeholderFont({ size: 30, weight: 100, family: 'cursive', style: FontStyle.Italic })
-        .textAlign(TextAlign.Center)
         .caretColor(Color.Blue)
         .height(50)
         .fontSize(30)
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-web.md b/en/application-dev/reference/arkui-ts/ts-basic-components-web.md
index 068f19a35f..b0348580d7 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-web.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-web.md
@@ -48,7 +48,7 @@ Not supported
 | textZoomAtio       | number                                   | 100               | Text zoom ratio of the page. The default value is **100**, which indicates 100%.                   |
 | userAgent          | string                                   | -                 | User agent.                                 |
 
->  **NOTE**<br>
+> **NOTE**<br>
 >
 > Only the following universal attributes are supported: [width](ts-universal-attributes-size.md#Attributes), [height](ts-universal-attributes-size.md#Attributes), [padding](ts-universal-attributes-size.md#Attributes), [margin](ts-universal-attributes-size.md#Attributes), and [border](ts-universal-attributes-border.md#Attributes).
 
@@ -74,97 +74,85 @@ The universal events are not supported.
 | onShowFileSelector(callback: (event?: { result: [FileSelectorResult](#fileselectorresult), fileSelector:  [FileSelectorParam](#fileselectorparam) }) => void) | <p>Triggered to process an HTML form whose input type is **file**, in response to the tapping of the **Select File** button.<br>**result**: file selection result to be sent to the web component.<br>**fileSelector**: information about the file selector.</p> |
 | onUrlLoadIntercept(callback: (event?: { data:string \| [WebResourceRequest](#webresourcerequest) }) => boolean) | <p>Triggered before the **\<Web>** component loads the URL to determine whether to block the access. The callback returns **true** if the access is blocked, and **false** otherwise.<br>**data**: URL information.</p> |
 
-### ConsoleMessage
-
-- APIs
+## ConsoleMessage
 
-  | Name                           | Description                  |
-  | ------------------------------- | ---------------------- |
-  | getLineNumber(): number         | Obtains the number of rows in the **ConsoleMessage**.  |
-  | getMessage(): string            | Obtains the log information of the **ConsoleMessage**.|
-  | getMessageLevel(): MessageLevel | Obtains the log information level of the **ConsoleMessage**.|
-  | getSourceId(): string           | Obtains the path and name of the web page source file.         |
+| Name                           | Description                  |
+| ------------------------------- | ---------------------- |
+| getLineNumber(): number         | Obtains the number of rows in the **ConsoleMessage**.  |
+| getMessage(): string            | Obtains the log information of the **ConsoleMessage**.|
+| getMessageLevel(): [MessageLevel](#messagelevel-enums) | Obtains the log information level of the **ConsoleMessage**.|
+| getSourceId(): string           | Obtains the path and name of the web page source file.         |
 
-- MessageLevel enums
+## MessageLevel Enums
 
-  | Name   | Description   |
-  | ----- | :---- |
-  | Debug | Debug level.|
-  | Error | Error level.|
-  | Info  | Information level.|
-  | Log   | Log level.|
-  | Warn  | Warning level. |
+| Name   | Description   |
+| ----- | :---- |
+| Debug | Debug level.|
+| Error | Error level.|
+| Info  | Information level.|
+| Log   | Log level.|
+| Warn  | Warning level. |
 
-### JsResult
+## JsResult
 
 Provides the result returned to the **\<Web>** component to indicate the user operation performed in the dialog box.
 
-- APIs
-
-  | Name                 | Description                   |
-  | --------------------- | ----------------------- |
-  | handleCancel(): void  | <p>The user's cancel operation in the dialog box.</p> |
-  | handleConfirm(): void | <p>The user's confirm operation in the dialog box.</p> |
+| Name                 | Description                   |
+| --------------------- | ----------------------- |
+| handleCancel(): void  | <p>The user's cancel operation in the dialog box.</p> |
+| handleConfirm(): void | <p>The user's confirm operation in the dialog box.</p> |
 
-### WebResourceError
+## WebResourceError
 
-- APIs
-
-  | Name                  | Description        |
-  | ---------------------- | ------------ |
-  | getErrorCode(): number | Obtains the error code for resource loading. |
-  | getErrorInfo(): string | Obtains error information about resource loading.|
-
-### WebResourceRequest
+| Name                  | Description        |
+| ---------------------- | ------------ |
+| getErrorCode(): number | Obtains the error code for resource loading. |
+| getErrorInfo(): string | Obtains error information about resource loading.|
 
-- APIs
+## WebResourceRequest
 
-  | Name                                    | Description                |
-  | ---------------------------------------- | -------------------- |
-  | getRequestHeader(): Array\<[Header](#header)\> | Obtains the information about the resource request header.          |
-  | getRequestUrl(): string                  | Obtains the URL of the resource request.       |
-  | isMainFrame(): boolean                   | Checks whether the resource request is in the main frame.    |
-  | isRedirect(): boolean                    | Checks whether the resource request is redirected by the server.    |
-  | isRequestGesture(): boolean              | Checks whether the resource request is associated with a gesture (for example, a tap).|
+| Name                                    | Description                |
+| ---------------------------------------- | -------------------- |
+| getRequestHeader(): Array\<[Header](#header)\> | Obtains the information about the resource request header.          |
+| getRequestUrl(): string                  | Obtains the URL of the resource request.       |
+| isMainFrame(): boolean                   | Checks whether the resource request is in the main frame.    |
+| isRedirect(): boolean                    | Checks whether the resource request is redirected by the server.    |
+| isRequestGesture(): boolean              | Checks whether the resource request is associated with a gesture (for example, a tap).|
 
-### Header
+## Header
 
 Describes the request/response header returned by the **\<Web>** component.
 
-- Parameters
-
-  | Name       | Type  | Description         |
-  | ----------- | ------ | ------------- |
-  | headerKey   | string | Key of the request/response header.  |
-  | headerValue | string | Value of the request/response header.|
-
+| Name       | Type  | Description         |
+| ----------- | ------ | ------------- |
+| headerKey   | string | Key of the request/response header.  |
+| headerValue | string | Value of the request/response header.|
 
-### WebResourceResponse
 
-- APIs
+## WebResourceResponse
 
-  | Name                                    | Description              |
-  | ---------------------------------------- | ------------------ |
-  | getReasonMessage(): string               | Obtains the status code description of the resource response.     |
-  | getResponseCode(): number                | Obtains the status code of the resource response.       |
-  | getResponseData(): string                | Obtains the data in the resource response.         |
-  | getResponseEncoding(): string            | Obtains the encoding of the resource response.        |
-  | getResponseHeader(): Array\<[Header](#header)\> | Obtains the resource response header.          |
-  | getResponseMimeType(): string            | Obtains the media (MIME) type of the resource response.|
+| Name                                    | Description              |
+| ---------------------------------------- | ------------------ |
+| getReasonMessage(): string               | Obtains the status code description of the resource response.     |
+| getResponseCode(): number                | Obtains the status code of the resource response.       |
+| getResponseData(): string                | Obtains the data in the resource response.         |
+| getResponseEncoding(): string            | Obtains the encoding of the resource response.        |
+| getResponseHeader(): Array\<[Header](#header)\> | Obtains the resource response header.          |
+| getResponseMimeType(): string            | Obtains the media (MIME) type of the resource response.|
 
-### RenderExitReason
+## RenderExitReason
 
 Explains why the rendering process exits.
 
 | Name                        | Description               |
 | -------------------------- | ----------------- |
-| ProcessAbnormalTermination | The rendering process exits abnormally.        |
-| ProcessWasKilled           | The rendering process receives a SIGKILL message or is manually terminated.|
-| ProcessCrashed             | The rendering process crashes due to a segmentation error or other errors.   |
-| ProcessOom                 | The program memory is running low.          |
-| ProcessExitUnknown         | Other reason.            |
+| PROCESS_ABNORMAL_TERMINATION | The rendering process exits abnormally.        |
+| PROCESS_WAS_KILLED          | The rendering process receives a SIGKILL message or is manually terminated.|
+| PROCESS_CRASHED            | The rendering process crashes due to a segmentation error or other errors.   |
+| PROCESS_OOM                 | The program memory is running low.          |
+| PROCESS_EXIT_UNKNOWN         | Other reason.            |
 
-### MixedMode
+## MixedMode
 
 | Name        | Description                                |
 | ---------- | ---------------------------------- |
@@ -172,7 +160,7 @@ Explains why the rendering process exits.
 | Compatible | HTTP and HTTPS hybrid content can be loaded in compatibility mode. This means that some insecure content may be loaded.          |
 | None       | HTTP and HTTPS hybrid content cannot be loaded.              |
 
-### CacheMode
+## CacheMode
 | Name     | Description                                  |
 | ------- | ------------------------------------ |
 | Default | The cache that has not expired is used to load the resources. If the resources do not exist in the cache, they will be obtained from the Internet.|
@@ -180,32 +168,28 @@ Explains why the rendering process exits.
 | Online  | The cache is not used to load the resources. All resources are obtained from the Internet.              |
 | Only    | The cache alone is used to load the resources.                       |
 
-### FileSelectorResult
+## FileSelectorResult
 Notifies the **\<Web>** component of the file selection result.
 
-- APIs
-
-  | Name                                           | Description                                                  |
-  | ---------------------------------------------- | ------------------------------------------------------------ |
-  | handleFileList(fileList: Array\<string>): void | Instructs the **\<Web>** component to select a file.<br>**fileList**: list of files to operate. |
-
-### FileSelectorParam
-- APIs
+| Name                                           | Description                                                  |
+| ---------------------------------------------- | ------------------------------------------------------------ |
+| handleFileList(fileList: Array\<string>): void | Instructs the **\<Web>** component to select a file.<br>**fileList**: list of files to operate. |
 
-  | Name                            | Description        |
-  | -------------------------------- | ------------ |
-  | getTitle(): string               | Obtains the title of the file selector.  |
-  | getMode(): FileSelectorMode      | Obtains the mode of the file selector. |
-  | getAcceptType(): Array\<string\> | Obtains the file filtering type.   |
-  | isCapture(): boolean             | Checks whether multimedia capabilities are invoked.|
+## FileSelectorParam
+| Name                            | Description        |
+| -------------------------------- | ------------ |
+| title(): string               | Title of the file selector.  |
+| mode(): FileSelectorMode      | Mode of the file selector. |
+| acceptType(): Array\<string\> | File filtering type.   |
+| isCapture(): boolean             | Whether multimedia capabilities are invoked.|
 
-### FileSelectorMode
+## FileSelectorMode
 | Name                  | Description        |
 | -------------------- | ---------- |
-| FileOpenMode         | Open and upload a file. |
-| FileOpenMultipleMode | Open and upload multiple files. |
-| FileOpenFolderMode   | Open and upload a folder.|
-| FileSaveMode         | Save a file.   |
+| FILE_OPEN_MODE         | Open and upload a file. |
+| FILE_OPEN_MULTIPLE_MODE | Open and upload multiple files. |
+| FILE_OPEN_FOLDER_MODE   | Open and upload a folder.|
+| FILE_SAVE_MODE         | Save a file.   |
 
 ## WebController
 
diff --git a/en/application-dev/reference/arkui-ts/ts-container-navigator.md b/en/application-dev/reference/arkui-ts/ts-container-navigator.md
index df3e651383..4ccc788944 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-navigator.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-navigator.md
@@ -1,11 +1,12 @@
 # Navigator
 
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
+> **NOTE**
+>
 > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-The **&lt;Navigator&gt;** component provides redirection.
+The **\<Navigator>** component provides redirection to the target page.
 
 
 ## Required Permissions
@@ -25,42 +26,43 @@ Navigator(value?: {target: string, type?: NavigationType})
 Creates a navigator.
 
 - Parameters
-    | Name | Type | Mandatory | Default Value | Description | 
+  | Name | Type | Mandatory | Default Value | Description |
   | -------- | -------- | -------- | -------- | -------- |
-  | target | string | Yes | - | Path of the target page to be redirected to. | 
-  | type | NavigationType | No | NavigationType.Push | Navigation type. | 
+  | target | string | Yes | - | Path of the target page to be redirected to. |
+  | type | NavigationType | No | NavigationType.Push | Navigation type. |
 
 - NavigationType enums
-    | Name | Description | 
+  | Name | Description |
   | -------- | -------- |
-  | Push | Navigates to a specified page in the application. | 
-  | Replace | Replaces the current page with another one in the application and destroys the current page. | 
-  | Back | Returns to the previous page or a specified page. | 
+  | Push | Navigates to a specified page in the application. |
+  | Replace | Replaces the current page with another one in the application and destroys the current page. |
+  | Back | Returns to the previous page or a specified page. |
 
 
 ## Attributes
 
-  | Name | Parameters | Default Value | Description | 
+| Name | Parameters | Default Value | Description |
 | -------- | -------- | -------- | -------- |
-| active | boolean | - | Whether the **&lt;Navigator&gt;** component is activated. If the component is activated, the corresponding navigation takes effect. | 
-| params | Object | undefined | Data that needs to be passed to the target page during redirection. You can use **router.getParams()** to obtain the data on the target page. | 
+| active | boolean | - | Whether the **\<Navigator>** component is activated. If the component is activated, the corresponding navigation takes effect. |
+| params | Object | undefined | Data that needs to be passed to the target page during redirection. You can use **router.getParams()** to obtain the data on the target page. |
 
 
 ## Example
 
-  
-```
-// Navigator Page
+
+```ts
+// Navigator.ets
 @Entry
 @Component
 struct NavigatorExample {
   @State active: boolean = false
-  @State Text: string = 'news'
+  @State Text: object = {name: 'news'}
 
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
       Navigator({ target: 'pages/container/navigator/Detail', type: NavigationType.Push }) {
-        Text('Go to ' + this.Text + ' page').width('100%').textAlign(TextAlign.Center)
+        Text('Go to ' + this.Text['name'] + ' page')
+            .width('100%').textAlign(TextAlign.Center)
       }.params({ text: this.Text })
 
       Navigator() {
@@ -74,15 +76,15 @@ struct NavigatorExample {
 }
 ```
 
-  
-```
-// Detail Page
+
+```ts
+// Detail.ets
 import router from '@system.router'
 
 @Entry
 @Component
 struct DetailExample {
-  @State text: string = router.getParams().text
+  @State text: any = router.getParams().text
 
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
@@ -90,7 +92,8 @@ struct DetailExample {
         Text('Go to back page').width('100%').height(20)
       }
 
-      Text('This is ' + this.text + ' page').width('100%').textAlign(TextAlign.Center)
+      Text('This is ' + this.text['name'] + ' page')
+          .width('100%').textAlign(TextAlign.Center)
     }
     .width('100%').height(200).padding({ left: 35, right: 35, top: 35 })
   }
@@ -98,9 +101,8 @@ struct DetailExample {
 
 ```
 
-  
-```
-// Back Page
+```ts
+// Back.ets
 @Entry
 @Component
 struct BackExample {
diff --git a/en/application-dev/reference/arkui-ts/ts-gesture-settings.md b/en/application-dev/reference/arkui-ts/ts-gesture-settings.md
index 8f5554c25a..8c2d676cec 100644
--- a/en/application-dev/reference/arkui-ts/ts-gesture-settings.md
+++ b/en/application-dev/reference/arkui-ts/ts-gesture-settings.md
@@ -16,51 +16,53 @@ None
 Use the following attributes to bind gesture recognition to a component. When a gesture is recognized, the event callback is invoked to notify the component.
 
 
-| Name | Type | Default Value | Description | 
+| Name | Type | Default Value | Description |
 | -------- | -------- | -------- | -------- |
-| gesture | gesture: GestureType,<br/>mask?: GestureMask | gesture: -,<br/>mask: GestureMask.Normal | Gesture to recognize.<br/>**gesture** specifies the type of the gesture to bind, and **mask** specifies the event response setting. | 
-| priorityGesture | gesture: GestureType,<br/>mask?: GestureMask | gesture: -,<br/>mask: GestureMask.Normal | Gesture to preferentially recognize.<br/>**gesture** specifies the type of the gesture to bind, and **mask** specifies the event response setting.<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>> - By default, the child component takes precedence over the parent component in gesture recognition. When **priorityGesture** is configured for the parent component, the parent component takes precedence over the child component in gesture recognition. | 
-| parallelGesture | gesture: GestureType,<br/>mask?: GestureMask | gesture: -,<br/>mask: GestureMask.Normal | Gesture that can be triggered together with the child component gesture.<br/>**gesture** specifies the type of the gesture to bind, and **mask** specifies the event response setting.<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>> - The gesture event is not a bubbling event. When **parallelGesture** is set for the parent component, gesture events that are the same for the parent component and child components can be triggered, thereby implementing a bubbling effect. | 
+| gesture | gesture: GestureType,<br/>mask?: GestureMask | gesture: -,<br/>mask: GestureMask.Normal | Gesture to recognize.<br/>- **gesture**: type of the gesture to bind.<br/>- **mask**: event response setting. |
+| priorityGesture | gesture: GestureType,<br/>mask?: GestureMask | gesture: -,<br/>mask: GestureMask.Normal | Gesture to preferentially recognize.<br/>- **gesture**: type of the gesture to bind.<br/>- **mask**: event response setting.<br/>By default, the child component takes precedence over the parent component in gesture recognition. When **priorityGesture** is configured for the parent component, the parent component takes precedence over the child component in gesture recognition. |
+| parallelGesture | gesture: GestureType,<br/>mask?: GestureMask | gesture: -,<br/>mask: GestureMask.Normal | Gesture that can be triggered together with the child component gesture.<br/>- **gesture**: type of the gesture to bind.<br/>- **mask**: event response setting.<br/>The gesture event is not a bubbling event. When **parallelGesture** is set for the parent component, gesture events bound to both the parent and child components can be triggered, thereby implementing a bubbling effect. |
 
 
 - GestureMask enums
-  | Name | Description | 
+  | Name | Description |
   | -------- | -------- |
-  | Normal | The gestures of child components are not masked and are recognized based on the default gesture recognition sequence. | 
-  | IgnoreInternal | The gestures of child components are masked. Only the gestures of the current component are recognized.<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>> However, the built-in gestures of the child components are not masked. For example, when the child component is a **&lt;List&gt;** component, the built-in sliding gestures can still be triggered. | 
+  | Normal | The gestures of child components are not masked and are recognized based on the default gesture recognition sequence. |
+  | IgnoreInternal | The gestures of child components are masked. Only the gestures of the current component are recognized.<br/>However, the built-in gestures of the child components are not masked. For example, when the child component is a **&lt;List&gt;** component, the built-in sliding gestures can still be triggered. |
 
 
-- Gesture types
-  | Name | Description | 
+- GestureType enums
+  | Name | Description |
   | -------- | -------- |
-  | TapGesture | Tap gesture, which can be a single-tap or multi-tap gesture. | 
-  | LongPressGesture | Long press gesture. | 
-  | PanGesture | Pan gesture. | 
-  | PinchGesture | Pinch gesture. | 
-  | RotationGesture | Rotation gesture. | 
-  | GestureGroup | A group of gestures. Continuous recognition, parallel recognition, and exclusive recognition are supported. | 
+  | TapGesture | Tap gesture, which can be a single-tap or multi-tap gesture. |
+  | LongPressGesture | Long press gesture. |
+  | PanGesture | Pan gesture. |
+  | PinchGesture | Pinch gesture. |
+  | RotationGesture | Rotation gesture. |
+  | SwipeGesture | Swipe gesture, which can be idenfied when the swipe speed is 100 vp/s or higher. |
+  | GestureGroup | A group of gestures. Continuous recognition, parallel recognition, and exclusive recognition are supported. |
 
 
 ## Gesture Response Event
 
-The component uses the **gesture** method to bind the gesture object and uses the events provided in this object to respond to the gesture operation. For example, the **onAction** event of the **TapGesture** object can be used to respond to a click event. For details about the event definition, see the section of each gesture object.
+A component uses the **gesture** method to bind the gesture object and uses the events provided in this object to respond to the gesture operation. For example, the **onAction** event of the **TapGesture** object can be used to respond to a click event. For details about the event definition, see the section of each gesture object.
 
 - TapGesture events
-  | Name | Description | 
+  | Name | Description |
   | -------- | -------- |
-  | onAction((event?: GestureEvent) =&gt; void) | Callback invoked when a tap gesture is recognized. | 
+  | onAction((event?: GestureEvent) =&gt; void) | Callback invoked when a tap gesture is recognized. |
 
 - GestureEvent attributes
-  | Name | Type | Description | 
+  | Name | Type | Description |
   | -------- | -------- | -------- |
-  | timestamp | number | Timestamp of the event. | 
-  | target<sup>8+</sup> | EventTarget | Object that triggers the gesture event. | 
+  | timestamp | number | Timestamp of the event. |
+  | target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md) | Object that triggers the gesture event. |
 
 
 ## Example
 
 
 ```ts
+// xxx.ets
 @Entry
 @Component
 struct GestureSettingsExample {
diff --git a/en/application-dev/reference/arkui-ts/ts-motion-path-animation.md b/en/application-dev/reference/arkui-ts/ts-motion-path-animation.md
index 0293a61a86..073938a100 100644
--- a/en/application-dev/reference/arkui-ts/ts-motion-path-animation.md
+++ b/en/application-dev/reference/arkui-ts/ts-motion-path-animation.md
@@ -1,23 +1,24 @@
 # Motion Path Animation
 
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
+> **NOTE**
+>
 > This animation is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-The attributes described in this topic are used to set the motion path of the component in a translation animation.
+The attributes below can be used to set the motion path of the component in a translation animation.
 
 
 ## Attributes
 
-  | Name | Type | Default Value | Description | 
+| Name | Type | Default Value | Description |
 | -------- | -------- | -------- | -------- |
-| motionPath | {<br/>path: string,<br/>from?: number,<br/>to?: number,<br/>rotatable?: boolean<br/>}<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>> In a path, **start** and **end** can be used to replace the start point and end point. Example:<br/>> <br/>> 'Mstart.x start.y L50 50 Lend.x end.y Z' | {<br/>"",<br/>0.0,<br/>1.0,<br/>false<br/>} | Motion path of the component. The input parameters are described as follows:<br/>- **path**: motion path of the translation animation. The **svg** path string is used.<br/>- **from**: start point of the motion path. The default value is **0.0**.<br/>- **to**: end point of the motion path. The default value is **1.0**.<br/>- **rotatable**: whether to rotate along the path. | 
+| motionPath | {<br/>path: string,<br/>from?: number,<br/>to?: number,<br/>rotatable?: boolean<br/>}<br/>**NOTE**<br/>In a path, **start** and **end** can be used to replace the start point and end point. Example:<br/>'Mstart.x start.y L50 50 Lend.x end.y Z' | {<br/>"",<br/>0.0,<br/>1.0,<br/>false<br/>} | Motion path of the component. The input parameters are described as follows:<br/>- **path**: motion path of the translation animation. The **svg** path string is used.<br/>- **from**: start point of the motion path. The default value is **0.0**.<br/>- **to**: end point of the motion path. The default value is **1.0**.<br/>- **rotatable**: whether to rotate along the path. |
 
 
 ## Example
 
-  
+
 ```
 @Entry
 @Component
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md
index 4e27ab2eb1..43907b4096 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md
@@ -1,8 +1,11 @@
 # Component ID
 
+**id** identifies a component uniquely within an application. This module provides APIs for obtaining the attributes of or sending events to the component with the specified ID.
 
-> ![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.
+>  **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.
+>  - The APIs provided by this module are system APIs.
 
 
 ## Required Permissions
@@ -12,9 +15,9 @@ None
 
 ## Attributes
 
-  | Name | Type | Default Value | Description | 
-| -------- | -------- | -------- | -------- |
-| id | string | '' | Unique ID of the component. The uniqueness is ensured by the user. | 
+| Name  | Type  | Default Value | Description                |
+| ---- | ------ | ---- | ------------------ |
+| id   | string | ''   | Unique ID you assigned to the component.|
 
 
 ## APIs
@@ -27,15 +30,26 @@ getInspectorByKey(id: string): string
 Obtains all attributes of the component with the specified ID, excluding the information about child components.
 
 - Parameters
-    | Name | Type | Mandatory | Default Value | Description | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | id | string | Yes | - | ID of the component whose attributes are to be obtained. | 
+  | Name  | Type    | Mandatory  | Default Value | 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. | 
+  | Type    | Description             |
+  | ------ | --------------- |
+  | string | JSON string of the component attribute list.|
 
+### getInspectorTree
+
+getInspectorTree(): string
+
+Obtains the component tree and component attributes.
+
+- Return value
+
+  | Type    | Description                 |
+  | ------ | ------------------- |
+  | string | JSON string of the component tree and component attribute list.|
 
 ### sendEventByKey
 
@@ -44,61 +58,207 @@ sendEventByKey(id: string, action: number, params: string): boolean
 Sends an event to the component with the specified ID.
 
 - Parameters
-    | Name | Type | Mandatory | Default Value | Description | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | id | string | Yes | - | ID of the component for which the event is to be sent. | 
-  | action | number | Yes | - | Type of the event to be sent. The options are as follows:<br/>- Click event: 10.<br/>- LongClick: 11. | 
-  | params | string | Yes | - | Event parameters. If there is no parameter, pass an empty string **""**. | 
+  | 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
+  | 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.
+
+- 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).|
+
+- Return value
+
+  | Type     | Description                        |
+  | ------- | -------------------------- |
+  | boolean | Returns **true** if the event is sent successfully; returns **false** otherwise.|
+
+### sendKeyEvent
+
+sendKeyEvent(event: KeyEvent): boolean
+
+Sends a key event.
+
+- Parameters
+
+  | Name   | Type      | Mandatory  | Default Value | Description                                      |
+  | ----- | -------- | ---- | ---- | ---------------------------------------- |
+  | event | KeyEvent | Yes   | -    | Key event. For details, see [KeyEvent](ts-universal-events-key.md#keyevent).|
+
+- Return value
+
+  | Type     | Description                         |
+  | ------- | --------------------------- |
+  | boolean | Returns **true** if the event is sent successfully; returns **false** otherwise.|
+
+### sendMouseEvent
+
+sendMouseEvent(event: MouseEvent): boolean
+
+Sends a mouse event.
+
+- Parameters
+
+  | Name   | Type        | Mandatory  | Default Value | Description                                      |
+  | ----- | ---------- | ---- | ---- | ---------------------------------------- |
+  | event | MouseEvent | Yes   | -    | Mouse event. For details, see [MouseEvent](ts-universal-mouse-key.md#mouseevent).|
 
 - Return value
-    | Type | Description | 
-  | -------- | -------- |
-  | boolean | Returns **false** if the component with the specified ID cannot be found; returns **true** otherwise. | 
 
+  | Type     | Description                         |
+  | ------- | --------------------------- |
+  | boolean | Returns **true** if the event is sent successfully; returns **false** otherwise.|
 
 ## Example
 
-  
-```
+```ts
+// xxx.ets
+class Utils {
+  static rect_left;
+  static rect_top;
+  static rect_right;
+  static rect_bottom;
+  static rect_value;
+
+  static getComponentRect(key) {
+    let strJson = getInspectorByKey(key);
+    let obj = JSON.parse(strJson);
+    console.info("[getInspectorByKey] current component obj is: " + JSON.stringify(obj));
+    let rectInfo = JSON.parse('[' + obj.$rect + ']')
+    console.info("[getInspectorByKey] rectInfo is: " + rectInfo);
+    this.rect_left = JSON.parse('[' + rectInfo[0] + ']')[0]
+    this.rect_top = JSON.parse('[' + rectInfo[0] + ']')[1]
+    this.rect_right = JSON.parse('[' + rectInfo[1] + ']')[0]
+    this.rect_bottom = JSON.parse('[' + rectInfo[1] + ']')[1]
+    return this.rect_value = {
+      "left": this.rect_left, "top": this.rect_top, "right": this.rect_right, "bottom": this.rect_bottom
+    }
+  }
+}
+
 @Entry
 @Component
 struct IdExample {
+  @State text: string = ''
+
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+
       Button() {
-        Text('click')
-          .fontSize(25)
-          .fontWeight(FontWeight.Bold)
-      }
-      .type(ButtonType.Capsule)
-      .margin({
-        top: 20
-      }).onClick(() => {
+        Text('onKeyTab').fontSize(25).fontWeight(FontWeight.Bold)
+      }.margin({ top: 20 }).backgroundColor('#0D9FFB')
+      .onKeyEvent(() => {
+        this.text = "onKeyTab"
+      })
+
+      Button() {
+        Text('click to start').fontSize(25).fontWeight(FontWeight.Bold)
+      }.margin({ top: 20 })
+      .onClick(() => {
         console.info(getInspectorByKey("click"))
         console.info(getInspectorTree())
+        this.text = "Button 'click to start' is clicked"
         setTimeout(() => {
           sendEventByKey("longclick", 11, "")
         }, 2000)
       }).id('click')
 
       Button() {
-        Text('longclick')
-          .fontSize(25)
-          .fontWeight(FontWeight.Bold)
-      }
-      .type(ButtonType.Capsule)
-      .margin({
-        top: 20
-      })
-      .backgroundColor('#0D9FFB')
+        Text('longclick').fontSize(25).fontWeight(FontWeight.Bold)
+      }.margin({ top: 20 }).backgroundColor('#0D9FFB')
       .gesture(
-        LongPressGesture().onActionEnd(() => {
-          console.info('long clicked')
-        }))
-      .id('longclick')
+      LongPressGesture().onActionEnd(() => {
+        console.info('long clicked')
+        this.text = "Button 'longclick' is longclicked"
+        setTimeout(() => {
+          let rect = Utils.getComponentRect('onTouch')
+          let touchPoint: TouchObject = {
+            id: 1,
+            x: rect.left + (rect.right - rect.left) / 2,
+            y: rect.top + (rect.bottom - rect.top) / 2,
+            type: TouchType.Down,
+            screenX: rect.left + (rect.right - rect.left) / 2,
+            screenY: rect.left + (rect.right - rect.left) / 2,
+          }
+          sendTouchEvent(touchPoint)
+          touchPoint.type = TouchType.Up
+          sendTouchEvent(touchPoint)
+        }, 2000)
+      })).id('longclick')
+
+      Button() {
+        Text('onTouch').fontSize(25).fontWeight(FontWeight.Bold)
+      }.type(ButtonType.Capsule).margin({ top: 20 })
+      .onClick(() => {
+        console.info('onTouch is clicked')
+        this.text = "Button 'onTouch' is clicked"
+        setTimeout(() => {
+          let rect = Utils.getComponentRect('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,
+            timestamp: 1,
+            target: {
+              area: {
+                width: 1,
+                height: 1,
+                position: {
+                  x: 1,
+                  y: 1
+                },
+                globalPosition: {
+                  x: 1,
+                  y: 1
+                }
+              }
+            },
+            source: SourceType.Mouse
+          }
+          sendMouseEvent(mouseEvent)
+        }, 2000)
+      }).id('onTouch')
+
+      Button() {
+        Text('onMouse').fontSize(25).fontWeight(FontWeight.Bold)
+      }.margin({ top: 20 }).backgroundColor('#0D9FFB')
+      .onMouse(() => {
+        console.info('onMouse')
+        this.text = "Button 'onMouse' in onMouse"
+        setTimeout(() => {
+          let keyEvent: KeyEvent = {
+            type: KeyType.Down,
+            keyCode: 2049,
+            keyText: 'tab',
+            keySource: 4,
+            deviceId: 0,
+            metaKey: 0,
+            timestamp: 0
+          }
+          sendKeyEvent(keyEvent)
+        }, 2000)
+      }).id('onMouse')
+
+      Text(this.text).fontSize(25).padding(15)
     }
-    .width('100%')
-    .height('100%')
+    .width('100%').height('100%')
   }
 }
 ```
diff --git a/en/device-dev/guide/device-wlan-led-control.md b/en/device-dev/guide/device-wlan-led-control.md
index d35ab03765..f6ecb319c1 100644
--- a/en/device-dev/guide/device-wlan-led-control.md
+++ b/en/device-dev/guide/device-wlan-led-control.md
@@ -6,9 +6,9 @@ Based on the Hi3861 platform, the OpenHarmony WLAN module provides abundant peri
 
 ## Development<a name="section13857170163412"></a>
 
-1.  Complete the operations described in  [Getting Started with Hi3861](../quick-start/quickstart-lite-introduction-hi3861.md#section19352114194115).
+1.  Complete the operations described in [Getting Started with Hi3861](../quick-start/quickstart-lite-overview.md).
 
-    LED control examples are stored in the file  **applications/sample/wifi-iot/app/iothardware/led\_example.c**.
+    LED control examples are stored in the file **applications/sample/wifi-iot/app/iothardware/led\_example.c**.
 
 2.  Understand the cable connections by referring to the schematic diagram. You can learn that LED of hispark pegasus is connected to pin 9 of the chip.
 
@@ -73,17 +73,16 @@ Based on the Hi3861 platform, the OpenHarmony WLAN module provides abundant peri
                     break;
             }
         }
-        return NULL;
     }
     ```
 
-5.  Call  **SYS\_RUN\(\)**  of OpenHarmony to start the service. \(**SYS\_RUN**  is defined in the  **ohos\_init.h**  file.\)
+5.  Call **SYS\_RUN\(\)** of OpenHarmony to start the service. \(**SYS\_RUN** is defined in the **ohos\_init.h** file.\)
 
     ```
     SYS_RUN(LedExampleEntry);
     ```
 
-6.  Change the  **applications/sample/wifi-iot/app/BUILD.gn**  file to enable  **led\_example.c**  to participate in compilation.
+6.  Change the **applications/sample/wifi-iot/app/BUILD.gn** file to enable **led\_example.c** to participate in compilation.
 
     ```
     import("//build/lite/config/component/lite_component.gni")
@@ -97,10 +96,10 @@ Based on the Hi3861 platform, the OpenHarmony WLAN module provides abundant peri
 
 ## Verification<a name="section1949121910344"></a>
 
-For details about the compilation and burning processes, see  [Building](../quick-start/quickstart-lite-steps-hi3861-building.md)  and  [Burning](../quick-start/quickstart-lite-steps-hi3861-burn.md)  in the  _Getting Started with Hi3861_.
+For details about the compilation and burning processes, see [Building](../quick-start/quickstart-lite-steps-hi3861-building.md) and [Burning](../quick-start/quickstart-lite-steps-hi3861-burn.md).
 
-After the preceding two steps are complete, press the  **RST**  button to reset the module. If the LED blinks periodically as expected, the verification is passed.
+After the preceding two steps are complete, press the **RST** button to reset the module. If the LED blinks periodically as expected, the verification is passed.
 
-**Figure  1**  LED blinking<a name="fig20768175218527"></a>  
+**Figure  1** LED blinking<a name="fig20768175218527"></a>  
 ![](figures/led-blinking.gif "led-blinking")
 
-- 
GitLab