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

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

@@ -33,7 +33,7 @@ Shows a toast.
 ```js
 prompt.showToast({            
   message: 'Message Info',
-    duration: 2000,      
+    duration: 2000
 });
 ```
 
@@ -47,7 +47,7 @@ Describes the options for showing the toast.
 
 | Name      | Type                                      | Mandatory  | Description                                      |
 | -------- | ---------------------------------------- | ---- | ---------------------------------------- |
-| message  | string\| [Resource](../arkui-ts/ts-types.md#resource)<sup>9+</sup> | Yes   | Text to display.                                |
+| message  | string \| [Resource](../arkui-ts/ts-types.md#resource)<sup>9+</sup> | Yes   | Text to display.                                |
 | duration | number                                   | No   | Duration that the toast will remain on the screen. The default value is 1500 ms. The value range is 1500 ms to 10000 ms. If a value less than 1500 ms is set, the default value is used. If the value greater than 10000 ms is set, the upper limit 10000 ms is used.|
 | bottom   | string\| number                          | No   | Distance between the toast border and the bottom of the screen. It does not have an upper limit. The default unit is vp.               |
 
@@ -80,11 +80,11 @@ prompt.showDialog({
   buttons: [
     {
       text: 'button1',
-      color: '#000000',
+      color: '#000000'
     },
     {
       text: 'button2',
-      color: '#000000',
+      color: '#000000'
     }
   ],
 })
@@ -122,11 +122,11 @@ prompt.showDialog({
   buttons: [
     {
       text: 'button1',
-      color: '#000000',
+      color: '#000000'
     },
     {
       text: 'button2',
-      color: '#000000',
+      color: '#000000'
     }
   ]
 }, (err, data) => {
@@ -148,8 +148,8 @@ Describes the options for showing the dialog box.
 
 | Name   | Type                                                        | Mandatory| Description                                                        |
 | ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
-| title   | string\| [Resource](../arkui-ts/ts-types.md#resource)<sup>9+</sup> | No  | Title of the dialog box.                                                  |
-| message | string\| [Resource](../arkui-ts/ts-types.md#resource)<sup>9+</sup> | No  | Text body.                                                  |
+| title   | string \| [Resource](../arkui-ts/ts-types.md#resource)<sup>9+</sup> | No  | Title of the dialog box.                                                  |
+| message | string \| [Resource](../arkui-ts/ts-types.md#resource)<sup>9+</sup> | No  | Text body.                                                  |
 | buttons | [[Button](#button),[Button](#button)?,[Button](#button)?]    | No  | Array of buttons in the dialog box. The array structure is **{text:'button', color: '\#666666'}**. Up to three buttons are supported. The first button is of the **positiveButton** type, the second is of the **negativeButton** type, and the third is of the **neutralButton** type.|
 
 ## ShowDialogSuccessResponse 
@@ -186,11 +186,11 @@ prompt.showActionMenu({
   buttons: [
     {
       text: 'item1',
-      color: '#666666',
+      color: '#666666'
     },
     {
       text: 'item2',
-      color: '#000000',
+      color: '#000000'
     },
   ]
 }, (err, data) => {
@@ -232,11 +232,11 @@ prompt.showActionMenu({
   buttons: [
     {
       text: 'item1',
-      color: '#666666',
+      color: '#666666'
     },
     {
       text: 'item2',
-      color: '#000000',
+      color: '#000000'
     },
   ]
 })
@@ -257,7 +257,7 @@ Describes the options for showing the action menu.
 
 | Name   | Type                                                        | Mandatory| Description                                                        |
 | ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
-| title   | string\| [Resource](../arkui-ts/ts-types.md#resource)<sup>9+</sup> | No  | Title of the text to display.                                                  |
+| title   | string \| [Resource](../arkui-ts/ts-types.md#resource)<sup>9+</sup> | No  | Title of the text to display.                                                  |
 | buttons | [[Button](#button),[Button](#button)?,[Button](#button)?,[Button](#button)?,[Button](#button)?,[Button](#button)?] | Yes  | Array of menu item buttons. The array structure is **{text:'button', color: '\#666666'}**. Up to six buttons are supported. If there are more than six buttons, extra buttons will not be displayed.|
 
 ## ActionMenuSuccessResponse
@@ -278,5 +278,5 @@ Describes the menu item button in the action menu.
 
 | Name   | Type                                      | Mandatory  | Description     |
 | ----- | ---------------------------------------- | ---- | ------- |
-| text  | string\| [Resource](../arkui-ts/ts-types.md#resource)<sup>9+</sup> | Yes   | Button text.|
-| color | string\| [Resource](../arkui-ts/ts-types.md#resource)<sup>9+</sup> | Yes   | Text color of the button.|
+| text  | string \| [Resource](../arkui-ts/ts-types.md#resource)<sup>9+</sup> | Yes   | Button text.|
+| color | string \| [Resource](../arkui-ts/ts-types.md#resource)<sup>9+</sup> | Yes   | Text color of the button.|

en/application-dev/reference/arkui-js/js-components-basic-picker-view.md

 # picker-view
 
 >  **NOTE**
->
 >  This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
 
 The **\<picker-view>** component provides the view that shows an embedded scrollable selector on the screen.
@@ -77,7 +76,7 @@ In addition to the [universal styles](../arkui-js/js-components-common-styles.md
 | selected-font-size               | &lt;length&gt; | 20px       | No   | Font size of the selected item. The value is of the length type, in pixels.                  |
 | disappear-color<sup>5+</sup>     | &lt;color&gt;  | \#ffffff   | No   | Font color of the items that gradually disappear. Disappearing items are the top option and bottom option of a column containing five options in total.  |
 | disappear-font-size<sup>5+</sup> | &lt;length&gt; | 14px       | No   | Font size of the items that gradually disappear. Disappearing items are the top option and bottom option of a column containing five options in total.  |
-| font-family                      | string         | sans-serif | No   | Font family of the selector, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text. |
+| font-family                      | string         | sans-serif | No   | Font family of the selector, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text.|
 
 
 ## Events
@@ -138,15 +137,13 @@ Not supported
         flex-direction: column;
         justify-content: center;
         align-items: center;
-        left: 0px;
-        top: 0px;
-        width: 454px;
-        height: 454px;
+        width: 100%;
+        height: 50%;
     }
     .title {
         font-size: 30px;
         text-align: center;
-        margin-top: 20px;
+        margin-top: 50%;
     }
     ```
     
@@ -164,7 +161,7 @@ Not supported
         },
     }
     ```
-    ![](figures/pickerview1.gif)
+    ![picker-view0](figures/picker-view0.gif)
     
 2. Time Selector
     ```html
@@ -183,19 +180,13 @@ Not supported
         flex-direction: column;
         justify-content: center;
         align-items: center;
-      left: 0px;
-      top: 0px;
-      width: 454px;
-      height: 454px;
+        width: 100%;
+        height: 50%;
     }
     .title {
-      font-size: 30px;
+        font-size: 31px;
         text-align: center;
-    }
-    .time-picker {
-      width: 500px;
-      height: 400px;
-      margin-top: 20px;
+        margin-top: 50%;
     }
     ```
     
@@ -227,16 +218,16 @@ Not supported
     }
     ```
     
-    ![](figures/pickerview2.gif)
+    ![picker-view1](figures/picker-view1.gif)
     
 3. Date Selector
     ```html
     <!-- xxx.hml -->
     <div class="container">
         <text class="title">
-            Selected: {{time}}
+            Selected: {{date}}
         </text>
-        <picker-view class="time-picker" type="time" selected="{{defaultTime}}" @change="handleChange"></picker-view>
+        <picker-view class="time-picker" type="date" selected="{{defaultTime}}" @change="handleChange" lunarswitch="true"></picker-view>
     </div>
     ```
     
@@ -246,20 +237,13 @@ Not supported
         flex-direction: column;
         justify-content: center;
         align-items: center;
-        left: 0px;
-        top: 0px;
-        width: 454px;
-        height: 454px;
+        width: 100%;
+        height: 50%;
     }
     .title {
-        font-size: 30px;
+        font-size: 31px;
         text-align: center;
-        margin-top: 20px;
-    }
-    .date-picker {
-        width: 500px;
-        height: 400px;
-        margin-top: 50px;
+        margin-top: 50%;
     }
     ```
     
@@ -270,11 +254,11 @@ Not supported
             date: "",
         },
         handleChange(data) {
-            this.date = data.year + "" + data.month + "" + data.day + "";
+            this.date = data.year + "/" + data.month + "/" + data.day + "";
         },
     }
     ```
-    
+    ![picker-view2](figures/picker-view2.gif)
     
 4. Date and Time Selector
     ```html
@@ -293,20 +277,13 @@ Not supported
         flex-direction: column;
         justify-content: center;
         align-items: center;
-        left: 0px;
-        top: 0px;
-        width: 500px;
-        height: 454px;
+        width: 100%;
+        height: 50%;
     }
     .title {
-        font-size: 30px;
+        font-size: 31px;
         text-align: center;
-        margin-top: 20px;
-    }
-    .date-picker {
-        width: 500px;
-        height: 400px;
-        margin-top: 50px;
+        margin-top: 50%;
     }
     ```
     
@@ -317,11 +294,11 @@ Not supported
             datetime: "",
         },
         handleChange(data) {
-            this.datetime = data.year + "" + data.month + "" + data.day + "" + data.hour + "" + data.minute + "";
+            this.datetime = data.year + "/" + data.month + "/" + data.day + "" + data.hour + ":" + data.minute + "";
         },
     }
     ```
-    
+    ![picker-view3](figures/picker-view3.gif)
     
 5. Multi-Column Text Selector
 
@@ -341,15 +318,13 @@ Not supported
         flex-direction: column;
         justify-content: center;
         align-items: center;
-        left: 0px;
-        top: 0px;
-        width: 500px;
-        height: 454px;
+        width: 100%;
+        height: 50%;
     }
     .title {
-        font-size: 30px;
+        font-size: 31px;
         text-align: center;
-        margin-top: 20px;
+        margin-top: 50%;
     }
     ```
     
@@ -365,8 +340,8 @@ Not supported
             value: ""
         },
         handleChange(data) {
-            this.value = "Column: " + data.column + "," + "Value: " + data.newValue + ", Index:" + data.newSelected;
+            this.value = "Selected: " + data.column + "," + "value: " + data.newValue + ", index:" + data.newSelected;
         },
     }
     ```
-    ![](figures/pickerview5.gif)
+    ![picker-view4](figures/picker-view4.gif)

en/application-dev/reference/arkui-js/js-components-basic-span.md

@@ -76,7 +76,7 @@ Not supported
 }
 .spanTxt{
   color: chartreuse;
-  font-size: 100px;
+  font-size: 80px;
 }
 ```
 

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

@@ -31,16 +31,16 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 
 | Name                      | Type                                    | Description                                      |
 | ------------------------ | ---------------------------------------- | ---------------------------------------- |
-| type                     | InputType                                | Input box type.<br>Default value: **InputType.Normal**       |
+| type                     | [InputType](#inputtype)     | Input box type.<br>Default value: **InputType.Normal**       |
 | placeholderColor         | [ResourceColor](ts-types.md#resourcecolor)     | Placeholder text color.|
 | placeholderFont          | [Font](ts-types.md#font) | Placeholder text font.|
-| enterKeyType             | EnterKeyType                             | Type of the Enter key. Currently, only the default value is supported.<br>Default value: **EnterKeyType.Done**|
+| enterKeyType             | [EnterKeyType](#enterkeytype) | Type of the Enter key. Currently, only the default value is supported.<br>Default value: **EnterKeyType.Done**|
 | caretColor               | [ResourceColor](ts-types.md#resourcecolor)    | Color of the caret in the text box.                              |
 | maxLength                | number                                   | Maximum number of characters in the text input.                           |
 | inputFilter<sup>8+</sup> | {<br>value: [ResourceStr](ts-types.md#resourcestr),<br>error?: (value: string) =&gt; void<br>} | Regular expression for input filtering. Only inputs that comply with the regular expression can be displayed. Other inputs are filtered out. The specified regular expression can match single characters, but not strings.<br>- **value**: regular expression to set.<br>- **error**: filtered-out content to return when regular expression matching fails.|
 | copyOption<sup>9+</sup>  | [CopyOptions](ts-appendix-enums.md#copyoptions9) | Whether copy and paste is allowed.|
 | showPasswordIcon<sup>9+</sup> | boolean | Whether to display the show password icon at the end of the password text box.<br>Default value: **true**|
-| style<sup>9+</sup> | TextInputStyle | Text input style.<br>Default value: **TextInputStyle.Default**|
+| style<sup>9+</sup> | [TextInputStyle](#textinputstyle9) | Text input style.<br>Default value: **TextInputStyle.Default**|
 | textAlign<sup>9+</sup>   | [TextAlign](ts-appendix-enums.md#textalign) | Alignment mode of the text in the text box.<br>Default value: **TextAlign.Start** |
 
 ## EnterKeyType
@@ -75,10 +75,10 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 In addition to the [universal events](ts-universal-events-click.md), the following events are supported.
 
 | Name                                                        | Description                                                    |
-| ---------------------------------------- | ---------------------------------------- |
-| onChange(callback: (value: string) =&gt; void) | Triggered when the input changes.             |
-| onSubmit(callback: (enterKey: EnterKeyType) =&gt; void) | Triggered when the Enter key on the keyboard is pressed. The return value is the current type of the Enter key.         |
-| onEditChanged(callback: (isEditing: boolean) =&gt; void)<sup>(deprecated)</sup> | Triggered when the input status changes. Sicne API version 8, **onEditChange** is recommended.         |
+| ------------------------------------------------------------ | ------------------------------------------------------------ |
+| onChange(callback: (value: string) =&gt; void) | Triggered when the input changes.<br>**value**: text content.|
+| onSubmit(callback: (enterKey: EnterKeyType) =&gt; void) | Triggered when the Enter key on the keyboard is pressed. The return value is the current type of the Enter key.<br>**enterKeyType**: type of the Enter key. For details, see [EnterKeyType](#enterkeytype).|
+| onEditChanged(callback: (isEditing: boolean) =&gt; void)<sup>(deprecated)</sup> | Triggered when the input status changes. Since API version 8, **onEditChange** is recommended.|
 | onEditChange(callback: (isEditing: boolean) =&gt; void)<sup>8+</sup> | Triggered when the input status changes. If the value of **isEditing** is **true**, text input is in progress.   |
 | onCopy(callback:(value: string) =&gt; void)<sup>8+</sup> | Triggered when the copy button on the pasteboard, which displays when the text box is long pressed, is clicked.<br>**value**: text to be copied.|
 | onCut(callback:(value: string) =&gt; void)<sup>8+</sup> | Triggered when the cut button on the pasteboard, which displays when the text box is long pressed, is clicked.<br>**value**: text to be cut.|
@@ -92,7 +92,7 @@ Implements the controller of the **\<TextInput>** component.
 ```
 controller: TextInputController = new TextInputController()
 ```
-### caretPosition
+### caretPosition<sup>8+</sup>
 
 caretPosition(value: number): void
 

en/application-dev/ui/ui-js-animate-component.md

@@ -36,24 +36,24 @@ Call the **animate** method to obtain an animation object, which supports animat
 export default {
     data: {
         animation: '',
+        options: {},
+        frames: {}
     },
     onInit() {
-  },
-  onShow() {
-    var options = {
+        this.options = {
             duration: 1500,
         };
-    var frames = [
+        this.frames = [
             {
-        width:200,height:200,
+                width: 200, height: 200,
             },
             {
-        width:300,height:300,
+                width: 300, height: 300,
             }
         ];
-    this.animation = this.$element('content').animate(frames, options);  // Obtain the animation object.
     },
     Show() {
+        this.animation = this.$element('content').animate(this.frames, this.options); // Obtain the animation object.
         this.animation.play();
     }
 }
@@ -175,18 +175,18 @@ Set the animation attributes by using the **options** parameter.
 export default {
     data: {
         animation: '',
+        options: {},
+        frames: {}
     },
     onInit() {
-  },
-  onShow() {
-    var options = {      
+        this.options = {
             duration: 1500,
             easing: 'ease-in',
             delay: 5,
             iterations: 2,
             direction: 'normal',
         };
-    var frames = [
+        this.frames = [
             {
                 transform: {
                     translate: '-150px -0px'
@@ -198,9 +198,9 @@ export default {
                 }
             }
         ];
-    this.animation = this.$element('content').animate(frames, options);
     },
     Show() {
+        this.animation = this.$element('content').animate(this.frames, this.options);
         this.animation.play();
     }
 }

en/application-dev/ui/ui-js-animate-transform.md

@@ -39,8 +39,8 @@ Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower p
   height: 428px;
   background-color: #860303;
   transform: rotate(45deg);
-  margin-top: 284px;
-  margin-left: 148px;
+  margin-top: 290px;
+  margin-left: 145px;
 }
 .content{
   margin-top: 500px;
@@ -53,7 +53,7 @@ Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower p
   width: 100px;
   height: 150px;
   background-color: #1033d9;
-  transform: translate(150px,-137px);
+  transform: translate(150px,-152px);
 }
 .window{
   z-index: 1;
@@ -86,7 +86,7 @@ Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower p
   height: 100px;
   border-radius: 15px;
   background-color: #9a7404;
-  transform: translate(200px,-710px) skewX(-5deg);
+  transform: translate(200px,-700px) skewX(-5deg);
 }
 ```
 

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

@@ -61,6 +61,8 @@ Set **width**, **height**, **background-color**, and **border** of the **<can
   justify-content: center;
   align-items: center;
   background-color: #F1F3F5;
+  width: 100%;
+  height: 100%;
 }
 canvas{
   width: 500px;

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

@@ -14,7 +14,7 @@ Create a **\<grid-container>** component in the .hml file under **pages/index**
 <div class="container">
   <grid-container id="mygrid" columns="5" gutter="20px" style="background-color: pink;">
     <grid-row style="height:100px;justify-content:space-around;width: 80%;background-color: #f67002;margin-left: 
-      10%;"></grid-row>
+      10%; margin-right: 10%;"></grid-row>
     <grid-row style="height:300px;justify-content:space-around;background-color: #ffcf00;width: 100%;"></grid-row>
     <grid-row style="height:150px;justify-content:space-around;background-color: #032cf8;width: 100%;"></grid-row>
   </grid-container>
@@ -52,11 +52,11 @@ Touch the **\<grid-container>** component to call the **getColumns**, **getColum
   <grid-container id="mygrid" columns="6" gutter="20px" style="background-color: pink;padding-top: 100px;" 
     onclick="getColumns" onlongpress="getSizeType">
     <grid-row style="height:100px;justify-content:space-around;background-color: #4cedf3;width: 20%;margin-left: 
-      40%;"></grid-row>
+      40%; margin-right: 40%;"></grid-row>
     <grid-row style="height:150px;justify-content:space-around;background-color: #4cbff3;width: 50%;margin-left:
-      25%;"></grid-row>
+      25%; margin-right: 25%;"></grid-row>
     <grid-row style="height:200px;justify-content:space-around;background-color: #465ff6;width: 80%;margin-left: 
-      10%;"></grid-row>
+      10%; margin-right: 10%;"></grid-row>
     <grid-row style="height:200px;justify-content:space-around;background-color: #5011ec;width: 100%;"></grid-row>
   </grid-container>
 </div>

en/application-dev/ui/ui-ts-custom-component-lifecycle-callbacks.md

@@ -77,7 +77,7 @@ Invoked each time when a page is hidden. This callback is used in the routing pr
 
 onBackPress?(): void
 
-Invoked when a user clicks the back button. Only the custom components decorated by **@Entry** take effect. If **true** is returned, the page processes the return logic and no page routing is performed. If **false** is returned, the default route return logic is used. If the return value is not set, the value **false** is used.
+Invoked when a user clicks the back button. This callback takes effect only for the custom components decorated by **@Entry**.
 
 **Example 2:**