Update docs (17461)

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

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
@@ -121,38 +120,37 @@ Not supported
 
 
 ## Example
-1. Text Selector
-    ```html
-    <!-- xxx.hml -->
-    <div class="container">
+### Text Selector
+
+```html
+<!-- xxx.hml -->
+<div class="container">
     <text class="title">
         Selected value: {{value}} Selected index: {{index}}
     </text>
     <picker-view class="text-picker" type="text" range="{{options}}" selected="0" indicatorprefix="prefix" indicatorsuffix="suffix" @change="handleChange"></picker-view>
-    </div>
-    ```
+</div>
+```
 
-    ```css
-    /* xxx.css */
-    .container {
+```css
+/* xxx.css */
+.container {
     flex-direction: column;
     justify-content: center;
     align-items: center;
-        left: 0px;
-        top: 0px;
-        width: 454px;
-        height: 454px;
-    }
-    .title {
+    width: 100%;
+    height: 50%;
+}
+.title {
     font-size: 30px;
     text-align: center;
-        margin-top: 20px;
-    }
-    ```
+    margin-top: 50%;
+}
+```
 
-    ```js
-    /* xxx.js */
-    export default {
+```js
+/* xxx.js */
+export default {
     data: {
         options: ['Option 1','Option 2','Option 3'],
         value: "Option 1",
@@ -162,46 +160,41 @@ Not supported
         this.value = data.newValue;
         this.index = data.newSelected;
     },
-    }
-    ```
-    ![](figures/pickerview1.gif)
-
-2. Time Selector
-    ```html
-    <!-- xxx.hml -->
-    <div class="container">
+}
+```
+![picker-view0](figures/pickerview1.gif)
+
+### Time Selector
+
+```html
+<!-- xxx.hml -->
+<div class="container">
   <text class="title">
     Selected: {{time}}
   </text>
   <picker-view class="time-picker" type="time" selected="{{defaultTime}}" @change="handleChange"></picker-view>
-    </div>
-    ```
+</div>
+```
 
-    ```css
-    /* xxx.css */
-    .container {
+```css
+/* xxx.css */
+.container {
     flex-direction: column;
     justify-content: center;
     align-items: center;
-      left: 0px;
-      top: 0px;
-      width: 454px;
-      height: 454px;
-    }
-    .title {
-      font-size: 30px;
+    width: 100%;
+    height: 50%;
+}
+.title {
+    font-size: 31px;
     text-align: center;
-    }
-    .time-picker {
-      width: 500px;
-      height: 400px;
-      margin-top: 20px;
-    }
-    ```
-    
-    ```js
-    /* xxx.js */
-    export default {
+    margin-top: 50%;
+}
+```
+
+```js
+/* xxx.js */
+export default {
   data: {
     defaultTime: "",
     time: "",
@@ -224,138 +217,124 @@ Not supported
   concat(hours, minutes) {
     return `${this.fill(hours)}:${this.fill(minutes)}`;
   },
-    }
-    ```
+}
+```
 
-    ![](figures/pickerview2.gif)
+![picker-view1](figures/pickerview2.gif)
 
-3. Date Selector
-    ```html
-    <!-- xxx.hml -->
-    <div class="container">
+### 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>
-    </div>
-    ```
+    <picker-view class="time-picker" type="date" selected="{{defaultTime}}" @change="handleChange" lunarswitch="true"></picker-view>
+</div>
+```
 
-    ```css
-    /* xxx.css */
-    .container {
+```css
+/* xxx.css */
+.container {
     flex-direction: column;
     justify-content: center;
     align-items: center;
-        left: 0px;
-        top: 0px;
-        width: 454px;
-        height: 454px;
-    }
-    .title {
-        font-size: 30px;
+    width: 100%;
+    height: 50%;
+}
+.title {
+    font-size: 31px;
     text-align: center;
-        margin-top: 20px;
-    }
-    .date-picker {
-        width: 500px;
-        height: 400px;
-        margin-top: 50px;
-    }
-    ```
-    
-    ```js
-    /* xxx.js */
-    export default {
+    margin-top: 50%;
+}
+```
+
+```js
+/* xxx.js */
+export default {
     data: {
         date: "",
     },
     handleChange(data) {
-            this.date = data.year + "" + data.month + "" + data.day + "";
+        this.date = data.year + "/" + data.month + "/" + data.day + "";
     },
-    }
-    ```
+}
+```
+![picker-view2](figures/pickerview3.gif)
 
+### Date and Time Selector
 
-4. Date and Time Selector
-    ```html
-    <!-- xxx.hml -->
-    <div class="container">
+```html
+<!-- xxx.hml -->
+<div class="container">
     <text class="title">
         Selected: {{datetime}}
     </text>
     <picker-view class="date-picker" type="datetime"  hours="24" lunarswitch="true" @change="handleChange"></picker-view>
-    </div>
-    ```
+</div>
+```
 
-    ```css
-    /* xxx.css */
-    .container {
+```css
+/* xxx.css */
+.container {
     flex-direction: column;
     justify-content: center;
     align-items: center;
-        left: 0px;
-        top: 0px;
-        width: 500px;
-        height: 454px;
-    }
-    .title {
-        font-size: 30px;
+    width: 100%;
+    height: 50%;
+}
+.title {
+    font-size: 31px;
     text-align: center;
-        margin-top: 20px;
-    }
-    .date-picker {
-        width: 500px;
-        height: 400px;
-        margin-top: 50px;
-    }
-    ```
-    
-    ```js
-    /* xxx.js */
-    export default {
+    margin-top: 50%;
+}
+```
+
+```js
+/* xxx.js */
+export default {
     data: {
         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/pickerview4.gif)
 
-5. Multi-Column Text Selector
+### Multi-Column Text Selector
 
-    ```html
-    <!-- xxx.hml -->
-    <div class="container">
+```html
+<!-- xxx.hml -->
+<div class="container">
     <text class="title">
         Selected: {{ value }}
     </text>
     <picker-view class="multitype-picker" type="multi-text" columns="3" range="{{ multitext }}" @columnchange="handleChange"></picker-view>
-    </div>
-    ```
+</div>
+```
 
-    ```css
-    /* xxx.css */
-    .container {
+```css
+/* xxx.css */
+.container {
     flex-direction: column;
     justify-content: center;
     align-items: center;
-        left: 0px;
-        top: 0px;
-        width: 500px;
-        height: 454px;
-    }
-    .title {
-        font-size: 30px;
+    width: 100%;
+    height: 50%;
+}
+.title {
+    font-size: 31px;
     text-align: center;
-        margin-top: 20px;
-    }
-    ```
+    margin-top: 50%;
+}
+```
 
-    ```js
-    /* xxx.js */
-    export default {
+```js
+/* xxx.js */
+export default {
     data: {
         multitext: [
             [1, 2, 3],
@@ -367,6 +346,6 @@ Not supported
     handleChange(data) {
         this.value = "Column: " + data.column + "," + "Value: " + data.newValue + ", Index:" + data.newSelected;
     },
-    }
-    ```
-    ![](figures/pickerview5.gif)
+}
+```
+![picker-view4](figures/pickerview5.gif)
\ No newline at end of file

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

@@ -76,7 +76,6 @@ The [universal methods](../arkui-js/js-components-common-methods.md) are support
 
 
 ## Example
-1. 
 ```html
 <!-- xxx.hml -->
 <div class="container">
@@ -137,4 +136,4 @@ The [universal methods](../arkui-js/js-components-common-methods.md) are support
 ```
 
 
-![en-us_image_0000001167823076](figures/text.png)
+![en-us_image_0000001167823076](figures/js-text.png)

en/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md

@@ -43,7 +43,7 @@
 
 - Anti-aliasing enabled
 
-  ![screenshot-8](figures/screenshot-8.png)
+  ![en-us_image_0000001127125162](figures/en-us_image_0000001127125162.png)
 
 
 ## Attributes
@@ -558,7 +558,7 @@ export default {
 }
 ```
 
-![smoothoff](figures/smoothoff.png)
+![en-us_image_0000001167952236](figures/en-us_image_0000001167952236.png)
 
 
 
@@ -865,8 +865,8 @@ Moves a drawing path to a target position on the canvas.
 
 | Name  | Type    | Description       |
 | ---- | ------ | --------- |
-| x    | number | X-coordinate of the target position.|
-| y    | number | Y-coordinate of the target position.|
+| x    | number | X-coordinate of the target position.<br>Unit: vp|
+| y    | number | Y-coordinate of the target position.<br>Unit: vp|
 
 **Example**
   ```html
@@ -902,8 +902,8 @@ Connects the current point to a target position using a straight line.
 
 | Name  | Type    | Description       |
 | ---- | ------ | --------- |
-| x    | number | X-coordinate of the target position.|
-| y    | number | Y-coordinate of the target position.|
+| x    | number | X-coordinate of the target position.<br>Unit: vp|
+| y    | number | Y-coordinate of the target position.<br>Unit: vp|
 
 **Example**
   ```html
@@ -1026,7 +1026,7 @@ Draws a cubic bezier curve on the canvas.
   ```html
   <!-- xxx.hml -->
   <div>
-    <canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
+    <canvas ref="canvas" style="width: 200px; height: 150px;"></canvas>
   </div>
   ```
 
@@ -1204,7 +1204,7 @@ Draws an ellipse in the specified rectangular region on the canvas.
   }
   ```
 
-  ![ellipse](figures/ellipse.png)
+  ![en-us_image_0000001214823665](figures/en-us_image_0000001214823665.png)
 
 
 ### rect

en/application-dev/reference/arkui-js/js-components-container-list-item-group.md

@@ -31,7 +31,7 @@ In addition to the [universal attributes](../arkui-js/js-components-common-attri
 
 >  **NOTE**
 >
-> **id** in the universal attributes is used to identify a group. The input parameters of related functions and event information in the list also use **id** to uniquely identify a group.
+>  The universal attribute **id** is used to identify a group. The input parameters of related functions and event information in the list also use **id** to uniquely identify a group.
 
 
 ## Styles
@@ -48,7 +48,7 @@ In addition to the [universal styles](../arkui-js/js-components-common-styles.md
 
 In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
 
-| Name           | Name                                | Description                                      |
+| Name           | Parameter                                | Description                                      |
 | ------------- | ---------------------------------- | ---------------------------------------- |
 | groupclick    | { groupid: string } | Triggered when a group is clicked.<br>**groupid**: ID of the group that is clicked.    |
 | groupcollapse | { groupid: string } | Triggered when a group is collapsed.<br>**groupid**: ID of the group that is collapsed.<br>If the parameter is not carried or **groupid** is left empty, all groups are collapsed.|
@@ -124,7 +124,7 @@ The [universal methods](../arkui-js/js-components-common-methods.md) are support
 
 ```js
 // xxx.js
-import prompt from '@system.prompt';
+import promptAction from '@ohos.promptAction';
 export default {
     data: {
         direction: 'column',
@@ -152,22 +152,29 @@ export default {
         })
     },
     collapseAll(e) {
-    this.$element('mylist').collapseGroup()
+        this.$element('mylist').collapseGroup({
+            groupid: ''
+        })
     },
     expandAll(e) {
-    this.$element('mylist').expandGroup()
+        this.$element('mylist').expandGroup({
+            groupid: ''
+        })
     },
     collapse(e) {
-    prompt.showToast({
+        promptAction.showToast({
             message: 'Close ' + e.groupid
         })
     },
     expand(e) {
-    prompt.showToast({
+        promptAction.showToast({
             message: 'Open ' + e.groupid
         })
     }
 }
+
+
+
 ```
 
 ![list6](figures/list6.gif)

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

@@ -28,6 +28,8 @@ Creates a date picker in the given date range.
 
 ## Attributes
 
+In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
+
 | Name   | Type       | Description           |
 | ------| -------------- | -------- |
 | lunar | boolean  | Whether to display the lunar calendar.<br>- **true**: Display the lunar calendar.<br>- **false**: Do not display the lunar calendar.<br>Default value: **false**|
@@ -35,6 +37,8 @@ Creates a date picker in the given date range.
 
 ## Events
 
+In addition to the [universal events](ts-universal-events-click.md), the following events are supported.
+
 | Name| Description|
 | -------- | -------- |
 | onChange(callback: (value: DatePickerResult) =&gt; void) | Triggered when a date is selected.|
@@ -62,7 +66,7 @@ struct DatePickerExample {
   build() {
     Column() {
       Button('Switch Calendar')
-        .margin({ top: 30 })
+        .margin({ top: 30, bottom: 30 })
         .onClick(() => {
           this.isLunar = !this.isLunar
         })

en/application-dev/reference/arkui-ts/ts-combined-gestures.md

@@ -18,17 +18,18 @@ GestureGroup(mode: GestureMode, ...gesture: GestureType[])
   | gesture | [TapGesture](ts-basic-gestures-tapgesture.md)<br>\| [LongPressGesture](ts-basic-gestures-longpressgesture.md)<br>\| [PanGesture](ts-basic-gestures-pangesture.md)<br>\| [PinchGesture](ts-basic-gestures-pinchgesture.md)<br>\| [RotationGesture](ts-basic-gestures-rotationgesture.md) | Yes| - | Variable-length parameter, indicating one or more basic gesture types. These gestures are recognized in combination.|
 
 ## GestureMode
-| Name| Description|
-| -------- | -------- |
+
+| Name       | Description                                      |
+| --------- | ---------------------------------------- |
 | Sequence  | Sequential recognition: Gestures are recognized in the registration sequence until all gestures are recognized successfully. When one gesture fails to be recognized, all gestures fail to be recognized.|
-| Parallel | Parallel recognition. Registered gestures are recognized concurrently until all gestures are recognized. The recognition result of each gesture does not affect each other.|
-| Exclusive | Exclusive recognition. Registered gestures are identified concurrently. If one gesture is successfully recognized, gesture recognition ends.|
+| Parallel  | Parallel recognition. Registered gestures are recognized concurrently until all gestures are recognized. The recognition result of each gesture does not affect each other.    |
+| Exclusive | Exclusive recognition. Registered gestures are identified concurrently. If one gesture is successfully recognized, gesture recognition ends.      |
 
 
 ## Events
 
-| Name| Description|
-| -------- | -------- |
+| Name                                      | Description                                |
+| ---------------------------------------- | ------------------------------------ |
 | onCancel(event: () =&gt; void) | Callback for the GestureMode.Sequence cancellation event.|
 
 
@@ -49,6 +50,7 @@ struct GestureGroupExample {
   build() {
     Column() {
       Text('sequence gesture\n' + 'LongPress onAction:' + this.count + '\nPanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY)
+        .fontSize(15)
     }
     .translate({ x: this.offsetX, y: this.offsetY, z: 0 })
     .height(150)

en/application-dev/reference/arkui-ts/ts-container-flex.md

@@ -240,7 +240,7 @@ struct FlexExample4 {
 }
 ```
 
-![en-us_image_0000001174422904](figures/en-us_image_0000001174422904.jpg)
+![en-us_image_0000001174422904](figures/en-us_image_0000001174422904.png)
 
 ```ts
 // xxx.ets

en/application-dev/reference/arkui-ts/ts-universal-component-visible-area-change-event.md

@@ -98,7 +98,7 @@ struct ScrollExample {
       .scrollable(ScrollDirection.Vertical)
       .scrollBar(BarState.On)
       .scrollBarColor(Color.Gray)
-      .scrollBarWidth(30)
+      .scrollBarWidth(10)
       .onScroll((xOffset: number, yOffset: number) => {
         console.info(xOffset + ' ' + yOffset)
       })