From 823bafd4fde5ae7b82d888deb34adc1a4b1e95eb Mon Sep 17 00:00:00 2001
From: "ester.zhou" <ester.zhou@huawei.com>
Date: Mon, 4 Jul 2022 11:32:35 +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  | 16 +++---
 .../arkui-ts/ts-basic-components-textarea.md  | 11 ++--
 .../arkui-ts/ts-basic-components-textinput.md | 16 +++---
 .../arkui-ts/ts-container-navigator.md        | 52 ++++++++++---------
 5 files changed, 56 insertions(+), 48 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 9302a766df..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
 
 
-> **NOTE**<br>
+> **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,12 +16,12 @@ 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.
 
@@ -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 eaa0dd99a9..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.
 
 
@@ -15,12 +16,12 @@ None
 
 ## Child Components
 
-None
+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 457db47e7d..9a201318f8 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.
 
 
@@ -14,7 +15,7 @@ None
 
 ## Child Components
 
-None
+Not supported
 
 
 ## APIs
@@ -39,7 +40,7 @@ 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. |
 
@@ -75,10 +76,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 +87,7 @@ controller: TextInputController = new TextInputController()
 ```
 
 
-### caretPosition
+#### caretPosition
 
 caretPosition(value: number): void
 
@@ -113,10 +114,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-container-navigator.md b/en/application-dev/reference/arkui-ts/ts-container-navigator.md
index 0d8d7b373a..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
 
 
-> **NOTE**<br>
+> **NOTE**
+>
 > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-The **Navigator** component provides redirection to the target page.
+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 **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. | 
+| 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 {
-- 
GitLab