!9877 翻译完成 9115：arkui-ts文件夹整改

Merge pull request !9877 from ester.zhou/C-0923

en/application-dev/faqs/faqs-ui-ets.md

@@ -14,7 +14,7 @@ Below are the restrictions on using generator functions in TypeScript:
 
 - The generator function cannot contain local variables.
 
-None of the above restrictions apply to anonymous function implementations of event handlers (such as **onClick**)
+None of the above restrictions apply to anonymous function implementations of event handlers (such as **onClick**).
 
 Negative example:
 

en/application-dev/reference/arkui-ts/Readme-EN.md

@@ -38,7 +38,9 @@
         - [Component ID](ts-universal-attributes-component-id.md)
         - [Touch Target](ts-universal-attributes-touch-target.md)
         - [Polymorphic Style](ts-universal-attributes-polymorphic-style.md)
+        - [Hit Test Control](ts-universal-attributes-hit-test-behavior.md)
         - [Background Blur](ts-universal-attributes-backgroundBlurStyle.md)
+        - [restoreId](ts-universal-attributes-restoreId.md)
     - Gesture Processing
         - [Gesture Binding Methods](ts-gesture-settings.md)
         - Basic Gestures
@@ -97,10 +99,13 @@
     - [Counter](ts-container-counter.md)
     - [Flex](ts-container-flex.md)
     - [GridContainer](ts-container-gridcontainer.md)
+    - [GridCol](ts-container-gridcol.md)
+    - [GridRow](ts-container-gridrow.md)
     - [Grid](ts-container-grid.md)
     - [GridItem](ts-container-griditem.md)
     - [List](ts-container-list.md)
     - [ListItem](ts-container-listitem.md)
+    - [ListItemGroup](ts-container-listitemgroup.md)
     - [Navigator](ts-container-navigator.md)        
     - [Panel](ts-container-panel.md)
     - [Refresh](ts-container-refresh.md)

en/application-dev/reference/arkui-ts/ts-animatorproperty.md

 # Property Animator
 
-You can create a property animator to animate the universal attributes of a component.
+You can create a property animator to animate certain universal attributes of a component, including **width**, **height**, backgroundColor, **opacity**, **scale**, **rotate**, and **translate**.
 
 > **NOTE**
 >
 > This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-| API                      | Description                                                    |
-| ------------------------------ | ------------------------------------------------------------ |
-| animation(value: AnimateParam) | Applies a property animator to this component to control the transition of the component from one state to another.|
+animation(value: {duration?: number, tempo?: number, curve?: string | Curve | ICurve, delay?:number, iterations: number, playMode?: PlayMode, onFinish?: () => void})
 
-## AnimateParam
+Applies a property animator to the component to animate its attributes over time.
 
-- Attributes
+**Parameters**
 
 
-| Name        | Type                                    | Default Value            | Description                     |
-| ---------- | ---------------------------------------- | --------------- | ----------------------- |
-| duration   | number                                   | 1000            | Animation duration, in ms. The default duration is 1000 ms.   |
-| curve      | [Curve](ts-appendix-enums.md#curve)        | Curve.Linear    | Animation curve. The default curve is linear.               |
-| delay      | number                                   | 0               | Delay of animation playback, in ms. By default, the playback is not delayed.         |
-| iterations | number                                   | 1               | Number of times that the animation is played. By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times.  |
-| playMode   | [PlayMode](ts-appendix-enums.md#playmode) | PlayMode.Normal | Animation playback mode. By default, the animation is played from the beginning after the playback is complete.|
+| Name        | Type                                      | Mandatory   | Description                                                        |
+| ---------- | ------------------------------------------| ---- | ------------------------------------------------------------ |
+| duration   | number                                    | No   | Animation duration, in ms.<br>Default value: **1000**|
+| tempo      | number                                    | No   | Animation playback speed. A greater value indicates a higher animation playback speed.<br>The value **0** indicates that no animation is applied.<br>Default value: **1**|
+| curve      | string&nbsp;\|&nbsp;[Curve](ts-appendix-enums.md#curve)&nbsp;\|&nbsp;ICurve<sup>9+</sup> | No  | Animation curve.<br>Default value: **Curve.Linear**  |
+| delay      | number                                    | No   | Delay of animation playback, in ms. The value **0** indicates that the playback is not delayed.<br>Default value: **0**  |
+| iterations | number                                    | No   | Number of times that the animation is played. The value **-1** indicates that the animation is played for an unlimited number of times.<br>Default value: **1**|
+| playMode   | [PlayMode](ts-appendix-enums.md#playmode) | No   | Animation playback mode. By default, the animation is played from the beginning after the playback is complete.<br>Default value: **PlayMode.Normal**|
+| onFinish   | () => void                                | No   | Callback invoked when the animation playback is complete.                       |
 
 
 ## Example
@@ -31,9 +31,9 @@ You can create a property animator to animate the universal attributes of a comp
 @Entry
 @Component
 struct AttrAnimationExample {
-  @State widthSize: number = 200
-  @State heightSize: number = 100
-  @State flag: boolean = true
+  @State widthSize: number = 200;
+  @State heightSize: number = 100;
+  @State flag: boolean = true;
 
   build() {
     Column() {

en/application-dev/reference/arkui-ts/ts-appendix-enums.md

@@ -8,6 +8,7 @@
 | Blue                     | 0x0000ff | ![en-us_image_0000001174104404](figures/en-us_image_0000001174104404.png) |
 | Brown                    | 0xa52a2a | ![en-us_image_0000001219744201](figures/en-us_image_0000001219744201.png) |
 | Gray                     | 0x808080 | ![en-us_image_0000001174264376](figures/en-us_image_0000001174264376.png) |
+| Grey                     | 0x808080 | ![en-us_image_0000001174264376](figures/en-us_image_0000001174264376.png) |
 | Green                    | 0x008000 | ![en-us_image_0000001174422914](figures/en-us_image_0000001174422914.png) |
 | Orange                   | 0xffa500 | ![en-us_image_0000001219662661](figures/en-us_image_0000001219662661.png) |
 | Pink                     | 0xffc0cb | ![en-us_image_0000001219662663](figures/en-us_image_0000001219662663.png) |
@@ -70,6 +71,7 @@
 | Press   | The mouse button is pressed.|
 | Release | The mouse button is released.|
 | Move    | The mouse cursor moves.    |
+| Hover    | The mouse pointer is hovered on an element.    |
 
 ## Curve
 
@@ -101,9 +103,11 @@
 ## FillMode
 
 | Name     | Description                                                        |
-| -------- | -------------------------------- |
-| None     | After the playback is complete, the animation restores to the initial state.        |
-| Forwards | After the playback is complete, the animation remains in the end state.|
+| --------- | ------------------------------------------------------------ |
+| None      | Before execution, the animation does not apply any styles to the target component. After execution, the animation restores the target component to its default state.|
+| Forwards  | The target component retains the state set by the last keyframe encountered during execution of the animation.                |
+| Backwards | The animation applies the values defined in the first relevant keyframe once it is applied to the target component, and retains the values during the period set by **delay**. The first relevant keyframe depends on the value of **playMode**. If **playMode** is **Normal** or **Alternate**, the first relevant keyframe is in the **from** state. If **playMode** is **Reverse** or **AlternateReverse**, the first relevant keyframe is in the **to** state.|
+| Both      | The animation follows the rules for both **Forwards** and **Backwards**, extending the animation attributes in both directions.|
 
 ## PlayMode
 
@@ -133,11 +137,11 @@
 | Name    | Description                  |
 | -------- | ---------------------- |
 | Top      | Top edge in the vertical direction.        |
-| Center   | Center position in the vertical direction.      |
+| Center<sup>(deprecated) </sup>   | Center position in the vertical direction.<br> This API is deprecated since API version 9.      |
 | Bottom   | Bottom edge in the vertical direction.        |
-| Baseline | Text baseline position in the cross axis direction.|
+| Baseline<sup>(deprecated) </sup> | Text baseline position in the cross axis direction.<br> This API is deprecated since API version 9.|
 | Start    | Start position in the horizontal direction.      |
-| Middle   | Center position in the horizontal direction.      |
+| Middle<sup>(deprecated) </sup>   | Center position in the horizontal direction.<br>This API is deprecated since API version 9.      |
 | End      | End position in the horizontal direction.      |
 
 ## Week
@@ -217,9 +221,9 @@
 
 | Name  | Description                |
 | ------ | -------------------- |
-| Butt   | The ends of dividing lines are butt.|
-| Round  | The ends of dividing lines are rounded.  |
-| Square | The ends of dividing lines are butt.|
+| Butt   | The ends of the line are squared off, and the line does not extend beyond its two endpoints.|
+| Round  | The line is extended at the endpoints by a half circle whose diameter is equal to the line width.|
+| Square | The line is extended at the endpoints by a rectangle whose width is equal to half the line width and height equal to the line width.|
 
 ## Axis
 
@@ -251,12 +255,12 @@
 
 | Name    | Description                                                        |
 | -------- | ------------------------------------------------------------ |
-| Auto     | The default configuration in the Flex container is used.                                    |
-| Start    | The elements are in the Flex container, top-aligned in the cross-axis direction.                      |
-| Center   | The elements are in the Flex container, centered in the cross-axis direction.                      |
-| End      | The elements are in the Flex container, bottom-aligned in the cross-axis direction.                      |
-| Stretch  | The elements are in the Flex container, stretched and padded in the cross-axis direction. If the size is not set, the elements are stretched to the container size.|
-| Baseline | The elements are in the Flex container, text baseline aligned in the cross-axis direction.                  |
+| Auto     | The default configuration in the flex container is used.                                    |
+| Start    | The elements are in the flex container, top-aligned in the cross-axis direction.                      |
+| Center   | The elements are in the flex container, centered in the cross-axis direction.                      |
+| End      | The elements are in the flex container, bottom-aligned in the cross-axis direction.                      |
+| Stretch  | The elements are in the flex container, stretched and padded in the cross-axis direction. If the size is not set, the elements are stretched to the container size.|
+| Baseline | The elements are in the flex container, text baseline aligned in the cross-axis direction.                  |
 
 ## FlexDirection
 
@@ -271,9 +275,9 @@
 
 | Name       | Description                                             |
 | ----------- | ------------------------------------------------- |
-| NoWrap      | The child components in the **\<Flex>** component are arranged in a single line, and they cannot overflow.  |
-| Wrap        | The child components in the **\<Flex>** component are arranged in multiple lines, and they may overflow.    |
-| WrapReverse | The child components in the **\<Flex>** component are reversely arranged in multiple lines, and they may overflow.|
+| NoWrap      | The child components in the flex container are arranged in a single line, and they cannot overflow.  |
+| Wrap        | The child components in the flex container are arranged in multiple lines, and they may overflow.    |
+| WrapReverse | The child components in the flex container are reversely arranged in multiple lines, and they may overflow.|
 
 ## VerticalAlign
 
@@ -417,7 +421,7 @@
 
 | Name       | Description                |
 | ----------- | -------------------- |
-| Default     | Both the node and its child node respond to the hit test of a touch event, and other nodes blocked by the node are not considered during the hit test.  |
-| Block       | The node responds to the hit test of a touch event, and its child node and other nodes blocked by the node are not considered during the hit test.       |
-| Transparent | Both the node and its child node respond to the hit test of a touch event, and other nodes blocked by the node are also considered during the hit test.|
-| None        | The node does not respond to the hit test of a touch event, but its child nodes are considered during the hit test.|
+| Default     | Both the node and its child node respond to the hit test of a touch event, but its sibling node is blocked from the hit test.  |
+| Block       | The node responds to the hit test of a touch event, but its child node and sibling node are blocked from the hit test.       |
+| Transparent | Both the node and its child node respond to the hit test of a touch event, and its sibling node is also considered during the hit test.|
+| None        | The node does not respond to the hit test of a touch event, but its child node and sibling node are considered during the hit test.|

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

 # Blank
 
+The **\<Blank>** component is able to automatically fill the empty spaces in the container along the main axis. It is valid only when the parent component is **\<Row>** or **\<Column>**.
 
 >  **NOTE**
 >
 >  This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-The **\<Blank>** component supports automatic filling of the empty part of the container along the main axis. This component is valid only when the parent component is **\<Row>** or **\<Column>**.
-
-
-## Required Permissions
-
-None
-
-
 ## Child Components
 
 Not supported
@@ -21,28 +14,25 @@ Not supported
 
 ## APIs
 
-Blank(min?:  Length)
+Blank(min?: number | string)
 
-- Parameters
-  | Name | Type | Mandatory | Default Value | Description |
-  | -------- | -------- | -------- | -------- | -------- |
-  | min | [Length](../../ui/ts-types.md) | No | 0 | Minimum size of the **&lt;Blank&gt;** component in the container along the main axis. |
+**Parameters**
 
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| min | number \| string | No| Minimum size of the **\<Blank>** component in the container along the main axis.<br>Default value: **0**|
 
 ## Attributes
 
-| Name | Type | Default Value | Description |
-| -------- | -------- | -------- | -------- |
-| color | [ResourceColor](../../ui/ts-types.md) | 0xffffff | Color to fill the blank. |
+In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
 
-> **NOTE**
->
-> Universal attribute methods are not supported.
+| Name| Type| Description|
+| -------- | -------- | -------- |
+| color | [ResourceColor](ts-types.md#resourcecolor) | Color to fill the empty spaces.|
 
 
 ## Example
 
-
 ```ts
 // xxx.ets
 @Entry

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

@@ -7,65 +7,58 @@ The **\<Button>** component can be used to create different types of buttons.
 >  This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-## Required Permissions
-
-None
-
-
 ## Child Components
 
-Supported
+This component can contain only one child component.
 
 
 ## APIs
 
-- Button(options?: {type?: ButtonType, stateEffect?: boolean})
+**Method 1:** Button(options?: {type?: ButtonType, stateEffect?: boolean})
 
-  **Table 1** options parameters
+**Parameters**
 
-  | Name | Type | Mandatory | Default Value | Description |
-  | -------- | -------- | -------- | -------- | -------- |
-  | type | ButtonType | No | Capsule | Button type. |
-  | stateEffect | boolean | No | true | Whether to enable the state switchover effect when a button is pressed. When the state is set to **false**, the state switchover effect is disabled. |
+| Name        | Type      | Mandatory       | Description                             |
+| ----------- | ---------- | ------| --------------------------------- |
+| type        | ButtonType | No   | Button type.<br>Default value: **ButtonType.Capsule**                          |
+| stateEffect | boolean    | No   |  Whether to enable the state switchover effect for when the button is touched or clicked. The value **false** indicates that the state switchover effect is disabled.<br>Default value: **true**|
 
 
-- Button(label?: ResourceStr, options?: { type?: ButtonType, stateEffect?: boolean })
+**Method 2:** Button(label?: ResourceStr, options?: { type?: ButtonType, stateEffect?: boolean })
 
-  Creates a button component based on text content. In this case, the **\<Button>** component cannot contain child components.
+  Creates a button component based on text content. In this case, the component cannot contain child components.
 
-  **Table 2** Parameters
+**Parameters**
 
-  | Name | Type | Mandatory | Default Value | Description |
-  | -------- | -------- | -------- | -------- | -------- |
-  | label | [ResourceStr](../../ui/ts-types.md) | No | - | Button text. |
-  | options | Object | No | - | For details, see the **options** parameters. |
+  | Name    | Type                               | Mandatory  | Description         |
+  | ------- | ----------------------------------- | ---- | ------------- |
+  | label   | [ResourceStr](ts-types.md#resourcestr) | No   | Button text.      |
+  | options | Object                              | No   | For details, see **options**.|
 
 
 ## Attributes
 
-| Name | Type | Default Value | Description |
-| -------- | -------- | -------- | -------- |
-| type | ButtonType | Capsule | Button type. |
-| stateEffect | boolean | true | Whether to enable the state switchover effect. When the state is set to **false**, the state switchover effect is disabled. |
+| Name         | Type          | Description                               |
+| ----------- | ----------- | --------------------------------- |
+| type        | ButtonType  |  Button type.<br>Default value: **ButtonType.Capsule**                      |
+| stateEffect | boolean     |  Whether to enable the state switchover effect. The value **false** indicates that the state switchover effect is disabled.<br>Default value: **true**|
 
-
-**ButtonType** enums
+## ButtonType enums
 | Name     | Description                |
-| -------- | -------- |
-| Capsule | Capsule-type button (the round corner is half of the height by default). |
+| ------- | ------------------ |
+| Capsule | Capsule-type button (the round corner is half of the height by default).|
 | Circle  | Circle button.             |
 | Normal  | Normal button (without rounded corners by default).     |
 
 >  **NOTE**
-> - The rounded corner of a button is set by using [Border](ts-universal-attributes-border.md). (The rounded corner cannot be set by using a border API.)
-> - When the button type is **Capsule**, the **borderRadius** settings do not take effect, and the rounded corner of the button is always half of the button height. 
-> - When the button type is **Circle**, the value of **borderRadius** is used as the button radius. If **borderRadius** is not set, the button radius is half of the width or height, whichever is smaller. 
-> - The button text is set using the [common text style](ts-universal-attributes-text-style.md).
+>  - The rounded corner of a button is set by using [borderRadius](ts-universal-attributes-border.md), rather than by using the **border** API.
+>  - For a button of the **Capsule** type, the **borderRadius** settings do not take effect, and its rounded corner is always half of the button height.
+>  - For a button of the **Circle** type, its radius is the value of **borderRadius** (if set) or the width or height (whichever is smaller).
+>  - The button text is set using the [text style attributes](ts-universal-attributes-text-style.md).
 
 
 ## Example
 
-
 ```ts
 // xxx.ets
 @Entry
@@ -78,7 +71,7 @@ struct ButtonExample {
         Button('Ok', { type: ButtonType.Normal, stateEffect: true }).borderRadius(8).backgroundColor(0x317aff).width(90)
         Button({ type: ButtonType.Normal, stateEffect: true }) {
           Row() {
-            // You are advised to reference an image by using $r to create a Resource object.
+            // To import an image, you are advised to create a Resource object through $r.
             Image($r('app.media.loading')).width(20).height(20).margin({ left: 12 })
             Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 })
           }.alignItems(VerticalAlign.Center)

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

@@ -12,7 +12,7 @@ Not supported
 
 ## APIs
 
-Checkbox( option?: {name?: string,  group?: string })
+Checkbox(options?: {name?: string,  group?: string })
 
 **Parameters**
 
@@ -29,7 +29,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 | Name         | Type| Description|
 | ------------- | ------- | -------- |
 | select        | boolean | Whether the check box is selected.<br>Default value: **false**|
-| selectedColor | [ResourceColor](../../ui/ts-types.md) | Color of the check box when it is selected.|
+| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the check box when it is selected.|
 
 ## Events
 

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

@@ -12,7 +12,7 @@ None
 
 ## APIs
 
-CheckboxGroup( group?: string )
+CheckboxGroup(options?: { group?: string })
 
 Creates a check box group so that you can select or deselect all check boxes in the group at the same time. Check boxes and the check box group that share the group name belong to the same group.
 
@@ -31,15 +31,21 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 | Name| Type| Description|
 | -------- | -------- | -------- |
 | selectAll | boolean | Whether to select all.<br>Default value: **false**|
-| selectedColor | [ResourceColor](../../ui/ts-types.md) | Color of the selected check box.|
+| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the selected check box.|
 
 ## Events
 
-In addition to the universal events (ts-universal-events-click.md), the following events are supported.
+In addition to the [universal events](ts-universal-events-click.md), the following events are supported.
 
 | Name| Description|
 | -------- | -------- |
-| onChange (callback: (names: Array&lt;string&gt;, status: SelectStatus) => void ) |Triggered when the selection status of the check box group or any check box wherein changes.<br>- **names**: names of all selected check boxes in the group.<br>- **status**: selection status.|
+| onChange (callback: (event: CheckboxGroupResult) => void ) |Triggered when the selection status of the check box group or any check box wherein changes.|
+
+## CheckboxGroupResult
+| Name    | Type  | Description     |
+| ------ | ------ | ------- |
+| name   | Array&lt;string&gt; | Names of all the selected check boxes in the group.|
+| status | SelectStatus | Selected status.|
 
 ## SelectStatus
 

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

 # DataPanel
 
-
 The **\<DataPanel>** component displays proportions in a chart.
 
 >  **NOTE**
 >
 > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions
 
-None
 
 
 ## Child Components
@@ -19,25 +16,25 @@ Not supported
 
 ## APIs
 
-DataPanel(value:{values: number[], max?: number, type?: DataPanelType})
+DataPanel(options:{values: number[], max?: number, type?: DataPanelType})
 
-- Parameters
-  | Name | Type | Mandatory | Default Value | Description |
-  | -------- | -------- | -------- | -------- | -------- |
-  | values | number[] | Yes | - | Value list. A maximum of nine values are supported. |
-  | max | number | No | 100 | - When set to a value greater than 0, this parameter indicates the maximum value in the **values** list.<br/>- When set to a value equal to or smaller than 0, this parameter indicates the sum of values in the **values** list. The values are displayed in proportion. |
-  | type<sup>8+</sup> | DataPanelType | No | DataPanelType.Circle | Type of the data panel. |
+**Parameters**
 
+| Name           | Type  | Mandatory | Description|
+| ----------------- | -------- | ----- | -------- |
+| values            | number[]   | Yes   | Value list. A maximum of nine values are supported.|
+| max               | number     | No   |   - When set to a value greater than 0, this parameter indicates the maximum value in the **values** list.<br>- When set to a value equal to or smaller than 0, this parameter indicates the sum of values in the **values** list. The values are displayed in proportion.<br>Default value: **100**|
+| type<sup>8+</sup> | DataPanelType | No| Type of the data panel.<br>Default value: **DataPanelType.Circle**|
 
-- DataPanelType enums
-  | Name | Description |
-  | -------- | -------- |
-  | Line | Line data panel. |
-  | Circle | Circle data panel. |
 
+## DataPanelType enums
+| Name| Description| 
+| -------| ------------ |
+| Line   | Line data panel.| 
+| Circle | Circle data panel.|
 
-## Example
 
+## Example
 
 ```ts
 // xxx.ets

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

 # DatePicker
 
-> **NOTE**<br>
-> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
-
-
 The **\<DatePicker>** component allows users to select a date from the given range.
 
+>  **NOTE**
+>
+> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions
 
-No
 
 
 ## Child Components
 
-No
+Not supported
 
 
 ## APIs
 
-DatePicker(options?: DatePickerOptions)
+DatePicker(options?: {start?: Date, end?: Date, selected?: Date})
 
 Creates a date picker in the given date range.
 
-- options parameters
-  | Name | Type | Mandatory | Default Value | Description |
-  | -------- | -------- | -------- | -------- | -------- |
-  | start | Date | No| Date('1970-1-1') | Start date of the picker. |
-  | end | Date | No| Date('2100-12-31') | End date of the picker. |
-  | selected | Date | No| Current system date| Date of the selected item. |
+**Parameters**
+| Name| Type| Mandatory | Description|
+| -------- | -------- | ------------- | -------- |
+| start    | Date | No | Start date of the picker.<br>Default value: **Date('1970-1-1')**|
+| end      | Date | No |   End date of the picker.<br>Default value: **Date('2100-12-31')**|
+| selected | Date | No | Date of the selected item.<br>Default value: current system date |
 
 
 ## Attributes
 
-| Name| Type | Default Value | Description |
-| -------- | -------- | -------- | -------- |
-| lunar | boolean | false | Whether to display the lunar calendar.<br>-&nbsp;**true**: Display the lunar calendar.<br>-&nbsp;**false**: Do not display the lunar calendar. |
+| Name   | Type       | Description           |
+| ------| -------------- | -------- |
+| lunar | boolean  | Whether to display the lunar calendar.<br>-&nbsp;**true**: Display the lunar calendar.<br>-&nbsp;**false**: Do not display the lunar calendar.<br>Default value: **false**|
 
 
 ## Events
 
-| Name | Description |
+| Name| Description|
 | -------- | -------- |
-| onChange(callback:&nbsp;(value:&nbsp;DatePickerResult)&nbsp;=&gt;&nbsp;void) | Invoked when a date is selected. |
+| onChange(callback:&nbsp;(value:&nbsp;DatePickerResult)&nbsp;=&gt;&nbsp;void) | Triggered when a date is selected.|
 
-### DatePickerResult
-| Name | Type | Description |
+## DatePickerResult
+
+| Name| Type| Description|
 | -------- | -------- | -------- |
-| year | number | Year of the selected date. |
-| month | number | Month of the selected date. The value ranges from 0 to 11. The value **0** indicates January, and the value **11** indicates December. |
-| day | number | Day of the selected date. |
+| year | number | Year of the selected date.|
+| month | number | Month of the selected date. The value ranges from 0 to 11. The value **0** indicates January, and **11** indicates December.|
+| day | number | Day of the selected date.|
 
 
 ## Example
@@ -57,7 +55,8 @@ Creates a date picker in the given date range.
 
 ### Date Picker Sample Code (With Lunar Calendar)
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct DatePickerExample01 {
@@ -82,7 +81,8 @@ struct DatePickerExample01 {
 
 ### Date Picker Sample Code (No Lunar Calendar)
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct DatePickerExample02 {
@@ -104,4 +104,4 @@ struct DatePickerExample02 {
 }
 ```
 
-
+![en-us_image_0000001251092975](figures/en-us_image_0000001251092975.png)

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

 # Divider
 
+The **\<Divider>** component is used to separate content blocks and elements.
 
 >  **NOTE**
 >
 >  This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-The **\<Divider>** component is used to separate content blocks and content elements.
-
-
-## Required Permissions
-
-None
-
-
 ## Child Components
 
 Not supported
@@ -23,25 +16,25 @@ Not supported
 
 Divider()
 
-
 ## Attributes
 
-| Name | Type | Default Value | Description |
-| -------- | -------- | -------- | -------- |
-| vertical | boolean | false | Whether a vertical divider is used. The value **true** means that a vertical divider is used, and **false** means that a horizontal divider is used. |
-| color | Color | - | Color of the divider. |
-| strokeWidth | Length | 1 | Width of the divider. |
-| lineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle-enums) | LineCapStyle.Butt | Cap style of the divider. |
+In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
+
+| Name     | Type        | Description       |
+| ----------- | ---------- | ------------------ |
+| vertical    | boolean | Whether a vertical divider is used. **false**: A horizontal divider is used.<br>**true**: A vertical divider is used.<br>Default value: **false**|
+| color       | [ResourceColor](ts-types.md#resourcecolor) | Color of the divider.|
+| strokeWidth | number \| string | Width of the divider.<br>Default value: **1**|
+| lineCap     | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | Cap style of the divider.<br>Default value: **LineCapStyle.Butt**|
 
 
 ## Events
 
-Universal events are not supported.
+The universal events are not supported.
 
 
 ## Example
 
-
 ```ts
 // xxx.ets
 @Entry

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

 # Gauge
 
-
 The **\<Gauge>** component is used to display data in a ring chart.
 
+
 >  **NOTE**
 >
 >  This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-## Required Permissions
-
-None
-
-
 ## Child Components
 
 Not supported
@@ -22,23 +17,25 @@ Not supported
 
 Gauge(options:{value: number, min?: number, max?: number})
 
-- Parameters
-    | Name| Type| Mandatory| Default Value| Description|
-  | -------- | -------- | -------- | -------- | -------- |
-  | value | number | Yes| - | Current data value.|
-  | min | number | No| 0 | Minimum value of the current data segment.|
-  | max | number | No| 100 | Maximum value of the current data segment.|
+**Parameters**
 
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| value | number | Yes| Current data value.|
+| min | number | No| Minimum value of the current data segment.<br>Default value: **0**|
+| max | number | No| Maximum value of the current data segment.<br>Default value: **100**|
 
 ## Attributes
 
-| Name| Type| Default Value| Description|
-| -------- | -------- | -------- | -------- |
-| value | number | 0 | Value of the chart.|
-| startAngle | number | -150 | Start angle of the chart. The value 0 indicates 0 degrees, and a positive value indicates the clockwise direction.|
-| endAngle | number | 150 | End angle of the chart. The value 0 indicates 0 degrees, and a positive value indicates the clockwise direction.|
-| colors | Array&lt;ColorStop&gt; | - | Colors of the chart. Colors can be set for individual segments.|
-| strokeWidth | Length | - | Stroke width of the chart.|
+In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
+
+| Name| Type| Description|
+| -------- | -------- | -------- |
+| value | number | Value of the chart.<br>Default value: **0**|
+| startAngle | number | Start angle of the chart. The value 0 indicates 0 degrees, and a positive value indicates the clockwise direction.<br>Default value: **-150**|
+| endAngle | number | End angle of the chart. The value 0 indicates 0 degrees, and a positive value indicates the clockwise direction.<br>Default value: **150**|
+| colors | Array&lt;ColorStop&gt; | Colors of the chart. Colors can be set for individual segments.|
+| strokeWidth | Length | Stroke width of the chart.|
 
 ## ColorStop
 
@@ -46,7 +43,7 @@ Describes a gradient stop.
 
 | Name     | Type            | Description                                                        |
 | --------- | -------------------- | ------------------------------------------------------------ |
-| ColorStop | [[ResourceColor](../../ui/ts-types.md#resourcecolor8), number] | Type of the gradient stop. The first parameter specifies the color, and the second parameter specifies the offset, which ranges from 0 to 1.|
+| ColorStop | [[ResourceColor](ts-types.md#resourcecolor), number] | Type of the gradient stop. The first parameter specifies the color, and the second parameter specifies the offset, which ranges from 0 to 1.|
 
 
 ## Example

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

@@ -9,17 +9,7 @@ The **\<Image>** component is used to render and display local and online images
 
 ## Required Permissions
 
-To use online images, you need to add the **ohos.permission.INTERNET** permission to the corresponding abilities in the **config.json** (for the FA model) or **module.json5** file (for the stage model).
-
-```
-"abilities": [
-  {
-    ...
-    "permissions": ["ohos.permission.INTERNET"],
-    ...
-  }
-] 
-```
+To use online images, the application must have the **ohos.permission.INTERNET** permission. For details about how to apply for a permission, see [Declaring Permissions](../../security/accesstoken-guidelines.md).
 
 
 ## Child Components
@@ -35,35 +25,33 @@ Obtains an image from the specified source for subsequent rendering and display.
 
 **Parameters**
 
-| Name | Type                                    | Mandatory  | Default Value | Description                                    |
-| ---- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
-| src  | string \| [PixelMap](../apis/js-apis-image.md#pixelmap7) \| [Resource](../../ui/ts-types.md#resource-type) | Yes   | -    | Image source. Both local and online images are supported.<br>When using resources referenced using a relative path, for example, `Image("common/test.jpg")`, the **\<Image>** component cannot be called across bundles or modules. Therefore, you are advised to use `$r` to reference image resources that need to be used globally.<br>- The following image formats are supported: PNG, JPG, BMP, SVG, GIF.<br>\- Base64 strings are supported. \ The value format is `data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, where `[base64 data]` is a Base64 string.<br/>\- The value can also be a path starting with `dataability://`, which is used to access the image path provided by a Data ability.|
+| Name| Type                                                    | Mandatory| Description                                                    |
+| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
+| src    | string\| [PixelMap](../apis/js-apis-image.md#pixelmap7) \| [Resource](ts-types.md#resource) | Yes  | Image source. Both local and online images are supported.<br>When using an image referenced using a relative path, for example, `Image("common/test.jpg")`, the **\<Image>** component cannot be called across bundles or modules. Therefore, you are advised to use `$r` to reference image resources that need to be used globally.<br>- The following image formats are supported: PNG, JPG, BMP, SVG, GIF.<br>\- Base64 strings are supported. \ The value format is `data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, where `[base64 data]` is a Base64 string.<br/>\- The value can also be a path starting with `dataability://`, which is used to access the image path provided by a Data ability.|
 
 ## Attributes
 
 In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
 
-| Name                 | Type                                               | Default Value                  | Description                                                        |
-| --------------------- | ------------------------------------------------------- | ------------------------ | ------------------------------------------------------------ |
-| alt                   | string \| [Resource](../../ui/ts-types.md#resource-type) | -                        | Placeholder image displayed during loading. Both local and Internet URIs are supported.                |
-| objectFit             | ImageFit                           | ImageFit.Cover           | Image scale type.                                        |
-| objectRepeat          | [ImageRepeat](ts-appendix-enums.md#imagerepeat)         | NoRepeat                 | Whether the image is repeated.<br>**NOTE**<br>This attribute is not applicable to SVG images. |
-| interpolation         | [ImageInterpolation](#imageinterpolation)               | ImageInterpolation.None  | Interpolation effect of the image. This attribute is intended to alleviate aliasing that occurs when a low-definition image is zoomed in.<br>**NOTE**<br>> This attribute is not applicable to SVG images.<br>> This attribute is not applicable to **PixelMap** objects. |
-| renderMode            | [ImageRenderMode](#imagerendermode)                     | ImageRenderMode.Original | Rendering mode of the image.<br>**NOTE**<br>This attribute is not applicable to SVG images. |
-| sourceSize            | {<br>width: number,<br>height: number<br>} | -                        | Decoding size of the image. The original image is decoded into an image of the specified size, in px.<br>**NOTE**<br>This attribute is not applicable to **PixelMap** objects. |
-| syncLoad<sup>8+</sup> | boolean                                  | false                    | Whether to load images synchronously. By default, images are loaded asynchronously. During synchronous loading, the UI thread is blocked and the placeholder diagram is not displayed. |
-| copyOption<sup>9+</sup> | [CopyOptions](#copyoptions) | CopyOptions.None | Whether the image can be copied. (SVG images cannot be copied.)|
-| colorFilter<sup>9+</sup> | [ColorFilter](../../ui/ts-types.md) | - | Color filter of the image. |
-
-### ImageFit
+| Name                 | Type                                               | Description                                                        |
+| --------------------- | ------------------------------------------------------- | ------------------------------------------------------------ |
+| alt                   | string \| [Resource](ts-types.md#resource)| Placeholder image displayed during loading. Both local and Internet URIs are supported.                |
+| objectFit             | [ImageFit](ts-appendix-enums.md#imagefit)                           | Image scale mode.<br>Default value: **ImageFit.Cover**              |
+| objectRepeat          | [ImageRepeat](ts-appendix-enums.md#imagerepeat)         | Whether the image is repeated.<br>Default value: **NoRepeat**<br>**NOTE**<br>This attribute is not applicable to SVG images.|
+| interpolation         | [ImageInterpolation](#imageinterpolation)               | Interpolation effect of the image. This attribute is intended to alleviate aliasing that occurs when a low-definition image is zoomed in.<br>Default value: **ImageInterpolation.None**<br>**NOTE**<br>This attribute is not applicable to SVG images.<br>This attribute is not applicable to **PixelMap** objects.|
+| renderMode            | [ImageRenderMode](#imagerendermode)                     | Rendering mode of the image.<br>Default value: **ImageRenderMode.Original**<br>**NOTE**<br>This attribute is not applicable to SVG images.|
+| sourceSize            | {<br>width: number,<br>height: number<br>} | Size of the decoded image. The original image is decoded into a **pixelMap** of the specified size, in px.<br>**NOTE**<br>This attribute is not applicable to **PixelMap** objects.|
+| matchTextDirection     | boolean | Whether to display the image in the system language direction. When this parameter is set to true, the image is horizontally flipped in the right-to-left (RTL) language context.<br>Default value: **false**  |
+| fitOriginalSize        | boolean | Whether to fit the component to the original size of the image source when the component size is not set.<br>Default value: **true**   |
+| fillColor              | [ResourceColor](ts-types.md#resourcecolor) | Fill color of the image. This attribute only applies to an SVG image. Once set, the fill color will replace that of the SVG image.|
+| autoResize             | boolean | Whether to resize the image source used for drawing based on the size of the display area during image decoding. This resizing can help reduce the memory usage.<br>Default value: **true**|
+| syncLoad<sup>8+</sup> | boolean                                  | Whether to load the image synchronously. By default, the image is loaded asynchronously. During synchronous loading, the UI thread is blocked and the placeholder diagram is not displayed.<br>Default value: **false**|
+| copyOption<sup>9+</sup> | [CopyOptions](ts-appendix-enums.md#copyoptions9)  | Whether the image can be copied. (SVG images cannot be copied.)<br>When **copyOption** is set to a value other than **CopyOptions.None**, the image can be copied in various manners, such as long pressing, right-clicking, or pressing Ctrl+C.<br>Default value: **CopyOptions.None**|
+| colorFilter<sup>9+</sup> | [ColorFilter](ts-types.md#colorfilter9) | Color filter of the image.|
 
-| Name     | Description                                                        |
-| --------- | ------------------------------------------------------------ |
-| Cover     | The image is scaled with its aspect ratio retained for both sides to be greater than or equal to the display boundaries.|
-| Contain   | The image is scaled with its aspect ratio retained for the content to be completely displayed within the display boundaries.  |
-| Fill      | The image is scaled to fill the display area, and its aspect ratio is not retained.            |
-| None      | The image is displayed in its original size.                                          |
-| ScaleDown | The image is displayed with its aspect ratio retained, in a size smaller than or equal to the original size.                      |
+>  **NOTE**
+>
+>  To use the shortcut keys to copy an **\<Image>** component, first set the **focusable** and **focusOnTouch** attributes of the component to **true** so that it can have focus.
 
 ### ImageInterpolation
 
@@ -81,30 +69,21 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 | Original | The image is rendered based on the original image, including the color.       |
 | Template | The image is rendered as a template image, and its color is ignored.|
 
-### CopyOptions<sup>9+</sup>
-
-| Name| Description|
-| -------- | -------- |
-| None | Copy and paste is not allowed.|
-| InApp | Intra-application copy and paste is allowed.|
-| LocalDevice | Intra-device copy and paste is allowed.|
-| CrossDevice | Cross-device copy and paste is allowed.|
-
 ## Events
 
-In addition to the universal events (ts-universal-events-click.md), the following events are supported.
+In addition to the [universal events](ts-universal-events-click.md), the following events are supported.
 
 | Name                                      | Description                                    |
-| ------------------------------------------------------------ | ------------------------------------------------------------ |
-| onComplete(callback: (event?: { width: number, height: number, componentWidth: number,<br> componentHeight: number, loadingStatus: number }) =&gt; void) | Triggered when an image is successfully loaded. The size of the loaded image is returned.<br>- **width**: width of the image, in pixels.<br>- **height**: height of the image, in pixels.<br>- **componentWidth**: width of the container component, in pixels.<br>- **componentHeight**: height of the container component, in pixels.<br>- **loadingStatus**: image loading status.<br> |
-| onError(callback: (event?: { componentWidth: number, componentHeight: number }) =&gt; void) | Triggered when an exception occurs during image loading.<br>- **componentWidth**: width of the container component, in pixels.<br>- **componentHeight**: height of the container component, in pixels. |
-| onFinish(callback: () =&gt; void)                            | Triggered when the animation playback in the loaded SVG image is complete. If the animation is an infinite loop, this callback is not triggered. |
+| ---------------------------------------- | ---------------------------------------- |
+| onComplete(callback: (event?: { width: number, height: number, componentWidth: number,<br> componentHeight: number, loadingStatus: number }) =&gt; void) | Triggered when an image is successfully loaded. The size of the loaded image is returned.<br>- **width**: width of the image, in pixels.<br>- **height**: height of the image, in pixels.<br>- **componentWidth**: width of the container component, in pixels.<br>- **componentHeight**: height of the container component, in pixels.<br>- **loadingStatus**: image loading status.<br>|
+| onError(callback: (event?: { componentWidth: number, componentHeight: number , message<sup>9+</sup>: string }) =&gt; void) | Triggered when an exception occurs during image loading.<br>- **componentWidth**: width of the container component, in pixels.<br>- **componentHeight**: height of the container component, in pixels.<br>|
+| onFinish(event: () =&gt; void) | Triggered when the animation playback in the loaded SVG image is complete. If the animation is an infinite loop, this callback is not triggered.|
 
 ## Example
 
 ### Loading Images
 
-Load and display different types of images and set the scale type of the images.
+Load and display different types of images and set the scale mode of the images.
 
 ```ts
 @Entry
@@ -172,6 +151,72 @@ struct ImageExample1 {
 
 ![en-us_image_0000001211898484](figures/en-us_image_0000001211898484.gif)
 
+
+
+### Loading Online Images
+
+The default network timeout period is 5 minutes for loading online images. When using an online image, you are advised to use **alt** to configure the placeholder image displayed during loading. If more flexible network configuration is required, use the [HTTP](../../connectivity/http-request.md) module in the SDK to send a network request, and then decode the returned data into a `PixelMap` in the **\<Image>** component. For details about image development, see [Image Development](../../media/image.md). The code snippet is as follows:
+
+```tsx
+// @ts-nocheck
+import http from '@ohos.net.http';
+import ResponseCode from '@ohos.net.http';
+import image from '@ohos.multimedia.image'
+
+
+@Entry 
+@Component 
+struct Index {
+    
+  // Create a PixelMap state variable to receive online images.
+  @State image: PixelMap = undefined
+
+  build() {
+    Column({space: 10}) {
+      Button ("Get Online Image")
+        .onClick(() => {
+          this.httpRequest();
+        })
+      Image(this.image).height(100).width(100)
+    }
+    .width('100%')
+    .height('100%')
+    .padding(10)
+  }
+
+  // Request an online image.
+  private httpRequest() {
+    let httpRequest = http.createHttp();
+	
+    httpRequest.request(
+      "https://www.example.com/xxx.png",   // Enter a specific URL of the online image.
+      (error, data) => {
+        if(error) {
+          console.log("error code: " + error.code + ", msg: " + error.message)
+        } else {
+          let code = data.responseCode
+          if(ResponseCode.ResponseCode.OK == code) {
+            let imageSource = image.createImageSource(data.result)
+            let options = {alphaType: 0,                     // Transparency
+                           editable: false,                  // Whether the image is editable
+                           pixelFormat: 3,                   // Pixel format
+                           scaleMode: 1,                     // Scale mode
+                           size: {height: 100, width: 100}} // Image size
+            imageSource.createPixelMap(options).then((pixelMap) => {
+              this.image = pixelMap
+            })
+          } else {
+            console.log("response code: " + code);
+          }
+        }
+      }
+    )
+  }
+}
+```
+
+**NOTE**<br>For details about the request mode, timeout, and additional request parameters for loading online images, see [`request()`](../../reference/apis/js-apis-http.md) in the HTTP module.
+
 ### Setting Attributes
 
 ```ts

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

 # ImageAnimator
 
-> **NOTE**
-> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-
-
 The **\<ImageAnimator>** component enables images to be played frame by frame. The list of images to be played can be configured, and the duration of each image can be configured.
 
+>  **NOTE**
+>
+> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions
-
-None
 
 
 ## Child Components
@@ -24,37 +20,38 @@ ImageAnimator()
 
 ## Attributes
 
-| Name| Type| Default Value| Mandatory| Description|
-| -------- | -------- | -------- | -------- | -------- |
-| images | Array&lt;ImageFrameInfo&gt; | [] | Yes| Image frame information. The information of each frame includes the image path, image size, image position, and image playback duration. For details, see **ImageFrameInfo**.|
-| state | [AnimationStatus](ts-appendix-enums.md#animationstatus) | Initial | No| Playback status of the animation. The default status is **Initial**.|
-| duration | number | 1000 | No| Playback duration, in ms. The default duration is 1000 ms. When the duration is **0**, no image is played. The value change takes effect only at the beginning of the next cycle. When a separate duration is set in **images**, the setting of this attribute is invalid.|
-| reverse | boolean | false | No| Playback sequence. The value **false** indicates that images are played from the first one to the last one, and **true** indicates that images are played from the last one to the first one.|
-| fixedSize | boolean | true | No| Whether the image size is the same as the component size.<br> **true**: The image size is the same as the component size. In this case, the width, height, top, and left attributes of the image are invalid.<br> **false**: The width, height, top, and left attributes of each image must be set separately.|
-| preDecode | number | 0 | No| Whether to enable pre-decoding. The default value **0** indicates that pre-decoding is disabled. The value **2** indicates that two images following the currently playing frame will be cached in advance to improve performance.|
-| fillMode | [FillMode](ts-appendix-enums.md#fillmode) | Forwards | No| Status before and after the animation starts. For details about the options, see **FillMode**.|
-| iterations | number | 1 | No| Number of times that the animation is played. By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times.|
+| Name    | Type                 | Mandatory     | Description                  |
+| ---------- | ----------------------- | -------- | -------- |
+| images     | Array&lt;ImageFrameInfo&gt; | No  | Image frame information. The information of each frame includes the image path, image size, image position, and image playback duration. For details, see **ImageFrameInfo**.<br>Default value: **[]** |
+| state      | [AnimationStatus](ts-appendix-enums.md#animationstatus) | No   | Playback status of the animation. The default status is **Initial**.<br>Default value: **AnimationStatus.Initial**|
+| duration   | number  | No   | Playback duration, in ms. The default duration is 1000 ms. When the duration is **0**, no image is played. The value change takes effect only at the beginning of the next cycle. When a separate duration is set in **images**, the setting of this attribute is invalid.<br>Default value: **1000**|
+| reverse    | boolean | No   | Playback sequence. The value **false** indicates that images are played from the first one to the last one, and **true** indicates that images are played from the last one to the first one.<br>Default value: **false**|
+| fixedSize  | boolean | No   | Whether the image size is the same as the component size.<br> **true**: The image size is the same as the component size. In this case, the width, height, top, and left attributes of the image are invalid.<br> **false**: The width, height, top, and left attributes of each image must be set separately.<br>Default value: **true**|
+| preDecode  | number  | No   | Whether to enable pre-decoding. The default value **0** indicates that pre-decoding is disabled. The value **2** indicates that two images following the currently playing frame will be cached in advance to improve performance.<br>Default value: **0**|
+| fillMode   | [FillMode](ts-appendix-enums.md#fillmode) | No   | Status before and after the animation starts. For details about the options, see **FillMode**.<br>Default value: **FillMode.Forwards**|
+| iterations | number  | No   | Number of times that the animation is played. By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times.<br>Default value: **1**|
 
 - ImageFrameInfo
-  | Name| Type| Default Value| Mandatory| Description|
-  | -------- | -------- | -------- | -------- | -------- |
-  | src | string \| [Resource](.../ui/ts-types.md#resource-type)<sup>9+</sup>| "" | Yes| Image path. The image format can be .svg, .png, or .jpg.|
-  | width | [Length](.../ui/ts-types.md#length-type)| 0 | No| Image width.|
-  | height | [Length](.../ui/ts-types.md#length-type)| 0 | No| Image height.|
-  | top | [Length](.../ui/ts-types.md#length-type)| 0 | No| Vertical coordinate of the image relative to the upper left corner of the component.|
-  | left | [Length](.../ui/ts-types.md#length-type)| 0 | No| Horizontal coordinate of the image relative to the upper left corner of the component.|
-  | duration | number | 0 | No| Playback duration of each image frame, in milliseconds.|
+
+| Name  | Type  | Mandatory| Description|
+| -------- | -------------- | -------- | -------- |
+| src      | string \| [Resource](ts-types.md#resource)<sup>9+</sup> | Yes   | Image path. The image format can be .svg, .png, or .jpg. Since API version 9, this attribute accepts paths of the [Resource](ts-types.md#resource) type.|
+| width    | [Length](ts-types.md#length)  | No | Image width.<br>Default value: **0**         |
+| height   | [Length](ts-types.md#length)  | No | Image height.<br>Default value: **0**            |
+| top      | [Length](ts-types.md#length)  | No | Vertical coordinate of the image relative to the upper left corner of the widget<br>Default value: **0**   |
+| left     | [Length](ts-types.md#length)  | No | Horizontal coordinate of the image relative to the upper left corner of the widget<br>Default value: **0**   |
+| duration | number          | No    | Playback duration of each image frame, in milliseconds.<br>Default value: **0**              |
 
 
 ## Events
 
 | Name| Description|
 | -------- | -------- |
-| onStart(event: () =&gt; void)  | Triggered when the animation starts to play.|
-| onPause(event: () =&gt; void)  | Triggered when the animation playback is paused.|
-| onRepeat(event: () =&gt; void) | Triggered when the animation playback is repeated.|
-| onCancel(event: () =&gt; void) | Triggered when the animation playback is canceled.|
-| onFinish(event: () =&gt; void) | Triggered when the animation playback is complete.|
+| onStart(event:&nbsp;()&nbsp;=&gt;&nbsp;void)  | Triggered when the animation starts to play.|
+| onPause(event:&nbsp;()&nbsp;=&gt;&nbsp;void)  | Triggered when the animation playback is paused.|
+| onRepeat(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | Triggered when the animation playback is repeated.|
+| onCancel(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | Triggered when the animation playback is canceled.|
+| onFinish(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | Triggered when the animation playback is complete.|
 
 
 ## Example

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

@@ -3,35 +3,25 @@
 The **\<LoadingProgress>** component is used to create a loading animation.
 
 >  **NOTE**
->
 > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-## Required Permissions
-
-None
-
-
 ## Child Components
 
-None
+Not supported
 
 
 ## APIs
 
 LoadingProgress()
 
-Creates a **LoadingProgress** instance.
-
-
+Creates a **\<LoadingProgress>** component.
 
 ## Attributes
 
-| Name| Type| Default Value| Description|
-| -------- | -------- | -------- | -------- |
-| color | [ResourceColor](../../ui/ts-types.md) | - | Foreground color of the loading progress bar.|
-
-
+| Name| Type| Description|
+| -------- | -------- | -------- |
+| color | [ResourceColor](ts-types.md#resourcecolor) | Foreground color of the **\<LoadingProgress>** component.|
 
 ## Example
 

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

 # Marquee
 
+The **\<Marquee>** component is used to display a scrolling piece of text. The text is scrolled only when its width exceeds the width of the **\<Marquee>** component.
+
 
 >  **NOTE**
 >
 >  This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-The **\<Marquee>** component is used to display a scrolling piece of text. The text is scrolled only when its width exceeds the width of the **\<Marquee>** component.
-
-
-## Required Permissions
-
-None
-
-
 ## Child Components
 
 Not supported
@@ -23,23 +17,29 @@ Not supported
 
 Marquee(value: { start: boolean, step?: number, loop?: number, fromStart?: boolean, src: string })
 
-- Parameters
-    | Name| Type| Mandatory| Default Value| Description|
-  | -------- | -------- | -------- | -------- | -------- |
-  | start | boolean | Yes| - | Whether to start scrolling.|
-  | step | number | No| 6 | Scrolling step.|
-  | loop | number | No| -1 | Number of times the marquee will scroll. If the value is less than or equal to **0**, the marquee will scroll continuously.|
-  | fromStart | boolean | No| true | Whether the text scrolls from the start.|
-  | src | string | Yes| - | Text to scroll.|
+**Parameters**
+
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| start | boolean | Yes| Whether to start scrolling.|
+| step | number | No| Scrolling step.<br>Default value: **6**, in vp|
+| loop | number | No| Number of times the marquee will scroll. If the value is less than or equal to **0**, the marquee will scroll continuously.<br>Default value: **-1**|
+| fromStart | boolean | No| Whether the text scrolls from the start.<br>Default value: **true**|
+| src | string | Yes| Text to scroll.|
+
+## Attributes
 
+| Name      | Type| Description                                |
+| ---------- | -------- | ------------------------------------ |
+| allowScale | boolean  | Whether to allow text to scale.<br>Default value: **false**|
 
 ## Events
 
 | Name| Description|
 | -------- | -------- |
-| onStart(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | Triggered when the marquee starts scrolling.|
-| onBounce(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | Triggered when the marquee has reached the end.|
-| onFinish(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | Triggered when the marquee has finished scrolling.|
+| onStart(event: () =&gt; void) | Triggered when the marquee starts scrolling.|
+| onBounce(event: () =&gt; void) | Triggered when the marquee has reached the end. This event will be triggered for multiple times if the **loop** attribute is not set to **1**.|
+| onFinish(event: () =&gt; void) | Triggered when the marquee has finished the number of scrolling times set by the **loop** attribute.|
 
 
 ## Example

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

@@ -2,17 +2,11 @@
 
 The **\<Navigation>** component typically functions as the root container of a page and displays the page title, toolbar, and menu based on the attribute settings.
 
-
 > **NOTE**
 >
 > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-## Required Permissions
-
-None
-
-
 ## Child Components
 
 Supported
@@ -24,56 +18,59 @@ Navigation()
 
 Creates a component that can automatically display the navigation bar, title, and toolbar based on the attribute settings.
 
-
 ## Attributes
 
-| Name | Type | Default Value | Description |
-| -------- | -------- | -------- | -------- |
-| title | string \| [CustomBuilder](../../ui/ts-types.md) | - | Page title. |
-| subTitle | string | - | Subtitle of the page. |
-| menus | Array&lt;NavigationMenuItem&gt; \| [CustomBuilder](../../ui/ts-types.md) | - | Menu in the upper right corner of the page. |
-| titleMode | NavigationTitleMode | NavigationTitleMode.Free | Display mode of the page title bar. |
-| toolBar | {<br/>items:[<br/>Object<br/>] }<br/>\| [CustomBuilder](../../ui/ts-types.md) | - | Content of the toolbar.<br/>**items**: all items on the toolbar. |
-| hideToolBar | boolean | false | Whether to hide the toolbar.<br/>**true**: Hide the toolbar.<br/>**false**: Show the toolbar. |
-| hideTitleBar | boolean | false | Whether to hide the title bar. |
-| hideBackButton | boolean | false | Whether to hide the back button. |
-
-- NavigationMenuItem attributes
-  | Name | Type | Mandatory | Default Value | Description |
-  | -------- | -------- | -------- | -------- | -------- |
-  | value | string | Yes | - | Text of an option on the menu bar. |
-  | icon | string | No | - | Icon path of an option on the menu bar. |
-  | action | () =&gt; void | No | - | Callback invoked when an option is selected. |
-
-- Object attributes
-  | Name | Type | Mandatory | Default Value | Description |
-  | -------- | -------- | -------- | -------- | -------- |
-  | value | string | Yes | - | Text of an option on the toolbar. |
-  | icon | string | No | - | Icon path of an option on the toolbar. |
-  | action | () =&gt; void | No | - | Callback invoked when an option is selected. |
-
-- NavigationTitleMode enums
-  | Name | Description |
-  | -------- | -------- |
-  | Free | When the content is a scrollable component, the title shrinks as the content scrolls up (the subtitle fades out with its size remaining unchanged) and restores as the content scrolls down. |
-  | Mini | The mode is fixed at mini mode (icon + main title and subtitle). |
-  | Full | The mode is fixed at full mode (main title and subtitle). |
-
-  > **NOTE**
-  >
-  > Currently, only the scrollable component **&lt;List&gt;** is supported.
+In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
+
+| Name            | Type                                    | Description                                      |
+| -------------- | ---------------------------------------- | ---------------------------------------- |
+| title          | string \| [CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | Page title.                                   |
+| subTitle       | string                                   | Subtitle of the page.                                  |
+| menus          | Array<NavigationMenuItem&gt; \| [CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | Menu in the upper right corner of the page.     |
+| titleMode      | NavigationTitleMode                      | Display mode of the page title bar.<br>Default value: **NavigationTitleMode.Free**|
+| toolBar        | object \| [CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | Content of the toolbar.<br>**items**: all items on the toolbar.    |
+| hideToolBar    | boolean                                  | Whether to hide the toolbar.<br>Default value: **false**<br>**true**: Hide the toolbar.<br>**false**: Show the toolbar.|
+| hideTitleBar   | boolean                                  | Whether to hide the title bar.<br>Default value: **false**                    |
+| hideBackButton | boolean                                  | Whether to hide the back button.<br>Default value: **false**                    |
+
+## NavigationMenuItem
+
+| Name  | Type                   | Mandatory| Description                          |
+| ------ | ----------------------- | ---- | ------------------------------ |
+| value  | string                  | Yes  | Text of a menu item.    |
+| icon   | string                  | No  | Icon path of a menu item.|
+| action | () =&gt; void | No  | Callback invoked when a menu item is selected.    |
+
+## object
+
+| Name  | Type                   | Mandatory| Description                          |
+| ------ | ----------------------- | ---- | ------------------------------ |
+| value  | string                  | Yes  | Text of an option on the toolbar.    |
+| icon   | string                  | No  | Icon path of an option on the toolbar.|
+| action | () =&gt; void | No  | Callback invoked when an option is selected.    |
+
+## NavigationTitleMode
+
+| Name  | Description                                      |
+| ---- | ---------------------------------------- |
+| Free | When the content is a scrollable component, the main title shrinks as the content scrolls down (the subtitle fades out with its size remaining unchanged) and restores when the content scrolls up to the top.|
+| Mini | The icon, main title, and subtitle are in mini mode.                      |
+| Full | The main title and subtitle are in full mode.                         |
+
+>  **NOTE**
+>
+>  Currently, the scrollable component can only be **\<List>**.
 
 
 ## Events
 
 | Name                                      | Description                                    |
-| -------- | -------- |
-| onTitleModeChange(callback:&nbsp;(titleMode:&nbsp;NavigationTitleMode)&nbsp;=&gt;&nbsp;void) | Triggered when **titleMode** is set to **NavigationTitleMode.Free** and the title bar mode changes as content scrolls. |
+| ---------------------------------------- | ---------------------------------------- |
+| onTitleModeChange(callback: (titleMode: NavigationTitleMode) =&gt; void) | Triggered when **titleMode** is set to **NavigationTitleMode.Free** and the title bar mode changes as content scrolls.|
 
 
 ## Example
 
-
 ```ts
 // xxx.ets
 @Entry

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

@@ -4,12 +4,7 @@ The **\<PatternLock>** component allows users to use a pattern password for auth
 
 >  **NOTE**
 >
-> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
-
-
-## Required Permissions
-
-None
+> This component is supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version.
 
 ## Child Components
 
@@ -19,36 +14,38 @@ Not supported
 
 PatternLock(controller?: PatternLockController)
 
-- Parameters
+**Parameters**
 
-  | Name | Type | Mandatory | Default Value | Description |
-  | ---- | ---- | ---- | ------ | ----------------------- |
-  | controller | [PatternLockController](#patternlockcontroller) | No  | null | Controller of a component to reset the component status. |
+| Name    | Type                                       | Mandatory| Description                                                        |
+| ---------- | ----------------------------------------------- | ---- | ------------------------------------------------------------ |
+| controller | [PatternLockController](#patternlockcontroller) | No  | Controller of a component to reset the component status.<br>Default value: **null**|
 
 ## Attributes
 
 Except for **backgroundColor**, universal attributes are not supported.
 
-| Name | Type | Default Value | Description |
-| ---- | ---- | ------------- | ----------- |
-| sideLength | Length | 300vp | Width and height (same value) of the component. The minimum value is **0**. |
-| circleRadius | Length | 14vp | Radius of a grid dot. |
-| regularColor | [ResourceColor](../../ui/ts-types.md) | Color.Black | Fill color of the grid dot in unselected state. |
-| selectedColor | [ResourceColor](../../ui/ts-types.md) | Color.Black | Fill color of the grid dot in selected state. |
-| activeColor | [ResourceColor](../../ui/ts-types.md) | Color.Black | Fill color of the grid dot in active state. |
-| pathColor | [ResourceColor](../../ui/ts-types.md) | Color.Blue  | Path color. |
-| pathStrokeWidth | Length | 34vp | Width of the path stroke. The minimum value is **0**. |
-| autoReset| boolean | true | Whether to allow the user to reset the component status (that is, clear the input) by touching the component again after the input is complete. The value **true** means that the user can reset the component status by touching the component again after the input is complete, and **false** means the opposite. |
+| Name           | Type                             | Description                                                        |
+| --------------- | ------------------------------------- | ------------------------------------------------------------ |
+| sideLength      | [Length](ts-types.md#length) | Width and height (same value) of the component. The minimum value is **0**.<br>Default value: **300vp**|
+| circleRadius    | [Length](ts-types.md#length) | Radius of the grid dot.<br>Default value: **14vp**                       |
+| regularColor    | [ResourceColor](ts-types.md#resourcecolor) | Fill color of the grid dot in unselected state.<br>Default value: **Color.Black**|
+| selectedColor   | [ResourceColor](ts-types.md#resourcecolor) | Fill color of the grid dot in selected state.<br>Default value: **Color.Black**|
+| activeColor     | [ResourceColor](ts-types.md#resourcecolor) | Fill color of the grid dot in active state.<br>Default value: **Color.Black**|
+| pathColor       | [ResourceColor](ts-types.md#resourcecolor) | Path color.<br>Default value: **Color.Blue**                     |
+| pathStrokeWidth | number \| string            | Width of the path stroke. The minimum value is **0**.<br>Default value: **34vp**          |
+| autoReset       | boolean                               | Whether to allow the user to reset the component status (that is, clear the input) by touching the component again after the input is complete. The value **true** means that the user can reset the component status by touching the component again after the input is complete, and **false** means the opposite.<br>Default value: **true**|
 
 ## Events
 
+In addition to the [universal events](ts-universal-events-click.md), the following events are supported.
+
 | Name                                      | Description                                      |
-| ---- | ----------- |
-| onPatternComplete(callback: (input: Array\<number\>) => void) | Invoked when the pattern password input is complete.<br>**input** is an array of digits that represent the connected dots in the pattern (0 to 8) and are arranged in the same sequence as the dots are connected. |
+| ---------------------------------------- | ---------------------------------------- |
+| onPatternComplete(callback: (input: Array\<number\>) => void) | Invoked when the pattern password input is complete.<br>**input** is an array of digits that represent the connected dots in the pattern (0 to 8) and are arranged in the same sequence as the dots are connected.|
 
 ## PatternLockController
 
-Controller bound to the **\<PatternLock>** component for resetting the component status.
+Implements the controller bound to the **\<PatternLock>** component for resetting the component status.
 
 ### Objects to Import
 

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

 # PluginComponent
 
-**\<PluginComponent>** allows the UI provided by an external application to be displayed in the application.
+The **\<PluginComponent>** allows the UI provided by an external application to be displayed in the application.
+
 
 >  **NOTE**
+>
 > - This component is supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version.
 >
 > - The APIs provided by this component are system APIs.
 
 
-## Required Permissions
-
-None
-
-
 ## Child Components
 
 Not supported
@@ -20,33 +17,35 @@ Not supported
 
 ## APIs
 
-PluginComponent(value: { template: PluginComponentTemplate, data: any })
+PluginComponent(value: { template: PluginComponentTemplate, data: KVObject})
 
 Creates a **PluginComponent** to display the UI provided by an external application.
 
-- Parameters
-  | Name | Type | Mandatory | Default Value | Description |
-  | -------- | -------- | -------- | -------- | -------- |
-  | value | {<br/>template: PluginComponentTemplate,<br/>data: KVObject<br/>} | Yes | - | **template**: template of the **PluginComponent**, which is bound to the component defined by the provider.<br/>**data**: data passed to the **PluginComponent** provider. |
+**Parameters**
+
+| Name| Type                                                    | Mandatory| Description                                                    |
+| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
+| value  | {<br>template: PluginComponentTemplate,<br>data: KVObject<br>} | Yes  | **template**: template of the **PluginComponent**, which is bound to the component defined by the provider.<br>**data**: data passed to the **PluginComponent** provider.|
 
-- PluginComponentTemplate
-  | Name | Type | Description |
-  | -------- | -------- | -------- |
-  | source | string | Component template name. |
-  | ability | string | Name of the provider ability. |
+## PluginComponentTemplate
+
+| Name     | Type    | Description                     |
+| ------- | ------ | ----------------------- |
+| source  | string | Component template name.                 |
+| ability | string | Name of the provider ability.|
 
 
 ## Events
 
 | Name                                      | Description                                    |
-| -------- | -------- |
+| ---------------------------------------- | ---------------------------------------- |
 | onComplete(callback: () =&gt; void) | Triggered when the component loading is complete.                               |
-| onError(callback: (info: { errcode: number, msg: string }) =&gt; void) | Triggered when an error occurs during component loading.<br/>**errcode**: error code.<br/>**msg**: error information. |
+| onError(callback: (info: { errcode: number, msg: string }) =&gt; void) | Triggered when an error occurs during component loading.<br>**errcode**: error code.<br>**msg**: error information.|
 
 
 ## PluginComponentManager
 
-Provides APIs for the **PluginComponent** user to request the component and data and for the **PluginComponent** provider to push component templates and data.
+Provides APIs for the **PluginComponent**. You can use these APIs to request components and data and send component templates and data.
 
 
 ## Modules to Import
@@ -61,63 +60,67 @@ import pluginComponentManager from '@ohos.plugincomponent'
 
 push(param: PushParameters, callback: AsyncCallback&lt;void&gt;): void
 
-Used by the component provider to push a component and data to the component user.
+Pushes the component and data to the component user.
+
+**Parameters**
 
+| Name     | Type                       | Mandatory  | Description                              |
+| -------- | ------------------------- | ---- | -------------------------------- |
+| param    | PushParameters            | Yes   | Information about the component user. For details, see **PushParameters**.|
+| callback | AsyncCallback&lt;void&gt; | Yes   | Asynchronous callback used to return the result.                    |
 
-- Parameters
-  | Name | Type | Mandatory | Description |
-  | -------- | -------- | -------- | -------- |
-  | param | PushParameters | Yes | Information about the component user. For details, see **PushParameters**. |
-  | callback | AsyncCallback&lt;void&gt; | Yes | Asynchronous callback used to return the result. |
+**PushParameters**
 
-- PushParameters
-  | Name | Type | Mandatory | Description |
-  | -------- | -------- | -------- | -------- |
-  | want | Want | Yes | Ability information of the component user. |
-  | name | string | Yes | Component name. |
-  | data | KVObject | No | Component data value. |
-  | extraData | KVObject | No | Additional data value. |
+| Name      | Type      | Mandatory  | Description             |
+| --------- | -------- | ---- | --------------- |
+| want      | Want     | Yes   | Ability information of the component user.|
+| name      | string   | Yes   | Component name.          |
+| data      | KVObject | No   | Component data value.         |
+| extraData | KVObject | No   | Additional data value.         |
 
-- Example
+**Example**
 
-  See [PluginComponent Provider](#plugincomponent-provider)。
+For details, see [PluginComponent Provider](#plugincomponent-provider).
 
 
 ## request
 
 request(param: RequestParameters, callback: AsyncCallback&lt;RequestCallbackParameters&gt;): void
 
-Used by the component user to request a component from the component provider.
+Requests the component from the component provider.
 
-- Parameters
-  | Name | Type | Mandatory | Description |
-  | -------- | -------- | -------- | -------- |
-  | param | RequestParameters | Yes | Information about the component request. For details, see  **RequestParameters**. |
-  | callback | AsyncCallback<RequestCallbackParameters \| void&gt; |  | Asynchronous callback used to return the requested data. |
+**Parameters**
 
-- RequestParameters
-  | Name | Type | Mandatory | Description |
-  | -------- | -------- | -------- | -------- |
-  | want | Want     | Yes | Ability information of the component provider. |
-  | name | string | Yes | Name of the requested component. |
-  | data | KVObject | Yes | Additional data. |
+| Name     | Type                                      | Mandatory  | Description                                  |
+| -------- | ---------------------------------------- | ---- | ------------------------------------ |
+| param    | RequestParameters                        | Yes   | Information about the component request. For details, see **RequestParameters**.|
+| callback | AsyncCallback<RequestCallbackParameters \| void&gt; | Yes   | Asynchronous callback used to return the requested data. |
 
-- RequestCallbackParameters
-  | Name | Type | Description |
-  | -------- | -------- | -------- |
-  | componentTemplate | PluginComponentTemplate | Component template. |
-  | data | KVObject | Component data. |
-  | extraData | KVObject | Additional data. |
+**RequestParameters**
 
-- KVObject
-  | Name | Type | Description |
-  | -------- | -------- | -------- |
-  | key | number \| string \| boolean \| Array \| KVObject | **KVObject** uses **key** and **value** to store data. **key** is of the string type, and **value** can be of the number, string, boolean, array type or another **KVObject**. |
+| Name | Type      | Mandatory  | Description             |
+| ---- | -------- | ---- | --------------- |
+| want | Want     | Yes   | Ability information of the component provider.|
+| name | string   | Yes   | Name of the requested component.        |
+| data | KVObject | Yes   | Additional data.          |
 
+**RequestCallbackParameters**
 
-- Example
+| Name               | Type                     | Description   |
+| ----------------- | ----------------------- | ----- |
+| componentTemplate | PluginComponentTemplate | Component template.|
+| data              | KVObject                | Component data.|
+| extraData         | KVObject                | Additional data.|
 
-  See [PluginComponent User](#plugincomponent-user).
+**KVObject**
+
+| Name  | Type                                      | Description                                      |
+| ---- | ---------------------------------------- | ---------------------------------------- |
+| key  | number \| string \| boolean \| Array \| KVObject | Key of the **KVObject**. **KVObject** uses **key** and **value** to store data. If **key** is of the string type, **value** can be of the number, string, boolean, array type or another **KVObject**.|
+
+**Example**
+
+For details, see [PluginComponent User](#plugincomponent-user).
 
 
 ## on
@@ -126,28 +129,32 @@ on(eventType: string, callback: OnPushEventCallback | OnRequestEventCallback): v
 
 Listens for events of the request type and returns the requested data, or listens for events of the push type and receives the data pushed by the provider.
 
-- Parameters
-  | Name | Type | Mandatory | Description |
-  | -------- | -------- | -------- | -------- |
-  | eventType | string | Yes | Type of the event to listen for. The options are **"push"** and **"request"**.<br/>**"push"**: The component provider pushes data to the component user.<br/>**"request"**: The component user proactively requests data from the component provider. |
-  | callback | OnPushEventCallback \| OnRequestEventCallback | Yes | Callback used to return the result. For details, see description of callback. |
+**Parameters**
+
+| Name      | Type                                      | Mandatory  | Description                                      |
+| --------- | ---------------------------------------- | ---- | ---------------------------------------- |
+| eventType | string                                   | Yes   | Type of the event to listen for The options are as follows:<br>**"push"**: The component provider pushes data to the component user.<br>**"request"**: The component user proactively requests data from the component provider.|
+| callback  | OnPushEventCallback \| OnRequestEventCallback | Yes   | Callback used to return the result. For details, see **callback**.                          |
+
+**callback**
+
+| Name                   | Type                                      | Description                                      |
+| ---------------------- | ---------------------------------------- | ---------------------------------------- |
+| OnRequestEventCallback | (source: Want,<br>name: string,<br>data: KVObject ) =>RequestEventResult | Callback for the data request event.<br>**source**: ability information of the component requester.<br>**name**: name of the requested component.<br>**data**: additional data.<br>Return value: request data and result.|
+| OnPushEventCallback    | (source: Want,<br>template: PluginComponentTemplate,<br>data: KVObject,<br>extraData: KVObject<br>) =&gt; void | Callback used to receive the data pushed by the component provider.<br>**source**: ability information of the component provider.<br>**template**: component template.<br>**data**: component update data.<br>**extraData**: additional data.|
+
+**RequestEventResult**
 
-- callback
-  | Name | Type | Description |
-  | -------- | -------- | -------- |
-  | OnRequestEventCallback | (source: Want,<br/>name: string,<br/>data: KVObject ) =>RequestEventResult | Callback for the data request event.<br/>**source**: ability information of the component requester.<br/>**name**: name of the requested component.<br/>**data**: additional data.<br/>Return value: request data and result. |
-  | OnPushEventCallback | (source: Want,<br/>template: PluginComponentTemplate,<br/>data: KVObject,<br/>extraData: KVObject<br/>) =&gt; void | Callback used to receive the data pushed by the component provider.<br/>**source**: ability information of the component provider.<br/>**template**: component template.<br/>**data**: component update data.<br/>**extraData**: additional data. |
+| Name     | Type    | Description      |
+| --------- | -------- | ---------- |
+| template  | string   | Component name.|
+| data      | KVObject | Component data.|
+| extraData | KVObject | Additional data.|
 
-- RequestEventResult
-  | Name | Type | Description |
-  | -------- | -------- | -------- |
-  | template | string | Component name. |
-  | data | KVObject | Component data. |
-  | extraData | KVObject | Additional data. |
+**Example**
 
-- Example
+For details, see [PluginComponent Tools](#plugincomponent-tools).
 
-  See [PluginComponent Tools](#plugincomponent-tools).
 
 ## Example
 
@@ -287,7 +294,7 @@ export default {
     pluginComponentManager.on("request", onRequestListener)
   },
   Push() {
-    // The component provider pushes data.
+        // The component provider proactively sends data.
     pluginComponentManager.push(
       {
         want: {

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

 # Progress
 
-The **\<Progress>** 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 indicator that displays the progress of content loading or an operation.
 
 >  **NOTE**
 >
 >  This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-## Required Permissions
-
-None
-
-
 ## Child Components
 
 Not supported
@@ -19,35 +14,46 @@ Not supported
 
 ## APIs
 
-Progress(value: {value: number, total?: number, type?: ProgressType})
-
-Creates a progress bar.
+Progress(options: {value: number, total?: number, type?: ProgressType})
 
-- Parameters
-  | Name| Type| Mandatory| Default Value| Description|
-  | -------- | -------- | -------- | -------- | -------- |
-  | value | number | Yes| - | Current progress.|
-  | total | number | No| 100 | Total progress.|
-  | type | ProgressType | No| ProgressType.Linear | Type of the progress bar.|
+Creates a progress indicator.
 
+**Parameters**
 
-- ProgressType
-  | Name| Description|
-  | -------- | -------- |
-  | Linear<sup>8+</sup> | Linear type.|
-  | Ring<sup>8+</sup> | Ring type without scale. The ring fills up as the progress increases.|
-  | Eclipse<sup>8+</sup> | Eclipse type, which visualizes the progress in a way similar to the moon waxing from new to full.|
-  | ScaleRing<sup>8+</sup> | Ring type with scale, which is similar to the clock scale.|
-  | Capsule<sup>8+</sup> | Capsule type. At both ends, the progress bar changes from an arc to a straight line and from a straight line to an arc. In the middle part of the capsule, the progress bar moves to the right.|
-
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| value | number | Yes| Current progress.|
+| total | number | No| Total progress.<br>Default value: **100**|
+| type<sup>8+</sup> | ProgressType | No| Type of the progress indicator.<br>Default value: **ProgressType.Linear**|
+| style<sup>deprecated</sup> | ProgressStyle | No| Style the progress indicator.<br>This parameter is deprecated since API version 8. You are advised to use **type** instead.<br>Default value: **ProgressStyle.Linear**|
+
+## ProgressType
+
+| Name| Description|
+| -------- | -------- |
+| Linear | Linear type.|
+| Ring<sup>8+</sup> | Indeterminate ring type. The ring fills up as the progress increases.|
+| Eclipse<sup>8+</sup> | Eclipse type, which visualizes the progress in a way similar to the moon waxing from new to full.|
+| ScaleRing<sup>8+</sup> | Determinate ring type, which is similar to the clock scale.|
+| Capsule<sup>8+</sup> | Capsule type. At both ends, the progress indicator works in a same manner as the eclipse type. In the middle part of the capsule, the progress indicator works in a same manner as the linear type.|
+
+##  ProgressStyle
+
+| Name     | Description                                                        |
+| --------- | ------------------------------------------------------------ |
+| Linear    | Linear type.                                                  |
+| Ring      | Indeterminate ring type. The ring fills up as the progress increases.            |
+| Eclipse   | Eclipse type, which visualizes the progress in a way similar to the moon waxing from new to full.|
+| ScaleRing | Determinate ring type, which is similar to the clock scale.        |
+| Capsule   | Capsule type. At both ends, the progress indicator works in a same manner as the eclipse type. In the middle part of the capsule, the progress indicator works in a same manner as the linear type.|
 
 ## Attributes
 
-| Name| Type| Default Value| Description|
-| -------- | -------- | -------- | -------- |
-| value | number | - | Current progress.|
-| color | [ResourceColor](../../ui/ts-types.md) | - | Background color of the progress bar.|
-| style<sup>8+</sup> | {<br>strokeWidth?: Length,<br>scaleCount?: number,<br>scaleWidth?: Length<br>} | - | Component style.<br>**strokeWidth**: width of the progress bar.<br>**scaleCount**: scale count of the circular progress bar.<br>**scaleWidth**: scale width of the circular progress bar.<br>If the scale width is greater than the width of the progress bar, the default scale width is used.|
+| Name| Type| Description|
+| -------- | -------- | -------- |
+| value | number | Current progress.|
+| color | [ResourceColor](ts-types.md#resourcecolor) | Background color of the progress indicator.|
+| style<sup>8+</sup> | {<br>strokeWidth?: [Length](ts-types.md#length),<br>scaleCount?: number,<br>scaleWidth?: [Length](ts-types.md#length)<br>} | Component style.<br>- **strokeWidth**: stroke width of the progress indicator.<br>- **scaleCount**: number of divisions on the determinate ring-type process indicator.<br>- **scaleWidth**: scale bar width of the determinate ring-type process indicator. If it is greater than the progress indicator width, the default value is used instead.|
 
 
 ## Example

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

@@ -7,11 +7,6 @@ The **\<QRCode>** component is used to display a QR code.
 > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-## Required Permissions
-
-None
-
-
 ## Child Components
 
 Not supported
@@ -21,23 +16,25 @@ Not supported
 
 QRCode(value: string)
 
-- Parameters
-  | Name| Type| Mandatory| Default Value| Description|
-  | -------- | -------- | -------- | -------- | -------- |
-  | value | string | Yes| - | Content of the QR code.|
+**Parameters**
 
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| value | string | Yes| Content of the QR code.|
 
 ## Attributes
 
-| Name| Type| Default Value| Description|
-| -------- | -------- | -------- | -------- |
-| color | [ResourceColor](../../ui/ts-types.md) | Black | Color of the QR code.|
-| backgroundColor | [ResourceColor](../../ui/ts-types.md) | - | Background color of the QR code.|
+In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
+
+| Name| Type| Description|
+| -------- | -------- | -------- |
+| color | [ResourceColor](ts-types.md#resourcecolor) | Color of the QR code.<br>Default value: **Color.Black**|
+| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the QR code.<br>Default value: **Color.White**|
 
 
 ## Events
 
-Among all the universal events, only the click event is supported.
+Among all the universal events, only the [click event](ts-universal-events-click.md) is supported.
 
 
 ## Example

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

 # Radio
 
-> **NOTE**<br>
-> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
-
-
 The **\<Radio>** component allows users to select from a set of mutually exclusive options.
 
-
-## Required Permissions
-
-None
+>  **NOTE**
+>
+>  This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
 
 ## Child Components
@@ -21,30 +16,34 @@ None
 
 Radio(options: {value: string, group: string})
 
-- Parameters
-  | Name| Type| Mandatory| Default Value| Description| 
-  | -------- | -------- | -------- | -------- | -------- |
-  | value | string | Yes | - | Value of the current radio button. |
-  | group | string | Yes | - | Name of the group to which the radio button belongs. Only one radio button in a given group can be selected at a time. |
+**Parameters**
 
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| value | string | Yes| Value of the current radio button.|
+| group | string | Yes| Name of the group to which the radio button belongs. Only one radio button in a given group can be selected at a time.|
 
 ## Attributes
 
-| Name | Type | Default Value | Description | 
-| -------- | -------- | -------- | -------- |
-| checked | boolean | false | Whether the radio button is selected. | 
+In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
 
+| Name| Type| Description|
+| -------- | -------- | -------- |
+| checked | boolean | Whether the radio button is selected.<br>Default value: **false**|
 
 ## Events
 
-| Name | Description | 
+In addition to the [universal events](ts-universal-events-click.md), the following events are supported.
+
+| Name| Description|
 | -------- | -------- |
-| onChange(callback: (value: boolean) => void) | Triggered when the selected state of the radio button changes.<br> -The value **true** means that the radio button is selected.<br> -The value **false** means that the radio button is not selected. | 
+| onChange(callback: (isChecked: boolean) => void) | Triggered when the selected state of the radio button changes.<br> - If **isChecked** is **true**, the radio button is selected.<br> - If **isChecked** is **false**, the radio button is not selected.|
 
 
 ## Example
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct RadioExample {
@@ -55,8 +54,8 @@ struct RadioExample {
         Radio({ value: 'Radio1', group: 'radioGroup' }).checked(true)
           .height(50)
           .width(50)
-          .onChange((value: boolean) => {
-            console.log('Radio1 status is ' + value)
+          .onChange((isChecked: boolean) => {
+            console.log('Radio1 status is ' + isChecked)
           })
       }
       Column() {
@@ -64,8 +63,8 @@ struct RadioExample {
         Radio({ value: 'Radio2', group: 'radioGroup' }).checked(false)
           .height(50)
           .width(50)
-          .onChange((value: boolean) => {
-            console.log('Radio2 status is ' + value)
+          .onChange((isChecked: boolean) => {
+            console.log('Radio2 status is ' + isChecked)
           })
       }
       Column() {
@@ -73,8 +72,8 @@ struct RadioExample {
         Radio({ value: 'Radio3', group: 'radioGroup' }).checked(false)
           .height(50)
           .width(50)
-          .onChange((value: boolean) => {
-            console.log('Radio3 status is ' + value)
+          .onChange((isChecked: boolean) => {
+            console.log('Radio3 status is ' + isChecked)
           })
       }
     }.padding({ top: 30 })

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

 # Rating
 
+The **\<Rating>** component provides a rating bar.
 
-> **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;Rating&gt;** component provides a rating bar.
-
-
-## Required Permissions
-
-None
-
-
 ## Child Components
 
-None
+Not supported
 
 
 ## APIs
 
 Rating(options?: { rating: number, indicator?: boolean })
 
-- Parameters
-  | Name | Type | Mandatory | Default Value | Description | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | rating | number | Yes | 0 | Value to rate. | 
-  | indicator | boolean | No | false | Used only as an indicator and cannot be operated. | 
+**Parameters**
+
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| rating | number | Yes| Value to rate.<br>Default value: **0**|
+| indicator | boolean | No| Used only as an indicator and cannot be operated.<br>Default value: **false**|
 
 
 ## Attributes
 
-| Name | Type | Default Value | Description | 
-| -------- | -------- | -------- | -------- |
-| stars | number | 5 | Total number of stars. | 
-| stepSize | number | 0.5 | Step of an operation. | 
-| starStyle | {<br/>backgroundUri: string,<br/>foregroundUri: string,<br/>secondaryUri?: string<br/>} | - | **backgroundSrc**: image link of the unselected star. You can customize the image or use the default image. Only local images are supported.<br/>**foregroundSrc**: image path of the selected star. You can customize the image or use the default image. Only local images are supported.<br/>**secondarySrc**: image path of the partially selected star. You can customize the image or use the default image. Only local images are supported. | 
+| Name| Type| Description|
+| -------- | -------- | -------- |
+| stars | number | Total number of stars.<br>Default value: **5**|
+| stepSize | number | Step of an operation.<br>Default value: **0.5**|
+| starStyle | {<br>backgroundUri: string,<br>foregroundUri: string,<br>secondaryUri?: string<br>} | **backgroundUri**: image link of the unselected star. You can use the default image or a custom local image.<br>**foregroundUri**: image path of the selected star. You can use the default image or a custom local image.<br>**secondaryUir**: image path of the partially selected star. You can use the default image or a custom local image.|
 
 
 ## Events
 
-| Name | Description | 
+| Name| Description|
 | -------- | -------- |
-| onChange(callback:(value: number) =&gt; void) | Triggered when the rating value changes. | 
+| onChange(callback:(value: number) =&gt; void) | Triggered when the rating value changes.|
 
 
 ## Example
 
-
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct RatingExample {

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

@@ -6,7 +6,7 @@
 >  
 >  This component is supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version.
 >
->  This component is a system API.
+>  The APIs provided by this component are system APIs.
 
 ## Child Components
 
@@ -31,7 +31,7 @@ Implements a target window, which is used to remotely control the animation.
 | bundleName  | string | Process corresponding to the animation window.|
 | abilityName | string | Ability corresponding to the animation window.|
 | windowBounds | [RRect](#rrect) | Actual size of the animation window.|
-| missionId  | number | Mission ID. |
+| missionId  | number | Mission ID.|
 
 ## RRect
 Implements a rounded rectangle.

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

 # RichText
 
-> **NOTE**<br>
-> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
-
 The **\<RichText>** component parses and displays HTML text.
 
+>  **NOTE**
+>
+>  This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
+
 ## Required Permissions
 
 None
@@ -15,40 +16,39 @@ None
 
 ## APIs
 
-RichText\(content:string\)
+RichText(content:string)
 
-- Parameters
+**Parameters**
 
-  | Name| Type | Mandatory | Default Value | Description |
-  | -------- | -------- | -------- | -------- | -------- |
-  | content | string | Yes| - | Text string in HTML format. |
+| Name| Type| Mandatory| Default Value| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| content | string | Yes| - | String in HTML format.|
 
 
 ## Events
 
 
-| Name | Description|
+| Name| Description|
 | -------- | -------- |
-| onStart() => void | Triggered when web page loading starts. |
-| onComplete() => void | Triggered when web page loading is completed. |
+| onStart(callback: () => void)    | Triggered when web page loading starts.  |
+| onComplete(callback: () => void) | Triggered when web page loading is completed.|
 
 ## Supported Tags
 
-| Name | Description | Example |
+| Name| Description| Example|
 | -------- | -------- | -------- |
-| \<h1>--\<h6> | Defines six levels of headings in the HTML document. \<h1> defines the most important heading, and \<h6> defines the least important heading. | \<h1>This is an H1 heading\</h1> \<h2>This is an H2 heading\</h2> |
-| \<p>\</p> | Defines a paragraph. | \<p>This is a paragraph\</p> |
-| \<br/> | Inserts a newline character. | \<p>This is a paragraph\<br/>This is a new paragraph\</p>|
-| \<hr/> | Defines a thematic break (such as a shift of topic) on an HTML page and creates a horizontal line. | \<p>This is a paragraph\</p>\<hr/>\<p>This is a paragraph\</p> |
-| \<div>\</div> | Defines a generic container that is generally used to group block-level elements. It allows you to apply CSS styles to multiple elements at the same time. | \<div style='color:#0000FF'>\<h3>This is the heading in a div element\</h3>\</div> |
-| \<i>\</i> | Displays text in italic style. | \<i>This is in italic style\</i> |
-| \<u>\</u> | Defines text that should be styled differently or have a non-textual annotation, such as misspelt words or a proper name in Chinese text. It is recommended that you avoid using the \<u> tag where it could be confused with a hyperlink. | \<p>\<u>This is an underlined paragraph\<u>\<p> |
-| \<style>\</style> | Used to embed CSS within an HTML document. | \<style>h1{color:red;}p{color:blue;}\</style> |
-| style | Defines the inline style of an element and is placed inside the tag. Use quotation marks (') to separate the styling text and use semicolons (;) to separate styles, for example, **style='width: 500px;height: 500px;border: 1px solid;margin: 0 auto;'**. | \<h1 style='color:blue;text-align:center'>This is a heading\</h1>\<p style='color:green'>This is a paragraph\</p> |
-| \<script>\</script> | Used to embed or reference a client-side script, such as JavaScript. | \<script>document.write("Hello World!")\</script> |
+| \<h1>--\<h6> | Defines six levels of headings in the HTML document. \<h1> defines the most important heading, and \<h6> defines the least important heading.| \<h1>This is an H1 heading\</h1> \<h2>This is an H2 heading\</h2>|
+| \<p>\</p> | Defines a paragraph.| \<p>This is a paragraph\</p>|
+| \<br/> | Inserts a newline character.| \<p>This is a paragraph\<br/>This is a new paragraph\</p>|
+| \<hr/> | Defines a thematic break (such as a shift of topic) on an HTML page and creates a horizontal line.| \<p>This is a paragraph\</p>\<hr/>\<p>This is a paragraph\</p> |
+| \<div>\</div> | Defines a generic container that is generally used to group block-level elements. It allows you to apply CSS styles to multiple elements at the same time.| \<div style='color:#0000FF'>\<h3>This is the heading in a div element\</h3>\</div> |
+| \<i>\</i> | Displays text in italic style.| \<i>This is in italic style\</i>|
+| \<u>\</u> | Defines text that should be styled differently or have a non-textual annotation, such as misspelt words or a proper name in Chinese text. It is recommended that you avoid using the \<u> tag where it could be confused with a hyperlink.| \<p>\<u>This is an underlined paragraph\</u>\</p> |
+| \<style>\</style> | Used to embed CSS within an HTML document.| \<style>h1{color:red;}p{color:blue;}\</style> |
+| style | Defines the inline style of an element and is placed inside the tag. Use quotation marks (') to separate the styling text and use semicolons (;) to separate styles, for example, **style='width: 500px;height: 500px;border: 1px solid;margin: 0 auto;'**.| \<h1 style='color:blue;text-align:center'>This is a heading\</h1>\<p style='color:green'>This is a paragraph\</p> |
+| \<script>\</script> | Used to embed or reference a client-side script, such as JavaScript.| \<script>document.write("Hello World!")\</script> |
 
 ## Example
-
 You can preview how this component looks on a real device. The preview is not yet available in the DevEco Studio Previewer.
 ```ts
 // xxx.ets

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

 # ScrollBar
 
->  **NOTE**
-> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
-
-
 The **\<ScrollBar>** is used together with scrollable components, such as **\<List>**, **\<Grid>**, and **\<Scroll>**.
 
-
-## Required Permissions
-
-None
+>  **NOTE**
+>
+>  This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
 
 ## Child Components
@@ -21,23 +16,26 @@ This component can contain a single child component.
 
 ScrollBar(value: { scroller: Scroller, direction?: ScrollBarDirection, state?: BarState })
 
-- ScrollBarOptions
-  | Name| Type| Mandatory| Default Value| Description|
-  | -------- | -------- | -------- | -------- | -------- |
-  | scroller | [Scroller](ts-container-scroll.md#scroller) | Yes| - | Scroller, which can be bound to scrollable components.|
-  | direction | ScrollBarDirection | No| ScrollBarDirection.Vertical | Scrollbar direction in which scrollable components scroll.|
-  | state | [BarState](ts-appendix-enums.md#barstate) | No| BarState.Auto | Scrollbar state.|
-
-  >  **NOTE**
-  > The **<\ScrollBar>** component defines the behavior style of the scrollable area, and its subnodes define the behavior style of the scrollbar.
-  > 
-  > This component is bound to a scrollable component through **scroller**, and can be used to scroll the scrollable component only when their directions are the same. The **\<ScrollBar>** component can be bound to only one scrollable component, and vice versa.
-
-- ScrollBarDirection enums
-  | Name| Description| 
-  | -------- | -------- |
-  | Vertical | Vertical scrollbar.| 
-  | Horizontal | Horizontal scrollbar.|
+**Parameters**
+
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| scroller | [Scroller](ts-container-scroll.md#scroller) | Yes| Scroller, which can be bound to scrollable components.|
+| direction | ScrollBarDirection | No| Scrollbar direction in which scrollable components scroll.<br>Default value: **ScrollBarDirection.Vertical**|
+| state | [BarState](ts-appendix-enums.md#barstate) | No| Scrollbar state.<br>Default value: **BarState.Auto**|
+
+>  **NOTE**
+>
+>  The **\<ScrollBar>** component defines the behavior style of the scrollable area, and its subnodes define the behavior style of the scrollbar.
+>
+>  This component is bound to a scrollable component through **scroller**, and can be used to scroll the scrollable component only when their directions are the same. The **\<ScrollBar>** component can be bound to only one scrollable component, and vice versa.
+
+## ScrollBarDirection
+
+| Name| Description|
+| -------- | -------- |
+| Vertical | Vertical scrollbar.|
+| Horizontal | Horizontal scrollbar.|
 
 
 ## Example

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

@@ -6,10 +6,6 @@ The **\<Search>** component provides an input area for users to search.
 >
 > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions
-
-None
-
 ## Child Components
 
 Not supported
@@ -18,25 +14,27 @@ Not supported
 
 Search(options?: { value?: string; placeholder?: string; icon?: string; controller?: SearchController })
 
-- Parameters
-
-  | Name        | Type            | Mandatory  | Default Value | Description                                    |
-  | ----------- | ---------------- | ---- | ---- | ---------------------------------------- |
-  | value       | string           | No   | -    | Text input in the search text box.                                  |
-  | placeholder | string           | No   | -    | Text displayed when there is no input.                              |
-  | icon        | string           | No   | -    | Path to the search icon. By default, the system search icon is used. The supported icon formats are .svg, .jpg, and .png.|
-  | controller  | SearchController | No   | -    | Controller.                                    |
+**Parameters**
 
+| Name     | Type        | Mandatory| Description                                                    |
+| ----------- | ---------------- | ---- | ------------------------------------------------------------ |
+| value       | string           | No  | Text input in the search text box.                                                |
+| placeholder | string           | No  | Text displayed when there is no input.                                        |
+| icon        | string           | No  | Path to the search icon. By default, the system search icon is used. The supported icon formats are .svg, .jpg, and .png.|
+| controller  | SearchController | No  | Controller.                                                    |
 
 ## Attributes
 
-| Name                     | Type                                    | Default Value | Description                   |
-| ----------------------- | ---------------------------------------- | ---- | --------------------- |
-| searchButton            | string                                   | –   | Text on the search button located next to the search text box. By default, there is no search button.|
-| placeholderColor        | [ResourceColor](../../ui/ts-types.md)    | -    | Placeholder text color.     |
-| placeholderFont         | [Font](../../ui/ts-types.md)             | -    | Placeholder text style.   |
-| textFont                | [Font](../../ui/ts-types.md)             | -    | Text font for the search text box.          |
-| copyOption<sup>9+</sup> | [CopyOptions](ts-basic-components-text.md) | CopyOptions.CrossDevice | Whether copy and paste is allowed.|
+In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
+
+| Name                   | Type                                        | Description                                          |
+| ----------------------- | ------------------------------------------------ | ---------------------------------------------- |
+| searchButton            | string                                           | Text on the search button located next to the search text box. By default, there is no search button.    |
+| placeholderColor        | [ResourceColor](ts-types.md#resourcecolor) | Placeholder text color.                         |
+| placeholderFont         | [Font](ts-types.md#font) | Placeholder text style.                     |
+| textFont                | [Font](ts-types.md#font)     | Text font for the search text box.                        |
+| copyOption<sup>9+</sup> | [CopyOptions](ts-appendix-enums.md#copyoptions9) | Whether copy and paste is allowed.                          |
+| textAlign               | [TextAlign](ts-appendix-enums.md#textalign)      | Text alignment mode.<br>Default value: **TextAlign.Start**|
 
 ## Events
 
@@ -62,13 +60,11 @@ caretPosition(value: number): void
 
 Sets the position of the caret.
 
-- Parameters
-
-  | Name  | Type  | Mandatory  | Default Value | Description             |
-  | ----- | ------ | ---- | ---- | ----------------- |
-  | value | number | Yes   | -    | Length from the start of the character string to the position where the caret is located.|
-
+**Parameters**
 
+| Name| Type| Mandatory| Description                          |
+| ------ | -------- | ---- | ---------------------------------- |
+| value  | number   | Yes  | Length from the start of the character string to the position where the caret is located.|
 
 ##  Example
 

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

@@ -6,45 +6,41 @@ The **<Select\>** component provides a drop-down list box that allows users to s
 >
 >  This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions
-
-None
-
 ## Child Components
 
 Not supported
 
 ## APIs
 
-Select(options: Array\<SelectOption>\)
+Select(options: Array\<SelectOption\>)
 
-- SelectOption parameters
+**SelectOption**
 
-  | Name| Type| Mandatory| Default Value| Description|
-  | ------ | ----------------------------------------------- | ---- | ------ | -------------- |
-  | value | [ResourceStr](../../ui/ts-types.md) | Yes | - | Value of an option in the drop-down list box. |
-  | icon | [ResourceStr](../../ui/ts-types.md) | No | - | Icon of an option in the drop-down list box. |
+| Name| Type                           | Mandatory| Description      |
+| ------ | ----------------------------------- | ---- | -------------- |
+| value  | [ResourceStr](ts-types.md#resourcestr) | Yes  | Value of an option in the drop-down list box.|
+| icon   | [ResourceStr](ts-types.md#resourcestr) | No  | Icon of an option in the drop-down list box.|
 
 ## Attributes
 
-| Name| Type| Default Value| Description|
-| ----------------------- | --------------------------------------------------- | ------ | ----------------------------------------------- |
-| selected                | number                                              | -      | Index of the initial selected option in the drop-down list box. The index of the first option is **0**. |
-| value                   | string                                              | -      | Text of the drop-down button. |
-| font                    | [Font](../../ui/ts-types.md) | -      | Text font of the drop-down button. |
-| fontColor               | [ResourceColor](../../ui/ts-types.md) | -      | Text color of the drop-down button. |
-| selectedOptionBgColor   | [ResourceColor](../../ui/ts-types.md) | -      | Background color of the selected option in the drop-down list box. |
-| selectedOptionFont      | [Font](../../ui/ts-types.md) | -      | Text font of the selected option in the drop-down list box. |
-| selectedOptionFontColor | [ResourceColor](../../ui/ts-types.md) | -      | Text color of the selected option in the drop-down list box. |
-| optionBgColor           | [ResourceColor](../../ui/ts-types.md) | -      | Background color of an option in the drop-down list box. |
-| optionFont              | [Font](../../ui/ts-types.md) | -      | Text font of an option in the drop-down list box. |
-| optionFontColor         | [ResourceColor](../../ui/ts-types.md) | -      | Text color of an option in the drop-down list box. |
+| Name                   | Type                             | Description                                         |
+| ----------------------- | ------------------------------------- | --------------------------------------------- |
+| selected                | number                                | Index of the initial selected option in the drop-down list box. The index of the first option is **0**.|
+| value                   | string                                | Text of the drop-down button.                 |
+| font                    | [Font](ts-types.md#font) | Text font of the drop-down button.                 |
+| fontColor               | [ResourceColor](ts-types.md#resourcecolor) | Text color of the drop-down button.                 |
+| selectedOptionBgColor   | [ResourceColor](ts-types.md#resourcecolor) | Background color of the selected option in the drop-down list box.                 |
+| selectedOptionFont      | [Font](ts-types.md#font) | Text font of the selected option in the drop-down list box.               |
+| selectedOptionFontColor | [ResourceColor](ts-types.md#resourcecolor) | Text color of the selected option in the drop-down list box.               |
+| optionBgColor           | [ResourceColor](ts-types.md#resourcecolor) | Background color of an option in the drop-down list box.                     |
+| optionFont              | [Font](ts-types.md#font) | Text font of an option in the drop-down list box.                   |
+| optionFontColor         | [ResourceColor](ts-types.md#resourcecolor) | Text color of an option in the drop-down list box.                   |
 
 ## Events
 
-| Name| Description|
-| ------------------------------------------------------------ | ------------------------------------------------------------ |
-| onSelect(callback: (index: number, value?:string) => void) | Invoked when an option in the drop-down list box is selected. **index** indicates the index of the selected option. **value** indicates the value of the selected option. |
+| Name                                                       | Description                                                  |
+| ---------------------------------------------------------- | ------------------------------------------------------------ |
+| onSelect(callback: (index: number, value?:string) => void) | Invoked when an option in the drop-down list box is selected.<br>**index**: index of the selected option.<br/>**value**: value of the selected option. |
 
 ##  Example
 

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

 # Slider
 
+The **\<Slider>** component is used to quickly adjust settings, such as the volume and brightness.
 
 >  **NOTE**
 >
 >  This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-The *\<Slider>** component is used to quickly adjust settings, such as the volume and brightness.
-
-
-## Required Permissions
-
-None
-
-
 ## Child Components
 
 Not supported
@@ -21,57 +14,61 @@ Not supported
 
 ## APIs
 
-Slider(value:{value?: number, min?: number, max?: number, step?: number, style?: SliderStyle, direction?: Axis})
+Slider(options?: {value?: number, min?: number, max?: number, step?: number, style?: SliderStyle, direction?: Axis, reverse?: boolean})
 
-- Parameters
-    | Name                   | Type                                    | Mandatory | Default Value      | Description                              |
-    | ---------------------- | --------------------------------------- | --------- | ------------------ | ---------------------------------------- |
-    | value                  | number                                  | No        | 0                  | Current progress.                        |
-    | min                    | number                                  | No        | 0                  | Minimum value.                           |
-    | max                    | number                                  | No        | 100                | Maximum value.                           |
-    | step                   | number                                  | No        | 1                  | Step of the slider. When the corresponding step is set, the slider slides intermittently. |
-    | style                  | SliderStyle                             | No        | SliderStyle.OutSet | Style of the slider.                     |
-    | direction<sup>8+</sup> | [Axis](ts-appendix-enums.md#axis-enums) | No        | Axis.Horizontal    | Whether the slider moves horizontally or vertically. |
-    | reverse<sup>8+</sup>   | boolean                                 | No        | false              | Whether the slider values are reversed.  |
+**Parameters**
 
-- SliderStyle enums
-    | Name   | Description                       |
-    | ------ | --------------------------------- |
-    | OutSet | The slider is on the slider rail. |
-    | InSet  | The slider is in the slider rail. |
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| value | number | No| Current progress.<br>Default value: **0**|
+| min | number | No| Minimum value.<br>Default value: **0**|
+| max | number | No| Maximum value.<br>Default value: **100**|
+| step | number | No| Step of the slider. When the corresponding step is set, the slider slides intermittently.<br>Default value: **1**|
+| style | SliderStyle | No| Style of the slider.<br>Default value: **SliderStyle.OutSet**|
+| direction<sup>8+</sup> | [Axis](ts-appendix-enums.md#axis) | No| Whether the slider moves horizontally or vertically.<br>Default value: **Axis.Horizontal**|
+| reverse<sup>8+</sup> | boolean | No| Whether the slider values are reversed.<br>Default value: **false**|
+
+## SliderStyle
+
+| Name| Description|
+| -------- | -------- |
+| OutSet | The slider is on the slider rail.|
+| InSet | The slider is in the slider rail.|
 
 
 ## Attributes
 
 Touch target configuration is not supported.
 
-| Name          | Type    | Default Value | Description                              |
-| ------------- | ------- | ------------- | ---------------------------------------- |
-| blockColor    | Color   | -             | Color of the slider.                     |
-| trackColor    | Color   | -             | Background color of the slider.          |
-| selectedColor | Color   | -             | Color of the slider rail that has been slid. |
-| showSteps     | boolean | false         | Whether to display the current step.     |
-| showTips      | boolean | false         | Whether to display a bubble to indicate the percentage when sliding. |
+| Name| Type| Description|
+| -------- | -------- | -------- |
+| blockColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the slider.|
+| trackColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the slider.|
+| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the slider rail that has been slid.|
+| showSteps | boolean | Whether to display the current step.<br>Default value: **false**|
+| showTips | boolean | Whether to display a bubble to indicate the percentage when sliding.<br>Default value: **false**|
+| trackThickness      | [Length](ts-types.md#length) | Track thickness of the slider.|
 
 
 ## Events
 
-Among all the universal events, only **OnAppear** and **OnDisAppear** are supported.
+In addition to the **OnAppear** and **OnDisAppear** universal events, the following events are supported.
 
-| Name                                     | Description                              |
-| ---------------------------------------- | ---------------------------------------- |
-| onChange(callback: (value: number, mode: SliderChangeMode) =&gt; void) | Callback invoked when the slider slides.<br/>**value**: current progress.<br/>**mode**: dragging state. |
+| Name| Description|
+| -------- | -------- |
+| onChange(callback: (value: number, mode: SliderChangeMode) =&gt; void) | Invoked when the slider slides.<br>**value**: current progress.<br>**mode**: dragging state.|
 
-- SliderChangeMode enums
-    | Name   | Value | Description                         |
-    | ------ | ----- | ----------------------------------- |
-    | Begin  | 0     | The user starts to drag the slider. |
-    | Moving | 1     | The user is dragging the slider.    |
-    | End    | 2     | The user stops dragging the slider. |
+## SliderChangeMode
 
+| Name| Value| Description|
+| -------- | -------- | -------- |
+| Begin | 0 | The user starts to drag the slider.|
+| Moving | 1 | The user is dragging the slider.|
+| End | 2 | The user stops dragging the slider.|
+| Click    | 3    | The user moves the slider by touching the slider rail.|
 
-## Example
 
+## Example
 
 ```ts
 // xxx.ets

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

 # Span
 
+The **\<Span>** component is used to display inline text in the **\<Text>** component.
 
-> **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;Span&gt;** component is used to display a paragraph of textual information. It can be used only as a child component in the **&lt;Text&gt;** component.
-
-
-## Required Permissions
-
-None
-
-
 ## Child Components
 
-None
+Not supported
 
 
 ## APIs
 
-Span(content: string)
+Span(value: string | Resource)
+
+**Parameters**
+
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| value | string \| [Resource](ts-types.md#resource) | Yes| Plain text.|
 
-- Parameters
-  | Name | Type | Mandatory | Default Value | Description |
-  | -------- | -------- | -------- | -------- | -------- |
-  | content | string | Yes | - | Text content. |
 
 
 ## Attributes
 
-In addition to the text style attributes, the attributes below are supported.
+In addition to the [universal text style](ts-universal-attributes-text-style.md) attributes, the following attributes are supported.
 
-| Name | Type | Default Value | Description |
-| -------- | -------- | -------- | -------- |
-| decoration | {<br/>type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype-enums),<br/>color?: Color<br/>} | {<br/>type: TextDecorationType.None<br/>} | Style and color of the text decorative line. |
-| textCase | [TextCase](ts-appendix-enums.md#textcase-enums) | Normal | Text case. |
+| Name| Type| Description|
+| -------- | -------- | -------- |
+| decoration | {<br>type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype),<br>color?: [ResourceColor](ts-types.md#resourcecolor)<br>} | Style and color of the text decorative line.<br>Default value: {<br>type: TextDecorationType.None<br>color: Color.Black<br>} |
+| letterSpacing       | number \| string  | Letter spacing.                                |
+| textCase | [TextCase](ts-appendix-enums.md#textcase) | Text case.<br>Default value: **TextCase.Normal**|
 
 
 ## Events
 
-Among all the universal events, only the click event is supported.
+Among all the [universal events](ts-universal-attributes-click.md), only the click event is supported.
 
-> **NOTE**<br>
-> As the **&lt;Span&gt;** component does not have size information, the **target** attribute of the **ClickEvent** object returned by the click event is invalid.
+>  **NOTE**
+>
+>  As the **\<Span>** component does not include size information, the **target** attribute of the **ClickEvent** object returned by the click event is invalid.
 
 
 ## Example
 
-
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct SpanExample {

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

@@ -2,18 +2,12 @@
 
 The **\<Stepper>** component provides a step navigator.
 
+
 >  **NOTE**
 >
 >  This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-
-
-## Required Permissions
-
-None
-
-
 ## Child Components
 
 Only the child component **\<[StepperItem](ts-basic-components-stepperitem.md)>** is supported.
@@ -23,11 +17,10 @@ Only the child component **\<[StepperItem](ts-basic-components-stepperitem.md)>*
 
 Stepper(value?: { index?: number })
 
-
-- Parameters
-  | Name | Type | Mandatory | Default Value | Description |
-  | -------- | -------- | -------- | -------- | -------- |
-  | index | number | No | 0 | Index of the **\<StepperItem>** that is currently displayed. |
+**Parameters**
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| index | number | No| Index of the **\<StepperItem>** that is currently displayed.<br>Default value: **0** |
 
 
 ## Attributes
@@ -37,16 +30,17 @@ None
 
 ## Events
 
-| Name | Description |
+| Name| Description|
 | -------- | -------- |
 | onFinish(callback: () =&gt; void) | Invoked when the **nextLabel** of the last **\<StepperItem>** in the **\<Stepper>** is clicked. |
 | onSkip(callback: () =&gt; void) | Invoked when the current **\<StepperItem>** is **ItemState.Skip** and the **nextLabel** is clicked. |
-| onChange(callback: (prevIndex?: number, index?: number) =&gt; void) | Invoked when the text button on the left or right is clicked to switch between steps.<br/>- **prevIndex**: index of the step page before the switching.<br/>- **index**: index of the step page after the switching, that is, index of the previous or next page. |
+| onChange(callback: (prevIndex?: number, index?: number) =&gt; void) | Invoked when the text button on the left or right is clicked to switch between steps.<br>- **prevIndex**: index of the step page before the switching.<br>- **index**: index of the step page after the switching, that is, index of the previous or next page. |
+| onNext(callback: (index?: number, pendingIndex?: number) =&gt; void) | Invoked when a user switches to the next step.<br>- **index**: index of the current step page.<br>- **pendingIndex**: index of the next page. |
+| onPrevious(callback: (index?: number, pendingIndex?: number) =&gt; void) | Invoked when a user switches to the previous step.<br>- **index**: index of the current step page.<br>- **pendingIndex**: index of the previous page. |
 
 
 ## Example
 
-
 ```ts
 // xxx.ets
 @Entry
@@ -128,4 +122,3 @@ struct StepperExample {
 
 
 ![en-us_image_0000001250678457](figures/en-us_image_0000001250678457.gif)
-

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

 # StepperItem
 
-
-> **NOTE**<br>
-> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
-
-
-The **&lt;StepperItem&gt;** component provides an element for the **&lt;Stepper&gt;** component.
+The **\<StepperItem>** component provides an element for the **\<Stepper>** component.
 
 
-## Required Permissions
-
-None
+>  **NOTE**
+>
+>  This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
 
 ## Child Components
@@ -25,22 +20,22 @@ StepperItem()
 
 ## Attributes
 
-| Name | Type | Default Value | Description |
-| -------- | -------- | -------- | -------- |
-| prevLabel | string | - | When the **&lt;Stepper&gt;** contains more than one page, the default value for all pages except the first page is **Back**. |
-| nextLabel | string | - | When the stepper contains more than one page, the default value for the last page is **Start**, and the default value for other pages is **Next**. |
-| status | ItemState | ItemState.Normal | Status of the **&lt;StepperItem&gt;**. |
+| Name| Type| Description|
+| -------- | -------- | -------- |
+| prevLabel | string | When the **\<Stepper>** contains more than one page, the default value for all pages except the first page is **Back**.|
+| nextLabel | string | When the stepper contains more than one page, the default value for the last page is **Start**, and the default value for other pages is **Next**.|
+| status | ItemState | Status of the **\<StepperItem>**.<br>Default value: **ItemState.Normal**|
 
-- ItemState enums
-  | Name | Description | 
-  | -------- | -------- |
-  | Normal | The right button is clickable and can navigate users to the next **&lt;StepperItem&gt;** when it is clicked. | 
-  | Disabled | The right button is grayed out and unavailable. | 
-  | Waiting | The right button is not displayed, and a progress bar is displayed instead. | 
-  | Skip | The current **&lt;StepperItem&gt;** is skipped, and the next **&lt;StepperItem&gt;** is displayed. | 
+## ItemState
+
+| Name| Description|
+| -------- | -------- |
+| Normal | The right button is clickable and can navigate users to the next **\<StepperItem>** when it is clicked.|
+| Disabled | The right button is grayed out and unavailable.|
+| Waiting | The right button is not displayed, and a progress bar is displayed instead.|
+| Skip | The current **\<StepperItem>** is skipped, and the next **\<StepperItem>** is displayed.|
 
 
 ## Example
 
 See [Stepper](ts-basic-components-stepper.md).
-

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

@@ -7,11 +7,6 @@ The **\<Text>** component is used to display a piece of textual information.
 >  This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-## Required Permissions
-
-None
-
-
 ## Child Components
 
 This component can contain the [\<Span>](ts-basic-components-span.md) child component.
@@ -19,31 +14,31 @@ This component can contain the [\<Span>](ts-basic-components-span.md) child comp
 
 ## APIs
 
-Text(content?: ResourceStr)
+Text(content?: string | Resource)
 
-- Parameters
-  | Name| Type| Mandatory| Default Value| Description|
-  | -------- | -------- | -------- | -------- | -------- |
-  | content | [ResourceStr](../../ui/ts-types.md#resourcestr8) | No| '' | Text content. The content and style set for the **\<Text>** component do not take effect when it contains the **\<Span>** child component.|
+**Parameters**
 
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| content | string \| [Resource](ts-types.md#resource) | No| Text content. The content and style set for the **\<Text>** component do not take effect when it contains the **\<Span>** child component.<br>Default value: **' '**|
 
 ## Attributes
 
-In addition to the following attributes, the attributes in [Text Style](ts-universal-attributes-text-style.md) are supported.
-
-| Name| Type| Default Value| Description|
-| -------- | -------- | -------- | -------- |
-| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | TextAlign.Start | Text alignment mode of multiple lines of text.|
-| textOverflow | {overflow: [TextOverflow](ts-appendix-enums.md#textoverflow)} | {overflow: TextOverflow.Clip} | Display mode when the text is too long.<br>**NOTE**<br/>Text is truncated at the transition between words. To truncate text in the middle of a word, add **\u200B** between characters.<br>This attribute must be used with `maxLines` to take effect. |
-| maxLines | number | Infinity | Maximum number of lines in the text.<br>**NOTE**<br/>By default, text is automatically folded. If this parameter is specified, the text does not exceed the specified number of lines. If there is extra text, you can use `textOverflow` to specify the truncation mode. |
-| lineHeight     | string \| number \| [Resource](../../ui/ts-types.md)  | - | Text line height. If the value is less than or equal to **0**, the line height is not limited and the font size is adaptive. If the value of the number type, the unit fp is used.|
-| decoration     | {<br>type: TextDecorationType,<br>color?: [ResourceColor](../../ui/ts-types.md)<br>} | {<br>type: TextDecorationType.None,<br>color: Color.Black<br>} | Style and color of the text decorative line.                          |
-| baselineOffset | number \| string         | -         | Offset of the text baseline.                             |
-| letterSpacing       | [Length](../../ui/ts-types.md)                 | -                          | Letter spacing.                                |
-| minFontSize       | number \| string \| [Resource](../../ui/ts-types.md)      | -     | Minimum font size.                                |
-| maxFontSize       | number \| string \| [Resource](../../ui/ts-types.md)      | -     | Maximum font size.                                |
-| textCase | [TextCase](ts-appendix-enums.md#textcase) | TextCase.Normal | Text case.|
-| copyOption<sup>9+</sup> | [CopyOptions](ts-appendix-enums.md#copyoptions9) | CopyOptions.None | Whether copy and paste is allowed.|
+In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
+
+| Name| Type| Description|
+| -------- | -------- | -------- |
+| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | Text alignment mode of multiple lines of text.<br>Default value: **TextAlign.Start**|
+| textOverflow | {overflow: [TextOverflow](ts-appendix-enums.md#textoverflow)} | Display mode when the text is too long.<br>Default value: **{overflow: TextOverflow.Clip}**<br>**NOTE**<br/>Text is truncated at the transition between words. To truncate text in the middle of a word, add **\u200B** between characters.<br>This attribute must be used with `maxLines` to take effect. |
+| maxLines | number | Maximum number of lines in the text.<br>Default value: **Infinity**<br>**NOTE**<br/>By default, text is automatically folded. If this attribute is specified, the text will not exceed the specified number of lines. If there is extra text, you can use `textOverflow` to specify the truncation mode. |
+| lineHeight     | string \| number \| [Resource](ts-types.md#resource)  | Text line height. If the value is less than or equal to **0**, the line height is not limited and the font size is adaptive. If the value of the number type, the unit fp is used.|
+| decoration     | {<br>type: TextDecorationType,<br>color?: [ResourceColor](ts-types.md#resourcecolor)<br>} | Style and color of the text decorative line.<br>Default value: {<br>type: TextDecorationType.None,<br>color: Color.Black<br>} |
+| baselineOffset | number \| string | Offset of the text baseline.                             |
+| letterSpacing       | number \| string | Letter spacing.                                |
+| minFontSize       | number \| string \| [Resource](ts-types.md#resource)      | Minimum font size.                                |
+| maxFontSize       | number \| string \| [Resource](ts-types.md#resource)      | Maximum font size.                                |
+| textCase | [TextCase](ts-appendix-enums.md#textcase) | Text case.<br>Default value: **TextCase.Normal**|
+| copyOption<sup>9+</sup> | [CopyOptions](ts-appendix-enums.md#copyoptions9) | Whether copy and paste is allowed.<br>Default value: **CopyOptions.None**|
 
 >  **NOTE**
 >

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

@@ -7,11 +7,6 @@ The **\<TextArea>** component provides multi-line text input and responds to cer
 >  This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-## Required Permissions
-
-None
-
-
 ## Child Components
 
 Not supported
@@ -21,36 +16,38 @@ Not supported
 
 TextArea(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextAreaController})
 
-- Parameters
-  | Name                    | Type                                    | Mandatory  | Default Value | Description          |
-  | ----------------------- | ---------------------------------------- | ---- | ---- | -------------- |
-  | placeholder      | [ResourceStr](../../ui/ts-types.md)  | No   | -    | Text displayed when there is no input.    |
-  | text             | [ResourceStr](../../ui/ts-types.md)  | No   | -    | Current text input.    |
-  | controller<sup>8+</sup> | [TextAreaController](#textareacontroller8) | No   | -    | Text area controller.|
+**Parameters**
 
+| Name                    | Type                                    | Mandatory  | Description          |
+| ----------------------- | ---------------------------------------- | ---- | -------------- |
+| placeholder      | [ResourceStr](ts-types.md#resourcestr)  | No   | Text displayed when there is no input.    |
+| text             | [ResourceStr](ts-types.md#resourcestr)  | No   | Current text input.    |
+| controller<sup>8+</sup> | [TextAreaController](#textareacontroller8) | No   | Text area controller.|
 
-## Attributes
 
-In addition to universal attributes, the following attributes are supported.
+## Attributes
 
-| Name                      | Type                                    | Default Value  | Description                                      |
-| ------------------------ | ---------------------------------------- | ----- | ---------------------------------------- |
-| placeholderColor         | Color                                    | -     | Placeholder text color.                      |
-| placeholderFont          | {<br>size?: number,<br>weight?:number \| [FontWeight](ts-universal-attributes-text-style.md),<br>family?:&nbsp;string,<br>style?:&nbsp;[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 is fp.<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.|
-| textAlign                | [TextAlign](ts-appendix-enums.md#textalign) | Start | Horizontal alignment of the text.                    |
-| caretColor               | Color                                    | -     | Color of the caret in the text box.                              |
-| inputFilter<sup>8+</sup> | {<br>value: [ResourceStr](../../ui/ts-types.md)<sup>8+</sup>,<br>error?:&nbsp;(value:&nbsp;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**: ignored content to return when regular expression matching fails.|
-| copyOption<sup>9+</sup> | [CopyOptions](ts-basic-components-text.md) | CopyOptions.CrossDevice | Whether copy and paste is allowed.|
+In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
 
+| Name                      | Type                                    | Description                                      |
+| ------------------------ | ---------------------------------------- | ---------------------------------------- |
+| placeholderColor         | [ResourceColor](ts-types.md#resourcecolor) | Placeholder text color.                      |
+| placeholderFont          | [Font](ts-types.md#font) | Placeholder text style.                                   |
+| textAlign                | [TextAlign](ts-appendix-enums.md#textalign) | Horizontal alignment of the text.<br>Default value: **TextAlign.Start**|
+| caretColor               | [ResourceColor](ts-types.md#resourcecolor) | Color of the caret in the text box.                              |
+| inputFilter<sup>8+</sup> | {<br>value: [ResourceStr](ts-types.md#resourcestr),<br>error?: (value: string) => void<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**: ignored content to return when regular expression matching fails.|
+| copyOption<sup>9+</sup> | [CopyOptions](ts-appendix-enums.md#copyoptions9) | Whether copy and paste is allowed.|
 
 ## Events
 
+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.                                  |
-| onCopy<sup>8+</sup>(callback:(value: string) =&gt; void) | 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<sup>8+</sup>(callback:(value: string) =&gt; void) | 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.|
-| onPaste<sup>8+</sup>(callback:(value: string) =&gt; void) | Triggered when the paste button on the pasteboard, which displays when the text box is long pressed, is clicked.<br>**value**: text to be pasted.|
+| onCopy<sup>8+</sup>(callback:(value: string) =&gt; void) | 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<sup>8+</sup>(callback:(value: string) =&gt; void) | 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.|
+| onPaste<sup>8+</sup>(callback:(value: string) =&gt; void) | Triggered when the paste button on the pasteboard, which displays when the text box is long pressed, is clicked.<br>- **value**: text to be pasted.|
 
 ## TextAreaController<sup>8+</sup>
 
@@ -60,7 +57,6 @@ Defines the controller for controlling the **\<TextArea>** component.
 
 ```
 controller: TextAreaController = new TextAreaController()
-
 ```
 
 ### caretPosition<sup>8+</sup>
@@ -69,10 +65,11 @@ caretPosition(value: number): void
 
 Sets the position of the caret.
 
-- Parameters
-  | Name  | Type  | Mandatory  | Default Value | Description               |
-  | ----- | ------ | ---- | ---- | ------------------- |
-  | value | number | Yes   | -    | Length from the start of the string to the position where the caret is located.|
+**Parameters**
+
+| Name| Type| Mandatory| Description                              |
+| ------ | -------- | ---- | -------------------------------------- |
+| value  | number   | Yes  | Length from the start of the string to the position where the caret is located.|
 
 
 ## Example

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

@@ -6,10 +6,6 @@ The **<TextClock\>** component displays the current system time in text format f
 >
 >This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions
-
-None
-
 ## Child Components
 
 Not supported
@@ -20,18 +16,18 @@ TextClock(options?: { timeZoneOffset?: number, controller?: TextClockController
 
 **Parameters**
 
-| Name  | Type| Mandatory| Default Value            | Description                                                    |
-| -------- | -------- | ---- | ------------------ | ------------------------------------------------------------ |
-| timeZoneOffset | number   | No  | Time zone offset of the current system| Time zone offset.<br>The value range is [-14, 12], indicating UTC+12 to UTC-12. A negative value indicates Eastern Standard Time, and a positive value indicates Western Standard Time. For example, **-8** indicates UTC+8.<br>For countries or regions crossing the International Date Line, use -13 (UTC+13) and -14 (UTC+14) to ensure consistent time within the entire country or region. If the set value is not within the valid range, the time zone offset of the current system will be used.|
-| contorller | [TextClockContorller](#textclockcontroller) | No| null | Binds a controller to control the status of the **<TextClock\>** component.|
+| Name           | Type     | Mandatory    | Description                                                    |
+| -------------- | -------- | ------ | --------------------------------------------------------------------------- |
+| timeZoneOffset | number   | No    | Time zone offset.<br>The value range is [-14, 12], indicating UTC+12 to UTC-12. A negative value indicates Eastern Standard Time, and a positive value indicates Western Standard Time. For example, **-8** indicates UTC+8.<br>For countries or regions crossing the International Date Line, use -13 (UTC+13) and -14 (UTC+14) to ensure consistent time within the entire country or region. If the set value is not within the valid range, the time zone offset of the current system will be used.<br>Default value: time zone offset of the current system|
+| controller     | [TextClockController](#textclockcontroller) | No     | Binds a controller to control the status of the **<TextClock\>** component.|
 
 ## Attributes
 
 In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
 
-| Name  | Type| Default Value  | Description                                                        |
-| ------ | -------- | -------- | ------------------------------------------------------------ |
-| format | string   | 'hms' | Time format.<br>The date separator is a slash (/), and the time separator is a colon (:).<br>For example, yyyyMMdd and yyyy-MM-dd are displayed as yyyy/MM/dd,<br>and hhmmss is displayed as hh:mm:ss.<br>Only one digit is required for the time format. This means that hhmmss is equivalent to hms.<br>Supported time format strings:<br>- YYYY/yyyy: four-digit year<br>- YY/yy: last two digits of year<br>- M: one-digit month (MM for two-digit month, for example, 01)<br>- d: one-digit day (dd for two-digit day, for example, 01)<br>- D: number of days that have elapsed in the year<br>- H: 24-hour format<br>- h: 12-hour format<br>- m: minute<br>- s: second<br>- SSS: millisecond|
+| Name  | Type   | Description                                                        |
+| ------ | --------------- | ------------------------------------------------------------ |
+| format | string    | Time format.<br>The date separator is a slash (/), and the time separator is a colon (:).<br>For example, yyyyMMdd and yyyy-MM-dd are displayed as yyyy/MM/dd,<br>and hhmmss is displayed as hh:mm:ss.<br>Only one digit is required for the time format. This means that hhmmss is equivalent to hms.<br>Supported time format strings:<br>- YYYY/yyyy: four-digit year<br>- YY/yy: last two digits of year<br>- M: one-digit month (MM for two-digit month, for example, 01)<br>- d: one-digit day (dd for two-digit day, for example, 01)<br>- D: number of days that have elapsed in the year<br>- H: 24-hour format<br>- h: 12-hour format<br>- m: minute<br>- s: second<br>- SSS: millisecond<br>Default value: **'hms'**|
 
 ## Events
 
@@ -39,11 +35,11 @@ In addition to the universal events (ts-universal-events-click.md), the followin
 
 | Name                                        | Description                                                    |
 | -------------------------------------------- | ------------------------------------------------------------ |
-| onDateChange(event: (value: number) => void) | Called when the time changes in seconds at minimum.<br>**value**: Unix time stamp, which is the number of milliseconds that have elapsed since the Unix epoch. |
+| onDateChange(event: (value: number) => void) | Called when the time changes in seconds at minimum.<br> - **value**: Unix time stamp, which is the number of milliseconds that have elapsed since the Unix epoch.|
 
 ## TextClockController
 
-Implements a controller of the **<TextClock\>** component, which can be bound to the component for status control.
+Defines the controller of the **<TextClock\>** component, which can be bound to the component for status control. A **\<TextClock>** component can be bound to only one controller.
 
 ### Objects to Import
 

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

@@ -7,11 +7,6 @@ The **\<TextInput>** component provides single-line text input and is able to re
 >  This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-## Required Permissions
-
-None
-
-
 ## Child Components
 
 Not supported
@@ -19,92 +14,93 @@ Not supported
 
 ## APIs
 
-TextInput(value?:{placeholder?: string | Resource, text?: string | Resource, controller?: TextInputController})
+TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextInputController})
 
-- Parameters
-  | Name | Type | Mandatory | Default Value | Description |
-  | -------- | -------- | -------- | -------- | -------- |
-  | placeholder | string \|&nbsp;[Resource](../../ui/ts-types.md#resource-type) | No | - | Hint text displayed when there is no input. |
-  | text             | string \| [Resource](../../ui/ts-types.md#resource-type)                                   | No    | -    | Current text input. |
-  | controller<sup>8+</sup> | [TextInputController](#textinputcontroller8) | No | - | Text input controller. |
+**Parameters**
+
+| Name                    | Type                                    | Mandatory  | Description           |
+| ----------------------- | ---------------------------------------- | ---- | --------------- |
+| placeholder   | [ResourceStr](ts-types.md#resourcestr)       | No   | Text displayed when there is no input.     |
+| text          | [ResourceStr](ts-types.md#resourcestr)       | No   | Current text input.    |
+| controller<sup>8+</sup> | [TextInputController](#textinputcontroller8) | No   | Text input controller.|
 
 
 ## Attributes
 
-In addition to the universal attributes, the following attributes are supported.
-
-| Name | Type | Default Value | Description |
-| -------- | -------- | -------- | -------- |
-| type | InputType | InputType.Normal | Input box type. |
-| placeholderColor | Color | - | Placeholder text color. |
-| 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 | 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> | [CopyOptions](ts-basic-components-text.md) | CopyOptions.CrossDevice | Whether copy and paste is allowed. |
-| showPasswordIcon<sup>9+</sup> | boolean | true | Whether to display the show password icon at the end of the password text box.|
-| style<sup>9+</sup> | TextInputStyle | Default | Text input style.|
-
-- EnterKeyType enums
-  | Name | Description |
-  | -------- | -------- |
-  | EnterKeyType.Go | The Enter key is labeled **Go**. |
-  | EnterKeyType.Search | The Enter key is labeled **Search**. |
-  | EnterKeyType.Send | The Enter key is labeled **Send**. |
-  | EnterKeyType.Next | The Enter key is labeled **Next**. |
-  | EnterKeyType.Done | The Enter key is labeled **Done**. |
-
-- InputType enums
-  | Name | Description |
-  | -------- | -------- |
-  | InputType.Normal | Normal input mode. |
-  | InputType.Password | Password input mode. |
-  | InputType.Email | Email address input mode. |
-  | InputType.Number | Digit input mode. |
-
-- TextInputStyle
-  | Name                | Description           |
-  | ------------------ | ------------- |
-  | Default   | Default style. The caret width is fixed at 1.5 vp, and the caret height increases with the font size. |
-  | Inline | Inline input style. When text is selected, its background height is the same as the height of the text box.     |
-
-## Events
+In addition to the universal attributes and [text style](ts-universal-attributes-text-style.md) attributes, the following attributes are supported.
+
+| Name                      | Type                                    | Description                                      |
+| ------------------------ | ---------------------------------------- | ---------------------------------------- |
+| type                     | 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 style.|
+| enterKeyType             | EnterKeyType                             | How the Enter key is labeled.<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 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**: ignored 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**|
+| textAlign<sup>9+</sup>   | [TextAlign](ts-appendix-enums.md#textalign) | Horizontal alignment mode of the text.<br>Default value: **TextAlign.Start** |
+
+## EnterKeyType
 
 | Name                 | Description       |
-| -------- | -------- |
-| onChange(value: string) =&gt; void | Triggered when the input changes. |
-| onSubmit(callback: (enterKey: EnterKeyType) =&gt; void) | Triggered when the Enter key on the physical or soft keyboard is pressed. |
-| onEditChanged(callback:&nbsp;(isEditing:&nbsp;boolean)&nbsp;=&gt;&nbsp;void)<sup>(deprecated) </sup> | Triggered when the input status changes. |
-| onEditChange(callback:&nbsp;(isEditing:&nbsp;boolean)&nbsp;=&gt;&nbsp;void) <sup>8+</sup> | Triggered when the input status changes. |
-| onCopy<sup>8+</sup>(callback:(value: string) =&gt; void) | 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<sup>8+</sup>(callback:(value: string) =&gt; void) | 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. |
-| onPaste<sup>8+</sup>(callback:(value: string) =&gt; void) | Triggered when the paste button on the pasteboard, which displays when the text box is long pressed, is clicked.<br>**value**: text to be pasted. |
+| ------------------- | --------- |
+| Go     | The Enter key is labeled "Go."  |
+| Search | The Enter key is labeled "Search." |
+| Send   | The Enter key is labeled "Send." |
+| Next   | The Enter key is labeled "Next."|
+| Done   | The Enter key is labeled "Done."    |
 
-### TextInputController<sup>8+</sup>
+## InputType enums
 
-Implements the controller of the **\<TextInput>** component.
+| Name                | Description           |
+| ------------------ | ------------- |
+| Normal   | Normal input mode.<br>The value can contain digits, letters, underscores (_), spaces, and special characters.|
+| Password | Password input mode.      |
+| Email    | Email address input mode.|
+| Number   | Digit input mode.     |
+| PhoneNumber<sup>9+</sup> | Phone number input mode.<br>The value can contain digits, plus signs (+), hyphens (-), asterisks (*), and number signs (#). The length is not limited.|
 
+## SwipeEdgeEffect<sup>9+</sup>
 
-#### Objects to Import
+| Name                | Description           |
+| ------------------ | ------------- |
+| Default   | Default style. The caret width is fixed at 1.5 vp, and the caret height increases with the font size.      |
+| Inline | Inline input style. When text is selected, its background height is the same as the height of the text box.     |
+
+## Event
+
+| 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 physical or soft keyboard is pressed.         |
+| onEditChanged(callback: (isEditing: boolean) =&gt; void)<sup>(deprecated) </sup> | Triggered when the input status changes.                           |
+| onEditChange(callback: (isEditing: boolean) =&gt; void) <sup>8+</sup> | Triggered when the input status changes.                           |
+| onCopy<sup>8+</sup>(callback:(value: string) =&gt; void) | 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<sup>8+</sup>(callback:(value: string) =&gt; void) | 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.|
+| onPaste<sup>8+</sup>(callback:(value: string) =&gt; void) | Triggered when the paste button on the pasteboard, which displays when the text box is long pressed, is clicked.<br>**value**: text to be pasted.|
 
+## TextInputController<sup>8+</sup>
 
+Implements the controller of the **\<TextInput>** component.
+
+### Objects to Import
 ```
 controller: TextInputController = new TextInputController()
 ```
-
-
-#### caretPosition
+### caretPosition
 
 caretPosition(value: number): void
 
 Sets the position of the caret.
 
-- Parameters
-  | Name | Type | Mandatory | Default Value | Description |
-  | -------- | -------- | -------- | -------- | -------- |
-  | value | number | Yes | - | Length from the start of the text string to the position where the caret is located. |
+**Parameters**
 
+| Name| Type| Mandatory| Description                              |
+| ------ | -------- | ---- | -------------------------------------- |
+| value  | number   | Yes  | Length from the start of the string to the position where the caret is located.|
 
 
 ## Example

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

@@ -7,11 +7,6 @@ The **TextPicker** component allows users to scroll to select text.
 >  This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-## Required Permissions
-
-None
-
-
 ## Child Components
 
 Not supported
@@ -19,27 +14,28 @@ Not supported
 
 ## APIs
 
-TextPicker(options: {range: string[]|Resource, selected?: number, value?: string})
+TextPicker(options?: {range: string[]|Resource, selected?: number, value?: string})
 
 Creates a text picker based on the selection range specified by **range**.
 
-- Parameters
-  | Name| Type| Mandatory| Default Value| Description|
-  | -------- | -------- | -------- | -------- | -------- |
-  | range | string[] \| [Resource](../../ui/ts-types.md#resource-type)| Yes| - | Data selection range of the picker.|
-  | selected | number | No| 0 | Index of the selected item in the range.        |
-  | value | string | No| Value of the first item| Value of the selected item. The priority of this parameter is lower than that of **selected**.|
+**Parameters**
 
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| range | string[] \| [Resource](ts-types.md#resource)| Yes| Data selection range of the picker.|
+| selected | number | No| Index of the selected item in the range.<br>Default value: **0**|
+| value | string | No| Value of the selected item. The priority of this parameter is lower than that of **selected**.<br>Default value: value of the first item|
 
 ## Attributes
 
-| Name| Type| Default Value| Description|
-| -------- | -------- | -------- | -------- |
-| defaultPickerItemHeight | Length | - | Default height of an item in the picker.|
-
+| Name| Type| Description|
+| -------- | -------- | -------- |
+| defaultPickerItemHeight | number \| string | Default height of an item in the picker.|
 
 ## Events
 
+In addition to the [universal events](ts-universal-events-click.md), the following events are supported.
+
 | Name| Description|
 | -------- | -------- |
 | onChange(callback: (value: string, index: number) =&gt; void) | Triggered when an item in the picker is selected.<br>- **value**: value of the selected item.<br>- **index**: index of the selected item.|

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

 # TextTimer
 
+The **\<TextTimer>** component displays timing information and is controlled in text format.
 
-> **NOTE**<br>
+>  **NOTE**
+>
 >  This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-The **&lt;TextTimer&gt;** component supports custom time formats.
-
-
-## Required Permissions
-
-None
-
-
 ## Child Components
 
-None
+Not supported
 
 
 ## APIs
 
-TextTimer(options: { isCountDown?: boolean, count?: number, controller?: TextTimerController })
+TextTimer(options?: { isCountDown?: boolean, count?: number, controller?: TextTimerController })
 
-- Parameters
-  | Name | Type | Mandatory | Default Value | Description |
-  | -------- | -------- | -------- | -------- | -------- |
-  | isCountDown | boolean | No | false | Whether to count down. |
-  | count | number | No | 60000 | Countdown time, in milliseconds. This parameter is valid only when **isCountDown** is set to **true**.<br/>- If the specified value is less than or equal to 0, the default value is used.<br/>- If the specified value is greater than 0, the value is used. |
-  | controller | [TextTimerController](#texttimercontroller) | No | null | **&lt;TextTimer&gt;** controller. |
+**Parameters**
+
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| isCountDown | boolean | No| Whether to count down.<br/>Default value: **false** |
+| count | number | No| Countdown time, in milliseconds. This parameter is valid only when **isCountDown** is set to **true**.<br>If the value of **count** is less than or equal to 0, the default value is used.<br>If the value of **count** is greater than 0, it is used.<br/>Default value: **60000** |
+| controller | [TextTimerController](#texttimercontroller) | No| **\<TextTimer>** controller.|
 
 ## Attributes
 
-| Name | Type | Default Value | Description |
-| -------- | -------- | -------- | -------- |
-| format | string | 'hh:mm:ss.ms' | Custom format. The value must contain at least one of the following keywords: **hh**, **mm**, **ss**, and **ms**. |
+| Name| Type| Description|
+| -------- | -------- | -------- |
+| format | string | Custom format. The value must contain at least one of the following keywords: **hh**, **mm**, **ss**, and **ms**.<br>Default value: **'hh:mm:ss.ms'** |
 
 
 ## Events
 
-| Name | Description |
+| Name| Description|
 | -------- | -------- |
-| onTimer(callback: (utc: number, elapsedTime: number) =&gt; void) | Triggered when the time text changes.<br/>**utc**: currently displayed time, in milliseconds.<br/>**elapsedTime**: elapsed time of the timer, in milliseconds. |
+| onTimer(event: (utc: number, elapsedTime: number) =&gt; void) | Triggered when the time text changes.<br>**utc**: currently displayed time, in milliseconds.<br>**elapsedTime**: elapsed time of the timer, in milliseconds.|
 
 
 ## TextTimerController
 
-Defines the controller for controlling the **&lt;TextTimer&gt;** component.
+Defines the controller for controlling the **\<TextTimer>** component. A **\<TextTimer>** component can be bound to only one controller.
 
 ### Objects to Import
 
@@ -75,8 +70,8 @@ Resets the timer.
 
 ## Example
 
-
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct TextTimerExample {
@@ -88,9 +83,9 @@ struct TextTimerExample {
       TextTimer({controller: this.textTimerController})
         .format(this.format)
         .fontColor(Color.Black)
-        .fontSize(this.textSize)
+        .fontSize(50)
         .onTimer((utc: number, elapsedTime: number) => {
-          console.info('textTimer notCountDown utc is:' + utc + ', elapsedTime: ' + elapsedTime)
+          console.info('textTimer notCountDown utc is: ' + utc + ', elapsedTime: ' + elapsedTime)
         })
       Row() {
         Button("start").onClick(() => {

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

 # TimePicker
 
-
 The **\<TimePicker>** component allows users to select a time from the given range.
 
-> **NOTE**<br>
+>  **NOTE**
 >
 >  This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-## Required Permissions
-
-No
-
-
 ## Child Components
 
 Not supported
@@ -20,40 +14,41 @@ Not supported
 
 ## APIs
 
-TimePicker(options?: TimePickerOptions)
+TimePicker(options?: {selected?: Date})
 
 Creates a time picker whose default time range is from 00:00 to 23:59.
 
-- options parameters
-  | Name     | Type | Mandatory | Default Value       | Description                |
-  | -------- | ---- | --------- | ------------------- | -------------------------- |
-  | selected | Date | No        | Current system time | Time of the selected item. |
+**Parameters**
+
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| selected | Date | No| Time of the selected item.<br>Default value: current system time|
 
 
 ## Attributes
 
-| Name            | Type    | Default Value | Description                              |
-| --------------- | ------- | ------------- | ---------------------------------------- |
-| useMilitaryTime | boolean | false         | Whether to display time in 24-hour format. The value cannot be modified dynamically. |
+| Name| Type| Description|
+| -------- | -------- | -------- |
+| useMilitaryTime | boolean | Whether to display time in 24-hour format. The value cannot be modified dynamically.<br>Default value: **false**|
 
 
 ## Events
 
 | Name                                      | Description       |
-| ---------------------------------------- | ---------------------------------- |
-| onChange(callback:&nbsp;(value:&nbsp;TimePickerResult )&nbsp;=&gt;&nbsp;void) | Triggered when a time is selected. |
+| ---------------------------------------- | ----------- |
+| onChange(callback: (value: TimePickerResult ) =&gt; void) | Triggered when a time is selected.|
 
 ### TimePickerResult
 | Name    | Type  | Description     |
-| ------ | ------ | ------------------------------------ |
-| hour   | number | Hour portion of the selected time.   |
-| minute | number | Minute portion of the selected time. |
+| ------ | ------ | ------- |
+| hour   | number | Hour portion of the selected time.|
+| minute | number | Minute portion of the selected time.|
 
 
 ## Example
 
 
-### Time Picker
+### Time Selector
 
 ```ts
 // xxx.ets

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

 # Toggle
 
->  **NOTE**<br>
+The **\<Toggle>** component provides a clickable element in the check box, button, or switch type.
+
+>  **NOTE**
+>
 >  This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
 
@@ -11,7 +14,7 @@ None
 
 ## Child Components
 
-N/A
+This component can contain child components only when **ToggleType** is set to **Button**.
 
 
 ## APIs
@@ -19,33 +22,33 @@ N/A
 Toggle(options: { type: ToggleType, isOn?: boolean })
 
 - Parameters
-  | Name| Type| Mandatory| Default Value| Description|
-  | -------- | -------- | -------- | -------- | -------- |
-  | type | ToggleType | Yes| - | Type of the toggle.|
-  | isOn | boolean | No| false | Whether the toggle is turned on. The value **true** means that the toggle is turned on, and **false** means the opposite.|
+  | Name| Type| Mandatory| Description|
+  | -------- | -------- | -------- | -------- |
+  | type | ToggleType | Yes| Type of the toggle.|
+  | isOn | boolean | No| Whether the toggle is turned on. The value **true** means that the toggle is turned on, and **false** means the opposite.<br/>Default value: **false** |
 
 
 - ToggleType enums
   | Name| Description|
   | -------- | -------- |
-  | Checkbox | A checkbox is provided, where the **\<Text>** settings can take effect only when it is placed with the current component in a layout component.<br>> **NOTE**<br><br>> The default value of the universal attribute [padding](ts-universal-attributes-size.md) is as follows:<br>{<br>&nbsp;top: 14 vp,<br>&nbsp;right: 6 vp,<br>&nbsp;bottom: 14 vp,<br>&nbsp;left: 6 vp<br> } |
-  | Button | A button is provided. The set text string, if any, will be displayed inside the button.|
-  | Switch | A switch is provided, where the **\<Text>** settings can take effect only when it is placed with the current component in a layout component.<br>> **NOTE**<br><br>> The default value of the universal attribute [padding](ts-universal-attributes-size.md) is as follows:<br>{<br>&nbsp;top: 12 vp,<br>&nbsp;right: 12 vp,<br>&nbsp;bottom: 12 vp,<br>&nbsp;left: 12 vp<br> } |
+  | Checkbox | Check box type.<br>> **NOTE**<br>> The default value of the universal attribute [padding](ts-universal-attributes-size.md) is as follows:<br>{<br> top: 14 vp,<br> right: 6 vp,<br> bottom: 14 vp,<br> left: 6 vp<br> } |
+  | Button   | Button type. The set string, if any, will be displayed inside the button.      |
+  | Switch   | Switch type.<br>> **NOTE**<br>> The default value of the universal attribute [padding](ts-universal-attributes-size.md) is as follows:<br>{<br> top: 12 vp,<br> right: 12 vp,<br> bottom: 12 vp,<br> left: 12 vp<br> } |
 
 
 ## Attributes
 
 | Name| Parameter| Default Value| Description|
 | -------- | -------- | -------- | -------- |
-| selectedColor | Color | - | Background color of the component when it is turned on.|
-| switchPointColor | Color | - | Color of the circular slider when the component is of the **Switch** type.<br>> **NOTE**<br>> This attribute is valid only when **type** is set to **ToggleType.Switch**. |
+| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | - | Background color of the component when it is turned on.|
+| switchPointColor | [ResourceColor](ts-types.md#resourcecolor) | - | Color of the circular slider when the component is of the **Switch** type.<br>> **NOTE**<br>> This attribute is valid only when **type** is set to **ToggleType.Switch**.|
 
 
 ## Events
 
 | Name| Description|
 | -------- | -------- |
-| onChange(callback:&nbsp;(isOn:&nbsp;boolean)&nbsp;=&gt;&nbsp;void) | Triggered when the toggle status changes.|
+| onChange(callback: (isOn: boolean) =&gt; void) | Triggered when the toggle status changes.|
 
 
 ## Example

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

 # Web
 
+The **<Web\>** component can be used to display web pages.
+
 > **NOTE**
 >
 > - This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 > - You can preview how this component looks on a real device. The preview is not yet available in the DevEco Studio Previewer.
 
-The **<Web\>** component can be used to display web pages.
-
 ## Required Permissions
-ohos.permission.INTERNET, required only for accessing online web pages
+To use online resources, the application must have the **ohos.permission.INTERNET** permission. For details about how to apply for a permission, see [Declaring Permissions](../../security/accesstoken-guidelines.md).
 
 ## Child Components
 
@@ -16,32 +16,60 @@ Not supported
 
 ## APIs
 
-Web(options: { src: string, controller?: WebController })
+Web(options: { src: ResourceStr, controller: WebController })
+
+> **NOTE**
+>
+> Transition animation is not supported.
 
 **Parameters**
-| Name       | Type                           | Mandatory  | Default Value | Description   |
-| ---------- | ------------------------------- | ---- | ---- | ------- |
-| src        | string                          | Yes   | -    | Address of a web page resource.|
-| controller | [WebController](#webcontroller) | No   | -    | Controller.   |
+
+| Name       | Type                           | Mandatory  | Description   |
+| ---------- | ------------------------------- | ---- | ------- |
+| src        | [ResourceStr](ts-types.md)                           | Yes   | Address of a web page resource.|
+| controller | [WebController](#webcontroller) | No   | Controller.   |
 
 **Example**
+
+  Loading Online Web Pages
   ```ts
   // xxx.ets
   @Entry
   @Component
   struct WebComponent {
-    controller:WebController = new WebController();
+    controller: WebController = new WebController();
     build() {
       Column() {
-        Web({ src:'www.example.com', controller:this.controller })
+        Web({ src: 'www.example.com', controller: this.controller })
       }
     }
   }
   ```
 
-> **NOTE**<br>
->
-> Transition animation is not supported.
+  Loading Local Web Pages
+  ```ts
+  // xxx.ets
+  @Entry
+  @Component
+  struct WebComponent {
+    controller: WebController = new WebController();
+    build() {
+      Column() {
+        Web({ src: $rawfile("index.html"), controller: this.controller })
+      }
+    }
+  }
+  ```
+
+  ```html
+  <!-- index.html -->
+  <!DOCTYPE html>
+  <html>
+      <body>
+          <p>Hello World</p>
+      </body>
+  </html>
+  ```
 
 ## Attributes
 
@@ -54,20 +82,22 @@ domStorageAccess(domStorageAccess: boolean)
 Sets whether to enable the DOM Storage API. By default, this feature is disabled.
 
 **Parameters**
+
 | Name             | Type   | Mandatory  | Default Value | Description                                |
 | ---------------- | ------- | ---- | ---- | ------------------------------------ |
 | domStorageAccess | boolean | Yes   | false | Whether to enable the DOM Storage API.|
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
   @Component
   struct WebComponent {
-    controller:WebController = new WebController();
+    controller: WebController = new WebController();
     build() {
       Column() {
-        Web({ src:'www.example.com', controller:this.controller })
+        Web({ src: 'www.example.com', controller: this.controller })
           .domStorageAccess(true)
       }
     }
@@ -81,20 +111,22 @@ fileAccess(fileAccess: boolean)
 Sets whether to enable the access to the file system in the application. By default, this feature is disabled. Access to the files specified through [$rawfile(filepath/filename)](../../ui/ts-resource-access.md) are not affected by this attribute.
 
 **Parameters**
+
 | Name       | Type   | Mandatory  | Default Value | Description                                    |
 | ---------- | ------- | ---- | ---- | ---------------------------------------- |
-| fileAccess | boolean | Yes   | true | Whether to enable the access to the file system in the application. |
+| fileAccess | boolean | Yes   | true | Whether to enable the access to the file system in the application.|
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
   @Component
   struct WebComponent {
-    controller:WebController = new WebController();
+    controller: WebController = new WebController();
     build() {
       Column() {
-        Web({ src:'www.example.com', controller:this.controller })
+        Web({ src: 'www.example.com', controller: this.controller })
           .fileAccess(true)
       }
     }
@@ -108,20 +140,22 @@ fileFromUrlAccess(fileFromUrlAccess: boolean)
 Sets whether to allow the use of JavaScript scripts on web pages for access to content in the application file system. By default, this feature is disabled. Access to the files specified through [$rawfile(filepath/filename)](../../ui/ts-resource-access.md) are not affected by this attribute.
 
 **Parameters**
+
 | Name              | Type   | Mandatory  | Default Value  | Description                                    |
 | ----------------- | ------- | ---- | ----- | ---------------------------------------- |
-| fileFromUrlAccess | boolean | Yes   | false | Whether to allow the use of JavaScript scripts on web pages for access to content in the application file system. |
+| fileFromUrlAccess | boolean | Yes   | false | Whether to allow the use of JavaScript scripts on web pages for access to content in the application file system. By default, this feature is disabled.|
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
   @Component
   struct WebComponent {
-    controller:WebController = new WebController();
+    controller: WebController = new WebController();
     build() {
       Column() {
-        Web({ src:'www.example.com', controller:this.controller })
+        Web({ src: 'www.example.com', controller: this.controller })
           .fileFromUrlAccess(true)
       }
     }
@@ -135,9 +169,10 @@ imageAccess(imageAccess: boolean)
 Sets whether to enable automatic image loading. By default, this feature is enabled.
 
 **Parameters**
+
 | Name        | Type   | Mandatory  | Default Value | Description           |
 | ----------- | ------- | ---- | ---- | --------------- |
-| imageAccess | boolean | Yes   | true | Whether to enable automatic image loading. |
+| imageAccess | boolean | Yes   | true | Whether to enable automatic image loading. By default, this feature is enabled.|
 
 **Example**
   ```ts
@@ -145,10 +180,10 @@ Sets whether to enable automatic image loading. By default, this feature is enab
   @Entry
   @Component
   struct WebComponent {
-    controller:WebController = new WebController();
+    controller: WebController = new WebController();
     build() {
       Column() {
-        Web({ src:'www.example.com', controller:this.controller })
+        Web({ src: 'www.example.com', controller: this.controller })
           .imageAccess(true)
       }
     }
@@ -163,19 +198,22 @@ javaScriptProxy(javaScriptProxy: { object: object, name: string, methodList: Arr
 Injects a JavaScript object into the window. Methods of this object can be invoked in the window. The parameters cannot be updated.
 
 **Parameters**
+
 | Name       | Type           | Mandatory  | Default Value | Description                     |
 | ---------- | --------------- | ---- | ---- | ------------------------- |
 | object     | object          | Yes   | -    | Object to be registered. Methods can be declared, but not attributes.   |
 | name       | string          | Yes   | -    | Name of the object to be registered, which is the same as that invoked in the window.|
 | methodList | Array\<string\> | Yes   | -    | Methods of the JavaScript object to be registered at the application side. |
+| controller | [WebController](#webcontroller) | No   | -    | Controller.   |
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
   @Component
   struct WebComponent {
-    controller:WebController = new WebController();
+    controller: WebController = new WebController();
     testObj = {
       test: (data1, data2, data3) => {
         console.log("data1:" + data1);
@@ -189,7 +227,7 @@ Injects a JavaScript object into the window. Methods of this object can be invok
     }
     build() {
       Column() {
-        Web({ src:'www.example.com', controller:this.controller })
+        Web({ src: 'www.example.com', controller: this.controller })
           .javaScriptAccess(true)
           .javaScriptProxy({
             object: this.testObj,
@@ -209,20 +247,22 @@ javaScriptAccess(javaScriptAccess: boolean)
 Sets whether JavaScript scripts can be executed. By default, JavaScript scripts can be executed.
 
 **Parameters**
+
 | Name             | Type   | Mandatory  | Default Value | Description               |
 | ---------------- | ------- | ---- | ---- | ------------------- |
 | javaScriptAccess | boolean | Yes   | true | Whether JavaScript scripts can be executed.|
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
   @Component
   struct WebComponent {
-    controller:WebController = new WebController();
+    controller: WebController = new WebController();
     build() {
       Column() {
-        Web({ src:'www.example.com', controller:this.controller })
+        Web({ src: 'www.example.com', controller: this.controller })
           .javaScriptAccess(true)
       }
     }
@@ -236,21 +276,23 @@ mixedMode(mixedMode: MixedMode)
 Sets whether to enable loading of HTTP and HTTPS hybrid content can be loaded. By default, this feature is disabled.
 
 **Parameters**
+
 | Name      | Type                       | Mandatory  | Default Value | Description     |
 | --------- | --------------------------- | ---- | ---- | --------- |
-| mixedMode | [MixedMode](#mixedmode)| Yes   | -    | Mixed content to load.|
+| mixedMode | [MixedMode](#mixedmode)| Yes   | MixedMode.None | Mixed content to load.|
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
   @Component
   struct WebComponent {
-    controller:WebController = new WebController();
-    @State mode:MixedMode = MixedMode.All;
+    controller: WebController = new WebController();
+    @State mode: MixedMode = MixedMode.All;
     build() {
       Column() {
-        Web({ src:'www.example.com', controller:this.controller })
+        Web({ src: 'www.example.com', controller: this.controller })
           .mixedMode(this.mode)
       }
     }
@@ -264,20 +306,22 @@ onlineImageAccess(onlineImageAccess: boolean)
 Sets whether to enable access to online images through HTTP and HTTPS. By default, this feature is enabled.
 
 **Parameters**
+
 | Name              | Type   | Mandatory  | Default Value | Description            |
 | ----------------- | ------- | ---- | ---- | ---------------- |
 | onlineImageAccess | boolean | Yes   | true | Whether to enable access to online images through HTTP and HTTPS.|
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
   @Component
   struct WebComponent {
-    controller:WebController = new WebController();
+    controller: WebController = new WebController();
     build() {
       Column() {
-        Web({ src:'www.example.com', controller:this.controller })
+        Web({ src: 'www.example.com', controller: this.controller })
           .onlineImageAccess(true)
       }
     }
@@ -291,20 +335,22 @@ zoomAccess(zoomAccess: boolean)
 Sets whether to enable zoom gestures. By default, this feature is enabled.
 
 **Parameters**
+
 | Name       | Type   | Mandatory  | Default Value | Description         |
 | ---------- | ------- | ---- | ---- | ------------- |
 | zoomAccess | boolean | Yes   | true | Whether to enable zoom gestures.|
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
   @Component
   struct WebComponent {
-    controller:WebController = new WebController();
+    controller: WebController = new WebController();
     build() {
       Column() {
-        Web({ src:'www.example.com', controller:this.controller })
+        Web({ src: 'www.example.com', controller: this.controller })
           .zoomAccess(true)
       }
     }
@@ -318,20 +364,22 @@ overviewModeAccess(overviewModeAccess: boolean)
 Sets whether to load web pages by using the overview mode. By default, this feature is enabled.
 
 **Parameters**
+
 | Name               | Type   | Mandatory  | Default Value | Description           |
 | ------------------ | ------- | ---- | ---- | --------------- |
-| overviewModeAccess | boolean | Yes   | true | Whether to load web pages by using the overview mode|
+| overviewModeAccess | boolean | Yes   | true | Whether to load web pages by using the overview mode.|
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
   @Component
   struct WebComponent {
-    controller:WebController = new WebController();
+    controller: WebController = new WebController();
     build() {
       Column() {
-        Web({ src:'www.example.com', controller:this.controller })
+        Web({ src: 'www.example.com', controller: this.controller })
           .overviewModeAccess(true)
       }
     }
@@ -345,20 +393,22 @@ databaseAccess(databaseAccess: boolean)
 Sets whether to enable database access. By default, this feature is disabled.
 
 **Parameters**
+
 | Name           | Type   | Mandatory  | Default Value | Description             |
 | -------------- | ------- | ---- | ---- | ----------------- |
-| databaseAccess | boolean | Yes   | false | Whether to enable database access. |
+| databaseAccess | boolean | Yes   | false | Whether to enable database access.|
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
   @Component
   struct WebComponent {
-    controller:WebController = new WebController();
+    controller: WebController = new WebController();
     build() {
       Column() {
-        Web({ src:'www.example.com', controller:this.controller })
+        Web({ src: 'www.example.com', controller: this.controller })
           .databaseAccess(true)
       }
     }
@@ -372,26 +422,58 @@ geolocationAccess(geolocationAccess: boolean)
 Sets whether to enable geolocation access. By default, this feature is enabled.
 
 **Parameters**
+
 | Name           | Type   | Mandatory  | Default Value | Description             |
 | -------------- | ------- | ---- | ---- | ----------------- |
-| geolocationAccess | boolean | Yes   | true    | Whether to enable geolocation access. |
+| geolocationAccess | boolean | Yes   | true    | Whether to enable geolocation access.|
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
   @Component
   struct WebComponent {
-    controller:WebController = new WebController();
+    controller: WebController = new WebController();
     build() {
       Column() {
-        Web({ src:'www.example.com', controller:this.controller })
+        Web({ src: 'www.example.com', controller: this.controller })
           .geolocationAccess(true)
       }
     }
   }
   ```
 
+### mediaPlayGestureAccess
+
+mediaPlayGestureAccess(access: boolean)
+
+Sets whether a manual click is required for video playback.
+
+**Parameters**
+
+| Name      | Type  | Mandatory  | Default Value | Description     |
+| --------- | ------ | ---- | ---- | --------- |
+| access | boolean | Yes   | true    | Whether a manual click is required for video playback.|
+
+**Example**
+
+  ```ts
+  // xxx.ets
+  @Entry
+  @Component
+  struct WebComponent {
+    controller: WebController = new WebController();
+    @State access: boolean = true;
+    build() {
+      Column() {
+        Web({ src: 'www.example.com', controller: this.controller })
+          .mediaPlayGestureAccess(this.access)
+      }
+    }
+  }
+  ```
+
 ### cacheMode
 
 cacheMode(cacheMode: CacheMode)
@@ -399,21 +481,23 @@ cacheMode(cacheMode: CacheMode)
 Sets the cache mode.
 
 **Parameters**
+
 | Name      | Type                       | Mandatory  | Default Value | Description     |
 | --------- | --------------------------- | ---- | ---- | --------- |
 | cacheMode | [CacheMode](#cachemode)| Yes   | CacheMode.Default | Cache mode to set.|
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
   @Component
   struct WebComponent {
-    controller:WebController = new WebController();
-    @State mode:CacheMode = CacheMode.None;
+    controller: WebController = new WebController();
+    @State mode: CacheMode = CacheMode.None;
     build() {
       Column() {
-        Web({ src:'www.example.com', controller:this.controller })
+        Web({ src: 'www.example.com', controller: this.controller })
           .cacheMode(this.mode)
       }
     }
@@ -427,21 +511,23 @@ textZoomRatio(textZoomRatio: number)
 Sets the text zoom ratio of the page. The default value is **100**, which indicates 100%.
 
 **Parameters**
+
 | Name         | Type  | Mandatory  | Default Value | Description           |
 | ------------ | ------ | ---- | ---- | --------------- |
 | textZoomRatio | number | Yes   | 100 | Text zoom ratio to set.|
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
   @Component
   struct WebComponent {
-    controller:WebController = new WebController();
-    @State atio:number = 150;
+    controller: WebController = new WebController();
+    @State atio: number = 150;
     build() {
       Column() {
-        Web({ src:'www.example.com', controller:this.controller })
+        Web({ src: 'www.example.com', controller: this.controller })
           .textZoomRatio(this.atio)
       }
     }
@@ -455,30 +541,32 @@ userAgent(userAgent: string)
 Sets the user agent.
 
 **Parameters**
+
 | Name      | Type  | Mandatory  | Default Value | Description     |
 | --------- | ------ | ---- | ---- | --------- |
 | userAgent | string | Yes   | -    | User agent to set.|
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
   @Component
   struct WebComponent {
-    controller:WebController = new WebController();
+    controller: WebController = new WebController();
     @State userAgent:string = 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36';
     build() {
       Column() {
-        Web({ src:'www.example.com', controller:this.controller })
+        Web({ src: 'www.example.com', controller: this.controller })
           .userAgent(this.userAgent)
       }
     }
   }
   ```
 
->  **NOTE**<br>
+>  **NOTE**
 >
->  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).
+>  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).
 
 ## Events
 
@@ -491,6 +579,7 @@ onAlert(callback: (event?: { url: string; message: string; result: JsResult }) =
 Triggered when **alert()** is invoked to display an alert dialog box on the web page.
 
 **Parameters**
+
 | Name    | Type                 | Description           |
 | ------- | --------------------- | --------------- |
 | url     | string                | URL of the web page where the dialog box is displayed.|
@@ -498,26 +587,34 @@ Triggered when **alert()** is invoked to display an alert dialog box on the web
 | result  | [JsResult](#jsresult) | The user's operation. |
 
 **Return value**
+
 | Type     | Description                                      |
 | ------- | ---------------------------------------- |
 | boolean | If the callback returns **false**, the default dialog box is displayed. If the callback returns **true**, a system application can use the system dialog box (allows the confirm and cancel operations) and invoke the **JsResult** API to notify the **\<Web>** component of the user's operation.|
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
   @Component
   struct WebComponent {
-    controller:WebController = new WebController();
+    controller: WebController = new WebController();
     build() {
       Column() {
-        Web({ src:'www.example.com', controller:this.controller })
+        Web({ src: 'www.example.com', controller: this.controller })
           .onAlert((event) => {
             AlertDialog.show({
-              title: 'title',
+              title: 'onAlert',
               message: 'text',
-              confirm: {
-                value: 'onAlert',
+              primaryButton: {
+                value: 'cancel',
+                action: () => {
+                  event.result.handleCancel()
+                }
+              },
+              secondaryButton: {
+                value: 'ok',
                 action: () => {
                   event.result.handleConfirm()
                 }
@@ -537,9 +634,10 @@ Triggered when **alert()** is invoked to display an alert dialog box on the web
 
 onBeforeUnload(callback: (event?: { url: string; message: string; result: JsResult }) => boolean)
 
-Triggered when the current page is about to exit after the user refreshes or closes the page.
+Triggered when the current page is about to exit after the user refreshes or closes the page. If the user refreshes the page, this callback is triggered only when the page has obtained focus.
 
 **Parameters**
+
 | Name    | Type                 | Description           |
 | ------- | --------------------- | --------------- |
 | url     | string                | URL of the web page where the dialog box is displayed.|
@@ -547,11 +645,13 @@ Triggered when the current page is about to exit after the user refreshes or clo
 | result  | [JsResult](#jsresult) | The user's operation. |
 
 **Return value**
+
 | Type     | Description                                      |
 | ------- | ---------------------------------------- |
 | boolean | If the callback returns **false**, the default dialog box is displayed. If the callback returns **true**, a system application can use the system dialog box (allows the confirm and cancel operations) and invoke the **JsResult** API to notify the **\<Web>** component of the user's operation.|
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
@@ -565,8 +665,26 @@ Triggered when the current page is about to exit after the user refreshes or clo
           .onBeforeUnload((event) => {
             console.log("event.url:" + event.url);
             console.log("event.message:" + event.message);
-            console.log("event.result:" + event.result);
-            return false;
+            AlertDialog.show({
+              title: 'onBeforeUnload',
+              message: 'text',
+              primaryButton: {
+                value: 'cancel',
+                action: () => {
+                  event.result.handleCancel()
+                }
+              },
+              secondaryButton: {
+                value: 'ok',
+                action: () => {
+                  event.result.handleConfirm()
+                }
+              },
+              cancel: () => {
+                event.result.handleCancel()
+              }
+            })
+            return true;
           })
       }
     }
@@ -580,6 +698,7 @@ onConfirm(callback: (event?: { url: string; message: string; result: JsResult })
 Triggered when **confirm()** is invoked by the web page.
 
 **Parameters**
+
 | Name    | Type                 | Description           |
 | ------- | --------------------- | --------------- |
 | url     | string                | URL of the web page where the dialog box is displayed.|
@@ -587,11 +706,13 @@ Triggered when **confirm()** is invoked by the web page.
 | result  | [JsResult](#jsresult) | The user's operation. |
 
 **Return value**
+
 | Type     | Description                                      |
 | ------- | ---------------------------------------- |
 | boolean | If the callback returns **false**, the default dialog box is displayed. If the callback returns **true**, a system application can use the system dialog box (allows the confirm and cancel operations) and invoke the **JsResult** API to notify the **\<Web>** component of the user's operation.|
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
@@ -607,10 +728,16 @@ Triggered when **confirm()** is invoked by the web page.
             console.log("event.message:" + event.message);
             console.log("event.result:" + event.result);
             AlertDialog.show({
-              title: 'title',
+              title: 'onConfirm',
               message: 'text',
-              confirm: {
-                value: 'onConfirm',
+              primaryButton: {
+                value: 'cancel',
+                action: () => {
+                  event.result.handleCancel()
+                }
+              },
+              secondaryButton: {
+                value: 'ok',
                 action: () => {
                   event.result.handleConfirm()
                 }
@@ -631,6 +758,7 @@ Triggered when **confirm()** is invoked by the web page.
 onPrompt(callback: (event?: { url: string; message: string; value: string; result: JsResult }) => boolean)
 
 **Parameters**
+
 | Name    | Type                 | Description           |
 | ------- | --------------------- | --------------- |
 | url     | string                | URL of the web page where the dialog box is displayed.|
@@ -638,29 +766,51 @@ onPrompt(callback: (event?: { url: string; message: string; value: string; resul
 | result  | [JsResult](#jsresult) | The user's operation. |
 
 **Return value**
+
 | Type     | Description                                      |
 | ------- | ---------------------------------------- |
 | boolean | If the callback returns **false**, the default dialog box is displayed. If the callback returns **true**, a system application can use the system dialog box (allows the confirm and cancel operations) and invoke the **JsResult** API to notify the **\<Web>** component of the user's operation.|
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
   @Component
   struct WebComponent {
-    controller:WebController = new WebController();
+    controller: WebController = new WebController();
+  
     build() {
       Column() {
-        Web({ src:'www.example.com', controller:this.controller })
+        Web({ src: 'www.example.com', controller: this.controller })
           .onPrompt((event) => {
             console.log("url:" + event.url);
             console.log("message:" + event.message);
             console.log("value:" + event.value);
-          console.log("result:" + event.result);
+            AlertDialog.show({
+              title: 'onPrompt',
+              message: 'text',
+              primaryButton: {
+                value: 'cancel',
+                action: () => {
+                  event.result.handleCancel()
+                }
+              },
+              secondaryButton: {
+                value: 'ok',
+                action: () => {
+                  event.result.handleConfirm()
+                }
+              },
+              cancel: () => {
+                event.result.handleCancel()
+              }
+            })
             return true;
           })
       }
     }
+  }
   ```
 
 ### onConsole
@@ -670,16 +820,19 @@ onConsole(callback: (event?: { message: ConsoleMessage }) => boolean)
 Triggered to notify the host application of a JavaScript console message.
 
 **Parameters**
+
 | Name    | Type                             | Description     |
 | ------- | --------------------------------- | --------- |
 | message | [ConsoleMessage](#consolemessage) | Console message.|
 
 **Return value**
+
 | Type     | Description                                 |
 | ------- | ----------------------------------- |
 | boolean | Returns **true** if the message will not be printed to the console; returns **false** otherwise.|
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
@@ -707,6 +860,7 @@ Triggered to notify the host application of a JavaScript console message.
 onDownloadStart(callback: (event?: { url: string, userAgent: string, contentDisposition: string, mimetype: string, contentLength: number }) => void)
 
 **Parameters**
+
 | Name               | Type         | Description                               |
 | ------------------ | ------------- | ----------------------------------- |
 | url                | string        | URL for the download task.                          |
@@ -715,6 +869,7 @@ onDownloadStart(callback: (event?: { url: string, userAgent: string, contentDisp
 | contentLength      | contentLength | Length of the content returned by the server.                        |
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
@@ -744,12 +899,14 @@ onErrorReceive(callback: (event?: { request: WebResourceRequest, error: WebResou
 Triggered when an error occurs during web page loading. For better results, simplify the implementation logic in the callback.
 
 **Parameters**
+
 | Name    | Type                                    | Description           |
 | ------- | ---------------------------------------- | --------------- |
 | request | [WebResourceRequest](#webresourcerequest) | Encapsulation of a web page request.     |
 | error   | [WebResourceError](#webresourceerror)    | Encapsulation of a web page resource loading error.|
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
@@ -786,12 +943,14 @@ onHttpErrorReceive(callback: (event?: { request: WebResourceRequest, response: W
 Triggered when an HTTP error (the response code is greater than or equal to 400) occurs during web page resource loading.
 
 **Parameters**
+
 | Name    | Type                                    | Description           |
 | ------- | ---------------------------------------- | --------------- |
 | request | [WebResourceRequest](#webresourcerequest) | Encapsulation of a web page request.     |
 | error   | [WebResourceError](#webresourceerror)    | Encapsulation of a web page resource loading error.|
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
@@ -836,11 +995,13 @@ onPageBegin(callback: (event?: { url: string }) => void)
 Triggered when the web page starts to be loaded. This API is triggered only for the main frame content, and not for the iframe or frameset content.
 
 **Parameters**
+
 | Name | Type  | Description     |
 | ---- | ------ | --------- |
 | url  | string | URL of the page.|
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
@@ -867,11 +1028,13 @@ onPageEnd(callback: (event?: { url: string }) => void)
 Triggered when the web page loading is complete. This API is triggered only for the main frame content.
 
 **Parameters**
+
 | Name | Type  | Description     |
 | ---- | ------ | --------- |
 | url  | string | URL of the page.|
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
@@ -897,11 +1060,13 @@ onProgressChange(callback: (event?: { newProgress: number }) => void)
 Triggered when the web page loading progress changes.
 
 **Parameters**
+
 | Name        | Type  | Description                 |
 | ----------- | ------ | --------------------- |
 | newProgress | number | New loading progress. The value is an integer ranging from 0 to 100.|
 
-  **Example**
+**Example**
+
   ```ts
   // xxx.ets
   @Entry
@@ -927,11 +1092,13 @@ onTitleReceive(callback: (event?: { title: string }) => void)
 Triggered when the document title of the web page is changed.
 
 **Parameters**
+
 | Name  | Type  | Description         |
 | ----- | ------ | ------------- |
 | title | string | Document title.|
 
-  **Example**
+**Example**
+
   ```ts
   // xxx.ets
   @Entry
@@ -957,12 +1124,14 @@ onRefreshAccessedHistory(callback: (event?: { url: string, isRefreshed: boolean
 Triggered when loading of the web page is complete. This API is used by an application to update the historical link it accessed.
 
 **Parameters**
+
 | Name        | Type   | Description                             |
 | ----------- | ------- | --------------------------------- |
 | url         | string  | URL to be accessed.                          |
-| isRefreshed | boolean | Whether the page is reloaded. The value **true** means that the page is reloaded, and **false** means that the page is newly loaded.|
+| isRefreshed | boolean | Whether the page is reloaded. The value **true** means that the page is reloaded by invoking the [refresh](#refresh) API, and **false** means the opposite.|
+
+**Example**
 
-  **Example**
   ```ts
   // xxx.ets
   @Entry
@@ -974,7 +1143,7 @@ Triggered when loading of the web page is complete. This API is used by an appli
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
           .onRefreshAccessedHistory((event) => {
-            console.log('url:' + event.url + ' isReload:' + event.refreshed);
+            console.log('url:' + event.url + ' isReload:' + event.isRefreshed);
           })
       }
     }
@@ -988,11 +1157,13 @@ onRenderExited(callback: (event?: { renderExitReason: RenderExitReason }) => voi
 Triggered when the rendering process exits abnormally.
 
 **Parameters**
+
 | Name             | Type                                    | Description            |
 | ---------------- | ---------------------------------------- | ---------------- |
 | renderExitReason | [RenderExitReason](#renderexitreason)| Cause for the abnormal exit of the rendering process.|
 
-  **Example**
+**Example**
+
   ```ts
   // xxx.ets
   @Entry
@@ -1013,21 +1184,29 @@ Triggered when the rendering process exits abnormally.
 
 ### onShowFileSelector<sup>9+</sup>
 
-onShowFileSelector(callback: (event?: { result: FileSelectorResult, fileSelector: FileSelectorParam }) => void)
+onShowFileSelector(callback: (event?: { result: FileSelectorResult, fileSelector: FileSelectorParam }) => boolean)
 
 Triggered to process an HTML form whose input type is **file**, in response to the tapping of the **Select File** button.
 
 **Parameters**
+
 | Name         | Type                                    | Description             |
 | ------------ | ---------------------------------------- | ----------------- |
 | result       | [FileSelectorResult](#fileselectorresult9) | File selection result to be sent to the **\<Web>** component.|
 | fileSelector | [FileSelectorParam](#fileselectorparam9) | Information about the file selector.      |
 
-  **Example**
-  ```ts
-  // xxx.ets
-  @Entry
-  @Component
+**Return value**
+
+| Type     | Description                                 |
+| ------- | ----------------------------------- |
+| boolean | The value **true** means that the pop-up window provided by the system is displayed. The value **true** means that the default web pop-up window is displayed.|
+
+**Example**
+
+  ```ts
+  // xxx.ets
+  @Entry
+  @Component
   struct WebComponent {
     controller: WebController = new WebController();
 
@@ -1066,11 +1245,13 @@ onUrlLoadIntercept(callback: (event?: { data:string | WebResourceRequest }) => b
 Triggered when the **\<Web>** component is about to access a URL. This API is used to determine whether to block the access.
 
 **Parameters**
+
 | Name | Type                                    | Description     |
 | ---- | ---------------------------------------- | --------- |
 | data | string / [WebResourceRequest](#webresourcerequest) | URL information.|
 
 **Return value**
+
 | Type     | Description                      |
 | ------- | ------------------------ |
 | boolean | Returns **true** if the access is blocked; returns **false** otherwise.|
@@ -1098,27 +1279,30 @@ Triggered when the **\<Web>** component is about to access a URL. This API is us
 
 ### onInterceptRequest<sup>9+</sup>
 
-onInterceptRequest9+(callback: (event?: { request: WebResourceRequest}) => WebResourceResponse)
+onInterceptRequest(callback: (event?: { request: WebResourceRequest}) => WebResourceResponse)
 
 Triggered when the **\<Web>** component is about to access a URL. This API is used to block the URL and return the response data.
 
 **Parameters**
+
 | Name    | Type                                    | Description       |
 | ------- | ---------------------------------------- | ----------- |
 | request | [WebResourceRequest](#webresourcerequest) | Information about the URL request.|
 
 **Return value**
+
 | Type                                      | Description                         |
 | ---------------------------------------- | --------------------------- |
-| [WebResourceResponse](#webresourceresponse) | Returns null if the original loading mode is used; returns the response data otherwise.|
+| [WebResourceResponse](#webresourceresponse) | If response data is returned, the data is loaded based on the response data. If no response data is returned, null is returned, indicating that the data is loaded in the original mode.|
+
+**Example**
 
-  **Example**
   ```ts
   // xxx.ets
   @Entry
   @Component
   struct WebComponent {
-    controller:WebController = new WebController();
+    controller: WebController = new WebController();
     responseweb: WebResourceResponse = new WebResourceResponse();
     heads:Header[] = new Array();
     @State webdata: string = "<!DOCTYPE html>\n" +
@@ -1132,7 +1316,7 @@ Triggered when the **\<Web>** component is about to access a URL. This API is us
     "</html>"
     build() {
       Column() {
-        Web({ src:'www.example.com', controller:this.controller })
+        Web({ src: 'www.example.com', controller: this.controller })
           .onInterceptRequest((event) => {
             console.log('url:' + event.request.getRequestUrl());
             var head1:Header = {
@@ -1165,6 +1349,7 @@ onHttpAuthRequest(callback: (event?: { handler: HttpAuthHandler, host: string, r
 Triggered when an HTTP authentication request is received.
 
 **Parameters**
+
 | Name    | Type                                | Description            |
 | ------- | ------------------------------------ | ---------------- |
 | handler | [HttpAuthHandler](#httpauthhandler9) | The user's operation.  |
@@ -1172,32 +1357,41 @@ Triggered when an HTTP authentication request is received.
 | realm   | string                               | Realm to which HTTP authentication credentials apply. |
 
 **Return value**
+
 | Type     | Description                   |
 | ------- | --------------------- |
-| boolean | Returns **true** if the authentication is successful; returns **false** otherwise. |
+| boolean | Returns **true** if the authentication is successful; returns **false** otherwise.|
 
 **Example**
 
   ```ts
   // xxx.ets
+  import web_webview from '@ohos.web.webview'
   @Entry
   @Component
   struct WebComponent {
-    controller:WebController = new WebController();
-    httpAuth:boolean = false;
+    controller: WebController = new WebController();
+    httpAuth: boolean = false;
+  
     build() {
       Column() {
-        Web({ src:'www.example.com', controller:this.controller })
+        Web({ src: 'www.example.com', controller: this.controller })
           .onHttpAuthRequest((event) => {
             AlertDialog.show({
-            title: 'title',
+              title: 'onHttpAuthRequest',
               message: 'text',
-            confirm: {
-              value: 'onConfirm',
+              primaryButton: {
+                value: 'cancel',
+                action: () => {
+                  event.handler.cancel();
+                }
+              },
+              secondaryButton: {
+                value: 'ok',
                 action: () => {
                   this.httpAuth = event.handler.isHttpAuthInfoSaved();
                   if (this.httpAuth == false) {
-                  web.WebDataBase.saveHttpAuthCredentials(
+                    web_webview.WebDataBase.saveHttpAuthCredentials(
                       event.host,
                       event.realm,
                       "2222",
@@ -1215,7 +1409,116 @@ Triggered when an HTTP authentication request is received.
           })
       }
     }
+  }
+  ```
+### onSslErrorEventReceive<sup>9+</sup>
+
+onSslErrorEventReceive(callback: (event: { handler: SslErrorHandler, error: SslError }) => void)
+
+Invoked when an SSL error occurs during resource loading.
+
+**Parameters**
+
+| Name    | Type                          | Description            |
+| ------- | ------------------------------------ | ----------------    |
+| handler | [SslErrorHandler](#sslerrorhandler9) | The user's operation.|
+| error   | [SslError](#sslerror9)       | Error code.|
+
+**Example**
+
+  ```ts
+  // xxx.ets
+  import web_webview from '@ohos.web.webview'
+  @Entry
+  @Component
+  struct WebComponent {
+    controller: WebController = new WebController();
+  
+    build() {
+      Column() {
+        Web({ src: 'www.example.com', controller: this.controller })
+          .onSslErrorEventReceive((event) => {
+            AlertDialog.show({
+              title: 'onSslErrorEventReceive',
+              message: 'text',
+              primaryButton: {
+                value: 'confirm',
+                action: () => {
+                  event.handler.handleConfirm();
+                }
+              },
+              secondaryButton: {
+                value: 'cancel',
+                action: () => {
+                  event.handler.handleCancel();
+                }
+              },
+              cancel: () => {
+                event.handler.handleCancel();
+              }
+            })
+            return true;
+          })
+      }
+    }
+  }
+  ```
+
+### onClientAuthenticationRequest<sup>9+</sup>
+
+onClientAuthenticationRequest(callback: (event: {handler : ClientAuthenticationHandler, host : string, port : number, keyTypes : Array<string>, issuers : Array<string>}) => void)
+
+Invoked when an SSL client certificate request is received.
+
+**Parameters**
+
+| Name  | Type                            | Description            |
+| ------- | ------------------------------------ | ----------------    |
+| handler | [ClientAuthenticationHandler](#clientauthenticationhandler9) | The user's operation.|
+| host    | string          | Host name of the server that requests a certificate.|
+| port    | number          | Port number of the server that requests a certificate.|
+| keyTypes| Array<string>   | Acceptable asymmetric private key types.|
+| issuers | Array<string>   | Issuer of the certificate that matches the private key.|
+
+  **Example**
+  ```ts
+  // xxx.ets
+  import web_webview from '@ohos.web.webview'
+  @Entry
+  @Component
+  struct WebComponent {
+    controller: WebController = new WebController();
+
+    build() {
+      Column() {
+        Web({ src: 'www.example.com', controller: this.controller })
+          .onClientAuthenticationRequest((event) => {
+            AlertDialog.show({
+              title: 'onClientAuthenticationRequest',
+              message: 'text',
+              primaryButton: {
+                value: 'confirm',
+                action: () => {
+                  event.handler.confirm("/system/etc/user.pk8", "/system/etc/chain-user.pem");
+                }
+              },
+              secondaryButton: {
+                value: 'cancel',
+                action: () => {
+                  event.handler.cancel();
+                }
+              },
+              cancel: () => {
+                event.handler.ignore();
+              }
+            })
+            return true;
+          })
+      }
+    }
+  }
   ```
+
 ### onPermissionRequest<sup>9+</sup>
 
 onPermissionRequest(callback: (event?: { request: PermissionRequest }) => void)
@@ -1223,6 +1526,7 @@ onPermissionRequest(callback: (event?: { request: PermissionRequest }) => void)
 Invoked when a permission request is received.
 
 **Parameters**
+
 | Name    | Type                                | Description            |
 | ------- | ------------------------------------ | ---------------- |
 | request | [PermissionRequest](#permissionrequest9) | The user's operation.  |
@@ -1234,15 +1538,21 @@ Invoked when a permission request is received.
   @Entry
   @Component
   struct WebComponent {
-    controller:WebController = new WebController();
+    controller: WebController = new WebController();
     build() {
       Column() {
-        Web({ src:'www.example.com', controller:this.controller })
+        Web({ src: 'www.example.com', controller: this.controller })
           .onPermissionRequest((event) => {
             AlertDialog.show({
               title: 'title',
               message: 'text',
-            confirm: {
+              primaryButton: {
+                value: 'deny',
+                action: () => {
+                  event.request.deny();
+                }
+              },
+              secondaryButton: {
                 value: 'onConfirm',
                 action: () => {
                   event.request.grant(event.request.getAccessibleResource());
@@ -1255,6 +1565,125 @@ Invoked when a permission request is received.
           })
       }
     }
+  }
+  ```
+
+### onContextMenuShow<sup>9+</sup>
+
+onContextMenuShow(callback: (event?: { param: WebContextMenuParam, result: WebContextMenuResult }) => boolean)
+
+Invoked when a context menu is displayed upon a long press on a specific element (such as an image or link).
+
+**Parameters**
+
+| Name    | Type                                | Description            |
+| ------- | ------------------------------------ | ---------------- |
+| param   | [WebContextMenuParam](#webcontextmenuparam9)   | Parameters related to the context menu.|
+| result  | [WebContextMenuResult](#webcontextmenuresult9) | Result of the context menu.|
+
+**Return value**
+
+| Type    | Description                  |
+| ------ | -------------------- |
+| boolean | The value **true** means a custom menu, and **false** means the default menu.|
+
+**Example**
+
+  ```ts
+  // xxx.ets
+  @Entry
+  @Component
+  struct WebComponent {
+    controller: WebController = new WebController();
+    build() {
+      Column() {
+        Web({ src: 'www.example.com', controller: this.controller })
+          .onContextMenuShow((event) => {
+            console.info("x coord = " + event.param.x());
+            console.info("link url = " + event.param.getLinkUrl());
+            return true;
+        })
+      }
+    }
+  }
+  ```
+
+### onScroll<sup>9+</sup>
+
+onScroll(callback: (event: {xOffset: number, yOffset: number}) => void)
+
+Invoked when the scrollbar of the page scrolls.
+
+**Parameters**
+
+| Name    | Type                                | Description            |
+| ------- | ------------------------------------ | ---------------- |
+| xOffset   | number   | Position of the scrollbar on the x-axis.|
+| yOffset  | number | Position of the scrollbar on the y-axis.|
+
+**Example**
+
+  ```ts
+  // xxx.ets
+  @Entry
+  @Component
+  struct WebComponent {
+    controller: WebController = new WebController();
+    build() {
+      Column() {
+        Web({ src: 'www.example.com', controller: this.controller })
+        .onScroll((event) => {
+            console.info("x = " + event.xOffset);
+            console.info("y = " + event.yOffset);
+        })
+      }
+    }
+  }
+  ```
+
+### onGeolocationShow
+
+onGeolocationShow(callback: (event?: { origin: string, geolocation: JsGeolocation }) => void)
+
+Invoked when a request to obtain the geolocation information is received.
+
+**Parameters**
+
+| Name     | Type                        | Description         |
+| ----------- | ------------------------------- | ---------------- |
+| origin      | string                          | Index of the origin.    |
+| geolocation | [JsGeolocation](#jsgeolocation) | The user's operation.|
+
+**Example**
+
+  ```ts
+  // xxx.ets
+  @Entry
+  @Component
+  struct WebComponent {
+    controller:WebController = new WebController();
+    build() {
+      Column() {
+        Web({ src:'www.example.com', controller:this.controller })
+        .geolocationAccess(true)
+        .onGeolocationShow((event) => {
+          AlertDialog.show({
+            title: 'title',
+            message: 'text',
+            confirm: {
+              value: 'onConfirm',
+              action: () => {
+                event.geolocation.invoke(event.origin, true, true);
+              }
+            },
+            cancel: () => {
+              event.geolocation.invoke(event.origin, false, true);
+            }
+          })
+        })
+      }
+    }
+  }
   ```
 
 ## ConsoleMessage
@@ -1268,6 +1697,7 @@ getLineNumber(): number
 Obtains the number of rows in this console message.
 
 **Return value**
+
 | Type    | Description                  |
 | ------ | -------------------- |
 | number | Number of rows in the console message.|
@@ -1279,9 +1709,10 @@ getMessage(): string
 Obtains the log information of this console message.
 
 **Return value**
+
 | Type    | Description                    |
 | ------ | ---------------------- |
-| string | Log information about this console message.|
+| string | Log information of this console message.|
 
 ### getMessageLevel
 
@@ -1290,6 +1721,7 @@ getMessageLevel(): MessageLevel
 Obtains the level of this console message.
 
 **Return value**
+
 | Type                               | Description                    |
 | --------------------------------- | ---------------------- |
 | [MessageLevel](#messagelevel)| Level of the console message.|
@@ -1301,6 +1733,7 @@ getSourceId(): string
 Obtains the path and name of the web page source file.
 
 **Return value**
+
 | Type    | Description           |
 | ------ | ------------- |
 | string | Path and name of the web page source file.|
@@ -1328,6 +1761,7 @@ handlePromptConfirm(result: string): void
 Notifies the **\<Web>** component of the user's confirm operation in the dialog box as well as the dialog box content.
 
 **Parameters**
+
 | Name   | Type  | Mandatory  | Default Value | Description       |
 | ------ | ------ | ---- | ---- | ----------- |
 | result | string | Yes   | -    | User input in the dialog box.|
@@ -1343,6 +1777,7 @@ getErrorCode(): number
 Obtains the error code for resource loading.
 
 **Return value**
+
 | Type    | Description         |
 | ------ | ----------- |
 | number | Error code for resource loading.|
@@ -1354,6 +1789,7 @@ getErrorInfo(): string
 Obtains error information about resource loading.
 
 **Return value**
+
 | Type    | Description          |
 | ------ | ------------ |
 | string | Error information about resource loading.|
@@ -1369,6 +1805,7 @@ getResponseHeader() : Array\<Header\>
 Obtains the information about the resource request header.
 
 **Return value**
+
 | Type                        | Description        |
 | -------------------------- | ---------- |
 | Array\<[Header](#header)\> | Information about the resource request header.|
@@ -1380,6 +1817,7 @@ getRequestUrl(): string
 Obtains the URL of the resource request.
 
 **Return value**
+
 | Type    | Description           |
 | ------ | ------------- |
 | string | URL of the resource request.|
@@ -1391,6 +1829,7 @@ isMainFrame(): boolean
 Checks whether the resource request is in the main frame.
 
 **Return value**
+
 | Type     | Description              |
 | ------- | ---------------- |
 | boolean | Whether the resource request is in the main frame.|
@@ -1402,9 +1841,10 @@ isRedirect(): boolean
 Checks whether the resource request is redirected by the server.
 
 **Return value**
+
 | Type     | Description              |
 | ------- | ---------------- |
-| boolean | Whether the resource request is redirected by the server. |
+| boolean | Whether the resource request is redirected by the server.|
 
 ### isRequestGesture
 
@@ -1413,9 +1853,10 @@ isRequestGesture(): boolean
 Checks whether the resource request is associated with a gesture (for example, a tap).
 
 **Return value**
+
 | Type     | Description                  |
 | ------- | -------------------- |
-| boolean | Whether the resource request is associated with a gesture (for example, a tap). |
+| boolean | Whether the resource request is associated with a gesture (for example, a tap).|
 
 ## Header
 
@@ -1438,6 +1879,7 @@ getReasonMessage(): string
 Obtains the status code description of the resource response.
 
 **Return value**
+
 | Type    | Description           |
 | ------ | ------------- |
 | string | Status code description of the resource response.|
@@ -1449,6 +1891,7 @@ getResponseCode(): number
 Obtains the status code of the resource response.
 
 **Return value**
+
 | Type    | Description         |
 | ------ | ----------- |
 | number | Status code of the resource response.|
@@ -1460,6 +1903,7 @@ getResponseData(): string
 Obtains the data in the resource response.
 
 **Return value**
+
 | Type    | Description       |
 | ------ | --------- |
 | string | Data in the resource response.|
@@ -1471,6 +1915,7 @@ getResponseEncoding(): string
 Obtains the encoding string of the resource response.
 
 **Return value**
+
 | Type    | Description        |
 | ------ | ---------- |
 | string | Encoding string of the resource response.|
@@ -1482,6 +1927,7 @@ getResponseHeader() : Array\<Header\>
 Obtains the resource response header.
 
 **Return value**
+
 | Type                        | Description      |
 | -------------------------- | -------- |
 | Array\<[Header](#header)\> | Resource response header.|
@@ -1493,6 +1939,7 @@ getResponseMimeType(): string
 Obtains the MIME type of the resource response.
 
 **Return value**
+
 | Type    | Description                |
 | ------ | ------------------ |
 | string | MIME type of the resource response.|
@@ -1504,6 +1951,7 @@ setResponseData(data: string)
 Sets the data in the resource response.
 
 **Parameters**
+
 | Name | Type  | Mandatory  | Default Value | Description       |
 | ---- | ------ | ---- | ---- | ----------- |
 | data | string | Yes   | -    | Resource response data to set.|
@@ -1515,6 +1963,7 @@ setResponseEncoding(encoding: string)
 Sets the encoding string of the resource response.
 
 **Parameters**
+
 | Name     | Type  | Mandatory  | Default Value | Description        |
 | -------- | ------ | ---- | ---- | ------------ |
 | encoding | string | Yes   | -    | Encoding string to set.|
@@ -1526,6 +1975,7 @@ setResponseMimeType(mimeType: string)
 Sets the MIME type of the resource response.
 
 **Parameters**
+
 | Name     | Type  | Mandatory  | Default Value | Description                |
 | -------- | ------ | ---- | ---- | -------------------- |
 | mimeType | string | Yes   | -    | MIME type to set.|
@@ -1537,6 +1987,7 @@ setReasonMessage(reason: string)
 Sets the status code description of the resource response.
 
 **Parameters**
+
 | Name   | Type  | Mandatory  | Default Value | Description           |
 | ------ | ------ | ---- | ---- | --------------- |
 | reason | string | Yes   | -    | Status code description to set.|
@@ -1548,6 +1999,7 @@ setResponseHeader(header: Array\<Header\>)
 Sets the resource response header.
 
 **Parameters**
+
 | Name   | Type                      | Mandatory  | Default Value | Description      |
 | ------ | -------------------------- | ---- | ---- | ---------- |
 | header | Array\<[Header](#header)\> | Yes   | -    | Resource response header to set.|
@@ -1559,6 +2011,7 @@ setResponseCode(code: number)
 Sets the status code of the resource response.
 
 **Parameters**
+
 | Name | Type  | Mandatory  | Default Value | Description         |
 | ---- | ------ | ---- | ---- | ------------- |
 | code | number | Yes   | -    | Status code to set.|
@@ -1574,6 +2027,7 @@ handleFileList(fileList: Array\<string\>): void
 Instructs the **\<Web>** component to select a file.
 
 **Parameters**
+
 | Name     | Type           | Mandatory  | Default Value | Description        |
 | -------- | --------------- | ---- | ---- | ------------ |
 | fileList | Array\<string\> | Yes   | -    | List of files to operate.|
@@ -1589,6 +2043,7 @@ getTitle(): string
 Obtains the title of the file selector.
 
 **Return value**
+
 | Type    | Description        |
 | ------ | ---------- |
 | string | Title of the file selector.|
@@ -1600,6 +2055,7 @@ getMode(): FileSelectorMode
 Obtains the mode of the file selector.
 
 **Return value**
+
 | Type                                      | Description         |
 | ---------------------------------------- | ----------- |
 | [FileSelectorMode](#fileselectormode)| Mode of the file selector.|
@@ -1611,6 +2067,7 @@ getAcceptType(): Array\<string\>
 Obtains the file filtering type.
 
 **Return value**
+
 | Type             | Description       |
 | --------------- | --------- |
 | Array\<string\> | File filtering type.|
@@ -1622,6 +2079,7 @@ isCapture(): boolean
 Checks whether multimedia capabilities are invoked.
 
 **Return value**
+
 | Type     | Description          |
 | ------- | ------------ |
 | boolean | Whether multimedia capabilities are invoked.|
@@ -1650,6 +2108,7 @@ Performs HTTP authentication with the user name and password provided by the use
 | pwd      | string | Yes   | -    | HTTP authentication password. |
 
 **Return value**
+
 | Type     | Description                   |
 | ------- | --------------------- |
 | boolean | Returns **true** if the authentication is successful; returns **false** otherwise.|
@@ -1661,23 +2120,69 @@ isHttpAuthInfoSaved(): boolean
 Uses the password cached on the server for authentication.
 
 **Return value**
+
 | Type     | Description                       |
 | ------- | ------------------------- |
 | boolean | Returns **true** if the authentication is successful; returns **false** otherwise.|
 
-## PermissionRequest<sup>9+</sup>
+## SslErrorHandler<sup>9+</sup>
 
-Implements the **PermissionRequest** object. For details about the sample code, see [onPermissionRequest](#onpermissionrequest9).
+Implements an **SslErrorHandler** object. For details about the sample code, see [onSslErrorEventReceive Event](#onsslerroreventreceive9).
 
-### deny<sup>9+</sup>
+### handleCancel<sup>9+</sup>
 
-deny(): void
+handleCancel(): void
 
-Denies the permission requested by the web page.
+Instructs the web component to cancel the request.
 
-### getOrigin<sup>9+</sup>
+### handleConfirm<sup>9+</sup>
 
-getOrigin(): string
+handleConfirm(): void
+
+Instructs the web component to continue using the SSL certificate.
+
+## ClientAuthenticationHandler<sup>9+</sup>
+
+Defines a **ClientAuthenticationHandler** object returned by the web component. For details about the sample code, see [onClientAuthenticationRequest](#onclientauthenticationrequest9).
+
+### confirm<sup>9+</sup>
+
+confirm(priKeyFile : string, certChainFile : string): void
+
+Instructs the web component to use the specified private key and client certificate chain.
+
+**Parameters**
+
+| Name        | Type| Mandatory  | Description       |
+| --------      | ------   | ----  | ----------     |
+| priKeyFile    | string   | Yes   | File that stores the private key, including the directory and file name.|
+| certChainFile | string   | Yes   | File that stores the certificate chain, including the directory and file name.|
+
+### cancel<sup>9+</sup>
+
+cancel(): void
+
+Instructs the web component to cancel the client certificate request sent by the same host and port server. No additional event will be reported for requests from the same host and port server.
+
+### ignore<sup>9+</sup>
+
+ignore(): void
+
+Instructs the web component to ignore this request.
+
+## PermissionRequest<sup>9+</sup>
+
+Implements the **PermissionRequest** object. For details about the sample code, see [onPermissionRequest](#onpermissionrequest9).
+
+### deny<sup>9+</sup>
+
+deny(): void
+
+Denies the permission requested by the web page.
+
+### getOrigin<sup>9+</sup>
+
+getOrigin(): string
 
 Obtains the origin of this web page.
 
@@ -1711,6 +2216,116 @@ Grants the permission for resources requested by the web page.
 | --------- | --------------- | ---- | ----- | ---------------------- |
 | resources | Array\<string\> | Yes  | -     | List of accessible resources requested by the web page.|
 
+## WebContextMenuParam<sup>9+</sup>
+
+Provides the information about the context menu that is displayed when a page element is long pressed. For details about the sample code, see [onContextMenuShow](#oncontextmenushow9).
+
+### x<sup>9+</sup>
+
+x(): number
+
+X coordinate of the context menu.
+
+**Return value**
+
+| Type           | Description                    |
+| --------------- | ----------------------- |
+| number | If the display is normal, a non-negative integer is returned. Otherwise, **-1** is returned.|
+
+### y<sup>9+</sup>
+
+y(): number
+
+Y coordinate of the context menu.
+
+**Return value**
+
+| Type           | Description                    |
+| --------------- | ----------------------- |
+| number | If the display is normal, a non-negative integer is returned. Otherwise, **-1** is returned.|
+
+### getLinkUrl<sup>9+</sup>
+
+getLinkUrl(): string
+
+Obtains the URL of the destination link.
+
+**Return value**
+
+| Type           | Description                    |
+| --------------- | ----------------------- |
+| string | If it is the link that is being long pressed, the URL that has passed the security check is returned.|
+
+### getUnfilterendLinkUrl<sup>9+</sup>
+
+getUnfilterendLinkUrl(): string
+
+Obtains the URL of the destination link.
+
+**Return value**
+
+| Type           | Description                    |
+| --------------- | ----------------------- |
+| string | If it is the link that is being long pressed, the original URL is returned.|
+
+### getSourceUrl<sup>9+</sup>
+
+getSourceUrl(): string
+
+Obtain the source URL.
+
+**Return value**
+
+| Type           | Description                    |
+| --------------- | ----------------------- |
+| string | If the selected element has the **src** attribute, the URL in the **src** is returned.|
+
+### existsImageContents<sup>9+</sup>
+
+existsImageContents(): boolean
+
+Checks whether image content exists.
+
+**Return value**
+
+| Type           | Description                    |
+| --------------- | ----------------------- |
+| boolean | The value **true** means that there is image content in the element being long pressed, and **false** means the opposite.|
+
+## WebContextMenuResult<sup>9+</sup>
+
+Defines the response event executed when a context menu is displayed. For details about the sample code, see [onContextMenuShow](#oncontextmenushow9).
+
+### closeContextMenu<sup>9+</sup>
+
+closeContextMenu(): void
+
+Closes this context menu. This API must be called when no operations in **WebContextMenuResult** are performed.
+
+### copyImage<sup>9+</sup>
+
+copyImage(): void
+
+Copies the image specified in **WebContextMenuParam**.
+
+## JsGeolocation
+
+Implements the **PermissionRequest** object. For details about the sample code, see [onGeolocationShow Event](#ongeolocationshow).
+
+### invoke
+
+invoke(origin: string, allow: boolean, retain: boolean): void
+
+Sets the geolocation permission status of a web page.
+
+**Parameters**
+
+| Name    | Type| Mandatory| Default Value| Description              |
+| --------- | ------- | ---- | ----- | ---------------------- |
+| origin    | string  | Yes  | -     | Index of the source.    |
+| allow     | boolean | Yes  | -     | Geolocation permission status.|
+| retain    | boolean | Yes  | -     | Whether the geolocation permission status can be saved to the system. The **[GeolocationPermissions](#geolocationpermissions9)** API can be used to manage the geolocation permission status saved to the system.|
+
 ## WebController
 
 Defines a **WebController** to control the behavior of the **\<Web>** component. A **WebController** can control only one **\<Web>** component, and the APIs in the **WebController** can be invoked only after it has been bound to the target **\<Web>** component.
@@ -1728,6 +2343,7 @@ requestFocus()
 Requests focus for this web page.
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
@@ -1754,11 +2370,13 @@ accessBackward(): boolean
 Checks whether going to the previous page can be performed on the current page.
 
 **Return value**
+
 | Type     | Description                   |
 | ------- | --------------------- |
 | boolean | Returns **true** if going to the previous page can be performed on the current page; returns **false** otherwise.|
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
@@ -1786,11 +2404,13 @@ accessForward(): boolean
 Checks whether going to the next page can be performed on the current page.
 
 **Return value**
+
 | Type     | Description                   |
 | ------- | --------------------- |
 | boolean | Returns **true** if going to the next page can be performed on the current page; returns **false** otherwise.|
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
@@ -1824,11 +2444,13 @@ Indicates whether a specific number of steps forward or backward can be performe
 | step | number | Yes   | -    | Number of the steps to take. A positive number means to going forward, and a negative number means to going backward.|
 
 **Return value**
+
 | Type     | Description       |
 | ------- | --------- |
 | boolean | Whether to go forward or backward from the current page.|
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
@@ -1857,6 +2479,7 @@ backward(): void
 Goes to the previous page based on the history stack. This API is generally used together with **accessBackward**.
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
@@ -1883,6 +2506,7 @@ forward(): void
 Goes to the next page based on the history stack. This API is generally used together with **accessForward**.
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
@@ -1909,24 +2533,29 @@ backOrForward(step: number): void
 Performs a specific number of steps forward or backward on the current page based on the history stack. No redirection will be performed if the corresponding page does not exist in the history stack.
 
 **Parameters**
+
 | Name | Type  | Mandatory  | Default Value | Description       |
 | ---- | ------ | ---- | ---- | ----------- |
 | step | number | Yes   | -    | Number of the steps to take.|
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
   @Component
   struct WebComponent {
-    controller:WebController = new WebController();
+    controller: WebController = new WebController();
+    @State step: number = -2;
+  
     build() {
       Column() {
         Button('backOrForward')
           .onClick(() => {
-          this.controller.backOrForward();
+            this.controller.backOrForward(this.step);
           })
-        Web({ src:'www.example.com', controller:this.controller })
+        Web({ src: 'www.example.com', controller: this.controller })
+      }
     }
   }
   ```
@@ -1938,11 +2567,13 @@ deleteJavaScriptRegister(name: string)
 Deletes a specific application JavaScript object that is registered with the window through **registerJavaScriptProxy**. The deletion takes effect immediately, with no need for invoking the [refresh](#refresh) API.
 
 **Parameters**
+
 | Name | Type  | Mandatory  | Default Value | Description                                    |
 | ---- | ------ | ---- | ---- | ---------------------------------------- |
 | name | string | Yes   | -    | Name of the registered JavaScript object, which can be used to invoke the corresponding object on the application side from the web side.|
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
@@ -1970,11 +2601,13 @@ getHitTest(): HitTestType
 Obtains the element type of the area being clicked.	
 
 **Return value**
+
 | Type                             | Description         |
 | ------------------------------- | ----------- |
 | [HitTestType](#hittesttype)| Element type of the area being clicked.|
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
@@ -2001,11 +2634,13 @@ getHitTestValue(): HitTestValue
 Obtains the element information of the area being clicked.
 
 **Return value**
+
 | Type                            | Description        |
 | ------------------------------ | ---------- |
 | [HitTestValue](#hittestvalue9) | Element information of the area being clicked.|
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
@@ -2033,11 +2668,13 @@ getWebId(): number
 Obtains the index value of this **\<Web>** component, which can be used for **\<Web>** component management.
 
 **Return value**
+
 | Type    | Description          |
 | ------ | ------------ |
 | number | Index value of the current **\<Web>** component.|
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
@@ -2064,11 +2701,13 @@ getTitle(): string
 Obtains the title of the current web page.
 
 **Return value**
+
 | Type    | Description      |
 | ------ | -------- |
 | string | Title of the current web page.|
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
@@ -2095,11 +2734,13 @@ getPageHeight(): number
 Obtains the height of the current web page.
 
 **Return value**
+
 | Type    | Description        |
 | ------ | ---------- |
 | number | Height of the current web page.|
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
@@ -2126,11 +2767,13 @@ getDefaultUserAgent(): string
 Obtains the default user agent of the current web page.
 
 **Return value**
+
 | Type    | Description     |
 | ------ | ------- |
 | string | Default user agent.|
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
@@ -2162,6 +2805,7 @@ If **baseUrl** is set to a data URL, the encoded string will be loaded by the **
 If **baseUrl** is set to an HTTP or HTTPS URL, the encoded string will be processed by the **\<Web>** component as a non-encoded string in a manner similar to **loadUrl**.
 
 **Parameters**
+
 | Name       | Type  | Mandatory  | Default Value | Description                                    |
 | ---------- | ------ | ---- | ---- | ---------------------------------------- |
 | data       | string | Yes   | -    | Character string obtained after being Base64 or URL encoded.             |
@@ -2171,6 +2815,7 @@ If **baseUrl** is set to an HTTP or HTTPS URL, the encoded string will be proces
 | historyUrl | string | No   | -    | Historical record URL. If this parameter is not empty, it can be managed in historical records to implement page going backward and forward. This parameter is invalid when **baseUrl** is left empty.|
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
@@ -2205,12 +2850,14 @@ The object injected through **loadUrl** is valid only in the current document. I
 The object injected through **registerJavaScriptProxy** is still valid on a new page redirected through **loadUrl**.
 
 **Parameters**
+
 | Name    | Type                      | Mandatory  | Default Value | Description          |
 | ------- | -------------------------- | ---- | ---- | -------------- |
 | url     | string                     | Yes   | -    | URL to load.    |
 | headers | Array\<[Header](#header)\> | No   | []   | Additional HTTP request header of the URL.|
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
@@ -2237,6 +2884,7 @@ onActive(): void
 Invoked to instruct the **\<Web>** component to enter the foreground, active state.
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
@@ -2263,6 +2911,7 @@ onInactive(): void
 Invoked to instruct the **\<Web>** component to enter the inactive state.
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
@@ -2288,11 +2937,13 @@ zoom(factor: number): void
 Sets a zoom factor for the current web page.
 
 **Parameters**
+
 | Name   | Type  | Mandatory  | Description                          |
 | ------ | ------ | ---- | ------------------------------ |
 | factor | number | Yes   | Zoom factor to set. A positive value indicates zoom-in, and a negative value indicates zoom-out.|
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
@@ -2319,11 +2970,13 @@ zoomIn(): boolean
 Zooms in on the current web page by 20%.
 
 **Return value**
+
 | Type     | Description         |
 | ------- | ----------- |
 | boolean | Operation result.|
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
@@ -2350,11 +3003,13 @@ zoomOut(): boolean
 Zooms out the current web page by 20%.
 
 **Return value**
+
 | Type     | Description         |
 | ------- | ----------- |
 | boolean | Operation result.|
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
@@ -2382,6 +3037,7 @@ refresh()
 Invoked to instruct the **\<Web>** component to refresh the web page.
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
@@ -2408,6 +3064,7 @@ registerJavaScriptProxy(options: { object: object, name: string, methodList: Arr
 Registers a JavaScript object and invokes the methods of the object in the window. You must invoke the [refresh](#refresh) API for the registration to take effect.
 
 **Parameters**
+
 | Name       | Type           | Mandatory  | Default Value | Description                                    |
 | ---------- | --------------- | ---- | ---- | ---------------------------------------- |
 | object     | object          | Yes   | -    | Application-side JavaScript object to be registered. Methods can be declared, but not attributes. The parameters and return value can only be of the string, number, or Boolean type.|
@@ -2415,6 +3072,7 @@ Registers a JavaScript object and invokes the methods of the object in the windo
 | methodList | Array\<string\> | Yes   | -    | Methods of the JavaScript object to be registered at the application side.                |
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
@@ -2472,12 +3130,14 @@ runJavaScript(options: { script: string, callback?: (result: string) => void })
 Asynchronously executes a JavaScript script. This API uses a callback to return the script execution result. **runJavaScript** can be invoked only after **loadUrl** is executed. For example, it can be executed in **onPageEnd**.
 
 **Parameters**
+
 | Name     | Type                    | Mandatory  | Default Value | Description                                    |
 | -------- | ------------------------ | ---- | ---- | ---------------------------------------- |
 | script   | string                   | Yes   | -    | JavaScript script.                           |
 | callback | (result: string) => void | No   | -    | Callback used to return the result. Returns **null** if the JavaScript script fails to be executed or no value is returned.|
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
@@ -2529,6 +3189,7 @@ stop()
 Stops page loading.
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
@@ -2555,6 +3216,7 @@ clearHistory(): void
 Clears the browsing history.
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
@@ -2574,18 +3236,14 @@ Clears the browsing history.
   }
   ```
 
-### getCookieManager<sup>9+</sup>
-
-getCookieManager(): WebCookie
+### clearSslCache
 
-Obtains the cookie management object of the **\<Web>** component.
+clearSslCache(): void
 
-**Return value**
-| Type       | Description                                      |
-| --------- | ---------------------------------------- |
-| WebCookie | Cookie management object. For details, see [WebCookie](#webcookie).|
+Clears user operation corresponding to the SSL certificate error event recorded by the web component.
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
@@ -2595,9 +3253,9 @@ Obtains the cookie management object of the **\<Web>** component.
 
     build() {
       Column() {
-        Button('getCookieManager')
+        Button('clearSslCache')
           .onClick(() => {
-            let cookieManager = this.controller.getCookieManager();
+            this.controller.clearSslCache();
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -2605,64 +3263,94 @@ Obtains the cookie management object of the **\<Web>** component.
   }
   ```
 
-## HitTestValue<sup>9+</sup>
-Implements the **HitTestValue** object. For details about the sample code, see [getHitTestValue](#gethittestvalue9).
+### clearClientAuthenticationCache
 
-### getType<sup>9+</sup>
-getType(): HitTestType
+clearClientAuthenticationCache(): void
 
-Obtains the element type of the area being clicked.
+Clears the user operation corresponding to the client certificate request event recorded by the web component.
 
-**Return value**
-| Type                             | Description           |
-| ------------------------------- | ------------- |
-| [HitTestType](#hittesttype)| Element type of the area being clicked.|
+**Example**
 
-### getExtra<sup>9+</sup>
-getExtra(): string
+  ```ts
+  // xxx.ets
+  @Entry
+  @Component
+  struct WebComponent {
+    controller: WebController = new WebController();
 
-Obtains the extra information of the area being clicked. If the area being clicked is an image or a link, the extra information is the URL of the image or link.
+    build() {
+      Column() {
+        Button('clearClientAuthenticationCache')
+          .onClick(() => {
+            this.controller.clearClientAuthenticationCache();
+          })
+        Web({ src: 'www.example.com', controller: this.controller })
+      }
+    }
+  }
+  ```
+
+### getCookieManager<sup>9+</sup>
+
+getCookieManager(): WebCookie
+
+Obtains the cookie management object of the **\<Web>** component.
 
 **Return value**
+
 | Type       | Description                                      |
-| ------ | ------------ |
-| string | Extra information of the area being clicked.|
+| --------- | ---------------------------------------- |
+| WebCookie | Cookie management object. For details, see [WebCookie](#webcookie).|
 
+**Example**
 
-## WebCookie
+  ```ts
+  // xxx.ets
+  @Entry
+  @Component
+  struct WebComponent {
+    controller: WebController = new WebController();
   
-Manages behavior of cookies in **\<Web>** components. All **\<Web>** components in an application share a **WebCookie**. You can use the **getCookieManager** API in **controller** to obtain the **WebCookie** for subsequent cookie management.
+    build() {
+      Column() {
+        Button('getCookieManager')
+          .onClick(() => {
+            let cookieManager = this.controller.getCookieManager();
+          })
+        Web({ src: 'www.example.com', controller: this.controller })
+      }
+    }
+  }
+  ```
 
-### setCookie<sup>9+</sup>
-setCookie(url: string, value: string): boolean
+### createWebMessagePorts<sup>9+</sup>
 
-Sets the cookie. This API returns the result synchronously.
+createWebMessagePorts(): Array\<WebMessagePort\>
 
-**Parameters**
-| Name  | Type  | Mandatory  | Default Value | Description             |
-| ----- | ------ | ---- | ---- | ----------------- |
-| url   | string | Yes   | -    | URL of the cookie to set.|
-| value | string | Yes   | -    | Value of the cookie to set.        |
+Creates web message ports.
 
 **Return value**
+
+
 | Type                             | Description           |
-| ------- | ------------- |
-| boolean | Returns **true** if the operation is successful; returns **false** otherwise.|
+| ------------------------------- | ------------- |
+| Array\<[WebMessagePort](#webmessageport9)\> | Array of web message ports.|
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
   @Component
   struct WebComponent {
     controller: WebController = new WebController();
-  
+    ports: WebMessagePort[] = null;
     build() {
       Column() {
-        Button('setCookie')
+        Button('createWebMessagePorts')
           .onClick(() => {
-            let result = this.controller.getCookieManager().setCookie("www.example.com", "a=b");
-            console.log("result: " + result);
+            this.ports = this.controller.createWebMessagePorts();
+            console.log("createWebMessagePorts size:" + this.ports.length)
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -2670,30 +3358,845 @@ Sets the cookie. This API returns the result synchronously.
   }
   ```
 
-### saveCookieSync<sup>9+</sup>
-saveCookieSync(): boolean
+### postMessage<sup>9+</sup>
 
-Saves this cookie in the memory to the drive. This API returns the result synchronously.
+postMessage(options: { message: WebMessageEvent, uri: string}): void
 
-**Return value**
-| Type     | Description                  |
-| ------- | -------------------- |
-| boolean | Operation result.|
+Sends a web message to an HTML5 page.
+
+**Parameters**
+
+| Name       | Type           | Mandatory  | Default Value | Description                     |
+| ---------- | --------------- | ---- | ---- | ------------------------- |
+| message     | [WebMessageEvent](#webmessageevent9)          | Yes   | -    |Message to send, including data and the message port.|
+| uri       | string          | Yes   | -    | URI to receive the message.|
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
   @Component
   struct WebComponent {
     controller: WebController = new WebController();
-  
+    ports: WebMessagePort[] = null;
     build() {
       Column() {
-        Button('saveCookieSync')
+        Button('postMessage')
           .onClick(() => {
-            let result = this.controller.getCookieManager().saveCookieSync();
-            console.log("result: " + result);
+            var sendPortArray = new Array(this.ports[1]);
+            var msgEvent = new WebMessageEvent();
+            msgEvent.setData("__init_ports__");
+            msgEvent.setPorts(sendPortArray);
+            this.controller.postMessage({message: msgEvent, uri: "*"});
+          })
+        Web({ src: 'www.example.com', controller: this.controller })
+      }
+    }
+  }
+  // xxx.js
+  var h5Port;
+  window.addEventListener('message', function(event){
+    if (event.data == '__init_ports__') {
+      if(event.ports[0] != null) {
+        h5Port = event.ports[0];
+        h5Port.onmessage = function(event) {
+          console.log('receive message from ets, on message:' + event.data);
+        }
+      }
+    }
+  })
+  ```
+
+### getUrl<sup>9+</sup>
+
+getUrl(): string
+
+Obtains the URL of the current page.
+
+**Return value**
+
+| Type                             | Description           |
+| ------------------------------- | ------------- |
+| string | URL of the current page.|
+
+**Example**
+
+  ```ts
+  // xxx.ets
+  @Entry
+  @Component
+  struct WebComponent {
+    controller: WebController = new WebController();
+    build() {
+      Column() {
+        Button('getUrl')
+          .onClick(() => {
+            console.log("url: " + this.controller.getUrl());
+          })
+        Web({ src: 'www.example.com', controller: this.controller })
+      }
+    }
+  }
+  ```
+
+## HitTestValue<sup>9+</sup>
+Implements the **HitTestValue** object. For details about the sample code, see [getHitTestValue](#gethittestvalue9).
+
+### getType<sup>9+</sup>
+getType(): HitTestType
+
+Obtains the element type of the area being clicked.
+
+**Return value**
+
+| Type                             | Description           |
+| ------------------------------- | ------------- |
+| [HitTestType](#hittesttype)| Element type of the area being clicked.|
+
+### getExtra<sup>9+</sup>
+getExtra(): string
+
+Obtains the extra information of the area being clicked. If the area being clicked is an image or a link, the extra information is the URL of the image or link.
+
+**Return value**
+
+| Type    | Description          |
+| ------ | ------------ |
+| string | Extra information of the area being clicked.|
+
+
+## WebCookie
+
+Manages behavior of cookies in **\<Web>** components. All **\<Web>** components in an application share a **WebCookie**. You can use the **getCookieManager** API in **controller** to obtain the **WebCookie** for subsequent cookie management.
+
+### setCookie<sup>9+</sup>
+setCookie(url: string, value: string): boolean
+
+Sets the cookie. This API returns the result synchronously. Returns **true** if the operation is successful; returns **false** otherwise.
+
+**Parameters**
+
+| Name  | Type  | Mandatory  | Default Value | Description             |
+| ----- | ------ | ---- | ---- | ----------------- |
+| url   | string | Yes   | -    | URL of the cookie to set.|
+| value | string | Yes   | -    | Value of the cookie to set.        |
+
+**Return value**
+
+| Type     | Description           |
+| ------- | ------------- |
+| boolean | Returns **true** if the operation is successful; returns **false** otherwise.|
+
+**Example**
+
+  ```ts
+  // xxx.ets
+  @Entry
+  @Component
+  struct WebComponent {
+    controller: WebController = new WebController();
+  
+    build() {
+      Column() {
+        Button('setCookie')
+          .onClick(() => {
+            let result = this.controller.getCookieManager().setCookie("www.example.com", "a=b");
+            console.log("result: " + result);
+          })
+        Web({ src: 'www.example.com', controller: this.controller })
+      }
+    }
+  }
+  ```
+
+### saveCookieSync<sup>9+</sup>
+saveCookieSync(): boolean
+
+Saves this cookie in the memory to the drive. This API returns the result synchronously.
+
+**Return value**
+
+| Type     | Description                  |
+| ------- | -------------------- |
+| boolean | Operation result.|
+
+**Example**
+
+  ```ts
+  // xxx.ets
+  @Entry
+  @Component
+  struct WebComponent {
+    controller: WebController = new WebController();
+  
+    build() {
+      Column() {
+        Button('saveCookieSync')
+          .onClick(() => {
+            let result = this.controller.getCookieManager().saveCookieSync();
+            console.log("result: " + result);
+          })
+        Web({ src: 'www.example.com', controller: this.controller })
+      }
+    }
+  }
+  ```
+
+### getCookie<sup>9+</sup>
+getCookie(url: string): string
+
+Obtains the cookie value corresponding to the specified URL.
+
+**Parameters**
+
+| Name  | Type  | Mandatory  | Default Value | Description             |
+| ----- | ------ | ---- | ---- | ----------------- |
+| url   | string | Yes   | -    | URL of the cookie value to obtain.|
+
+**Return value**
+
+| Type     | Description                  |
+| ------- | -------------------- |
+| string | Cookie value corresponding to the specified URL.|
+
+**Example**
+
+  ```ts
+  // xxx.ets
+  import web_webview from '@ohos.web.webview'
+  @Entry
+  @Component
+  struct WebComponent {
+    controller: WebController = new WebController();
+  
+    build() {
+      Column() {
+        Button('getCookie')
+          .onClick(() => {
+            let value = webview.WebCookieManager.getCookie('www.example.com');
+            console.log("value: " + value);
+          })
+        Web({ src: 'www.example.com', controller: this.controller })
+      }
+    }
+  }
+  ```
+
+### setCookie<sup>9+</sup>
+setCookie(url: string, value: string): boolean
+
+Sets a cookie value for the specified URL.
+
+**Parameters**
+
+| Name  | Type  | Mandatory  | Default Value | Description             |
+| ----- | ------ | ---- | ---- | ----------------- |
+| url   | string | Yes   | -    | URL of the cookie to set.|
+| value   | string | Yes   | -    | Cookie value to set.|
+
+**Return value**
+
+| Type     | Description                  |
+| ------- | -------------------- |
+| boolean | Returns **true** if the operation is successful; returns **false** otherwise.|
+
+**Example**
+
+  ```ts
+  // xxx.ets
+  import web_webview from '@ohos.web.webview'
+  @Entry
+  @Component
+  struct WebComponent {
+    controller: WebController = new WebController();
+  
+    build() {
+      Column() {
+        Button('setCookie')
+          .onClick(() => {
+            let result = web_webview.WebCookieManager.setCookie('www.example.com', 'a=b');
+            console.log("result: " + result);
+          })
+        Web({ src: 'www.example.com', controller: this.controller })
+      }
+    }
+  }
+  ```
+
+### saveCookieSync<sup>9+</sup>
+saveCookieSync(): boolean
+
+Saves cookies in the memory to the drive. This API is synchronous.
+
+**Return value**
+
+| Type     | Description                  |
+| ------- | -------------------- |
+| boolean | Operation result.|
+
+**Example**
+
+  ```ts
+  // xxx.ets
+  import web_webview from '@ohos.web.webview'
+  @Entry
+  @Component
+  struct WebComponent {
+    controller: WebController = new WebController();
+  
+    build() {
+      Column() {
+        Button('saveCookieSync')
+          .onClick(() => {
+            let result = web_webview.WebCookieManager.saveCookieSync();
+            console.log("result: " + result);
+          })
+        Web({ src: 'www.example.com', controller: this.controller })
+      }
+    }
+  }
+  ```
+
+### saveCookieAsync<sup>9+</sup>
+saveCookieAsync(): Promise\<boolean>
+
+Saves cookies in the memory to the drive. This API uses a promise to return the value.
+
+**Return value**
+
+| Type     | Description                  |
+| ------- | -------------------- |
+| Promise\<boolean> | Promise used to return the result.|
+
+**Example**
+
+  ```ts
+  // xxx.ets
+  import web_webview from '@ohos.web.webview'
+  @Entry
+  @Component
+  struct WebComponent {
+    controller: WebController = new WebController();
+  
+    build() {
+      Column() {
+        Button('saveCookieAsync')
+          .onClick(() => {
+            web_webview.WebCookieManager.saveCookieAsync()
+              .then (function(result) {
+                console.log("result: " + result);
+              })
+              .catch(function(error) {
+                console.error("error: " + error);
+              });
+          })
+        Web({ src: 'www.example.com', controller: this.controller })
+      }
+    }
+  }
+  ```
+
+### saveCookieAsync<sup>9+</sup>
+saveCookieAsync(callback: AsyncCallback\<boolean>): void
+
+Saves cookies in the memory to the drive. This API uses an asynchronous callback to return the value.
+
+**Parameters**
+
+| Name  | Type  | Mandatory  | Default Value | Description             |
+| ----- | ------ | ---- | ---- | ----------------- |
+| callback   | AsyncCallback\<boolean> | Yes   | -    | Callback used to return the operation result.|
+
+**Example**
+
+  ```ts
+  // xxx.ets
+  import web_webview from '@ohos.web.webview'
+  @Entry
+  @Component
+  struct WebComponent {
+    controller: WebController = new WebController();
+  
+    build() {
+      Column() {
+        Button('saveCookieAsync')
+          .onClick(() => {
+            web_webview.WebCookieManager.saveCookieAsync(function(result) {
+              console.log("result: " + result);
+            });
+          })
+        Web({ src: 'www.example.com', controller: this.controller })
+      }
+    }
+  }
+  ```
+
+### isCookieAllowed<sup>9+</sup>
+isCookieAllowed(): boolean
+
+Checks whether the **WebCookieManager** instance has the permission to send and receive cookies.
+
+**Return value**
+
+| Type     | Description                  |
+| ------- | -------------------- |
+| boolean | Whether the **WebCookieManager** instance has the permission to send and receive cookies.|
+
+**Example**
+
+  ```ts
+  // xxx.ets
+  import web_webview from '@ohos.web.webview'
+  @Entry
+  @Component
+  struct WebComponent {
+    controller: WebController = new WebController();
+  
+    build() {
+      Column() {
+        Button('isCookieAllowed')
+          .onClick(() => {
+            let result = web_webview.WebCookieManager.isCookieAllowed();
+            console.log("result: " + result);
+          })
+        Web({ src: 'www.example.com', controller: this.controller })
+      }
+    }
+  }
+  ```
+
+### putAcceptCookieEnabled<sup>9+</sup>
+putAcceptCookieEnabled(accept: boolean): void
+
+Sets whether the **WebCookieManager** instance has the permission to send and receive cookies.
+
+**Parameters**
+
+| Name  | Type  | Mandatory  | Default Value | Description             |
+| ----- | ------ | ---- | ---- | ----------------- |
+| accept   | boolean | Yes   | -    | Whether the **WebCookieManager** instance has the permission to send and receive cookies.|
+
+**Example**
+
+  ```ts
+  // xxx.ets
+  import web_webview from '@ohos.web.webview'
+  @Entry
+  @Component
+  struct WebComponent {
+    controller: WebController = new WebController();
+  
+    build() {
+      Column() {
+        Button('putAcceptCookieEnabled')
+          .onClick(() => {
+            web_webview.WebCookieManager.putAcceptCookieEnabled(false);
+          })
+        Web({ src: 'www.example.com', controller: this.controller })
+      }
+    }
+  }
+  ```
+
+### isThirdPartyCookieAllowed<sup>9+</sup>
+isThirdCookieAllowed(): boolean
+
+Checks whether the **WebCookieManager** instance has the permission to send and receive third-party cookies.
+
+**Return value**
+
+| Type     | Description                  |
+| ------- | -------------------- |
+| boolean | Whether the **WebCookieManager** instance has the permission to send and receive third-party cookies.|
+
+**Example**
+
+  ```ts
+  // xxx.ets
+  import web_webview from '@ohos.web.webview'
+  @Entry
+  @Component
+  struct WebComponent {
+    controller: WebController = new WebController();
+  
+    build() {
+      Column() {
+        Button('isThirdPartyCookieAllowed')
+          .onClick(() => {
+            let result = web_webview.WebCookieManager.isThirdPartyCookieAllowed();
+            console.log("result: " + result);
+          })
+        Web({ src: 'www.example.com', controller: this.controller })
+      }
+    }
+  }
+  ```
+
+### putAcceptThirdPartyCookieEnabled<sup>9+</sup>
+putAcceptThirdPartyCookieEnabled(accept: boolean): void
+
+Sets whether the **WebCookieManager** instance has the permission to send and receive third-party cookies.
+
+**Parameters**
+
+| Name  | Type  | Mandatory  | Default Value | Description             |
+| ----- | ------ | ---- | ---- | ----------------- |
+| accept   | boolean | Yes   | -    | Whether the **WebCookieManager** instance has the permission to send and receive third-party cookies.|
+
+**Example**
+
+  ```ts
+  // xxx.ets
+  import web_webview from '@ohos.web.webview'
+  @Entry
+  @Component
+  struct WebComponent {
+    controller: WebController = new WebController();
+  
+    build() {
+      Column() {
+        Button('putAcceptThirdPartyCookieEnabled')
+          .onClick(() => {
+            web_webview.WebCookieManager.putAcceptThirdPartyCookieEnabled(false);
+          })
+        Web({ src: 'www.example.com', controller: this.controller })
+      }
+    }
+  }
+  ```
+
+### existCookie<sup>9+</sup>
+existCookie(): boolean
+
+Checks whether cookies exist.
+
+**Return value**
+
+| Type     | Description                  |
+| ------- | -------------------- |
+| boolean | Whether cookies exist.|
+
+**Example**
+
+  ```ts
+  // xxx.ets
+  import web_webview from '@ohos.web.webview'
+  @Entry
+  @Component
+  struct WebComponent {
+    controller: WebController = new WebController();
+  
+    build() {
+      Column() {
+        Button('existCookie')
+          .onClick(() => {
+            let result = web_webview.WebCookieManager.existCookie();
+            console.log("result: " + result);
+          })
+        Web({ src: 'www.example.com', controller: this.controller })
+      }
+    }
+  }
+  ```
+
+### deleteEntireCookie<sup>9+</sup>
+deleteEntireCookie(): void
+
+Deletes all cookies.
+
+**Example**
+
+  ```ts
+  // xxx.ets
+  import web_webview from '@ohos.web.webview'
+  @Entry
+  @Component
+  struct WebComponent {
+    controller: WebController = new WebController();
+  
+    build() {
+      Column() {
+        Button('deleteEntireCookie')
+          .onClick(() => {
+            web_webview.WebCookieManager.deleteEntireCookie();
+          })
+        Web({ src: 'www.example.com', controller: this.controller })
+      }
+    }
+  }
+  ```
+
+### deleteSessionCookie<sup>9+</sup>
+deleteSessionCookie(): void
+
+Deletes all session cookies.
+
+**Example**
+
+  ```ts
+  // xxx.ets
+  import web_webview from '@ohos.web.webview'
+  @Entry
+  @Component
+  struct WebComponent {
+    controller: WebController = new WebController();
+  
+    build() {
+      Column() {
+        Button('deleteSessionCookie')
+          .onClick(() => {
+            webview.WebCookieManager.deleteSessionCookie();
+          })
+        Web({ src: 'www.example.com', controller: this.controller })
+      }
+    }
+  }
+  ```
+
+## WebDataBase<sup>9+</sup>
+Implements the **WebDataBase** object.
+
+### existHttpAuthCredentials<sup>9+</sup>
+
+static existHttpAuthCredentials(): boolean
+
+Checks whether any saved HTTP authentication credentials exist. This API is synchronous.
+
+**Return value**
+
+| Type     | Description                                      |
+| ------- | ---------------------------------------- |
+| boolean | Whether any saved HTTP authentication credentials exist. Returns **true** if any saved HTTP authentication credentials exist exists; returns **false** otherwise.|
+
+**Example**
+
+  ```ts
+  // xxx.ets
+  import web_webview from '@ohos.web.webview'
+  @Entry
+  @Component
+  struct WebComponent {
+    controller: WebController = new WebController();
+  
+    build() {
+      Column() {
+        Button('existHttpAuthCredentials')
+          .onClick(() => {
+            let result = web_webview.WebDataBase.existHttpAuthCredentials();
+            console.log('result: ' + result);
+          })
+        Web({ src: 'www.example.com', controller: this.controller })
+      }
+    }
+  }
+  ```
+
+### deleteHttpAuthCredentials<sup>9+</sup>
+
+static deleteHttpAuthCredentials(): void
+
+Deletes all HTTP authentication credentials saved in the cache. This API returns the result synchronously.
+
+**Example**
+
+  ```ts
+  // xxx.ets
+  import web_webview from '@ohos.web.webview'
+  @Entry
+  @Component
+  struct WebComponent {
+    controller: WebController = new WebController();
+  
+    build() {
+      Column() {
+        Button('deleteHttpAuthCredentials')
+          .onClick(() => {
+            web_webview.WebDataBase.deleteHttpAuthCredentials();
+          })
+        Web({ src: 'www.example.com', controller: this.controller })
+      }
+    }
+  }
+  ```
+
+### getHttpAuthCredentials<sup>9+</sup>
+
+static getHttpAuthCredentials(host: string, realm: string): Array\<string\>
+
+Retrieves HTTP authentication credentials for a given host and domain. This API is synchronous.
+
+**Parameters**
+
+| Name  | Type  | Mandatory  | Default Value | Description            |
+| ----- | ------ | ---- | ---- | ---------------- |
+| host  | string | Yes   | -    | Host for which you want to obtain the HTTP authentication credentials.|
+| realm | string | Yes   | -    | Realm for which you want to obtain the HTTP authentication credentials. |
+
+**Return value**
+
+| Type             | Description                    |
+| --------------- | ---------------------- |
+| Array\<string\> | Returns the array of the matching user names and passwords if the operation is successful; returns an empty array otherwise.|
+
+**Example**
+
+  ```ts
+  // xxx.ets
+  import web_webview from '@ohos.web.webview'
+  @Entry
+  @Component
+  struct WebComponent {
+    controller: WebController = new WebController();
+    host: string = "www.spincast.org";
+    realm: string = "protected example";
+    username_password: string[];
+    build() {
+      Column() {
+        Button('getHttpAuthCredentials')
+          .onClick(() => {
+            this.username_password = web_webview.WebDataBase.getHttpAuthCredentials(this.host, this.realm);
+            console.log('num: ' + this.username_password.length);
+            ForEach(this.username_password, (item) => {
+              console.log('username_password: ' + item);
+            }, item => item)
+          })
+        Web({ src: 'www.example.com', controller: this.controller })
+      }
+    }
+  }
+  ```
+
+### saveHttpAuthCredentials<sup>9+</sup>
+
+static saveHttpAuthCredentials(host: string, realm: string, username: string, password: string): void
+
+Saves HTTP authentication credentials for a given host and realm. This API returns the result synchronously.
+
+**Parameters**
+
+| Name     | Type  | Mandatory  | Default Value | Description            |
+| -------- | ------ | ---- | ---- | ---------------- |
+| host     | string | Yes   | -    | Host for which you want to obtain the HTTP authentication credentials.|
+| realm    | string | Yes   | -    | Realm to which HTTP authentication credentials apply. |
+| username | string | Yes   | -    | User name.            |
+| password | string | Yes   | -    | Password.             |
+
+**Example**
+
+  ```ts
+  // xxx.ets
+  import web_webview from '@ohos.web.webview'
+  @Entry
+  @Component
+  struct WebComponent {
+    controller: WebController = new WebController();
+    host: string = "www.spincast.org";
+    realm: string = "protected example";
+    build() {
+      Column() {
+        Button('saveHttpAuthCredentials')
+          .onClick(() => {
+            web_webview.WebDataBase.saveHttpAuthCredentials(this.host, this.realm, "Stromgol", "Laroche");
+          })
+        Web({ src: 'www.example.com', controller: this.controller })
+      }
+    }
+  }
+  ```
+
+## GeolocationPermissions<sup>9+</sup>
+
+Defines a **GeolocationPermissions** object.
+
+### allowGeolocation<sup>9+</sup>
+
+static allowGeolocation(origin: string): void
+
+Allows the specified source to use the geolocation information.
+
+**Parameters**
+
+| Name   | Type| Mandatory| Default Value| Description      |
+| -------- | -------- | ---- | ----- | ------------- |
+| origin   | string   | Yes  | -     | Index of the source.|
+
+**Example**
+
+  ```ts
+  // xxx.ets
+  import web_webview from '@ohos.web.webview';
+  @Entry
+  @Component
+  struct WebComponent {
+    controller: WebController = new WebController();
+    origin: string = "file:///";
+    build() {
+      Column() {
+        Button('allowGeolocation')
+          .onClick(() => {
+            web_webview.GeolocationPermissions.allowGeolocation(this.origin);
+          })
+        Web({ src: 'www.example.com', controller: this.controller })
+      }
+    }
+  }
+  ```
+
+### deleteGeolocation<sup>9+</sup>
+
+static deleteGeolocation(origin: string): void
+
+Clears the geolocation permission status of a specified source.
+
+**Parameters**
+
+| Name   | Type| Mandatory| Default Value| Description      |
+| -------- | -------- | ---- | ----- | ------------- |
+| origin   | string   | Yes  | -     | Index of the source.|
+
+**Example**
+
+  ```ts
+  // xxx.ets
+  import web_webview from '@ohos.web.webview';
+  @Entry
+  @Component
+  struct WebComponent {
+    controller: WebController = new WebController();
+    origin: string = "file:///";
+    build() {
+      Column() {
+        Button('deleteGeolocation')
+          .onClick(() => {
+            web_webview.GeolocationPermissions.deleteGeolocation(this.origin);
+          })
+        Web({ src: 'www.example.com', controller: this.controller })
+      }
+    }
+  }
+  ```
+
+### deleteAllGeolocation<sup>9+</sup>
+
+static deleteAllGeolocation(): void
+
+Clears the geolocation permission status of all sources.
+
+**Example**
+
+  ```ts
+  // xxx.ets
+  import web_webview from '@ohos.web.webview';
+  @Entry
+  @Component
+  struct WebComponent {
+    controller: WebController = new WebController();
+    build() {
+      Column() {
+        Button('deleteAllGeolocation')
+          .onClick(() => {
+            web_webview.GeolocationPermissions.deleteAllGeolocation();
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -2701,35 +4204,40 @@ Saves this cookie in the memory to the drive. This API returns the result synchr
   }
   ```
 
-## WebDataBase<sup>9+</sup>
-Implements the **WebDataBase** object.
+### getAccessibleGeolocation<sup>9+</sup>
 
-### existHttpAuthCredentials<sup>9+</sup>
+static getAccessibleGeolocation(origin: string, callback: AsyncCallback\<boolean\>): void
 
-static existHttpAuthCredentials(): boolean
+Obtains the geolocation permission status of the specified source. This API uses an asynchronous callback to return the result.
 
-Checks whether any HTTP authentication credentials exist in the cache. This API returns the result synchronously.
+**Parameters**
 
-**Return value**
-| Type     | Description                                      |
-| ------- | ---------------------------------------- |
-| boolean | Returns **true** if any HTTP authentication credentials exist in the cache; returns **false** otherwise.|
+| Name   | Type| Mandatory| Default Value| Description      |
+| -------- | -------- | ---- | ----- | ------------- |
+| origin   | string   | Yes  | -     | Index of the origin.|
+| callback | AsyncCallback\<boolean\> | Yes| - | Callback used to return the geolocation permission status of the specified source. If the operation is successful, the value **true** means that the geolocation permission is granted, and **false** means the opposite. If the operation fails, the geolocation permission status of the specified source is not found.|
 
 **Example**
+
   ```ts
   // xxx.ets
-  import web from '@ohos.web';
+  import web_webview from '@ohos.web.webview';
   @Entry
   @Component
   struct WebComponent {
     controller: WebController = new WebController();
-  
+    origin: string = "file:///";
     build() {
       Column() {
-        Button('existHttpAuthCredentials')
+        Button('getAccessibleGeolocationAsync')
           .onClick(() => {
-            let result = web.WebDataBase.existHttpAuthCredentials();
-            console.log('result: ' + result);
+            web_webview.GeolocationPermissions.getAccessibleGeolocation(this.origin, (error, result) => {
+              if (error) {
+                console.log('getAccessibleGeolocationAsync error: ' + JSON.stringify(error));
+                return;
+              }
+              console.log('getAccessibleGeolocationAsync result: ' + result);
+            });
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -2737,26 +4245,43 @@ Checks whether any HTTP authentication credentials exist in the cache. This API
   }
   ```
 
-### deleteHttpAuthCredentials<sup>9+</sup>
+### getAccessibleGeolocation<sup>9+</sup>
 
-static deleteHttpAuthCredentials(): void
+static getAccessibleGeolocation(origin: string): Promise\<boolean\>
 
-Deletes all HTTP authentication credentials saved in the cache. This API returns the result synchronously.
+Obtains the geolocation permission status of the specified source. This API uses a promise to return the result.
+
+**Parameters**
+
+| Name   | Type| Mandatory| Default Value| Description      |
+| -------- | -------- | ---- | ----- | ------------- |
+| origin   | string   | Yes  | -     | Index of the origin.|
+
+**Return value**
+
+| Type              | Description                                 |
+| ------------------ | ------------------------------------ |
+| Promise\<boolean\> | Promise used to return the geolocation permission status of the specified source. If the operation is successful, the value **true** means that the geolocation permission is granted, and **false** means the opposite. If the operation fails, the geolocation permission status of the specified source is not found.|
 
 **Example**
+
   ```ts
   // xxx.ets
-  import web from '@ohos.web';
+  import web_webview from '@ohos.web.webview';
   @Entry
   @Component
   struct WebComponent {
     controller: WebController = new WebController();
-  
+    origin: string = "file:///";
     build() {
       Column() {
-        Button('deleteHttpAuthCredentials')
+        Button('getAccessibleGeolocationPromise')
           .onClick(() => {
-            web.WebDataBase.deleteHttpAuthCredentials();
+            web_webview.GeolocationPermissions.getAccessibleGeolocation(this.origin).then(result => {
+              console.log('getAccessibleGeolocationPromise result: ' + result);
+            }).catch(error => {
+              console.log('getAccessibleGeolocationPromise error: ' + JSON.stringify(error));
+            });
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -2764,43 +4289,39 @@ Deletes all HTTP authentication credentials saved in the cache. This API returns
   }
   ```
 
-### getHttpAuthCredentials<sup>9+</sup>
+### getStoredGeolocation<sup>9+</sup>
 
-static getHttpAuthCredentials(host: string, realm: string): Array\<string\>
+static getStoredGeolocation(callback: AsyncCallback\<Array\<string\>\>): void
 
-Obtains the HTTP authentication credentials for a given host and realm. This API returns the result synchronously.
+Obtains the geolocation permission status of all sources. This API uses an asynchronous callback to return the result.
 
 **Parameters**
-| Name  | Type  | Mandatory  | Default Value | Description            |
-| ----- | ------ | ---- | ---- | ---------------- |
-| host  | string | Yes   | -    | Host for which you want to obtain the HTTP authentication credentials.|
-| realm | string | Yes   | -    | Realm for which you want to obtain the HTTP authentication credentials. |
 
-**Return value**
-| Type             | Description                    |
-| --------------- | ---------------------- |
-| Array\<string\> | Returns the array of the matching user names and passwords if the operation is successful; returns an empty array otherwise.|
+| Name   | Type| Mandatory| Default Value| Description      |
+| -------- | -------- | ---- | ----- | ------------- |
+| callback | AsyncCallback\<Array\<string\>\> | Yes| - | Callback used to return the geolocation permission status of all sources.|
 
 **Example**
+
   ```ts
   // xxx.ets
-  import web from '@ohos.web';
+  import web_webview from '@ohos.web.webview';
   @Entry
   @Component
   struct WebComponent {
     controller: WebController = new WebController();
-    host: string = "www.spincast.org";
-    realm: string = "protected example";
-    username_password: string[];
     build() {
       Column() {
-        Button('getHttpAuthCredentials')
+        Button('getStoredGeolocationAsync')
           .onClick(() => {
-            this.username_password = web.WebDataBase.getHttpAuthCredentials(this.host, this.realm);
-            console.log('num: ' + this.username_password.length);
-            ForEach(this.username_password, (item) => {
-              console.log('username_password: ' + item);
-            }, item => item)
+            web_webview.GeolocationPermissions.getStoredGeolocation((error, origins) => {
+              if (error) {
+                console.log('getStoredGeolocationAsync error: ' + JSON.stringify(error));
+                return;
+              }
+              let origins_str: string = origins.join();
+              console.log('getStoredGeolocationAsync origins: ' + origins_str);
+            });
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -2808,35 +4329,43 @@ Obtains the HTTP authentication credentials for a given host and realm. This API
   }
   ```
 
-### saveHttpAuthCredentials<sup>9+</sup>
+### getStoredGeolocation<sup>9+</sup>
 
-static saveHttpAuthCredentials(host: string, realm: string, username: string, password: string): void
+static getStoredGeolocation(): Promise\<Array\<string\>\>
 
-Saves HTTP authentication credentials for a given host and realm. This API returns the result synchronously.
+Obtains the geolocation permission status of all sources. This API uses a promise to return the result.
 
 **Parameters**
-| Name     | Type  | Mandatory  | Default Value | Description            |
-| -------- | ------ | ---- | ---- | ---------------- |
-| host     | string | Yes   | -    | Host to which HTTP authentication credentials apply.|
-| realm    | string | Yes   | -    | Realm to which HTTP authentication credentials apply. |
-| username | string | Yes   | -    | User name.            |
-| password | string | Yes   | -    | Password.             |
+
+| Name   | Type| Mandatory| Default Value| Description      |
+| -------- | -------- | ---- | ----- | ------------- |
+| callback | AsyncCallback\<Array\<string\>\> | Yes| - | Callback used to return the geolocation permission status of all sources.|
+
+**Return value**
+
+| Type                      | Description                                 |
+| -------------------------- | ------------------------------------ |
+| Promise\<Array\<string\>\> | Promise used to return the geolocation permission status of all sources.|
 
 **Example**
+
   ```ts
   // xxx.ets
-  import web from '@ohos.web';
+  import web_webview from '@ohos.web.webview';
   @Entry
   @Component
   struct WebComponent {
     controller: WebController = new WebController();
-    host: string = "www.spincast.org";
-    realm: string = "protected example";
     build() {
       Column() {
-        Button('saveHttpAuthCredentials')
+        Button('getStoredGeolocationPromise')
           .onClick(() => {
-            web.WebDataBase.saveHttpAuthCredentials(this.host, this.realm, "Stromgol", "Laroche");
+            web_webview.GeolocationPermissions.getStoredGeolocation().then(origins => {
+              let origins_str: string = origins.join();
+              console.log('getStoredGeolocationPromise origins: ' + origins_str);
+            }).catch(error => {
+                console.log('getStoredGeolocationPromise error: ' + JSON.stringify(error));
+            });
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -2852,9 +4381,10 @@ static deleteAllData(): void
 Deletes all data in the Web SQL database.
 
 **Example**
+
   ```ts
   // xxx.ets
-  import web from '@ohos.web';
+  import web_webview from '@ohos.web.webview'
   @Entry
   @Component
   struct WebComponent {
@@ -2863,7 +4393,7 @@ Deletes all data in the Web SQL database.
       Column() {
         Button('deleteAllData')
           .onClick(() => {
-            web.WebStorage.deleteAllData();
+            web_webview.WebStorage.deleteAllData();
           })
         Web({ src: 'www.example.com', controller: this.controller })
         .databaseAccess(true)
@@ -2878,14 +4408,16 @@ static deleteOrigin(origin : string): void
 Deletes all data in the specified origin.
 
 **Parameters**
+
 | Name   | Type  | Mandatory  | Description        |
 | ------ | ------ | ---- | ---------- |
 | origin | string | Yes   | Index of the origin.|
 
 **Example**
+
   ```ts
   // xxx.ets
-  import web from '@ohos.web';
+  import web_webview from '@ohos.web.webview'
   @Entry
   @Component
   struct WebComponent {
@@ -2895,7 +4427,7 @@ Deletes all data in the specified origin.
       Column() {
         Button('getHttpAuthCredentials')
           .onClick(() => {
-            web.WebStorage.deleteOrigin(this.origin);
+            web_webview.WebStorage.deleteOrigin(this.origin);
           })
         Web({ src: 'www.example.com', controller: this.controller })
         .databaseAccess(true)
@@ -2905,19 +4437,21 @@ Deletes all data in the specified origin.
   ```
 
 ### getOrigins<sup>9+</sup>
-static getOrigins(callback: AsyncCallback<Array<[WebStorageOrigin]>>) : void
+static getOrigins(callback: AsyncCallback<Array<WebStorageOrigin>>) : void
 
 Obtains information about all origins that are currently using the Web SQL database. This API uses an asynchronous callback to return the result.
 
 **Parameters**
+
 | Name     | Type                                    | Mandatory  | Description                                 |
 | -------- | ---------------------------------------- | ---- | ----------------------------------- |
 | callback | AsyncCallback<Array<[WebStorageOrigin](#webstorageorigin9)>> | Yes   | Callback used to return the information about the origins. For details, see **WebStorageOrigin**.|
 
 **Example**
+
   ```ts
   // xxx.ets
-  import web from '@ohos.web';
+  import web_webview from '@ohos.web.webview'
   @Entry
   @Component
   struct WebComponent {
@@ -2927,7 +4461,7 @@ Obtains information about all origins that are currently using the Web SQL datab
       Column() {
         Button('getOrigins')
           .onClick(() => {
-            web.WebStorage.getOrigins((error, origins) => {
+            web_webview.WebStorage.getOrigins((error, origins) => {
               if (error) {
                 console.log('error: ' + error);
                 return;
@@ -2947,7 +4481,7 @@ Obtains information about all origins that are currently using the Web SQL datab
   ```
 
 ### getOrigins<sup>9+</sup>
-static getOrigins() : Promise<Array<[WebStorageOrigin]>>
+static getOrigins() : Promise<Array<WebStorageOrigin>>
 
 Obtains information about all origins that are currently using the Web SQL database. This API uses a promise to return the result.
 
@@ -2958,9 +4492,10 @@ Obtains information about all origins that are currently using the Web SQL datab
 | Promise<Array<[WebStorageOrigin](#webstorageorigin9)>> | Promise used to return the information about the origins. For details, see **WebStorageOrigin**.|
 
 **Example**
+
   ```ts
   // xxx.ets
-  import web from '@ohos.web';
+  import web_webview from '@ohos.web.webview'
   @Entry
   @Component
   struct WebComponent {
@@ -2970,7 +4505,7 @@ Obtains information about all origins that are currently using the Web SQL datab
       Column() {
         Button('getOrigins')
           .onClick(() => {
-            web.WebStorage.getOrigins()
+            web_webview.WebStorage.getOrigins()
               .then(origins => {
                 for (let i = 0; i < origins.length; i++) {
                   console.log('origin: ' + origins[i].origin);
@@ -2995,15 +4530,17 @@ static getOriginQuota(origin : string, callback : AsyncCallback\<number>) : void
 Obtains the storage quota of an origin in the Web SQL database, in bytes. This API uses an asynchronous callback to return the result.
 
 **Parameters**
+
 | Name     | Type                  | Mandatory  | Description       |
 | -------- | ---------------------- | ---- | --------- |
 | origin   | string                 | Yes   | Index of the origin.|
 | callback | AsyncCallback\<number> | Yes   | Callback used to return the storage quota of the origin.|
 
 **Example**
+
   ```ts
   // xxx.ets
-  import web from '@ohos.web';
+  import web_webview from '@ohos.web.webview'
   @Entry
   @Component
   struct WebComponent {
@@ -3013,7 +4550,7 @@ Obtains the storage quota of an origin in the Web SQL database, in bytes. This A
       Column() {
         Button('getOriginQuota')
           .onClick(() => {
-            web.WebStorage.getOriginQuota(this.origin, (error, quota) => {
+            web_webview.WebStorage.getOriginQuota(this.origin, (error, quota) => {
               if (error) {
                 console.log('error: ' + error);
                 return;
@@ -3034,19 +4571,22 @@ static getOriginQuota(origin : string) : Promise\<number>
 Obtains the storage quota of an origin in the Web SQL database, in bytes. This API uses a promise to return the result.
 
 **Parameters**
+
 | Name   | Type  | Mandatory  | Description        |
 | ------ | ------ | ---- | ---------- |
 | origin | string | Yes   | Index of the origin.|
 
 **Return value**
+
 | Type              | Description                     |
 | ---------------- | ----------------------- |
 | Promise\<number> | Promise used to return the storage quota of the origin.|
 
 **Example**
+
   ```ts
   // xxx.ets
-  import web from '@ohos.web';
+  import web_webview from '@ohos.web.webview'
   @Entry
   @Component
   struct WebComponent {
@@ -3056,7 +4596,7 @@ Obtains the storage quota of an origin in the Web SQL database, in bytes. This A
       Column() {
         Button('getOriginQuota')
           .onClick(() => {
-            web.WebStorage.getOriginQuota(this.origin)
+            web_webview.WebStorage.getOriginQuota(this.origin)
               .then(quota => {
                 console.log('quota: ' + quota);
               })
@@ -3077,15 +4617,17 @@ static getOriginUsage(origin : string, callback : AsyncCallback\<number>) : void
 Obtains the storage usage of an origin in the Web SQL database, in bytes. This API uses an asynchronous callback to return the result.
 
 **Parameters**
+
 | Name     | Type                  | Mandatory  | Description        |
 | -------- | ---------------------- | ---- | ---------- |
 | origin   | string                 | Yes   | Index of the origin.|
 | callback | AsyncCallback\<number> | Yes   | Callback used to return the storage usage of the origin.  |
 
 **Example**
+
   ```ts
   // xxx.ets
-  import web from '@ohos.web';
+  import web_webview from '@ohos.web.webview'
   @Entry
   @Component
   struct WebComponent {
@@ -3095,12 +4637,12 @@ Obtains the storage usage of an origin in the Web SQL database, in bytes. This A
       Column() {
         Button('getOriginUsage')
           .onClick(() => {
-            web.WebStorage.getOriginUsage(this.origin, (error, usage) => {
+            web_webview.WebStorage.getOriginUsage(this.origin, (error, usage) => {
               if (error) {
                 console.log('error: ' + error);
                 return;
               }
-              consloe.log('usage: ' + usage);
+              console.log('usage: ' + usage);
             })
           })
         Web({ src: 'www.example.com', controller: this.controller })
@@ -3116,19 +4658,22 @@ static getOriginUsage(origin : string) : Promise\<number>
 Obtains the storage usage of an origin in the Web SQL database, in bytes. This API uses a promise to return the result.
 
 **Parameters**
+
 | Name   | Type  | Mandatory  | Description        |
 | ------ | ------ | ---- | ---------- |
 | origin | string | Yes   | Index of the origin.|
 
 **Return value**
+
 | Type              | Description                    |
 | ---------------- | ---------------------- |
 | Promise\<number> | Promise used to return the storage usage of the origin.|
 
 **Example**
+
   ```ts
   // xxx.ets
-  import web from '@ohos.web';
+  import web_webview from '@ohos.web.webview'
   @Entry
   @Component
   struct WebComponent {
@@ -3138,7 +4683,7 @@ Obtains the storage usage of an origin in the Web SQL database, in bytes. This A
       Column() {
         Button('getOriginQuota')
           .onClick(() => {
-            web.WebStorage.getOriginUsage(this.origin)
+            web_webview.WebStorage.getOriginUsage(this.origin)
               .then(usage => {
                 console.log('usage: ' + usage);
               })
@@ -3165,6 +4710,7 @@ Searches the web page for content that matches the keyword specified by **'searc
 | searchString | string | Yes   | -    | Search keyword.|
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
@@ -3204,6 +4750,7 @@ clearMatches(): void
 Clears the matches found through [searchAllAsync](#searchallasync9).
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
@@ -3237,6 +4784,7 @@ Searches for and highlights the next match.
 
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
@@ -3271,6 +4819,7 @@ Invoked to notify the caller of the search result on the web page.
 | isDoneCounting     | boolean       | Whether the search operation on the current page is complete. This API may be called multiple times until **isDoneCounting** is **true**.|
 
 **Example**
+
   ```ts
   // xxx.ets
   @Entry
@@ -3295,6 +4844,7 @@ Invoked to notify the caller of the search result on the web page.
 Provides usage information about the Web SQL database.
 
 **Parameters**
+
 | Name   | Type  | Mandatory  | Description        |
 | ------ | ------ | ---- | ---------- |
 | origin | string | Yes   | Index of the origin.|
@@ -3359,11 +4909,22 @@ Explains why the rendering process exits.
 | Map           | Geographical address.                   |
 | Unknown       | Unknown content.                   |
 
+## SslError<sup>9+</sup>
+
+Enumerates the error codes returned by **onSslErrorEventReceive** API.
+
+| Name          | Description                 |
+| -------------- | -----------------    |
+| Invalid        | Minor error.           |
+| HostMismatch   | The host name does not match.       |
+| DateInvalid    | The certificate has an invalid date.       |
+| Untrusted      | The certificate issuer is not trusted.|
+
 ## ProtectedResourceType<sup>9+</sup>
 
 | Name     | Description           | Remarks          |
 | --------- | -------------- | -------------- |
-| MidiSysex | MIDI SYSEX resources| Currently, only permission events can be reported. MIDI devices are not yet supported.|
+| MidiSysex | MIDI SYSEX resource.| Currently, only permission events can be reported. MIDI devices are not yet supported.|
 
 ## WebAsyncController
 
@@ -3378,7 +4939,7 @@ webAsyncController: WebAsyncController = new WebAsyncController(webController);
 
 ### storeWebArchive<sup>9+</sup>
 
-storeWebArchive(baseName: string, autoName: boolean, callback: AsyncCallback\<string>): void
+storeWebArchive(baseName: string, autoName: boolean, callback: AsyncCallback<string>): void
 
 Saves the current web page. This API uses an asynchronous callback to return the result.
 
@@ -3386,15 +4947,15 @@ Saves the current web page. This API uses an asynchronous callback to return the
 
 | Name     | Type                                    | Mandatory  | Description                                 |
 | -------- | ---------------------------------------- | ---- | ----------------------------------- |
-| baseName | string | Yes| Save path. The value cannot be null.|
-| autoName | boolean | Yes| Whether to automatically generate a file name.<br>The value **true** means to automatically generate a file name based on the URL of current page and the **baseName** value. In this case, **baseName** is regarded as a directory.<br>The value **false** means not to automatically generate a file name.|
-| callback | AsyncCallback\<string> | Yes   | Callback used to return the save path if the operation is successful and null otherwise.|
+| baseName | string | Yes| Save path. The value cannot be null.
+| autoName | boolean | Yes| Whether to automatically generate a file name.<br>The value **false** means not to automatically generate a file name.<br>The value **true** means to automatically generate a file name based on the URL of current page and the **baseName** value. In this case, **baseName** is regarded as a directory.
+| callback | AsyncCallback<string> | Yes   | Callback used to return the save path if the operation is successful and null otherwise.|
 
 **Example**
 
   ```ts
   // xxx.ets
-  import WebAsyncController from '@ohos.web';
+  import web_webview from '@ohos.web.webview'
   @Entry
   @Component
   struct WebComponent {
@@ -3403,7 +4964,7 @@ Saves the current web page. This API uses an asynchronous callback to return the
       Column() {
         Button('saveWebArchive')
           .onClick(() => {
-            let webAsyncController = new WebAsyncController(this.controller);
+            let webAsyncController = new web_webview.WebAsyncController(this.controller);
             webAsyncController.storeWebArchive("/data/storage/el2/base/", true, (filename) => {
               if (filename != null) {
                 console.info(`save web archive success: ${filename}`)
@@ -3418,7 +4979,7 @@ Saves the current web page. This API uses an asynchronous callback to return the
 
 ### storeWebArchive<sup>9+</sup>
 
-storeWebArchive(baseName: string, autoName: boolean): Promise\<string>
+storeWebArchive(baseName: string, autoName: boolean): Promise<string>
 
 Stores the current web page. This API uses an asynchronous callback to return the result.
 
@@ -3426,20 +4987,20 @@ Stores the current web page. This API uses an asynchronous callback to return th
 
 | Name     | Type                                    | Mandatory  | Description                                 |
 | -------- | ---------------------------------------- | ---- | ----------------------------------- |
-| baseName | string | Yes| Save path. The value cannot be null.|
-| autoName | boolean | Yes| Determines whether to automatically generate a file name.<br>The value **true** means to automatically generate a file name based on the URL of current page and the **baseName** value. In this case, **baseName** is regarded as a directory.<br>The value **false** means not to automatically generate a file name.|
+| baseName | string | Yes| Save path. The value cannot be null.
+| autoName | boolean | Yes| Whether to automatically generate a file name.<br>The value **false** means not to automatically generate a file name.<br>The value **true** means to automatically generate a file name based on the URL of current page and the **baseName** value. In this case, **baseName** is regarded as a directory.
 
 **Return value**
 
 | Type                                      | Description                                      |
-| ---------------- | ------------------------------------------------------------ |
-| Promise\<string> | Promise used to return the save path if the operation is successful and null otherwise. |
+| ---------------------------------------- | ---------------------------------------- |
+| Promise<string> | Promise used to return the save path if the operation is successful and null otherwise.|
 
 **Example**
 
   ```ts
   // xxx.ets
-  import WebAsyncController from '@ohos.web';
+  import web_webview from '@ohos.web.webview'
   @Entry
   @Component
   struct WebComponent {
@@ -3448,7 +5009,7 @@ Stores the current web page. This API uses an asynchronous callback to return th
       Column() {
         Button('saveWebArchive')
           .onClick(() => {
-            let webAsyncController = new WebAsyncController(this.controller);
+            let webAsyncController = new web_webview.WebAsyncController(this.controller);
             webAsyncController.storeWebArchive("/data/storage/el2/base/", true)
               .then(filename => {
                 if (filename != null) {
@@ -3461,3 +5022,224 @@ Stores the current web page. This API uses an asynchronous callback to return th
     }
   }
   ```
+
+## WebMessagePort<sup>9+</sup>
+
+Defines a **WebMessagePort** instance, which can can be used to send and receive messages.
+
+### close<sup>9+</sup>
+close(): void
+
+Disables this message port.
+
+### postMessageEvent<sup>9+</sup>
+postMessageEvent(message: WebMessageEvent): void
+
+Sends messages.
+
+**Parameters**
+
+| Name  | Type  | Mandatory  | Default Value | Description             |
+| ----- | ------ | ---- | ---- | ----------------- |
+| message   | [WebMessageEvent](#webmessageevent9) | Yes   | -    | Message to send.|
+
+**Example**
+
+  ```ts
+  // xxx.ets
+  @Entry
+  @Component
+  struct WebComponent {
+    controller: WebController = new WebController();
+    ports: WebMessagePort[] = null;
+
+    build() {
+      Column() {
+        Button('postMessageEvent')
+          .onClick(() => {
+            var msg = new WebMessageEvent();
+            msg.setData("post message from ets to html5");
+            this.ports[0].postMessageEvent(msg);
+          })
+        Web({ src: 'www.example.com', controller: this.controller })
+      }
+    }
+  }
+  ```
+
+### onMessageEvent<sup>9+</sup>
+onMessageEvent(callback: (result: string) => void): void
+
+Registers a callback to receive messages from an HTML5 page.
+
+**Parameters**
+
+| Name  | Type  | Mandatory  | Default Value | Description             |
+| ----- | ------ | ---- | ---- | ----------------- |
+| callback   | function | Yes   | -    | Callback for receiving messages.|
+
+**Example**
+
+  ```ts
+  // xxx.ets
+  @Entry
+  @Component
+  struct WebComponent {
+    controller: WebController = new WebController();
+    ports: WebMessagePort[] = null;
+
+    build() {
+      Column() {
+        Button('onMessageEvent')
+          .onClick(() => {
+            this.ports[0].onMessageEvent((result: string) => {
+              console.log("received message from html5, on message:" + result);
+            })
+          })
+        Web({ src: 'www.example.com', controller: this.controller })
+      }
+    }
+  }
+  ```
+
+
+## WebMessageEvent<sup>9+</sup>
+
+Implements the **WebMessageEvent** object to encapsulate the message and port.
+
+### getData<sup>9+</sup>
+getData(): string
+
+Obtains the messages stored in this object.
+
+**Return value**
+
+| Type                             | Description           |
+| ------------------------------- | ------------- |
+| string | Message stored in the object of this type.|
+
+**Example**
+
+  ```ts
+  // xxx.ets
+  @Entry
+  @Component
+  struct WebComponent {
+    build() {
+      Column() {
+        Button('getPorts')
+          .onClick(() => {
+            var msgEvent = new WebMessageEvent();
+            msgEvent.setData("message event data");
+            var messageData = msgEvent.getData();
+            console.log("message is:" + messageData);
+          })
+      }
+    }
+  }
+  ```
+
+### setData<sup>9+</sup>
+setData(data: string): void
+
+Sets the message in this object.
+
+**Parameters**
+
+| Name  | Type  | Mandatory  | Default Value | Description             |
+| ----- | ------ | ---- | ---- | ----------------- |
+| data   | string | Yes   | -    | Message to send.|
+
+**Example**
+
+  ```ts
+  // xxx.ets
+  @Entry
+  @Component
+  struct WebComponent {
+    controller: WebController = new WebController();
+    ports: WebMessagePort[] = null;
+
+    build() {
+      Column() {
+        Button('setData')
+          .onClick(() => {
+            var msg = new WebMessageEvent();
+            msg.setData("post message from ets to HTML5");
+            this.ports[0].postMessageEvent(msg);
+          })
+        Web({ src: 'www.example.com', controller: this.controller })
+      }
+    }
+  }
+  ```
+### getPorts<sup>9+</sup>
+getPorts(): Array\<WebMessagePort\>
+
+Obtains the message port stored in this object.
+
+**Return value**
+
+| Type                             | Description           |
+| ------------------------------- | ------------- |
+| Array\<[WebMessagePort](#webmessageport9)\> | Message port stored in the object of this type.|
+
+**Example**
+
+  ```ts
+  // xxx.ets
+  @Entry
+  @Component
+  struct WebComponent {
+    ports: WebMessagePort[] = null;
+    build() {
+      Column() {
+        Button('getPorts')
+          .onClick(() => {
+            var sendPortArray = new Array(this.ports[0]);
+            var msgEvent = new WebMessageEvent();
+            msgEvent.setPorts(sendPortArray);
+            var getPorts = msgEvent.getPorts();
+            console.log("Ports is:" + getPorts);
+          })
+      }
+    }
+  }
+  ```
+
+### setPorts<sup>9+</sup>
+setPorts(ports: Array\<WebMessagePort\>): void
+
+Sets the message port in this object.
+
+**Parameters**
+
+| Name  | Type  | Mandatory  | Default Value | Description             |
+| ----- | ------ | ---- | ---- | ----------------- |
+| ports   | Array\<[WebMessagePort](#webmessageport9)\> | Yes   | -    | Message port.|
+
+**Example**
+
+  ```ts
+  // xxx.ets
+  @Entry
+  @Component
+  struct WebComponent {
+    controller: WebController = new WebController();
+    ports: WebMessagePort[] = null;
+  
+    build() {
+      Column() {
+        Button('setPorts')
+          .onClick(() => {
+            var sendPortArray = new Array(this.ports[1]);
+            var msgEvent = new WebMessageEvent();
+            msgEvent.setData("__init_ports__");
+            msgEvent.setPorts(sendPortArray);
+            this.controller.postMessage({message: msgEvent, uri: "*"});
+          })
+        Web({ src: 'www.example.com', controller: this.controller })
+      }
+    }
+  }
+  ```

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

 # XComponent
 
-  > **NOTE**
-  >
-  > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
+The **\<XComponent>** can accept and display the EGL/OpenGL ES and media data input.
+
+> **NOTE**
+>
+> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
+
 
-  The **\<XComponent>** can accept and display the EGL/OpenGL ES and media data input.
 
 ## Required Permissions
 
-  None
+None
 
 ## Child Components
 
-  Not supported
+Not supported
 
 ## APIs
 
-  XComponent(value: {id: string, type: string, libraryname?: string, controller?: XComponentController})
+XComponent(value: {id: string, type: string, libraryname?: string, controller?: XComponentController})
 
 **Parameters**
 

en/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md

@@ -7,36 +7,27 @@
 >  This gesture is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-## Required Permissions
-
-None
-
-
 ## APIs
 
-LongPressGesture(options?: { fingers?: number, repeat?: boolean, duration?: number })
+LongPressGesture(value?: { fingers?: number, repeat?: boolean, duration?: number })
 
-- Parameters
-  | Name| Type| Mandatory| Default Value| Description|
-  | -------- | -------- | -------- | -------- | -------- |
-  | fingers | number | No| 1 | Minimum number of fingers to trigger a long press gesture. The value ranges from 1 to 10.|
-  | repeat | boolean | No| false | Whether to continuously trigger the event callback.|
-  | duration | number | No| 500 | Minimum hold-down time, in ms.|
+**Parameters**
+
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| fingers | number | No| Minimum number of fingers to trigger a long press gesture. The value ranges from 1 to 10.<br>Default value: **1**|
+| repeat | boolean | No| Whether to continuously trigger the event callback.<br>Default value: **false**|
+| duration | number | No| Minimum hold-down time, in ms.<br>Default value: **500**|
 
 
 ## Events
 
 | Name| Description|
 | -------- | -------- |
-| onAction((event?: GestureEvent) =&gt; void) | Callback invoked when a long press gesture is recognized.|
-| onActionEnd((event?: GestureEvent) =&gt; void) | Callback invoked when the finger used for a long press gesture is lift.|
+| onAction(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Callback invoked when a long press gesture is recognized.|
+| onActionEnd(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Callback invoked when the finger used for a long press gesture is lift.|
 | onActionCancel(event: () =&gt; void) | Callback invoked when a tap cancellation event is received after a long press gesture is recognized.|
 
-- GestureEvent attributes related to the long press gesture
-  | Name| Type| Description|
-  | -------- | -------- | -------- |
-  | repeat | boolean | Whether the event is repeated.|
-
 
 ## Example
 

en/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md

@@ -7,67 +7,63 @@
 >  This gesture is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-## Required Permissions
-
-None
+## APIs
 
+PanGesture(value?: { fingers?: number; direction?: PanDirection; distance?: number } | [PanGestureOptions](#pangestureoptions))
 
-## APIs
+**Parameters**
 
-PanGesture(options?: { fingers?: number, direction?: PanDirection, distance?: number } | [PanGestureOptions](#pangestureoptions))
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| fingers | number | No| Minimum number of fingers to trigger a pan gesture. The value ranges from 1 to 10.<br>Default value: **1**|
+| direction | PanDirection | No| Pan direction. The enumerated value supports the AND (&amp;) and OR (\|) operations.<br>Default value: **PanDirection.All**|
+| distance | number | No| Minimum pan distance to trigger the gesture, in vp.<br>Default value: **5.0**<br>**NOTE**<br>If a pan gesture and tab swipe occur at the same time, set **distance** to **1** so that the gesture can be more easily recognized.|
 
-- Parameters
-  | Name| Type| Mandatory| Default Value| Description|
-  | -------- | -------- | -------- | -------- | -------- |
-  | fingers | number | No| 1 | Minimum number of fingers to trigger a pan gesture. The value ranges from 1 to 10.|
-  | direction | PanDirection | No| All | Pan direction. The enumerated value supports the AND (&amp;) and OR (\|)|operations.|
-  | distance | number | No| 5.0 | Minimum pan distance to trigger the gesture, in vp.<br>**NOTE**<br>If a pan gesture and tab swipe occur at the same time, set **distance** to **1** so that the gesture can be more easily recognized.|
+## PanDirection enums
 
-- PanDirection enums
-  | Name| Description|
-  | -------- | -------- |
-  | All | All directions.|
-  | Horizontal | Horizontal panning.|
-  | Vertical | Vertical panning.|
-  | Left | Panning to the left.|
-  | Right | Panning to the right.|
-  | Up | Panning up.|
-  | Down | Panning down.|
-  | None | Panning disabled.|
+| Name| Description|
+| -------- | -------- |
+| All | All directions.|
+| Horizontal | Horizontal panning.|
+| Vertical | Vertical panning.|
+| Left | Panning to the left.|
+| Right | Panning to the right.|
+| Up | Panning up.|
+| Down | Panning down.|
+| None | Panning disabled.|
 
 
-### PanGestureOptions
+## PanGestureOptions
 
 The attributes of the pan gesture recognizer can be dynamically modified using the **PanGestureOptions** API. This avoids modifying attributes through state variables, which will cause the UI to be refreshed.
 
-PanGestureOptions(options?: { fingers?: number, direction?: PanDirection, distance?: number })
+PanGestureOptions(value?: { fingers?: number; direction?: PanDirection; distance?: number })
+
+**Parameters**
 
-- Parameters
+| Name | Type    | Mandatory| Description                                                    |
+| --------- | ------------ | ---- | ------------------------------------------------------------ |
+| fingers   | number       | No  | Minimum number of fingers to trigger a pan gesture. The value ranges from 1 to 10.<br>Default value: **1**|
+| direction | PanDirection | No  | Pan direction. The enumerated value supports the AND (&amp;) and OR (\|) operations.<br>Default value: **All**|
+| distance  | number       | No  | Minimum pan distance to trigger the gesture, in vp.<br>Default value: **5.0**<br>**NOTE**<br>If a pan gesture and tab swipe occur at the same time, set **distance** to **1** so that the gesture can be more easily recognized.|
 
-For details, see **PanGesture**.
+**APIs**
 
-- APIs
-  | Name| Description|
-  | -------- | -------- |
-  | setDirection(value: PanDirection) | Sets the direction.|
-  | setDistance(value: number) | Sets the distance.|
-  | setFingers(value: number) | Sets the number of fingers.|
+| Name| Description|
+| -------- | -------- |
+| setDirection(value: PanDirection) | Sets the direction.|
+| setDistance(value: number) | Sets the distance.|
+| setFingers(value: number) | Sets the number of fingers.|
 
 
 ## Events
 
 | Name| Description|
 | -------- | -------- |
-| onActionStart(callback: (event?: GestureEvent) =&gt; void) | Callback invoked when a pan gesture is recognized.|
-| onActionUpdate(callback: (event?: GestureEvent) =&gt; void) | Callback invoked when the pan gesture status is updated.|
-| onActionEnd(callback: (event?: GestureEvent) =&gt; void) | Callback invoked when the finger used for a pan gesture is lift.|
-| onActionCancel(callback: () =&gt; void) | Callback invoked when a tap cancellation event is received after a pan gesture is recognized.|
-
-- GestureEvent attributes related to the pan gesture
-  | Name| Type| Description|
-  | -------- | -------- | -------- |
-  | offsetX | number | Offset of the gesture event, in vp.|
-  | offsetY | number | Offset of the gesture event, in vp.|
+| onActionStart(event: (event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Callback invoked when a pan gesture is recognized.|
+| onActionUpdate(event: (event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Callback invoked when the pan gesture status is updated.|
+| onActionEnd(event: (event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Callback invoked when the finger used for a pan gesture is lift.|
+| onActionCancel(event: () =&gt; void) | Callback invoked when a tap cancellation event is received after a pan gesture is recognized.|
 
 
 ## Example

en/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md

 # PinchGesture
 
-PinchGesture is used to trigger a pinch gesture, which requires two to five fingers with a minimum 3 vp distance between the fingers.
+**PinchGesture** is used to trigger a pinch gesture, which requires two to five fingers with a minimum 3 vp distance between the fingers.
 
 >  **NOTE**
 >
 >  This gesture is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-## Required Permissions
-
-None
-
-
 ## APIs
 
-PinchGesture(options?: { fingers?: number, distance?: number })
+PinchGesture(value?: { fingers?: number, distance?: number })
 
-- Parameters
-  | Name | Type | Mandatory | Default Value | Description |
-  | -------- | -------- | -------- | -------- | -------- |
-  | fingers | number | No | 2 | Minimum number of fingers to trigger a pinch. The value ranges from 2 to 5. |
-  | distance | number | No | 3.0 | Minimum recognition distance, in vp. |
+**Parameters**
+
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| fingers | number | No| Minimum number of fingers to trigger a pinch. The value ranges from 2 to 5.<br>Default value: **2**|
+| distance | number | No| Minimum recognition distance, in vp.<br>Default value: **3.0**|
 
 
 ## Events
 
-| Name | Description |
+| Name| Description|
 | -------- | -------- |
-| onActionStart((event?: GestureEvent) =&gt; void) | Callback invoked when a pinch gesture is recognized. |
-| onActionUpdate((event?: GestureEvent) =&gt; void) | Callback invoked during the movement of a pinch gesture. |
-| onActionEnd((event?: GestureEvent) =&gt; void) | Callback invoked when the finger used for a pinch gesture is lift. |
-| onActionCancel(event: () =&gt; void) | Callback invoked when a tap cancellation event is received after a pinch gesture is recognized. |
-
-- GestureEvent attributes related to the pinch gesture  
-  | Name | Type | Description |
-  | -------- | -------- | -------- |
-  | scale | number | Scale ratio. This attribute is used for the pinch gesture. |
-  | pinchCenterX | number | X-coordinate of the center of the pinch gesture, in px. |
-  | pinchCenterY | number | Y-coordinate of the center of the pinch gesture, in px. |
+| onActionStart(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when a pinch gesture is recognized.|
+| onActionUpdate(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when the user moves the finger in a pinch gesture on the screen.|
+| onActionEnd(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when the finger used for a pinch gesture is lift.|
+| onActionCancel(event: () =&gt; void) | Triggered when a tap cancellation event is received after a pinch gesture is recognized.|
 
 
 ## Example
 
-
 ```ts
 // xxx.ets
 @Entry

en/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md

 # RotationGesture
 
+**RotationGesture** is used to trigger a rotation gesture, which requires two to five fingers with a minimum 1-degree rotation angle.
 
-> **NOTE**<br>
+>  **NOTE**
+>
 >  This gesture is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-## Required Permissions
-
-None
-
-
 ## APIs
 
-RotationGesture(options?: { fingers?: number, angle?: number })
+RotationGesture(value?: { fingers?: number, angle?: number })
+
+**Parameters**
 
-- Parameters
-  | Name | Type | Mandatory | Default Value | Description |
-  | -------- | -------- | -------- | -------- | -------- |
-  | fingers | number | No | 2 | Minimum number of fingers to trigger a rotation. The value ranges from 2 to 5. |
-  | angle | number | No | 1.0 | Minimum degree that can trigger the rotation gesture. |
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| fingers | number | No| Minimum number of fingers to trigger a rotation. The value ranges from 2 to 5.<br>Default value: **2**|
+| angle | number | No| Minimum degree that can trigger the rotation gesture.<br>Default value: **1.0**|
 
 
 ## Events
 
-| Name | Description |
+| Parameter| Description|
 | -------- | -------- |
-| onActionStart((event?: GestureEvent) =&gt; void) | Callback invoked when a rotation gesture is recognized. |
-| onActionUpdate((event?: GestureEvent) =&gt; void) | Callback invoked during the movement of the rotation gesture. |
-| onActionEnd((event?: GestureEvent) =&gt; void) | Callback invoked when the finger used for the rotation gesture is lift. |
-| onActionCancel(event: () =&gt; void) | Callback invoked when a tap cancellation event is received after the rotation gesture is recognized. |
-
-- GestureEvent attributes related to the rotation gesture  
-  | Name | Type | Description |
-  | -------- | -------- | -------- |
-  | angle | number | Rotation angle. |
+| onActionStart(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when a rotation gesture is recognized.|
+| onActionUpdate(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when the user moves the finger in a rotation gesture on the screen.|
+| onActionEnd(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when the finger used for the rotation gesture is lift.|
+| onActionCancel(event: () =&gt; void) | Triggered when a tap cancellation event is received after the rotation gesture is recognized.|
 
 
 ## Example
 
-
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct RotationGestureExample {

en/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md

@@ -7,49 +7,39 @@
 >  This gesture is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-## Required Permissions
-
-None
-
-
 ## APIs
 
 SwipeGesture(value?: { fingers?: number; direction?: SwipeDirection; speed?: number })
 
-- Parameters
-  | Name | Type | Mandatory | Default Value | Description |
-  | -------- | -------- | -------- | -------- | -------- |
-  | fingers | number | No | 1 | Minimum number of fingers to trigger a swipe gesture. The value ranges from 1 to 10. |
-  | direction | SwipeDirection | No | SwipeDirection.All | Swipe direction. |
-  | speed | number | No | 100 | Minimum speed of the swipe gesture (100 vp/s). |
+**Parameters**
 
-- SwipeDirection enums
-  | Name | Description |
-  | -------- | -------- |
-  | All | All directions. |
-  | Horizontal | Horizontal direction. |
-  | Vertical | Vertical direction. |
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| fingers | number | No| Minimum number of fingers to trigger a swipe gesture. The value ranges from 1 to 10.<br>Default value: **1**|
+| direction | SwipeDirection | No| Swipe direction.<br>Default value: **SwipeDirection.All**|
+| speed | number | No| Minimum speed of the swipe gesture, in vp/s.<br>Default value: **100**|
 
+## SwipeDirection
 
-## Events
-
-| Name | Description |
+| Name| Description|
 | -------- | -------- |
-| onAction(callback:(event?: GestureEvent) =&gt; void) | Invoked when a swipe gesture is recognized. |
+| All | All directions.|
+| Horizontal | Horizontal direction.|
+| Vertical | Vertical direction.|
+| None | Swiping disabled.|
 
 
-- GestureEvent attributes related to the swipe gesture  
-  | Name | Type | Description |
-  | -------- | -------- | -------- |
-  | angle | number | Angle of the swipe gesture.<br/>**NOTE**<br/>Angle calculation method: After a swipe gesture is recognized, a line connecting the two fingers is identified as the initial line. As the fingers swipe, the line between the fingers rotates. Based on the coordinates of the initial line's and current line's end points, an arc tangent function is used to calculate the respective included angle of the points relative to the horizontal direction. Rotation angle = arctan2(cy2-cy1,cx2-cx1) - arctan2(y2-y1,x2-x1). The initial line is used as the coordinate system. The clockwise rotation is 0 to 180 degrees, and the counter-clockwise rotation is –180 to 0 degrees. |
-  | speed | number | Speed of the swipe gesture. |
+## Events
 
-![en-us_image_0000001231374559](figures/en-us_image_0000001231374661.png)
+| Name| Description|
+| -------- | -------- |
+| onAction(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when a swipe gesture is recognized.|
 
+![en-us_image_0000001231374661](figures/en-us_image_0000001231374661.png)
 ## Example
 
-
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct SwipeGestureExample {
@@ -66,7 +56,7 @@ struct SwipeGestureExample {
     .width(260).height(260)
     .rotate({x: 0, y: 0, z: 1, angle: this.rotateAngle})
     .gesture(
-      SwipeGesture({fingers: 1, direction:SwipeDirection.Vertical})
+      SwipeGesture({fingers: 1, direction: SwipeDirection.Vertical})
         .onAction((event: GestureEvent) => {
           this.speed = event.speed
           this.rotateAngle = event.angle

en/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md

 # TapGesture
 
-A tap gesture can recognize one or more taps.
+**TapGesture** is used to trigger a tap gesture with one or more taps.
 
 >  **NOTE**
 >
 >  This gesture is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-## Required Permissions
-
-None
-
-
 ## APIs
 
-TapGesture(options?: { count?: number, fingers?: number })
+TapGesture(value?: { count?: number, fingers?: number })
 
-- Parameters
-    | Name | Type | Mandatory | Default Value | Description |
-  | -------- | -------- | -------- | -------- | -------- |
-  | count | number | No | 1 | Number of consecutive taps. If this parameter is set to a value less than **1**, the default value will be used.<br/>> **NOTE**<br/>> If multi-tap is configured, the timeout interval between a lift and the next tap is 300 ms. |
-  | fingers | number | No | 1 | Minimum number of fingers to trigger a tap. The value ranges from 1 to 10.<br/>> **NOTE**<br/>> 1. When multi-finger is configured, if the number of fingers used for tap does not reach the specified number within 300 ms after the first finger is tapped, the gesture fails to be recognized.<br/>> 2. Gesture recognition fails if the number of fingers used for tap exceeds the configured number. |
+**Parameters**
+
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| count | number | No| Number of consecutive taps. If this parameter is set to a value less than **1**, the default value will be used.<br>Default value: **1**<br>> **NOTE**<br>> If multi-tap is configured, the timeout interval between a lift and the next tap is 300 ms.|
+| fingers | number | No| Minimum number of fingers to trigger a tap. The value ranges from 1 to 10.<br>Default value: **1**<br>> **NOTE**<br>> 1. When multi-finger is configured, the gesture will fail to be recognized if the number of fingers used for tapping is less than the configured number within 300 ms after the first finger is tapped.<br>> 2. The gesture will fail to be recognized if the number of fingers used for tapping exceeds the configured number.|
 
 
 ## Events
 
-| Name | Description |
+| Name| Description|
 | -------- | -------- |
-| onAction((event?:&nbsp;[GestureEvent](ts-gesture-settings.md))&nbsp;=&gt;&nbsp;void) | Callback invoked when a tap gesture is recognized. |
+| onAction(event: (event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Callback invoked when a tap gesture is recognized.|
 
 
 ## Example
 
-
 ```ts
 // xxx.ets
 @Entry

en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md

 # CanvasRenderingContext2D
 
-
-The **\<RenderingContext>** component is used to draw rectangles, text, images, and other objects on a canvas.
+Use **RenderingContext** to draw rectangles, text, images, and other objects on a canvas.
 
 > **NOTE**
 >
-> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
+> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
 ## APIs
 
 CanvasRenderingContext2D(setting: RenderingContextSetting)
 
-- Parameters
-    | Name    | Type                                     | Mandatory | Default Value | Description                   |
-    | ------- | ---------------------------------------- | --------- | ------------- | ----------------------------- |
-    | setting | [RenderingContextSettings](#renderingcontextsettings) | Yes       | -             | See [RenderingContextSettings](#renderingcontextsettings). |
+**Parameters**
+
+| Name    | Type                                    | Mandatory  | Description                                    |
+| ------- | ---------------------------------------- | ---- | ---------------------------------------- |
+| setting | [RenderingContextSettings](#renderingcontextsettings) | Yes   | See [RenderingContextSettings](#renderingcontextsettings).|
 
 
 ### RenderingContextSettings
@@ -23,37 +23,38 @@ RenderingContextSettings(antialias?: boolean)
 
 Configures the settings of a **CanvasRenderingContext2D** object, including whether to enable antialiasing.
 
-- Parameters
-    | Name      | Type | Mandatory | Default Value | Description                      |
-    | --------- | ---- | --------- | ------------- | -------------------------------- |
-    | antialias | boolean | No        | false         | Whether antialiasing is enabled. |
+**Parameters**
+
+| Name      | Type   | Mandatory  | Description                         |
+| --------- | ------- | ---- | ----------------------------- |
+| antialias | boolean | No   | Whether antialiasing is enabled.<br>Default value: **false**|
 
 
 ## Attributes
 
-| Name                                     | Type                                     | Default Value                   | Description                              |
-| ---------------------------------------- | ---------------------------------------- | ------------------------------- | ---------------------------------------- |
-| [fillStyle](#fillstyle)                  | &lt;color&gt; \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | -                               | Style used to fill an area.<br>- When the type is **&lt;color&gt;**, this attribute indicates the fill color.<br>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the [createLinearGradient](#createlineargradient) method.<br>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the [createPattern](#createpattern) method. |
-| [lineWidth](#linewidth)                  | number                                   | -                               | Line width.                              |
-| [strokeStyle](#strokestyle)              | &lt;color&gt; \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | -                               | Stroke style.<br>- When the type is **&lt;color&gt;**, this attribute indicates the stroke color.<br>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the [createLinearGradient](#createlineargradient) method.<br>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the [createPattern](#createpattern) method. |
-| [lineCap](#linecap)                      | string                                   | 'butt'                          | Style of the line endpoints. The options are as follows:<br>- **'butt'**: The endpoints of the line are squared off.<br>- **'round'**: The endpoints of the line are rounded.<br>- **'square'**: The endpoints of the line are squared off by adding a box with an equal width and half the height of the line's thickness. |
-| [lineJoin](#linejoin)                    | string                                   | 'miter'                         | Style of the shape used to join line segments. The options are as follows:<br>- **'round'**: The shape used to join line segments is a rounded corner with the radius equal to the line width.<br>- **'bevel'**: The shape used to join line segments is a beveled corner. The rectangular corner of each line is independent.<br>- **'miter'**: The shape used to join line segments is a mitered corner. The corner is formed by extending the outside edges of the lines until they meet. You can adjust the effect of this attribute using **miterLimit**. |
-| [miterLimit](#miterlimit)                | number                                   | 10                              | Maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet. |
-| [font](#font)                            | string                                   | 'normal normal 14px sans-serif' | Font style.<br>Syntax: ctx.font='font-size font-family'<br>- (Optional) **font-size**: font size and row height. The unit can only be px.<br>- (Optional) **font-family**: font family.<br>Syntax: ctx.font='font-style font-weight font-size font-family'<br>- (Optional) **font-style**: font style. Available values are **'normal'** and **'italic'**.<br>- (Optional) **font-weight**: font weight. Available values are as follows: **'normal'**, **'bold'**, **'bolder'**, **'lighter'**, **100**, **200**, **300**, **400**, **500**, **600**, **700**, **800**, **900**<br>- (Optional) **font-size**: font size and row height. The unit can only be px.<br>- (Optional) **font-family**: font family. Available values are **'sans-serif'**, **'serif'**, and **'monospace'**. |
-| [textAlign](#textalign)                  | string                                   | 'left'                          | Text alignment mode. Available values are as follows:<br>- **'left'**: The text is left-aligned.<br>- **'right'**: The text is right-aligned.<br>- **'center'**: The text is center-aligned.<br>- **'start'**: The text is aligned with the start bound.<br>- **'end'**: The text is aligned with the end bound.<br>**NOTE**<br>In the **ltr** layout mode, the value **'start'** equals **'left'**. In the **rtl** layout mode, the value **'start'** equals **'right'**. |
-| [textBaseline](#textbaseline)            | string                                   | 'alphabetic'                    | Horizontal alignment mode of text. Available values are as follows:<br>- **'alphabetic'**: The text baseline is the normal alphabetic baseline.<br>- **'top'**: The text baseline is on the top of the text bounding box.<br>- **'hanging'**: The text baseline is a hanging baseline over the text.<br>- **'middle'**: The text baseline is in the middle of the text bounding box.<br>- **'ideographic'**: The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline, the ideographic baseline is located at the bottom of the excess character.<br>- **'bottom'**: The text baseline is at the bottom of the text bounding box. Its difference from the ideographic baseline is that the ideographic baseline does not consider letters in the next line. |
-| [globalAlpha](#globalalpha)              | number                                   | -                               | Opacity. **0.0**: completely transparent; **1.0**: completely opaque. |
-| [lineDashOffset](#linedashoffset)        | number                                   | 0.0                             | Offset of the dashed line. The precision is float. |
-| [globalCompositeOperation](#globalcompositeoperation) | string                                   | 'source-over'                   | Composition operation type. Available values are as follows: **'source-over'**, **'source-atop'**, **'source-in'**, **'source-out'**, **'destination-over'**, **'destination-atop'**, **'destination-in'**, **'destination-out'**, **'lighter'**, **'copy'**, and **'xor'**. |
-| [shadowBlur](#shadowblur)                | number                                   | 0.0                             | Blur level during shadow drawing. A larger value indicates a more blurred effect. The precision is float. |
-| [shadowColor](#shadowcolor)              | &lt;color&gt;                            | -                               | Shadow color.                            |
-| [shadowOffsetX](#shadowoffsetx)          | number                                   | -                               | X-axis shadow offset relative to the original object. |
-| [shadowOffsetY](#shadowoffsety)          | number                                   | -                               | Y-axis shadow offset relative to the original object. |
-| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean                                  | true                            | Whether to adjust the image smoothness during image drawing. The value **true** means to enable this feature, and **false** means the opposite. |
-| imageSmoothingQuality                    | string                                   | 'low'                           | Image smoothness. The value can be **'low'**, **'medium'**, or **'high'**. |
-
-> **NOTE**<br>
-> The value of the **&lt;color&gt;** type can be in 'rgb(255, 255, 255)', 'rgba(255, 255, 255, 1.0)', or '\#FFFFFF' format.
+| Name                                      | Type                                      | Description                                      |
+| ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
+| [fillStyle](#fillstyle)                  | string \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | Style to fill an area.<br>- When the type is string, this attribute indicates the color of the fill area.<br>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.<br>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API.|
+| [lineWidth](#linewidth)                  | number                                   | Line width.                              |
+| [strokeStyle](#strokestyle)              | string \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | Stroke style.<br>- When the type is string, this attribute indicates the stroke color.<br>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.<br>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API.|
+| [lineCap](#linecap)                      | CanvasLineCap                            | Style of the line endpoints. The options are as follows:<br>- **'butt'**: The endpoints of the line are squared off.<br>- **'round'**: The endpoints of the line are rounded.<br>- **'square'**: The endpoints of the line are squared off by adding a box with an equal width and half the height of the line's thickness.<br>Default value: **'butt'**|
+| [lineJoin](#linejoin)                    | CanvasLineJoin                           | Style of the shape used to join line segments. The options are as follows:<br>- **'round'**: The shape used to join line segments is a sector, whose radius at the rounded corner is equal to the line width.<br>- **'bevel'**: The shape used to join line segments is a triangle. The rectangular corner of each line is independent.<br>- **'miter'**: The shape used to join line segments has a mitered corner by extending the outside edges of the lines until they meet. You can view the effect of this attribute in **miterLimit**.<br>Default value: **'miter'**|
+| [miterLimit](#miterlimit)                | number                                   | Maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet.<br>Default value: **10**|
+| [font](#font)                            | string                                   | Font style.<br>Syntax: ctx.font='font-size font-family'<br>- (Optional) **font-size**: font size and row height. The unit can only be pixels.<br>- (Optional) **font-family**: font family.<br>Syntax: ctx.font='font-style font-weight font-size font-family'<br>- (Optional) **font-style**: font style. Available values are **'normal'** and **'italic'**.<br>- (Optional) **font-weight**: font weight. Available values are as follows: **'normal'**, **'bold'**, **'bolder'**, **'lighter'**, **'100'**, **'200'**, **'300'**, **'400'**, **'500'**, **'600'**, **'700'**, **'800'**, **'900'**.<br>- (Optional) **font-size**: font size and row height. The unit can only be pixels.<br>- (Optional) **font-family**: font family. Available values are **'sans-serif'**, **'serif'**, and **'monospace'**.<br>Default value: **'normal normal 14px sans-serif'**|
+| [textAlign](#textalign)                  | CanvasTextAlign                          | Text alignment mode. Available values are as follows:<br>- **'left'**: The text is left-aligned.<br>- **'right'**: The text is right-aligned.<br>- **'center'**: The text is center-aligned.<br>- **'start'**: The text is aligned with the start bound.<br>- **'end'**: The text is aligned with the end bound.<br>In the **ltr** layout mode, the value **'start'** equals **'left'**. In the **rtl** layout mode, the value **'start'** equals **'right'**.<br>Default value: **'left'**|
+| [textBaseline](#textbaseline)            | CanvasTextBaseline                       | Horizontal alignment mode of text. Available values are as follows:<br>- **'alphabetic'**: The text baseline is the normal alphabetic baseline.<br>- **'top'**: The text baseline is on the top of the text bounding box.<br>- **'hanging'**: The text baseline is a hanging baseline over the text.<br>- **'middle'**: The text baseline is in the middle of the text bounding box.<br>**'ideographic'**: The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline, the ideographic baseline is located at the bottom of the excess character.<br>- **'bottom'**: The text baseline is at the bottom of the text bounding box. Its difference from the ideographic baseline is that the ideographic baseline does not consider letters in the next line.<br>Default value: **'alphabetic'**|
+| [globalAlpha](#globalalpha)              | number                                   | Opacity.<br>**0.0**: completely transparent.<br>**1.0**: completely opaque.               |
+| [lineDashOffset](#linedashoffset)        | number                                   | Offset of the dashed line. The precision is float.<br>Default value: **0.0**   |
+| [globalCompositeOperation](#globalcompositeoperation) | string                                   | Composition operation type. Available values are as follows: **'source-over'**, **'source-atop'**, **'source-in'**, **'source-out'**, **'destination-over'**, **'destination-atop'**, **'destination-in'**, **'destination-out'**, **'lighter'**, **'copy'**, and **'xor'**.<br>Default value: **'source-over'**|
+| [shadowBlur](#shadowblur)                | number                                   | Blur level during shadow drawing. A larger value indicates a more blurred effect. The precision is float.<br>Default value: **0.0**|
+| [shadowColor](#shadowcolor)              | string                                   | Shadow color.                           |
+| [shadowOffsetX](#shadowoffsetx)          | number                                   | X-axis shadow offset relative to the original object.                     |
+| [shadowOffsetY](#shadowoffsety)          | number                                   | Y-axis shadow offset relative to the original object.                     |
+| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean                                  | Whether to adjust the image smoothness during image drawing. The value **true** means to enable this feature, and **false** means the opposite.<br>Default value: **true**|
+
+> **NOTE**
+>
+> The string-type value of **fillStyle**, **shadowColor**, and **strokeStyle** can be in 'rgb(255, 255, 255)', 'rgba(255, 255, 255, 1.0)', or '\#FFFFFF' format.
 
 
 ### fillStyle
@@ -63,8 +64,8 @@ Configures the settings of a **CanvasRenderingContext2D** object, including whet
 @Entry
 @Component
 struct FillStyleExample {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true)
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true);
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
 
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -93,8 +94,8 @@ struct FillStyleExample {
 @Entry
 @Component
 struct LineWidthExample {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true)
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true);
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
 
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -123,8 +124,8 @@ struct LineWidthExample {
 @Entry
 @Component
 struct StrokeStyleExample {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true)
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true);
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
 
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -155,8 +156,8 @@ struct StrokeStyleExample {
 @Entry
 @Component
 struct LineCapExample {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true)
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true);
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
 
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -189,8 +190,8 @@ struct LineCapExample {
 @Entry
 @Component
 struct LineJoinExample {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true)
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true);
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
 
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -224,8 +225,8 @@ struct LineJoinExample {
 @Entry
 @Component
 struct MiterLimit {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true)
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true);
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -259,8 +260,8 @@ struct MiterLimit {
 @Entry
 @Component
 struct Fonts {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true)
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true);
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -289,8 +290,8 @@ struct Fonts {
 @Entry
 @Component
 struct CanvasExample {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true)
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true);
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -334,8 +335,8 @@ struct CanvasExample {
 @Entry
 @Component
 struct TextBaseline {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true)
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true);
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -379,8 +380,8 @@ struct TextBaseline {
 @Entry
 @Component
 struct GlobalAlpha {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true)
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true);
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -402,7 +403,7 @@ struct GlobalAlpha {
 }
 ```
 
-![en-us_image_0000001212218444](figures/en-us_image_0000001212218444.png)
+![en-us_image_0000001194192434](figures/en-us_image_0000001194192434.png)
 
 
 ### lineDashOffset
@@ -412,8 +413,8 @@ struct GlobalAlpha {
 @Entry
 @Component
 struct LineDashOffset {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true)
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true);
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -424,6 +425,7 @@ struct LineDashOffset {
         .onReady(() =>{
           this.context.arc(100, 75, 50, 0, 6.28)
           this.context.setLineDash([10,20])
+          this.context.lineDashOffset = 10.0;
           this.context.stroke();
       })
     }
@@ -433,32 +435,32 @@ struct LineDashOffset {
 }
 ```
 
-![en-us_image_0000001212058480](figures/en-us_image_0000001212058480.png)
+![en-us_image_0000001194352434](figures/en-us_image_0000001194352434.png)
 
 
 ### globalCompositeOperation
 
 | Name              | Description                      |
-| ---------------- | ---------------------------------------- |
+| ---------------- | ------------------------ |
 | source-over      | Displays the new drawing above the existing drawing. This attribute is used by default.  |
 | source-atop      | Displays the new drawing on the top of the existing drawing.       |
 | source-in        | Displays the new drawing inside the existing drawing.        |
-| source-out       | Displays the part of the new drawing that is outside of the existing drawing. |
+| source-out       | Displays part of the new drawing that is outside of the existing drawing.       |
 | destination-over | Displays the existing drawing above the new drawing.       |
 | destination-atop | Displays the existing drawing on the top of the new drawing.       |
 | destination-in   | Displays the existing drawing inside the new drawing.        |
-| destination-out  | Displays the part of the existing drawing that is outside of the new drawing. |
-| lighter          | Displays both the new drawing and the existing drawing. |
+| destination-out  | Displays the existing drawing outside the new drawing.        |
+| lighter          | Displays both the new and existing drawing.         |
 | copy             | Displays the new drawing and neglects the existing drawing.       |
-| xor              | Combines the new drawing and existing drawing using the XOR operation. |
+| xor              | Combines the new drawing and existing drawing using the XOR operation.|
 
 ```ts
 // xxx.ets
 @Entry
 @Component
 struct GlobalCompositeOperation {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true)
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true);
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -527,8 +529,8 @@ struct ShadowBlur {
 @Entry
 @Component
 struct ShadowColor {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true)
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true);
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -559,8 +561,8 @@ struct ShadowColor {
 @Entry
 @Component
 struct ShadowOffsetX {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true)
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true);
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -592,8 +594,8 @@ struct ShadowOffsetX {
 @Entry
 @Component
 struct ShadowOffsetY {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true)
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true);
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
       Canvas(this.context)
@@ -624,9 +626,9 @@ struct ShadowOffsetY {
 @Entry
 @Component
 struct ImageSmoothingEnabled {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true)
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-  private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
+  private settings: RenderingContextSettings = new RenderingContextSettings(true);
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg");
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -657,23 +659,24 @@ fillRect(x: number, y: number, w: number, h: number): void
 
 Fills a rectangle on the canvas.
 
-- Parameters
-    | Name   | Type   | Mandatory | Default Value | Description                              |
-    | ------ | ------ | --------- | ------------- | ---------------------------------------- |
-    | x      | number | Yes       | 0             | X-coordinate of the upper left corner of the rectangle. |
-    | y      | number | Yes       | 0             | Y-coordinate of the upper left corner of the rectangle. |
-    | width  | number | Yes       | 0             | Width of the rectangle.                  |
-    | height | number | Yes       | 0             | Height of the rectangle.                 |
+**Parameters**
+
+| Name    | Type    | Mandatory  | Default Value | Description           |
+| ------ | ------ | ---- | ---- | ------------- |
+| x      | number | Yes   | 0    | X-coordinate of the upper left corner of the rectangle.|
+| y      | number | Yes   | 0    | Y-coordinate of the upper left corner of the rectangle.|
+| width  | number | Yes   | 0    | Width of the rectangle.     |
+| height | number | Yes   | 0    | Height of the rectangle.     |
 
-- Example
+**Example**
 
   ```ts
   // xxx.ets
   @Entry
   @Component
   struct FillRect {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
     
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -700,23 +703,24 @@ strokeRect(x: number, y: number, w: number, h: number): void
 
 Draws an outlined rectangle on the canvas.
 
-- Parameters
-    | Name   | Type   | Mandatory | Default Value | Description                              |
-    | ------ | ------ | --------- | ------------- | ---------------------------------------- |
-    | x      | number | Yes       | 0             | X-coordinate of the upper left corner of the rectangle. |
-    | y      | number | Yes       | 0             | Y-coordinate of the upper left corner of the rectangle. |
-    | width  | number | Yes       | 0             | Width of the rectangle.                  |
-    | height | number | Yes       | 0             | Height of the rectangle.                 |
+**Parameters**
+
+| Name  | Type    | Mandatory  | Default Value | Description          |
+| ---- | ------ | ---- | ---- | ------------ |
+| x    | number | Yes   | 0    | X-coordinate of the upper left corner of the rectangle.|
+| y    | number | Yes   | 0    | Y-coordinate of the upper left corner of the rectangle.|
+| w    | number | Yes   | 0    | Width of the rectangle.    |
+| h    | number | Yes   | 0    | Height of the rectangle.    |
 
-- Example
+**Example**
 
   ```ts
   // xxx.ets
   @Entry
   @Component
   struct StrokeRect {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
         Canvas(this.context)
@@ -742,23 +746,24 @@ clearRect(x: number, y: number, w: number, h: number): void
 
 Clears the content in a rectangle on the canvas.
 
-- Parameters
-    | Name   | Type   | Mandatory | Default Value | Description                              |
-    | ------ | ------ | --------- | ------------- | ---------------------------------------- |
-    | x      | number | Yes       | 0             | X-coordinate of the upper left corner of the rectangle. |
-    | y      | number | Yes       | 0             | Y-coordinate of the upper left corner of the rectangle. |
-    | width  | number | Yes       | 0             | Width of the rectangle.                  |
-    | height | number | Yes       | 0             | Height of the rectangle.                 |
+**Parameters**
+
+| Name  | Type    | Mandatory  | Default Value | Description           |
+| ---- | ------ | ---- | ---- | ------------- |
+| x    | number | Yes   | 0    | X-coordinate of the upper left corner of the rectangle.|
+| y    | number | Yes   | 0    | Y-coordinate of the upper left corner of the rectangle.|
+| w    | number | Yes   | 0    | Width of the rectangle.     |
+| h    | number | Yes   | 0    | Height of the rectangle.     |
 
-- Example
+**Example**
 
   ```ts
   // xxx.ets
   @Entry
   @Component
   struct ClearRect {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
         Canvas(this.context)
@@ -782,26 +787,28 @@ Clears the content in a rectangle on the canvas.
 
 ### fillText
 
-fillText(text: string, x: number, y: number): void
+fillText(text: string, x: number, y: number, maxWidth?: number): void
 
 Draws filled text on the canvas.
 
-- Parameters
-    | Name | Type   | Mandatory | Default Value | Description                              |
-    | ---- | ------ | --------- | ------------- | ---------------------------------------- |
-    | text | string | Yes       | ""            | Text to draw.                            |
-    | x    | number | Yes       | 0             | X-coordinate of the lower left corner of the text. |
-    | y    | number | Yes       | 0             | Y-coordinate of the lower left corner of the text. |
+**Parameters**
+
+| Name      | Type    | Mandatory  | Default Value | Description             |
+| -------- | ------ | ---- | ---- | --------------- |
+| text     | string | Yes   | ""   | Text to draw.     |
+| x        | number | Yes   | 0    | X-coordinate of the lower left corner of the text.|
+| y        | number | Yes   | 0    | Y-coordinate of the lower left corner of the text.|
+| maxWidth | number | No   | -    | Maximum width allowed for the text.   |
 
-- Example
+**Example**
 
   ```ts
   // xxx.ets
   @Entry
   @Component
   struct FillText {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
         Canvas(this.context)
@@ -824,26 +831,28 @@ Draws filled text on the canvas.
 
 ### strokeText
 
-strokeText(text: string, x: number, y: number): void
+strokeText(text: string, x: number, y: number, maxWidth?:number): void
 
 Draws a text stroke on the canvas.
 
-- Parameters
-    | Name | Type   | Mandatory | Default Value | Description                              |
-    | ---- | ------ | --------- | ------------- | ---------------------------------------- |
-    | text | string | Yes       | ""            | Text to draw.                            |
-    | x    | number | Yes       | 0             | X-coordinate of the lower left corner of the text. |
-    | y    | number | Yes       | 0             | Y-coordinate of the lower left corner of the text. |
+**Parameters**
+
+| Name      | Type    | Mandatory  | Default Value | Description             |
+| -------- | ------ | ---- | ---- | --------------- |
+| text     | string | Yes   | ""  | Text to draw.     |
+| x        | number | Yes   | 0    | X-coordinate of the lower left corner of the text.|
+| y        | number | Yes   | 0    | Y-coordinate of the lower left corner of the text.|
+| maxWidth | number | No   | -    | Maximum width of the text to be drawn. |
 
-- Example
+**Example**
 
   ```ts
   // xxx.ets
   @Entry
   @Component
   struct StrokeText {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
         Canvas(this.context)
@@ -868,32 +877,50 @@ Draws a text stroke on the canvas.
 
 measureText(text: string): TextMetrics
 
-Returns a **TextMetrics** object used to obtain the width of specified text.
+Measures the specified text to obtain its width. This API returns a **TextMetrics** object.
+
+**Parameters**
 
-- Parameters
-    | Name | Type   | Mandatory | Default Value | Description          |
-    | ---- | ------ | --------- | ------------- | -------------------- |
-    | text | string | Yes       | ""            | Text to be measured. |
+| Name  | Type    | Mandatory  | Default Value | Description        |
+| ---- | ------ | ---- | ---- | ---------- |
+| text | string | Yes   | ""   | Text to be measured.|
 
-- Return value
-    | Type        | Description             |
-    | ----------- | ----------------------- |
-    | TextMetrics | **TextMetrics** object. |
+**Return value**
 
-- **TextMetrics** attributes
-    | Name  | Type   | Description        |
-    | ----- | ------ | ------------------ |
-    | width | number | Width of the text. |
+| Type         | Description     |
+| ----------- | ------- |
+| TextMetrics | **TextMetrics** object.|
 
-- Example
+**TextMetrics**
+
+| Attribute                      | Type    | Description                                      |
+| ------------------------ | ------ | ---------------------------------------- |
+| width                    | number | Width of the text.                                 |
+| height                   | number | Height of the text.                                 |
+| actualBoundingBoxAscent  | number | Distance from the horizontal line specified by the **CanvasRenderingContext2D.textBaseline** attribute to the top of the bounding rectangle used to render the text. The current value is **0**.|
+| actualBoundingBoxDescent | number | Distance from the horizontal line specified by the **CanvasRenderingContext2D.textBaseline** attribute to the bottom of the bounding rectangle used to render the text. The current value is **0**.|
+| actualBoundingBoxLeft    | number | Distance parallel to the baseline from the alignment point determined by the **CanvasRenderingContext2D.textAlign** attribute to the left side of the bounding rectangle of the text. The current value is **0**.|
+| actualBoundingBoxRight   | number | Distance parallel to the baseline from the alignment point determined by the **CanvasRenderingContext2D.textAlign** attribute to the right side of the bounding rectangle of the text. The current value is **0**.|
+| alphabeticBaseline       | number | Distance from the horizontal line specified by the **CanvasRenderingContext2D.textBaseline** attribute to the alphabetic baseline of the line box. The current value is **0**.|
+| emHeightAscent           | number | Distance from the horizontal line specified by the **CanvasRenderingContext2D.textBaseline** attribute to the top of the em square in the line box. The current value is **0**.|
+| emHeightDescent          | number | Distance from the horizontal line specified by the **CanvasRenderingContext2D.textBaseline** attribute to the bottom of the em square in the line box. The current value is **0**.|
+| fontBoundingBoxAscent    | number | Distance from the horizontal line specified by the **CanvasRenderingContext2D.textBaseline** attribute to the top of the highest bounding rectangle of all the fonts used to render the text. The current value is **0**.|
+| fontBoundingBoxDescent   | number | Distance from the horizontal line specified by the **CanvasRenderingContext2D.textBaseline** attribute to the bottom of the bounding rectangle of all the fonts used to render the text. The current value is **0**.|
+| hangingBaseline          | number | Distance from the horizontal line specified by the **CanvasRenderingContext2D.textBaseline** attribute to the hanging baseline of the line box. The current value is **0**.|
+| ideographicBaseline      | number | Distance from the horizontal line indicated by the **CanvasRenderingContext2D.textBaseline** attribute to the ideographic baseline of the line box. The current value is **0**.|
+
+  
+
+
+**Example**
 
   ```ts
   // xxx.ets
   @Entry
   @Component
   struct MeasureText {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
         Canvas(this.context)
@@ -921,20 +948,21 @@ stroke(path?: Path2D): void
 
 Strokes a path.
 
-- Parameters
-    | Name | Type                                     | Mandatory | Default Value | Description                |
-    | ---- | ---------------------------------------- | --------- | ------------- | -------------------------- |
-    | path | [Path2D](ts-components-canvas-path2d.md) | No        | null          | A **Path2D** path to draw. |
+**Parameters**
+
+| Name  | Type                                      | Mandatory  | Default Value | Description          |
+| ---- | ---------------------------------------- | ---- | ---- | ------------ |
+| path | [Path2D](ts-components-canvas-path2d.md) | No   | null | A **Path2D** path to draw.|
 
-- Example
+**Example**
 
   ```ts
   // xxx.ets
   @Entry
   @Component
   struct Stroke {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -964,15 +992,15 @@ beginPath(): void
 
 Creates a drawing path.
 
-- Example
+**Example**
 
   ```ts
   // xxx.ets
   @Entry
   @Component
   struct BeginPath {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1004,21 +1032,22 @@ moveTo(x: number, y: number): void
 
 Moves a drawing path to a target position on the canvas.
 
-- Parameters
-    | Name | Type   | Mandatory | Default Value | Description                          |
-    | ---- | ------ | --------- | ------------- | ------------------------------------ |
-    | x    | number | Yes       | 0             | X-coordinate of the target position. |
-    | y    | number | Yes       | 0             | Y-coordinate of the target position. |
+**Parameters**
+
+| Name  | Type    | Mandatory  | Default Value | Description       |
+| ---- | ------ | ---- | ---- | --------- |
+| x    | number | Yes   | 0    | X-coordinate of the target position.|
+| y    | number | Yes   | 0    | Y-coordinate of the target position.|
 
-- Example
+**Example**
 
   ```ts
   // xxx.ets
   @Entry
   @Component
   struct MoveTo {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1048,21 +1077,22 @@ lineTo(x: number, y: number): void
 
 Connects the current point to a target position using a straight line.
 
-- Parameters
-    | Name | Type   | Mandatory | Default Value | Description                          |
-    | ---- | ------ | --------- | ------------- | ------------------------------------ |
-    | x    | number | Yes       | 0             | X-coordinate of the target position. |
-    | y    | number | Yes       | 0             | Y-coordinate of the target position. |
+**Parameters**
+
+| Name  | Type    | Mandatory  | Default Value | Description       |
+| ---- | ------ | ---- | ---- | --------- |
+| x    | number | Yes   | 0    | X-coordinate of the target position.|
+| y    | number | Yes   | 0    | Y-coordinate of the target position.|
 
-- Example
+**Example**
 
   ```ts
   // xxx.ets
   @Entry
   @Component
   struct LineTo {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1092,15 +1122,15 @@ closePath(): void
 
 Draws a closed path.
 
-- Example
+**Example**
 
   ```ts
   // xxx.ets
   @Entry
   @Component
   struct ClosePath {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1128,26 +1158,33 @@ Draws a closed path.
 
 ### createPattern
 
-createPattern(image: ImageBitmap, repetition: string): void
+createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | null
 
 Creates a pattern for image filling based on a specified source image and repetition mode.
 
-- Parameters
-    | Name       | Type                                     | Mandatory | Default Value | Description                              |
-    | ---------- | ---------------------------------------- | --------- | ------------- | ---------------------------------------- |
-    | image      | [ImageBitmap](ts-components-canvas-imagebitmap.md) | Yes       | null          | Source image. For details, see ImageBitmap. |
-    | repetition | string                                   | Yes       | ""            | Repetition mode. The value can be **'repeat'**, **'repeat-x'**, **'repeat-y'**, or **'no-repeat'**. |
+**Parameters**
+
+| Name        | Type                                      | Mandatory  | Default Value | Description                                      |
+| ---------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
+| image      | [ImageBitmap](ts-components-canvas-imagebitmap.md) | Yes   | null | Source image. For details, see **ImageBitmap**.                 |
+| repetition | string                                   | Yes   | ""  | Repetition mode. The value can be **"repeat"**, **"repeat-x"**, **"repeat-y"**, or **"no-repeat"**.|
+
+**Return value**
 
-- Example
+| Type                             | Description                     |
+| ------------------------------- | ----------------------- |
+| [CanvasPattern](#canvaspattern) | Created pattern for image filling based on a specified source image and repetition mode.|
+
+**Example**
 
   ```ts
   // xxx.ets
   @Entry
   @Component
   struct CreatePattern {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg");
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1176,25 +1213,26 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
 
 Draws a cubic bezier curve on the canvas.
 
-- Parameters
-    | Name | Type   | Mandatory | Default Value | Description                              |
-    | ---- | ------ | --------- | ------------- | ---------------------------------------- |
-    | cp1x | number | Yes       | 0             | X-coordinate of the first parameter of the bezier curve. |
-    | cp1y | number | Yes       | 0             | Y-coordinate of the first parameter of the bezier curve. |
-    | cp2x | number | Yes       | 0             | X-coordinate of the second parameter of the bezier curve. |
-    | cp2y | number | Yes       | 0             | Y-coordinate of the second parameter of the bezier curve. |
-    | x    | number | Yes       | 0             | X-coordinate of the end point on the bezier curve. |
-    | y    | number | Yes       | 0             | Y-coordinate of the end point on the bezier curve. |
+**Parameters**
+
+| Name  | Type    | Mandatory  | Default Value | Description            |
+| ---- | ------ | ---- | ---- | -------------- |
+| cp1x | number | Yes   | 0    | X-coordinate of the first parameter of the bezier curve.|
+| cp1y | number | Yes   | 0    | Y-coordinate of the first parameter of the bezier curve.|
+| cp2x | number | Yes   | 0    | X-coordinate of the second parameter of the bezier curve.|
+| cp2y | number | Yes   | 0    | Y-coordinate of the second parameter of the bezier curve.|
+| x    | number | Yes   | 0    | X-coordinate of the end point on the bezier curve.   |
+| y    | number | Yes   | 0    | Y-coordinate of the end point on the bezier curve.   |
 
-- Example
+**Example**
 
   ```ts
   // xxx.ets
   @Entry
   @Component
   struct BezierCurveTo {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1224,15 +1262,16 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
 
 Draws a quadratic curve on the canvas.
 
-- Parameters
-    | Name | Type   | Mandatory | Default Value | Description                              |
-    | ---- | ------ | --------- | ------------- | ---------------------------------------- |
-    | cpx  | number | Yes       | 0             | X-coordinate of the bezier curve parameter. |
-    | cpy  | number | Yes       | 0             | Y-coordinate of the bezier curve parameter. |
-    | x    | number | Yes       | 0             | X-coordinate of the end point on the bezier curve. |
-    | y    | number | Yes       | 0             | Y-coordinate of the end point on the bezier curve. |
+**Parameters**
+
+| Name  | Type    | Mandatory  | Default Value | Description         |
+| ---- | ------ | ---- | ---- | ----------- |
+| cpx  | number | Yes   | 0    | X-coordinate of the bezier curve parameter.|
+| cpy  | number | Yes   | 0    | Y-coordinate of the bezier curve parameter.|
+| x    | number | Yes   | 0    | X-coordinate of the end point on the bezier curve.|
+| y    | number | Yes   | 0    | Y-coordinate of the end point on the bezier curve.|
 
-- Example
+**Example**
 
   ```ts
   // xxx.ets
@@ -1241,6 +1280,7 @@ Draws a quadratic curve on the canvas.
   struct QuadraticCurveTo {
     private settings: RenderingContextSettings = new RenderingContextSettings(true);
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
         Canvas(this.context)
@@ -1265,29 +1305,30 @@ Draws a quadratic curve on the canvas.
 
 ### arc
 
-arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void
+arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void
 
 Draws an arc on the canvas.
 
-- Parameters
-    | Name          | Type    | Mandatory | Default Value | Description                              |
-    | ------------- | ------- | --------- | ------------- | ---------------------------------------- |
-    | x             | number  | Yes       | 0             | X-coordinate of the center point of the arc. |
-    | y             | number  | Yes       | 0             | Y-coordinate of the center point of the arc. |
-    | radius        | number  | Yes       | 0             | Radius of the arc.                       |
-    | startAngle    | number  | Yes       | 0             | Start radian of the arc.                 |
-    | endAngle      | number  | Yes       | 0             | End radian of the arc.                   |
-    | anticlockwise | boolean | No        | false         | Whether to draw the arc counterclockwise. |
+**Parameters**
+
+| Name              | Type     | Mandatory  | Default Value  | Description        |
+| ---------------- | ------- | ---- | ----- | ---------- |
+| x                | number  | Yes   | 0     | X-coordinate of the center point of the arc.|
+| y                | number  | Yes   | 0     | Y-coordinate of the center point of the arc.|
+| radius           | number  | Yes   | 0     | Radius of the arc.   |
+| startAngle       | number  | Yes   | 0     | Start radian of the arc.  |
+| endAngle         | number  | Yes   | 0     | End radian of the arc.  |
+| counterclockwise | boolean | No   | false | Whether to draw the arc counterclockwise.|
 
-- Example
+**Example**
 
   ```ts
   // xxx.ets
   @Entry
   @Component
   struct Arc {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1316,24 +1357,25 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
 
 Draws an arc based on the radius and points on the arc.
 
-- Parameters
-    | Name   | Type   | Mandatory | Default Value | Description                              |
-    | ------ | ------ | --------- | ------------- | ---------------------------------------- |
-    | x1     | number | Yes       | 0             | X-coordinate of the first point on the arc. |
-    | y1     | number | Yes       | 0             | Y-coordinate of the first point on the arc. |
-    | x2     | number | Yes       | 0             | X-coordinate of the second point on the arc. |
-    | y2     | number | Yes       | 0             | Y-coordinate of the second point on the arc. |
-    | radius | number | Yes       | 0             | Radius of the arc.                       |
+**Parameters**
+
+| Name    | Type    | Mandatory  | Default Value | Description             |
+| ------ | ------ | ---- | ---- | --------------- |
+| x1     | number | Yes   | 0    | X-coordinate of the first point on the arc.|
+| y1     | number | Yes   | 0    | Y-coordinate of the first point on the arc.|
+| x2     | number | Yes   | 0    | X-coordinate of the second point on the arc.|
+| y2     | number | Yes   | 0    | Y-coordinate of the second point on the arc.|
+| radius | number | Yes   | 0    | Radius of the arc.       |
 
-- Example
+**Example**
 
   ```ts
   // xxx.ets
   @Entry
   @Component
   struct ArcTo {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1358,32 +1400,32 @@ Draws an arc based on the radius and points on the arc.
 
 ### ellipse
 
-ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void
+ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void
 
-Draws an ellipse in the specified rectangular region.
+Draws an ellipse in the specified rectangular region on the canvas.
 
-- Parameters
-    | Name          | Type    | Mandatory | Default Value | Description                              |
-    | ------------- | ------- | --------- | ------------- | ---------------------------------------- |
-    | x             | number  | Yes       | 0             | X-coordinate of the ellipse center.      |
-    | y             | number  | Yes       | 0             | Y-coordinate of the ellipse center.      |
-    | radiusX       | number  | Yes       | 0             | Ellipse radius on the x-axis.            |
-    | radiusY       | number  | Yes       | 0             | Ellipse radius on the y-axis.            |
-    | rotation      | number  | Yes       | 0             | Rotation angle of the ellipse, in radians. |
-    | startAngle    | number  | Yes       | 0             | Angle of the start point for drawing the ellipse, in radians. |
-    | endAngle      | number  | Yes       | 0             | Angle of the end point for drawing the ellipse, in radians. |
-    | anticlockwise | boolean | No        | false         | Whether to draw the ellipse in the counterclockwise direction. |
+**Parameters**
 
-- Example
+| Name              | Type     | Mandatory  | Default Value  | Description               |
+| ---------------- | ------- | ---- | ----- | ----------------- |
+| x                | number  | Yes   | 0     | X-coordinate of the ellipse center.       |
+| y                | number  | Yes   | 0     | Y-coordinate of the ellipse center.       |
+| radiusX          | number  | Yes   | 0     | Ellipse radius on the x-axis.       |
+| radiusY          | number  | Yes   | 0     | Ellipse radius on the y-axis.       |
+| rotation         | number  | Yes   | 0     | Rotation angle of the ellipse. The unit is radian.   |
+| startAngle       | number  | Yes   | 0     | Angle of the start point for drawing the ellipse. The unit is radian.|
+| endAngle         | number  | Yes   | 0     | Angle of the end point for drawing the ellipse. The unit is radian.|
+| counterclockwise | boolean | No   | false | Whether to draw the ellipse in the counterclockwise direction.    |
 
+**Example**
 
   ```ts
   // xxx.ets
   @Entry
   @Component
   struct CanvasExample {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1408,27 +1450,28 @@ Draws an ellipse in the specified rectangular region.
 
 ### rect
 
-rect(x: number, y: number, width: number, height: number): void
+rect(x: number, y: number, w: number, h: number): void
+
+Creates a rectangle on the canvas.
 
-Creates a rectangle.
+**Parameters**
 
-- Parameters
-    | Name   | Type   | Mandatory | Default Value | Description                              |
-    | ------ | ------ | --------- | ------------- | ---------------------------------------- |
-    | x      | number | Yes       | 0             | X-coordinate of the upper left corner of the rectangle. |
-    | y      | number | Yes       | 0             | Y-coordinate of the upper left corner of the rectangle. |
-    | width  | number | Yes       | 0             | Width of the rectangle.                  |
-    | height | number | Yes       | 0             | Height of the rectangle.                 |
+| Name  | Type    | Mandatory  | Default Value | Description           |
+| ---- | ------ | ---- | ---- | ------------- |
+| x    | number | Yes   | 0    | X-coordinate of the upper left corner of the rectangle.|
+| y    | number | Yes   | 0    | Y-coordinate of the upper left corner of the rectangle.|
+| w    | number | Yes   | 0    | Width of the rectangle.     |
+| h    | number | Yes   | 0    | Height of the rectangle.     |
 
-- Example
+**Example**
 
   ```ts
   // xxx.ets
   @Entry
   @Component
   struct CanvasExample {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1452,19 +1495,26 @@ Creates a rectangle.
 
 ### fill
 
-fill(): void
+fill(fillRule?: CanvasFillRule): void
+
+Fills the area inside a closed path on the canvas.
+
+**Parameters**
+
+| Name      | Type            | Mandatory  | Default Value      | Description                                      |
+| -------- | -------------- | ---- | --------- | ---------------------------------------- |
+| fillRule | CanvasFillRule | No   | "nonzero" | Specifies the rule to populate the object.<br>The options are **"nonzero"** and **"evenodd"**.|
 
-Fills the area inside a closed path.
 
-- Example
+**Example**  
 
   ```ts
   // xxx.ets
   @Entry
   @Component
   struct Fill {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1486,21 +1536,78 @@ Fills the area inside a closed path.
   ![en-us_image_0000001256858389](figures/en-us_image_0000001256858389.png)
 
 
+fill(path: Path2D, fillRule?: CanvasFillRule): void
+
+Fills the area inside a closed path on the canvas.
+
+**Parameters**
+
+| Name      | Type            | Mandatory  | Default Value      | Description                                      |
+| -------- | -------------- | ---- | --------- | ---------------------------------------- |
+| path     | Path2D         | Yes   |           | A **Path2D** path to fill.                             |
+| fillRule | CanvasFillRule | No   | "nonzero" | Rule by which to determine whether a point is inside or outside the area to fill.<br>The options are **"nonzero"** and **"evenodd"**.|
+
+
+**Example**  
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct Fill {
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+
+  build() {
+    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+      Canvas(this.context)
+        .width('100%')
+        .height('100%')
+        .backgroundColor('#ffff00')
+        .onReady(() =>{
+          let region = new Path2D();
+          region.moveTo(30, 90);
+          region.lineTo(110, 20);
+          region.lineTo(240, 130);
+          region.lineTo(60, 130);
+          region.lineTo(190, 20);
+          region.lineTo(270, 90);
+          region.closePath();
+          // Fill path
+          this.context.fillStyle = 'green';
+          this.context.fill(region, "evenodd");
+        })
+    }
+    .width('100%')
+    .height('100%')
+  }
+}
+```
+
+ ![en-us_image_000000127777774](figures/en-us_image_000000127777774.png)
+
+
 ### clip
 
-clip(): void
+clip(fillRule?: CanvasFillRule): void
 
-Sets the current path to a clipping path.
+Sets the current path to a clipping area.
 
-- Example
+**Parameters**
+
+| Name      | Type            | Mandatory  | Default Value      | Description                                      |
+| -------- | -------------- | ---- | --------- | ---------------------------------------- |
+| fillRule | CanvasFillRule | No   | "nonzero" | Rule by which to determine whether a point is inside or outside the area to clip.<br>The options are **"nonzero"** and **"evenodd"**.|
+
+**Example**
 
   ```ts
   // xxx.ets
   @Entry
   @Component
   struct Clip {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1525,26 +1632,74 @@ Sets the current path to a clipping path.
   ![en-us_image_0000001211898488](figures/en-us_image_0000001211898488.png)
 
 
+clip(path: Path2D, fillRule?: CanvasFillRule): void
+
+Sets a **Path2D** path to a clipping area. This API is a null API.
+
+**Parameters**
+
+| Name      | Type            | Mandatory  | Default Value      | Description                                      |
+| -------- | -------------- | ---- | --------- | ---------------------------------------- |
+| path     | Path2D         | Yes   | -         | A **Path2D** path to use as a clipping area.                             |
+| fillRule | CanvasFillRule | No   | "nonzero" | Rule by which to determine whether a point is inside or outside the area to clip.<br>The options are **"nonzero"** and **"evenodd"**.|
+
+
+
+### filter
+
+filter(filter: string): void
+
+Provides filter effects. This API is a null API.
+
+**Parameters**
+
+| Name    | Type    | Mandatory  | Default Value | Description          |
+| ------ | ------ | ---- | ---- | ------------ |
+| filter | string | Yes   | -    | Filter functions.|
+
+
+### getTransform
+
+getTransform(): Matrix2D
+
+Obtains the current transformation matrix being applied to the context. This API is a null API.
+
+
+### resetTransform
+
+resetTransform(): void
+
+Resets the current transform to the identity matrix. This API is a null API.
+
+
+### direction
+
+direction(direction: CanvasDirection): void
+
+Sets the current text direction used to draw text. This API is a null API.
+
+
 ### rotate
 
-rotate(rotate: number): void
+rotate(angle: number): void
 
 Rotates a canvas clockwise around its coordinate axes.
 
-- Parameters
-    | Name   | Type   | Mandatory | Default Value | Description                              |
-    | ------ | ------ | --------- | ------------- | ---------------------------------------- |
-    | rotate | number | Yes       | 0             | Clockwise rotation angle. You can use **Math.PI / 180** to convert the angle to a radian. |
+**Parameters**
+
+| Name   | Type    | Mandatory  | Default Value | Description                                      |
+| ----- | ------ | ---- | ---- | ---------------------------------------- |
+| angle | number | Yes   | 0    | Clockwise rotation angle. You can use **Math.PI / 180** to convert the angle to a radian.|
 
-- Example
+**Example**
 
   ```ts
   // xxx.ets
   @Entry
   @Component
   struct Rotate {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1570,23 +1725,24 @@ Rotates a canvas clockwise around its coordinate axes.
 
 scale(x: number, y: number): void
 
-Scales a canvas based on scale factors.
+Scales the canvas based on the given scale factors.
+
+**Parameters**
 
-- Parameters
-    | Name | Type   | Mandatory | Default Value | Description              |
-    | ---- | ------ | --------- | ------------- | ------------------------ |
-    | x    | number | Yes       | 0             | Horizontal scale factor. |
-    | y    | number | Yes       | 0             | Vertical scale factor.   |
+| Name  | Type    | Mandatory  | Default Value | Description         |
+| ---- | ------ | ---- | ---- | ----------- |
+| x    | number | Yes   | 0    | Horizontal scale factor.|
+| y    | number | Yes   | 0    | Vertical scale factor.|
 
-- Example
+**Example**
 
   ```ts
   // xxx.ets
   @Entry
   @Component
   struct Scale {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1611,36 +1767,37 @@ Scales a canvas based on scale factors.
 
 ### transform
 
-transform(scaleX: number, skewX: number, skewY: number, scaleY: number, translateX: number, translateY: number): void
+transform(a: number, b: number, c: number, d: number, e: number, f: number): void
 
 Defines a transformation matrix. To transform a graph, you only need to set parameters of the matrix. The coordinates of the graph are multiplied by the matrix values to obtain new coordinates of the transformed graph. You can use the matrix to implement multiple transform effects.
 
-> **NOTE**<br>
+> **NOTE**
 > The following formulas calculate coordinates of the transformed graph. **x** and **y** represent coordinates before transformation, and **x'** and **y'** represent coordinates after transformation.
 >
 > - x' = scaleX \* x + skewY \* y + translateX
 >
 > - y' = skewX \* x + scaleY \* y + translateY
 
-- Parameters
-    | Name       | Type   | Mandatory | Default Value | Description         |
-    | ---------- | ------ | --------- | ------------- | ------------------- |
-    | scaleX     | number | Yes       | 0             | X-axis scale.       |
-    | skewX      | number | Yes       | 0             | X-axis skew.        |
-    | skewY      | number | Yes       | 0             | Y-axis skew.        |
-    | scaleY     | number | Yes       | 0             | Y-axis scale.       |
-    | translateX | number | Yes       | 0             | X-axis translation. |
-    | translateY | number | Yes       | 0             | Y-axis translation. |
+**Parameters**
 
-- Example
+| Name  | Type    | Mandatory  | Default Value | Description                  |
+| ---- | ------ | ---- | ---- | -------------------- |
+| a    | number | Yes   | 0    | X-axis scale.    |
+| b    | number | Yes   | 0    | X-axis skew.     |
+| c    | number | Yes   | 0    | Y-axis skew.     |
+| d    | number | Yes   | 0    | Y-axis scale.    |
+| e    | number | Yes   | 0    | X-axis translation.|
+| f    | number | Yes   | 0    | Y-axis translation.|
+
+**Example**
 
   ```ts
   // xxx.ets
   @Entry
   @Component
   struct Transform {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1670,29 +1827,30 @@ Defines a transformation matrix. To transform a graph, you only need to set para
 
 ### setTransform
 
-setTransform(scaleX: number, skewX: number, skewY: number, scale: number, translateX: number, translateY: number): void
+setTransform(a: number, b: number, c: number, d: number, e: number, f: number): void
+
+Resets the existing transformation matrix and creates a new transformation matrix by using the same parameters as the **transform()** API.
 
-Resets the existing transformation matrix and creates a new transformation matrix by using the same parameters as the **transform()** function.
+**Parameters**
 
-- Parameters
-    | Name       | Type   | Mandatory | Default Value | Description         |
-    | ---------- | ------ | --------- | ------------- | ------------------- |
-    | scaleX     | number | Yes       | 0             | X-axis scale.       |
-    | skewX      | number | Yes       | 0             | X-axis skew.        |
-    | skewY      | number | Yes       | 0             | Y-axis skew.        |
-    | scaleY     | number | Yes       | 0             | Y-axis scale.       |
-    | translateX | number | Yes       | 0             | X-axis translation. |
-    | translateY | number | Yes       | 0             | Y-axis translation. |
+| Name  | Type    | Mandatory  | Default Value | Description                  |
+| ---- | ------ | ---- | ---- | -------------------- |
+| a    | number | Yes   | 0    | X-axis scale.    |
+| b    | number | Yes   | 0    | X-axis skew.     |
+| c    | number | Yes   | 0    | Y-axis skew.     |
+| d    | number | Yes   | 0    | Y-axis scale.    |
+| e    | number | Yes   | 0    | X-axis translation.|
+| f    | number | Yes   | 0    | Y-axis translation.|
 
-- Example
+**Example**
 
   ```ts
   // xxx.ets
   @Entry
   @Component
   struct SetTransform {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1717,27 +1875,33 @@ Resets the existing transformation matrix and creates a new transformation matri
   ![en-us_image_0000001256858395](figures/en-us_image_0000001256858395.png)
 
 
+setTransform(transform?: Matrix2D): void
+
+Resets the current transformation to the identity matrix, and then creates a new transformation matrix based on the specified **Matrix2D** object. This API is a null API.
+
+
 ### translate
 
 translate(x: number, y: number): void
 
 Moves the origin of the coordinate system.
 
-- Parameters
-    | Name | Type   | Mandatory | Default Value | Description         |
-    | ---- | ------ | --------- | ------------- | ------------------- |
-    | x    | number | Yes       | 0             | X-axis translation. |
-    | y    | number | Yes       | 0             | Y-axis translation. |
+**Parameters**
+
+| Name  | Type    | Mandatory  | Default Value | Description      |
+| ---- | ------ | ---- | ---- | -------- |
+| x    | number | Yes   | 0    | X-axis translation.|
+| y    | number | Yes   | 0    | Y-axis translation.|
 
-- Example
+**Example**
 
   ```ts
   // xxx.ets
   @Entry
   @Component
   struct Translate {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1764,27 +1928,28 @@ Moves the origin of the coordinate system.
 
 drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number): void
 
-drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number, dWidth: number, dHeight: number): void
+drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number, dw: number, dh: number): void
 
-drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sWidth: number, sHeight: number, dx: number, dy: number, dWidth: number, dHeight: number):void
+drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number):void
 
-Draws an image.
+Draws an image on the canvas.
 
-- Parameters
-    | Name    | Type                                                         | Mandatory | Default Value | Description                                                  |
-    | ------- | ------------------------------------------------------------ | --------- | ------------- | ------------------------------------------------------------ |
-    | image   | [ImageBitmap](ts-components-canvas-imagebitmap.md) or [PixelMap](../apis/js-apis-image.md#pixelmap7) | Yes       | null          | Image resource. For details, see ImageBitmap or PixelMap.    |
-    | sx      | number                                                       | No        | 0             | X-coordinate of the upper left corner of the rectangle used to crop the source image. |
-    | sy      | number                                                       | No        | 0             | Y-coordinate of the upper left corner of the rectangle used to crop the source image. |
-    | sWidth  | number                                                       | No        | 0             | Target width to crop the source image.                       |
-    | sHeight | number                                                       | No        | 0             | Target height to crop the source image.                      |
-    | dx      | number                                                       | Yes       | 0             | X-coordinate of the upper left corner of the drawing area on the canvas. |
-    | dy      | number                                                       | Yes       | 0             | Y-coordinate of the upper left corner of the drawing area on the canvas. |
-    | dWidth  | number                                                       | No        | 0             | Width of the drawing area. If the width of the drawing area is different from that of the cropped image, the latter will be stretched or compressed to the former. |
-    | dHeight | number                                                       | No        | 0             | Height of the drawing area. If the height of the drawing area is different from that of the cropped image, the latter will be stretched or compressed to the former. |
+**Parameters**
 
+| Name   | Type                                      | Mandatory  | Default Value | Description                                      |
+| ----- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
+| image | [ImageBitmap](ts-components-canvas-imagebitmap.md) or [PixelMap](../apis/js-apis-image.md#pixelmap7)| Yes   | null | Image resource. For details, see **ImageBitmap** or PixelMap.           |
+| sx    | number                                   | No   | 0    | X-coordinate of the upper left corner of the rectangle used to crop the source image.                    |
+| sy    | number                                   | No   | 0    | Y-coordinate of the upper left corner of the rectangle used to crop the source image.                    |
+| sw    | number                                   | No   | 0    | Target width to crop the source image.                          |
+| sh    | number                                   | No   | 0    | Target height to crop the source image.                          |
+| dx    | number                                   | Yes   | 0    | X-coordinate of the upper left corner of the drawing area on the canvas.                          |
+| dy    | number                                   | Yes   | 0    | Y-coordinate of the upper left corner of the drawing area on the canvas.                    |
+| dw    | number                                   | No   | 0    | Width of the drawing area. If the width of the drawing area is different from that of the cropped image, the latter will be stretched or compressed to the former.|
+| dh    | number                                   | No   | 0    | Height of the drawing area. If the height of the drawing area is different from that of the cropped image, the latter will be stretched or compressed to the former.|
 
-- Example
+
+**Example**
 
   ```ts
   // xxx.ets
@@ -1794,6 +1959,7 @@ Draws an image.
     private settings: RenderingContextSettings = new RenderingContextSettings(true);
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
     private img:ImageBitmap = new ImageBitmap("common/images/example.jpg");
+
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
         Canvas(this.context)
@@ -1815,81 +1981,109 @@ Draws an image.
 
 ### createImageData
 
-createImageData(width: number, height: number): Object
+createImageData(sw: number, sh: number): ImageData
 
-Creates an **ImageData** object. For details, see [ImageData](ts-components-canvas-imagebitmap.md).
+Creates an **ImageData** object with the specified dimensions. For details, see [ImageData](ts-components-canvas-imagebitmap.md).
 
-- Parameters
-    | Name   | Type   | Mandatory | Default Value | Description                         |
-    | ------ | ------ | --------- | ------------- | ----------------------------------- |
-    | width  | number | Yes       | 0             | Width of the **ImageData** object.  |
-    | height | number | Yes       | 0             | Height of the **ImageData** object. |
+**Parameters**
+
+| Name  | Type    | Mandatory  | Default Value  | Description           |
+| ---- | ------ | ---- | ---- | ------------- |
+| sw   | number | Yes   | 0    | Width of the **ImageData** object.|
+| sh   | number | Yes   | 0    | Height of the **ImageData** object.|
 
 
 ### createImageData
 
-createImageData(imageData: Object): Object
+createImageData(imageData: ImageData): ImageData
 
 Creates an **ImageData** object. For details, see [ImageData](ts-components-canvas-imagebitmap.md).
 
-- Parameters
-    | Name      | Type   | Mandatory | Default Value | Description                              |
-    | --------- | ------ | --------- | ------------- | ---------------------------------------- |
-    | imagedata | Object | Yes       | null          | **ImageData** object with the same width and height copied from the original **ImageData** object. |
+**Parameters**
+
+| Name       | Type                                      | Mandatory  | Default Value  | Description               |
+| --------- | ---------------------------------------- | ---- | ---- | ----------------- |
+| imagedata | [ImageData](ts-components-canvas-imagebitmap.md) | Yes   | null | **ImageData** object with the same width and height copied from the original **ImageData** object.|
+
+  **Return value**
+
+| Type                                      | Description            |
+| ---------------------------------------- | -------------- |
+| [ImageData](ts-components-canvas-imagebitmap.md) | New **ImageData** object.|
+
 
 ### getPixelMap
 
 getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap
 
 Obtains the **[PixelMap](../apis/js-apis-image.md#pixelmap7)** object created with the pixels within the specified area on the canvas.
-- Parameters
-  | Name  | Type    | Mandatory  | Default Value | Description             |
-  | ---- | ------ | ---- | ---- | --------------- |
-  | sx   | number | Yes   | 0    | X-coordinate of the upper left corner of the output area.|
-  | sy   | number | Yes   | 0    | Y-coordinate of the upper left corner of the output area.|
-  | sw   | number | Yes   | 0    | Width of the output area.    |
-  | sh   | number | Yes   | 0    | Height of the output area.    |
+
+**Parameters**
+
+| Name  | Type    | Mandatory  | Default Value | Description             |
+| ---- | ------ | ---- | ---- | --------------- |
+| sx   | number | Yes   | 0    | X-coordinate of the upper left corner of the output area.|
+| sy   | number | Yes   | 0    | Y-coordinate of the upper left corner of the output area.|
+| sw   | number | Yes   | 0    | Width of the output area.    |
+| sh   | number | Yes   | 0    | Height of the output area.    |
+
+**Return value**
+
+| Type                                      | Description           |
+| ---------------------------------------- | ------------- |
+| [PixelMap](../apis/js-apis-image.md#pixelmap7) | **PixelMap** object.|
 
 ### getImageData
 
-getImageData(sx: number, sy: number, sw: number, sh: number): Object
+getImageData(sx: number, sy: number, sw: number, sh: number): ImageData
 
 Obtains the **[ImageData](ts-components-canvas-imagebitmap.md)** object created with the pixels within the specified area on the canvas.
-- Parameters
-    | Name | Type   | Mandatory | Default Value | Description                              |
-    | ---- | ------ | --------- | ------------- | ---------------------------------------- |
-    | sx   | number | Yes       | 0             | X-coordinate of the upper left corner of the output area. |
-    | sy   | number | Yes       | 0             | Y-coordinate of the upper left corner of the output area. |
-    | sw   | number | Yes       | 0             | Width of the output area.                |
-    | sh   | number | Yes       | 0             | Height of the output area.               |
+
+**Parameters**
+
+| Name  | Type    | Mandatory  | Default Value | Description             |
+| ---- | ------ | ---- | ---- | --------------- |
+| sx   | number | Yes   | 0    | X-coordinate of the upper left corner of the output area.|
+| sy   | number | Yes   | 0    | Y-coordinate of the upper left corner of the output area.|
+| sw   | number | Yes   | 0    | Width of the output area.    |
+| sh   | number | Yes   | 0    | Height of the output area.    |
+
+  **Return value**
+
+| Type                                      | Description            |
+| ---------------------------------------- | -------------- |
+| [ImageData](ts-components-canvas-imagebitmap.md) | **ImageData** object.|
 
 
 ### putImageData
 
-putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY?: number, dirtyWidth?: number, dirtyHeight?: number): void
+putImageData(imageData: ImageData, dx: number, dy: number): void
 
-Puts the **[ImageData](ts-components-canvas-imagebitmap.md)** onto a rectangular area on the canvas.
+putImageData(imageData: ImageData, dx: number, dy: number, dirtyX: number, dirtyY: number, dirtyWidth: number, dirtyHeight: number): void
 
-- Parameters
-    | Name        | Type   | Mandatory | Default Value                      | Description                              |
-    | ----------- | ------ | --------- | ---------------------------------- | ---------------------------------------- |
-    | imagedata   | Object | Yes       | null                               | **ImageData** object with pixels to put onto the canvas. |
-    | dx          | number | Yes       | 0                                  | X-axis offset of the rectangular area on the canvas. |
-    | dy          | number | Yes       | 0                                  | Y-axis offset of the rectangular area on the canvas. |
-    | dirtyX      | number | No        | 0                                  | X-axis offset of the upper left corner of the rectangular area relative to that of the source image. |
-    | dirtyY      | number | No        | 0                                  | Y-axis offset of the upper left corner of the rectangular area relative to that of the source image. |
-    | dirtyWidth  | number | No        | Width of the **ImageData** object  | Width of the rectangular area to crop the source image. |
-    | dirtyHeight | number | No        | Height of the **ImageData** object | Height of the rectangular area to crop the source image. |
+Puts data from the given **[ImageData](ts-components-canvas-imagebitmap.md)** object into the specified rectangular area on the canvas.
 
-- Example
+**Parameters**
+
+| Name         | Type                                      | Mandatory  | Default Value         | Description                           |
+| ----------- | ---------------------------------------- | ---- | ------------ | ----------------------------- |
+| imagedata   | [ImageData](ts-components-canvas-imagebitmap.md) | Yes   | null         | **ImageData** object with pixels to put onto the canvas.           |
+| dx          | number                                   | Yes   | 0            | X-axis offset of the rectangular area on the canvas.               |
+| dy          | number                                   | Yes   | 0            | Y-axis offset of the rectangular area on the canvas.               |
+| dirtyX      | number                                   | No   | 0            | X-axis offset of the upper left corner of the rectangular area relative to that of the source image.|
+| dirtyY      | number                                   | No   | 0            | Y-axis offset of the upper left corner of the rectangular area relative to that of the source image.|
+| dirtyWidth  | number                                   | No   | Width of the **ImageData** object| Width of the rectangular area to crop the source image.              |
+| dirtyHeight | number                                   | No   | Height of the **ImageData** object| Height of the rectangular area to crop the source image.              |
+
+**Example**
 
   ```ts
   // xxx.ets
   @Entry
   @Component
   struct PutImageData {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1917,21 +2111,215 @@ Puts the **[ImageData](ts-components-canvas-imagebitmap.md)** onto a rectangular
   ![en-us_image_0000001212378396](figures/en-us_image_0000001212378396.png)
 
 
+### setLineDash
+
+setLineDash(segments: number[]): void
+
+Sets the dash line style.
+
+**Parameters**
+
+| Name      | Type      | Description                 |
+| -------- | -------- | ------------------- |
+| segments | number[] | An array of numbers that specify distances to alternately draw a line and a gap.|
+
+**Example**
+
+  ```ts
+  // xxx.ets
+  @Entry
+  @Component
+  struct SetLineDash {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.context.arc(100, 75, 50, 0, 6.28)
+            this.context.setLineDash([10,20])
+          })
+      }
+      .width('100%')
+      .height('100%')
+    }
+  }
+  ```
+
+  ![en-us_image_000000127777771](figures/en-us_image_000000127777771.png)
+
+
+### getLineDash
+
+getLineDash(): number[]
+
+Obtains the dash line style.
+
+**Return value**
+
+| Type      | Description                      |
+| -------- | ------------------------ |
+| number[] | An array of numbers that specify distances to alternately draw a line and a gap.|
+
+**Example**
+
+  ```ts
+  // xxx.ets
+  @Entry
+  @Component
+  struct GetLineDash {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            var grad = this.context.createLinearGradient(50,0, 300,100)
+            this.context.arc(100, 75, 50, 0, 6.28)
+            this.context.setLineDash([10,20])
+            this.context.stroke();
+            let res = this.context.getLineDash()
+          })
+      }
+      .width('100%')
+      .height('100%')
+    }
+  }
+  ```
+
+
+### imageSmoothingQuality
+
+imageSmoothingQuality(quality: imageSmoothingQuality)
+
+Sets the quality of image smoothing. This API is a null API.
+
+ **Parameters**
+
+| Name     | Type                   | Description                                      |
+| ------- | --------------------- | ---------------------------------------- |
+| quality | imageSmoothingQuality | The options are as follows: '**low'**, **'medium'**, and **'high'**.|
+
+
+
+### transferFromImageBitmap
+
+transferFromImageBitmap(bitmap: ImageBitmap): void
+
+Displays the specified **ImageBitmap** object.
+
+**Parameters**
+
+| Name    | Type                                      | Description                |
+| ------ | ---------------------------------------- | ------------------ |
+| bitmap | [ImageData](ts-components-canvas-imagebitmap.md) | **ImageBitmap** object to display.|
+
+**Example**
+
+  ```ts
+  // xxx.ets
+  @Entry
+  @Component
+  struct PutImageData {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            var imageData = this.offContext.createImageData(100, 100)
+            for (var i = 0; i < imageData.data.length; i += 4) {
+              imageData.data[i + 0] = 255
+              imageData.data[i + 1] = 0
+              imageData.data[i + 2] = 255
+              imageData.data[i + 3] = 255
+            }
+            this.offContext.putImageData(imageData, 10, 10)
+            var image = this.offContext.transferToImageBitmap()
+            this.context.transferFromImageBitmap(image)
+          })
+      }
+      .width('100%')
+      .height('100%')
+    }
+  }
+  ```
+  ![en-us_image_000000127777773](figures/en-us_image_000000127777773.png)  
+
+### toDataURL
+
+toDataURL(type?: string, quality?: number): string
+
+Generates a URL containing image display information.
+
+**Parameters**
+
+| Name    | Type  | Mandatory  | Description                                      |
+| ------- | ------ | ---- | ---------------------------------------- |
+| type    | string | No   | Image format. The default value is **image/png**.           |
+| quality | number | No   | Image quality, which ranges from 0 to 1, when the image format is **image/jpeg** or **image/webp**. If the set value is beyond the value range, the default value **0.92** is used.|
+
+**Return value**
+
+| Type    | Description       |
+| ------ | --------- |
+| string | Image URL.|
+
+**Example**
+
+  ```ts
+  // xxx.ets
+@Entry
+@Component
+struct ToDataURL {
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+
+  build() {
+    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+      Canvas(this.context)
+        .width('100%')
+        .height('100%')
+        .backgroundColor('#ffff00')
+        .onReady(() =>{
+          var dataURL = this.context.toDataURL();
+        })
+    }
+    .width('100%')
+    .height('100%')
+  }
+}
+  ```
+
+
 ### restore
 
 restore(): void
 
 Restores the saved drawing context.
 
-- Example
+**Example**
 
   ```ts
   // xxx.ets
   @Entry
   @Component
   struct CanvasExample {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1954,17 +2342,17 @@ Restores the saved drawing context.
 
 save(): void
 
-Saves the current drawing context.
+Saves all states of the canvas in the stack. This API is usually called when the drawing state needs to be saved.
 
-- Example
+**Example**
 
   ```ts
   // xxx.ets
   @Entry
   @Component
   struct CanvasExample {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1989,23 +2377,24 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void
 
 Creates a linear gradient.
 
-- Parameters
-    | Name | Type   | Mandatory | Default Value | Description                      |
-    | ---- | ------ | --------- | ------------- | -------------------------------- |
-    | x0   | number | Yes       | 0             | X-coordinate of the start point. |
-    | y0   | number | Yes       | 0             | Y-coordinate of the start point. |
-    | x1   | number | Yes       | 0             | X-coordinate of the end point.   |
-    | y1   | number | Yes       | 0             | Y-coordinate of the end point.   |
+**Parameters**
+
+| Name  | Type    | Mandatory  | Default Value | Description      |
+| ---- | ------ | ---- | ---- | -------- |
+| x0   | number | Yes   | 0    | X-coordinate of the start point.|
+| y0   | number | Yes   | 0    | Y-coordinate of the start point.|
+| x1   | number | Yes   | 0    | X-coordinate of the end point.|
+| y1   | number | Yes   | 0    | Y-coordinate of the end point.|
 
-- Example
+**Example**
 
   ```ts
   // xxx.ets
   @Entry
   @Component
   struct CreateLinearGradient {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
     
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -2037,25 +2426,26 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
 
 Creates a linear gradient.
 
-- Parameters
-    | Name | Type   | Mandatory | Default Value | Description                              |
-    | ---- | ------ | --------- | ------------- | ---------------------------------------- |
-    | x0   | number | Yes       | 0             | X-coordinate of the center of the start circle. |
-    | y0   | number | Yes       | 0             | Y-coordinate of the center of the start circle. |
-    | r0   | number | Yes       | 0             | Radius of the start circle, which must be a non-negative finite number. |
-    | x1   | number | Yes       | 0             | X-coordinate of the center of the end circle. |
-    | y1   | number | Yes       | 0             | Y-coordinate of the center of the end circle. |
-    | r1   | number | Yes       | 0             | Radius of the end circle, which must be a non-negative finite number. |
+**Parameters**
+
+| Name  | Type    | Mandatory  | Default Value | Description               |
+| ---- | ------ | ---- | ---- | ----------------- |
+| x0   | number | Yes   | 0    | X-coordinate of the center of the start circle.        |
+| y0   | number | Yes   | 0    | Y-coordinate of the center of the start circle.        |
+| r0   | number | Yes   | 0    | Radius of the start circle, which must be a non-negative finite number.|
+| x1   | number | Yes   | 0    | X-coordinate of the center of the end circle.        |
+| y1   | number | Yes   | 0    | Y-coordinate of the center of the end circle.        |
+| r1   | number | Yes   | 0    | Radius of the end circle, which must be a non-negative finite number.|
 
-- Example
+**Example**
 
   ```ts
   // xxx.ets
   @Entry
   @Component
   struct CreateRadialGradient {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
     
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -2083,4 +2473,4 @@ Creates a linear gradient.
 
 ## CanvasPattern
 
-Defines an object created by using the [createPattern](#createpattern) method.
+Defines an object created using the **[createPattern](#createpattern)** API.

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

@@ -4,7 +4,7 @@ Continuous recognition, parallel recognition, and exclusive recognition are supp
 
 >  **NOTE**
 >
-> Combined gestures are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+>  The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
 ## Required Permissions
@@ -17,29 +17,28 @@ None
 GestureGroup(mode: GestureMode, ...gesture: GestureType[])
 
 - Parameters
-  | Name | Type | Mandatory | Default Value | Description |
+  | Name| Type| Mandatory| Default Value| Description|
   | -------- | -------- | -------- | -------- | -------- |
-  | mode | GestureMode | Yes | - | Recognition mode of combined gestures. |
-  | 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. |
+  | mode | GestureMode                                                  | Yes| - | Recognition mode of combined gestures.|
+  | 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 enums
-  | 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. |
+  | 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.|
 
 
 ## Events
 
-| Name | Description |
+| Name| Description|
 | -------- | -------- |
-| onCancel(event: () =&gt; void) | Callback for the GestureMode.Sequence cancellation event. |
+| onCancel(event: () =&gt; void) | Callback for the GestureMode.Sequence cancellation event.|
 
 
 ## Example
 
-
 ```ts
 // xxx.ets
 @Entry

en/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md

 #  Canvas
 
+The **\<Canvas>** component can be used to customize drawings.
 
-> **NOTE**<br>
+> **NOTE**
+>
 > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-The **&lt;Canvas&gt;** component can be used to customize drawings.
-
-
 ## Required Permissions
 
 None
 
-
 ## Child Components
 
-None
-
+Not supported
 
 ## APIs
 
-Canvas(context: CanvasRenderingContext2D)
+Canvas(context?: CanvasRenderingContext2D)
 
-- Parameters
-    | Name    | Type                                     | Mandatory | Default Value | Description                              |
-    | ------- | ---------------------------------------- | --------- | ------------- | ---------------------------------------- |
-    | context | [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md) | Yes     | -             | For details, see [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md). |
+**Parameters**
 
+| Name    | Type                                    | Mandatory  | Default Value | Description                        |
+| ------- | ---------------------------------------- | ---- | ---- | ---------------------------- |
+| context | [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md) | No   | -    | For details, see **CanvasRenderingContext2D**.|
 
 ## Attributes
 
-Universal attributes are supported.
-
+The [universal attributes](ts-universal-attributes-size.md) are supported.
 
 ## Events
 
-In addition to universal events, the following events are supported.
+In addition to the [universal events](ts-universal-events-click.md), the following events are supported.
 
 | Name                           | Parameter  | Description                  |
-| -------------------------------- | --------- | ---------------- |
-| onReady(callback: () =&gt; void) | None      | Triggered when a canvas is ready. |
-
+| ----------------------------- | ---- | -------------------- |
+| onReady(event: () => void) | -   | Triggered when a canvas is ready. When this event is triggered, the width and height of the canvas can be obtained, and you can use the canvas APIs to draw images.|
 
 ## Example
 
-
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct CanvasExample {

en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md

@@ -4,7 +4,7 @@
 
 >  **NOTE**
 >
-> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
+>  The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
 
 ## addColorStop
@@ -13,20 +13,19 @@ addColorStop(offset: number, color: string): void
 
 Adds a color stop for the **CanvasGradient** object based on the specified offset and gradient color.
 
-**Parameters**
+- Parameters
+  | Name    | Type    | Mandatory  | Default Value      | Description                          |
+  | ------ | ------ | ---- | --------- | ---------------------------- |
+  | offset | number | Yes   | 0         | Relative position of the gradient stop along the gradient vector. The value ranges from 0 to 1.|
+  | color  | string | Yes   | '#ffffff' | Gradient color to set.                    |
 
-| Name | Type | Mandatory | Default Value | Description |
-| -------- | -------- | -------- | -------- | -------- |
-| offset   | number   | Yes      | 0        | Relative position of the gradient stop along the gradient vector. The value ranges from 0 to 1. |
-| color    | string   | Yes      | '#ffffff'| Gradient color to set. |
+- Example
 
-**Example**
-
-```ts
-// xxx.ets
-@Entry
-@Component
-struct Page45 {
+  ```ts
+  // xxx.ets
+  @Entry
+  @Component
+  struct Page45 {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
@@ -48,6 +47,11 @@ struct Page45 {
       .width('100%')
       .height('100%')
     }}
-```
+  ```
+
+
+
+
+  ![en-us_image_0000001256858381](figures/en-us_image_0000001256858381.png)
+
  
-![en-us_image_0000001256858381](figures/en-us_image_0000001256858381.png)
\ No newline at end of file

en/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md

 # ImageBitmap
 
-
 >  **NOTE**
 >
-> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
+>  The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
 
 An **ImageBitmap** object stores pixel data rendered on a canvas.
@@ -11,7 +10,17 @@ An **ImageBitmap** object stores pixel data rendered on a canvas.
 
 ## Attributes
 
-| Name | Type | Description |
+| Name| Type| Description|
 | -------- | -------- | -------- |
-| width | number | Actual width of the rectangle on the canvas, in pixels. |
-| height | number | Actual height of the rectangle on the canvas, in pixels. |
+| width | number | Pixel width of the **ImageBitmap** object.|
+| height | number | Pixel height of the **ImageBitmap** object.|
+
+
+## Methods
+
+
+### close
+
+close()
+
+Releases all graphics resources associated with this **ImageBitmap** object. This API is a void API.

en/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md

 # ImageData
 
 
-> **NOTE**<br>
-> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
+An **ImageData** object stores pixel data rendered on a canvas.
 
-
-**ImageData** stores pixel data rendered on a canvas.
+>  **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.
 
 
 ## Attributes
 
-| Name | Type | Description |
+| Name| Type| Description|
 | -------- | -------- | -------- |
-| width | number | Actual width of the rectangle on the canvas, in pixels. |
-| height | number | Actual height of the rectangle on the canvas, in pixels. |
-| data | &lt;Uint8ClampedArray&gt; | A one-dimensional array of color values. The values range from 0 to 255. |
+| width | number | Actual width of the rectangle on the canvas, in pixels.|
+| height | number | Actual height of the rectangle on the canvas, in pixels.|
+| data | Uint8ClampedArray | A one-dimensional array of color values. The values range from 0 to 255.|

en/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md

@@ -3,7 +3,6 @@
 **Lottie** allows you to implement animation-specific operations.
 
 > **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.
 
 
@@ -36,7 +35,7 @@ Loads an animation. Before calling this method, declare the **Animator('\__lotti
 - Parameters
   | Name            | Type                         | Mandatory  | Description                                      |
   | -------------- | --------------------------- | ---- | ---------------------------------------- |
-  | path           | string                      | Yes   | Path of the animation resource file in the HAP file. The resource file must be in JSON format. Example: **path: "common/lottie/data.json"**. |
+  | path           | string                      | Yes   | Path of the animation resource file in the HAP file. The resource file must be in JSON format. Example: **path: "common/lottie/data.json"**|
   | container      | object                      | Yes   | Canvas drawing context. A **CanvasRenderingContext2D** object must be declared in advance.|
   | render         | string                      | Yes   | Rendering type. The value can only be **"canvas"**.                       |
   | loop           | boolean \| number | No   | If the value is of the Boolean type, this parameter indicates whether to repeat the animation cyclically after the animation ends; the default value is **true**. If the value is of the number type and is greater than or equal to 1, this parameter indicates the number of times the animation plays.|
@@ -202,7 +201,7 @@ Sets the playback speed of the specified animation.
 - Parameters
   | Name   | Type    | Mandatory  | Description                                      |
   | ----- | ------ | ---- | ---------------------------------------- |
-  | speed | number | Yes   | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays forward. If the value is less than 0, the animation plays in backward. If the value is 0, the animation is paused. If the value is **1.0** or **-1.0**, the animation plays at the normal speed.|
+  | speed | number | Yes   | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays in forward direction. If the value is less than 0, the animation plays in reversed direction. If the value is 0, the animation is paused. If the value is 1.0 or -1.0, the animation plays at the normal speed.|
   | name  | string | Yes   | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are stopped.|
 
 - Example
@@ -351,7 +350,7 @@ Sets the playback speed of an animation.
 - Parameters
   | Name   | Type    | Mandatory  | Description                                      |
   | ----- | ------ | ---- | ---------------------------------------- |
-  | speed | number | Yes   | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays forward. If the value is less than 0, the animation plays backward. If the value is 0, the animation is paused.|
+  | speed | number | Yes   | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays forward. If the value is less than 0, the animation plays backward. If the value is 0, the animation is paused.|If the value is **1.0** or **-1.0**, the animation plays at the normal speed.|
 
 - Example
   ```ts

en/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md

 # Path2D
 
-
-> ![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.
 
 
 **Path2D** allows you to describe a path through an existing path. This path can be drawn through the **stroke** API of **Canvas**.
@@ -10,18 +10,22 @@
 
 ## addPath
 
-addPath(path: Object): void
+addPath(path: path2D, transform?:Matrix2D): void
 
 Adds a path to this path.
 
-- Parameters
-    | Name | Type | Mandatory | Default Value | Description |
-  | -------- | -------- | -------- | -------- | -------- |
-  | path | Object | Yes | null | Path to be added to this path. |
+**Parameters**
 
-- Example
+| Name| Type| Mandatory| Default Value| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| path | path2D | Yes| - | Path to be added to this path.|
+| transform | Matrix2D | No| null | Transformation matrix of the new path.|
 
-  ```
+
+**Example**
+
+  ```ts
+  // xxx.ets
   @Entry
   @Component
   struct AddPath {
@@ -57,9 +61,10 @@ closePath(): void
 
 Moves the current point of the path back to the start point of the path, and draws a straight line between the current point and the start point. If the shape has already been closed or has only one point, this method does nothing.
 
-- Example
+**Example**
 
-  ```
+  ```ts
+  // xxx.ets
   @Entry
   @Component
   struct ClosePath {
@@ -96,15 +101,17 @@ moveTo(x: number, y: number): void
 
 Moves the current coordinate point of the path to the target point, without drawing a line during the movement.
 
-- Parameters
-    | Name | Type | Mandatory | Default Value | Description |
-  | -------- | -------- | -------- | -------- | -------- |
-  | x | number | Yes | 0 | X-coordinate of the target point. |
-  | y | number | Yes | 0 | Y-coordinate of the target point. |
+**Parameters**
 
-- Example
+| Name| Type| Mandatory| Default Value| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| x | number | Yes| 0 | X-coordinate of the target point.|
+| y | number | Yes| 0 | Y-coordinate of the target point.|
 
-  ```
+**Example**
+
+  ```ts
+  // xxx.ets
   @Entry
   @Component
   struct MoveTo {
@@ -141,15 +148,17 @@ lineTo(x: number, y: number): void
 
 Draws a straight line from the current point to the target point.
 
-- Parameters
-    | Name | Type | Mandatory | Default Value | Description |
-  | -------- | -------- | -------- | -------- | -------- |
-  | x | number | Yes | 0 | X-coordinate of the target point. |
-  | y | number | Yes | 0 | Y-coordinate of the target point. |
+**Parameters**
 
-- Example
+| Name| Type| Mandatory| Default Value| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| x | number | Yes| 0 | X-coordinate of the target point.|
+| y | number | Yes| 0 | Y-coordinate of the target point.|
 
-  ```
+**Example**
+
+  ```ts
+  // xxx.ets
   @Entry
   @Component
   struct LineTo {
@@ -187,19 +196,21 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
 
 Draws a cubic bezier curve on the canvas.
 
-- Parameters
-    | Name | Type | Mandatory | Default Value | Description |
-  | -------- | -------- | -------- | -------- | -------- |
-  | cp1x | number | Yes | 0 | X-coordinate of the first parameter of the bezier curve. |
-  | cp1y | number | Yes | 0 | Y-coordinate of the first parameter of the bezier curve. |
-  | cp2x | number | Yes | 0 | X-coordinate of the second parameter of the bezier curve. |
-  | cp2y | number | Yes | 0 | Y-coordinate of the second parameter of the bezier curve. |
-  | x | number | Yes | 0 | X-coordinate of the end point on the bezier curve. |
-  | y | number | Yes | 0 | Y-coordinate of the end point on the bezier curve. |
+**Parameters**
 
-- Example
+| Name| Type| Mandatory| Default Value| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| cp1x | number | Yes| 0 | X-coordinate of the first parameter of the bezier curve.|
+| cp1y | number | Yes| 0 | Y-coordinate of the first parameter of the bezier curve.|
+| cp2x | number | Yes| 0 | X-coordinate of the second parameter of the bezier curve.|
+| cp2y | number | Yes| 0 | Y-coordinate of the second parameter of the bezier curve.|
+| x | number | Yes| 0 | X-coordinate of the end point on the bezier curve.|
+| y | number | Yes| 0 | Y-coordinate of the end point on the bezier curve.|
 
-  ```
+**Example**
+
+  ```ts
+  // xxx.ets
   @Entry
   @Component
   struct BezierCurveTo {
@@ -233,17 +244,19 @@ quadraticCurveTo(cpx: number, cpy: number, x: number ,y: number): void
 
 Draws a quadratic curve on the canvas.
 
-- Parameters
-    | Name | Type | Mandatory | Default Value | Description |
-  | -------- | -------- | -------- | -------- | -------- |
-  | cpx | number | Yes | 0 | X-coordinate of the bezier curve parameter. |
-  | cpy | number | Yes | 0 | Y-coordinate of the bezier curve parameter. |
-  | x | number | Yes | 0 | X-coordinate of the end point on the bezier curve. |
-  | y | number | Yes | 0 | Y-coordinate of the end point on the bezier curve. |
+**Parameters**
 
-- Example
+| Name| Type| Mandatory| Default Value| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| cpx | number | Yes| 0 | X-coordinate of the bezier curve parameter.|
+| cpy | number | Yes| 0 | Y-coordinate of the bezier curve parameter.|
+| x | number | Yes| 0 | X-coordinate of the end point on the bezier curve.|
+| y | number | Yes| 0 | Y-coordinate of the end point on the bezier curve.|
 
-  ```
+**Example**
+
+  ```ts
+  // xxx.ets
   @Entry
   @Component
   struct QuadraticCurveTo {
@@ -274,23 +287,25 @@ Draws a quadratic curve on the canvas.
 
 ## arc
 
-arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?:  boolean): void
+arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void
 
 Draws an arc on the canvas.
 
-- Parameters
-    | Name | Type | Mandatory | Default Value | Description |
-  | -------- | -------- | -------- | -------- | -------- |
-  | x | number | Yes | 0 | X-coordinate of the center point of the arc. |
-  | y | number | Yes | 0 | Y-coordinate of the center point of the arc. |
-  | radius | number | Yes | 0 | Radius of the arc. |
-  | startAngle | number | Yes | 0 | Start radian of the arc. |
-  | endAngle | number | Yes | 0 | End radian of the arc. |
-  | anticlockwise | boolean | No | false | Whether to draw the arc counterclockwise. |
+**Parameters**
 
-- Example
+| Name| Type| Mandatory| Default Value| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| x | number | Yes| 0 | X-coordinate of the center point of the arc.|
+| y | number | Yes| 0 | Y-coordinate of the center point of the arc.|
+| radius | number | Yes| 0 | Radius of the arc.|
+| startAngle | number | Yes| 0 | Start radian of the arc.|
+| endAngle | number | Yes| 0 | End radian of the arc.|
+| counterclockwise | boolean | No| false | Whether to draw the arc counterclockwise.|
 
-  ```
+**Example**
+
+  ```ts
+  // xxx.ets
   @Entry
   @Component
   struct Arc {
@@ -323,18 +338,20 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
 
 Draws an arc based on the radius and points on the arc.
 
-- Parameters
-    | Name | Type | Mandatory | Default Value | Description |
-  | -------- | -------- | -------- | -------- | -------- |
-  | x1 | number | Yes | 0 | X-coordinate of the first point on the arc. |
-  | y1 | number | Yes | 0 | Y-coordinate of the first point on the arc. |
-  | x2 | number | Yes | 0 | X-coordinate of the second point on the arc. |
-  | y2 | number | Yes | 0 | Y-coordinate of the second point on the arc. |
-  | radius | number | Yes | 0 | Radius of the arc. |
+**Parameters**
 
-- Example
+| Name| Type| Mandatory| Default Value| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| x1 | number | Yes| 0 | X-coordinate of the first point on the arc.|
+| y1 | number | Yes| 0 | Y-coordinate of the first point on the arc.|
+| x2 | number | Yes| 0 | X-coordinate of the second point on the arc.|
+| y2 | number | Yes| 0 | Y-coordinate of the second point on the arc.|
+| radius | number | Yes| 0 | Radius of the arc.|
 
-  ```
+**Example**
+
+  ```ts
+  // xxx.ets
   @Entry
   @Component
   struct ArcTo {
@@ -364,25 +381,27 @@ Draws an arc based on the radius and points on the arc.
 
 ## ellipse
 
-ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise?: number): void
+ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: number): void
 
-Draws an ellipse in the specified rectangular region.
+Draws an ellipse in the specified rectangular region on the canvas.
 
-- Parameters
-    | Name | Type | Mandatory | Default Value | Description |
-  | -------- | -------- | -------- | -------- | -------- |
-  | x | number | Yes | 0 | X-coordinate of the ellipse center. |
-  | y | number | Yes | 0 | Y-coordinate of the ellipse center. |
-  | radiusX | number | Yes | 0 | Ellipse radius on the x-axis. |
-  | radiusY | number | Yes | 0 | Ellipse radius on the y-axis. |
-  | rotation | number | Yes | 0 | Rotation angle of the ellipse, in radians. |
-  | startAngle | number | Yes | 0 | Angle of the start point for drawing the ellipse, in radians. |
-  | endAngle | number | Yes | 0 | Angle of the end point for drawing the ellipse, in radians. |
-  | anticlockwise | number | No | 0 | Whether to draw the ellipse in the counterclockwise direction. The value **0** means to draw the ellipse in the clockwise direction, and **1** means to draw the ellipse in the counterclockwise direction. This parameter is optional. The default value is **0**. |
+**Parameters**
 
-- Example
+| Name| Type| Mandatory| Default Value| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| x | number | Yes| 0 | X-coordinate of the ellipse center.|
+| y | number | Yes| 0 | Y-coordinate of the ellipse center.|
+| radiusX | number | Yes| 0 | Ellipse radius on the x-axis.|
+| radiusY | number | Yes| 0 | Ellipse radius on the y-axis.|
+| rotation | number | Yes| 0 | Rotation angle of the ellipse. The unit is radian.|
+| startAngle | number | Yes| 0 | Angle of the start point for drawing the ellipse. The unit is radian.|
+| endAngle | number | Yes| 0 | Angle of the end point for drawing the ellipse. The unit is radian.|
+| counterclockwise | number | No| 0 | Whether to draw the ellipse counterclockwise. The value **0** means to draw the ellipse clockwise, and **1** means to draw the ellipse counterclockwise. This parameter is optional. The default value is **0**. |
 
-  ```
+**Example**
+
+  ```ts
+  // xxx.ets
   @Entry
   @Component
   struct CanvasExample {
@@ -412,21 +431,23 @@ Draws an ellipse in the specified rectangular region.
 
 ## rect
 
-rect(x: number, y: number, width: number, height: number): void
+rect(x: number, y: number, w: number, h: number): void
 
-Creates a rectangle.
+Creates a rectangle on the canvas.
 
-- Parameters
-    | Name | Type | Mandatory | Default Value | Description |
-  | -------- | -------- | -------- | -------- | -------- |
-  | x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle. |
-  | y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle. |
-  | width | number | Yes | 0 | Width of the rectangle. |
-  | height | number | Yes | 0 | Height of the rectangle. |
+**Parameters**
 
-- Example
+| Name| Type| Mandatory| Default Value| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| x | number | Yes| 0 | X-coordinate of the upper left corner of the rectangle.|
+| y | number | Yes| 0 | Y-coordinate of the upper left corner of the rectangle.|
+| w | number | Yes| 0 | Width of the rectangle.|
+| h | number | Yes| 0 | Height of the rectangle.|
 
-  ```
+**Example**
+
+  ```ts
+  // xxx.ets
   @Entry
   @Component
   struct CanvasExample {

en/application-dev/reference/arkui-ts/ts-container-ability-component.md

@@ -4,7 +4,7 @@
 
 >  **NOTE**
 >
->  The APIs of this module are supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version.
+>  This component is supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version.
 >
 >  The APIs of this module are system APIs and cannot be called by third-party applications.
 

en/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md

@@ -6,10 +6,6 @@ The **\<Indexer>** component can create a logically indexed array of items in a
 >
 >  This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions
-
-None
-
 
 ## Child Components
 
@@ -18,45 +14,52 @@ Not supported
 
 ## APIs
 
-AlphabetIndexer(value: {arrayValue : Array&lt;string&gt;, selected : number})
+AlphabetIndexer(value: {arrayValue: Array&lt;string&gt;, selected: number})
 
-- Parameters
-  | Name| Type| Mandatory| Default Value| Description|
-  | -------- | -------- | -------- | -------- | -------- |
-  | arrayValue | Array&lt;string&gt; | Yes| - | Array of strings to be displayed in the alphabetic index bar.|
-  | selected | number | Yes| - | ID of a selected item.|
+**Parameters**
 
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| arrayValue | Array&lt;string&gt; | Yes| Array of strings to be displayed in the alphabetic index bar.|
+| selected   | number              | Yes   | Index of the initially selected item.    |
 
 ## Attributes
 
-| Name| Type| Description|
-| -------- | -------- | -------- |
-| selectedColor | [ResourceColor](../../ui/ts-types.md) | Font color of the selected text.|
-| popupColor | [ResourceColor](../../ui/ts-types.md) | Font color of the pop-up text.|
-| selectedBackgroundColor | [ResourceColor](../../ui/ts-types.md) | Background color of the selected text.|
-| popupBackground | [ResourceColor](../../ui/ts-types.md) | Background color of the pop-up text.|
-| usingPopup | boolean | Whether to use pop-up text.|
-| selectedFont | {<br>size?: number,<br>weight?: FontWeight,<br>family?: string,<br>style?: FontStyle<br>} | Font style of the selected text.|
-| popupFont | {<br>size?: number,<br>weight?: FontWeight,<br>family?: string,<br>style?: FontStyle<br>} | Font style of the pop-up text.|
-| font | {<br>size?: number,<br>weight?: FontWeight,<br>family?: string,<br>style?: FontStyle<br>} | Default font style of the alphabetic index bar.|
-| itemSize | Length | Size of an item in the alphabetic index bar. The item is a square, and the side length needs to be set.|
-| alignStyle | IndexerAlign | Alignment style of the alphabetic index bar. Left alignment and right alignment are supported. The alignment style affects the position of the pop-up window.|
-
-- IndexerAlign enums
-  | Name| Description|
-  | -------- | -------- |
-  | Left | The pop-up window is displayed on the right of the alphabetic indexer bar.|
-  | Right | The pop-up window is displayed on the left of the alphabetic indexer bar.|
+In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
+
+| Name                 | Type    | Description                                                             |
+| ----------------------- | --------------- | ----------------------------------------------------------- |
+| color                   | [ResourceColor](ts-types.md#resourcecolor)       | Font color.                          |
+| selectedColor           | [ResourceColor](ts-types.md#resourcecolor)     | Font color of the selected text.                          |
+| popupColor              | [ResourceColor](ts-types.md#resourcecolor)        | Font color of the pop-up text.                        |
+| selectedBackgroundColor | [ResourceColor](ts-types.md#resourcecolor)       | Background color of the selected item.                          |
+| popupBackground         | [ResourceColor](ts-types.md#resourcecolor)        | Background color of the pop-up text.                           |
+| usingPopup              | boolean                                  | Whether to use pop-up text.                        |
+| selectedFont            | [Font](ts-types.md#font) | Font style of the selected text.                          |
+| popupFont               | [Font](ts-types.md#font) | Font style of the pop-up text.                        |
+| font                    | [Font](ts-types.md#font) | Default font style of the alphabetic index bar.                     |
+| itemSize                | string \| number            | Size of an item in the alphabetic index bar. The item is a square, and the side length needs to be set.      |
+| alignStyle              | IndexerAlign                             | Alignment style of the alphabetic index bar. Left alignment and right alignment are supported.<br>Default value: **IndexerAlign.Right**|
+| selected | number | Index of the selected item.|
+| popupPosition | [Position](ts-types.md#position8) | Position of the pop-up window relative to the center of the indexer bar's top border.|
+
+## IndexerAlign enums
 
+| Name| Description|
+| -------- | -------- |
+| Left | The pop-up window is displayed on the right of the alphabetic indexer bar.|
+| Right | The pop-up window is displayed on the left of the alphabetic indexer bar.|
 
 ## Events
 
+Only the following events are supported.
+
 | Name| Description|
 | -------- | -------- |
-| onSelected(index: number) =&gt; void<sup>(deprecated) </sup>| Invoked when an item in the alphabetic indexer bar is selected.|
-| onSelect(index: number) =&gt; void<sup>8+</sup> | Invoked when an item in the alphabetic indexer bar is selected.|
-| onRequestPopupData(callback: (index: number) =&gt; Array&lt;string&gt;)<sup>8+</sup> | Invoked when a request for displaying content in the index prompt window is sent when an item in the alphabetic indexer bar is selected.<br>The return value is a string array corresponding to the indexes. The string array is displayed vertically in the pop-up window. It can display up to five strings at a time and allows scrolling.|
-| onPopupSelect(callback: (index: number) =&gt; void)<sup>8+</sup> | Invoked when an item in the index pop-up window is selected.|
+| onSelected(callback: (index: number) =&gt; void)<sup>(deprecated)</sup> | Invoked when an item in the alphabetic indexer bar is selected. The return value is the index of the selected item.                                |
+| onSelect(callback: (index: number) =&gt; void)<sup>8+</sup> | Invoked when an item in the alphabetic indexer bar is selected. The return value is the index of the selected item.                                |
+| onRequestPopupData(callback: (index: number) =&gt; Array&lt;string&gt;)<sup>8+</sup> | Invoked when a request for displaying content in the index prompt window is sent after an item in the alphabetic indexer bar is selected.<br>The return value is a string array corresponding to the indexes. The string array is displayed vertically in the pop-up window. It can display up to five strings at a time and allows scrolling.|
+| onPopupSelect(callback: (index: number) =&gt; void)<sup>8+</sup> | Invoked when an item in the index pop-up window is selected.                           |
 
 
 ## Example

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

 # Badge
 
-
 The **\<Badge>** component is a container that can be attached to another component for tagging.
 
 >  **NOTE**
@@ -20,46 +19,47 @@ This component supports only one child component.
 
 ## APIs
 
-Badge(value: {count: number, position?: BadgePosition, maxCount?: number, style?: BadgeStyle})
+Method 1: Badge(value: {count: number, position?: BadgePosition, maxCount?: number, style: BadgeStyle})
 
-- Parameters
-  | Name | Type | Mandatory | Default Value | Description |
-  | -------- | -------- | -------- | -------- | -------- |
-  | count | number | Yes | - | Number of prompt messages. |
-  | position | BadgePosition | No | BadgePosition.RightTop | Position to display the badge relative to the parent component. |
-  | maxCount | number | No | 99 | Maximum number of prompt messages. When the maximum number is reached, only **maxCount+** is displayed. |
-  | style | BadgeStyle | No | - | Style of the **\<Badge>** component, including the text color, text size, badge color, and badge size. |
+Create a badge.
 
-Badge(value: {value: string, position?: BadgePosition, style?: BadgeStyle})
+**Parameters**
+| Name| Type| Mandatory| Default Value| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| count | number | Yes| - | Number of notifications.|
+| position | BadgePosition | No| BadgePosition.RightTop | Position to display the badge relative to the parent component.|
+| maxCount | number | No| 99 | Maximum number of notifications. When the maximum number is reached, only **maxCount+** is displayed.|
+| style | BadgeStyle | Yes| - | Style of the **<Badge>** component, including the text color, text size, badge color, and badge size.|
 
-Creates a **\<Badge>** component based on the string.
+Method 2: Badge(value: {value: string, position?: BadgePosition, style: BadgeStyle})
+
+Creates a badge based on the given string.
 
 - Parameters
-  | Name | Type | Mandatory | Default Value | Description |
+  | Name| Type| Mandatory| Default Value| Description|
   | -------- | -------- | -------- | -------- | -------- |
-  | value | string | Yes | - | String of the content to prompt. |
-  | position | BadgePosition | No | BadgePosition.RightTop | Display position of the badge. |
-  | style | BadgeStyle | No | - | Style of the **\<Badge>** component, including the text color, text size, badge color, and badge size. |
+  | value | string | Yes| - | Prompt content.|
+  | position | BadgePosition | No| BadgePosition.RightTop | Position to display the badge relative to the parent component.|
+  | style | BadgeStyle | Yes| - | Style of the **<Badge>** component, including the text color, text size, badge color, and badge size.|
 
 - BadgeStyle
-  | Name | Type | Mandatory | Default Value | Description |
+  | Name| Type| Mandatory| Default Value| Description|
   | -------- | -------- | -------- | -------- | -------- |
-  | color | [ResourceColor](../../ui/ts-types.md) | No | Color.White | Text color. |
-  | fontSize | number \| string | No | 10 | Text size. |
-  | badgeSize | number \| string | Yes | - | Size of the badge. |
-  | badgeColor | [ResourceColor](../../ui/ts-types.md) | No | Color.Red | Color of the badge. |
+  | color | [ResourceColor](ts-types.md#resourcecolor) | No| Color.White | Text color.|
+  | fontSize | number \| string | No| 10 | Text size.|
+  | badgeSize | number \| string | Yes| - | Badge size.|
+  | badgeColor | [ResourceColor](ts-types.md#resourcecolor) | No| Color.Red | Badge color.|
 
 - BadgePosition enums
-  | Name | Description |
+  | Name| Description|
   | -------- | -------- |
-  | Right | The badge is vertically centered on the right of the parent component. |
-  | RightTop | The badge is displayed in the upper right corner of the parent component. |
-  | Left | The badge is vertically centered on the left of the parent component. |
+  | RightTop | The badge is displayed in the upper right corner of the parent component.|
+  | Right | The badge is vertically centered on the right of the parent component.|
+  | Left | The badge is vertically centered on the left of the parent component.|
 
 
 ## Example
 
-
 ```ts
 // xxx.ets
 @Entry
@@ -93,7 +93,7 @@ struct BadgeExample {
 
       Badge({
         value: ' ',
-        position: 1,
+        position: BadgePosition.Right,
         style: { badgeSize: 6, badgeColor: Color.Red }
       }) {
         Text('message')

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

 # ColumnSplit
 
 
-> **NOTE**<br>
-> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-
+The **\<ColumnSplit>** lays out child components vertically and inserts a horizontal divider between every two child components.
 
-The **&lt;ColumnSplit&gt;** component lays out child components vertically and inserts a horizontal divider between every two child components.
+>  **NOTE**
+>
+>  This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
 ## Required Permissions
@@ -15,7 +15,7 @@ None
 
 ## Child Components
 
-This component can contain child components.
+Supported
 
 
 ## APIs
@@ -25,18 +25,19 @@ ColumnSplit()
 
 ## Attributes
 
-| Name | Type | Description | 
+| Name| Type| Description|
 | -------- | -------- | -------- |
-| resizeable | boolean | Whether the divider can be dragged. The default value is **false**. | 
+| resizeable | boolean | Whether the divider can be dragged. The default value is **false**.|
 
-> **NOTE**<br>
-> Similar to **&lt;RowSplit&gt;**, the divider of **&lt;ColumnSplit&gt;** can be dragged to a position that just fully holds a component.
+>  **NOTE**
+>
+>  Similar to **\<RowSplit>**, the divider of **\<ColumnSplit>** can be dragged to a position that just fully holds a component.
 
 
 ## Example
 
-  
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ColumnSplitExample {

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

 # Counter
 
-
-> **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;Counter&gt;** component provides an operation to increase or decrease the number.
+The **\<Counter>** component provides an operation to increase or decrease the number.
 
 
 ## Required Permissions
@@ -15,7 +15,7 @@ None
 
 ## Child Components
 
-This component can contain child components.
+Supported
 
 
 ## APIs
@@ -25,18 +25,18 @@ Counter()
 
 ## Events
 
-Except the events listed below, other events, including universal events, are not supported. 
+The universal events and gestures are not supported. Only the following events are supported.
 
-| Name | Description | 
+| Name| Description|
 | -------- | -------- |
-| onInc(event: () =&gt; void) | Event indicating that the number of monitored objects is increased. | 
-| onDec(event: () =&gt; void) | Event indicating that the number of monitored objects is decreased. | 
+| onInc(event: () =&gt; void) | Invoked when the number of monitored objects is increased. |
+| onDec(event: () =&gt; void) | Invoked when the number of monitored objects is decreased. |
 
 
 ## Example
 
-
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct CounterExample {

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

 # Grid
 
+The **\<Grid>** component consists of cells formed by rows and columns. You can specify the cells where items are located to form various layouts.
+
 >  **NOTE**
 >
 >  This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-The **\<Grid>** component consists of cells formed by rows and columns. You can specify the cells where items are located to form various layouts.
-
-
-
-
-## Required Permissions
-
-None
-
 
 ## Child Components
 
 This component contains the child component **[\<GridItem>](ts-container-griditem.md)**.
 
 
-## APIs
-
-Grid(value:{scroller?: Scroller})
+## Interface
 
-- Parameters
-  | Name| Type| Mandatory| Default Value| Description|
-  | -------- | -------- | -------- | -------- | -------- |
-  | scroller | [Scroller](ts-container-scroll.md#scroller) | Yes| - | Scroller, which can be bound to scrollable components.|
+Grid(scroller?: Scroller)
 
+**Parameters**
+| Name      | Type                                    | Mandatory  | Description                   |
+| --------- | ---------------------------------------- | ---- | ----------------------- |
+| scroller  | [Scroller](ts-container-scroll.md#scroller) | No   | Scroller, which can be bound to scrollable components.|
 
 ## Attributes
 
-| Name| Type| Default Value| Description|
-| -------- | -------- | -------- | -------- |
-| columnsTemplate | string | '1fr' | Number of columns in the current grid layout. If this parameter is not set, one column is used by default. For example, **'1fr 1fr 2fr'** divides the component into three columns, with four equal parts. The first column occupies one part, the second column occupies one part, and the third column occupies two parts.|
-| rowsTemplate | string | '1fr' | Number of rows in the current grid layout. If this parameter is not set, one row is used by default. For example, **'1fr 1fr 2fr'** divides the component into three rows. The width allowed by the parent component is divided into four equal parts. The first row occupies one part, the second row occupies one part, and the third row occupies two parts.|
-| columnsGap | Length | 0 | Spacing between columns.|
-| rowsGap | Length | 0 | Spacing between rows.|
-| editMode<font color=ff0000><sup>8+</sup></font> | boolean | false | Whether to enter editing mode. In editing mode, you can drag the **\<[GridItem](ts-container-griditem.md)>** in the **\<Grid>** component.|
-| layoutDirection<font color=ff0000><sup>8+</sup></font>  | number | 0 |Main axis direction of the layout. The options are as follows:<br>- **0**: Horizontal layout, where the child components are arranged in the same direction as the main axis runs along the rows.<br>- **1**: Vertical layout, where the child components are arranged in the same direction as the main axis runs down the columns.|
-| maxCount<font color=ff0000><sup>8+</sup></font> | number | 1 | When **layoutDirection** is **Row**: maximum number of rows that can be displayed.<br>When **layoutDirection** is **Column**: maximum number of columns that can be displayed.|
-| minCount<font color=ff0000><sup>8+</sup></font> | number | 1 | When **layoutDirection** is **Row**: minimum number of rows that can be displayed.<br>When **layoutDirection** is **Column**: minimum number of columns that can be displayed.|
-| cellLength<font color=ff0000><sup>8+</sup></font> | number | 0 | When **layoutDirection** is **Row**: fixed height per row.<br>When **layoutDirection** is **Column**: fixed width per column.|
-| multiSelectable<font color=ff0000><sup>8+</sup></font> | boolean | false | Whether to enable mouse frame selection.<br>- **false**: The mouse frame selection is disabled.<br>- **true**: The mouse frame selection is enabled.|
-| supportAnimation<font color=ff0000><sup>8+</sup></font> | boolean         | false                 | Whether the grid layout supports animation.|
+In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
+
+| Name| Type| Description|
+| -------- | -------- | -------- |
+| columnsTemplate | string | Number of columns in the current grid layout. If this attribute is not set, one column is used by default.<br>For example, **'1fr 1fr 2fr'** indicates three columns, with the first column taking up 1/4 of the parent component's full width, the second column 1/4, and the third column 2/4. This attribute supports [auto-fill] (#auto-fill description).<br>Default value: **'1fr'**|
+| rowsTemplate | string | Number of rows in the current grid layout. If this attribute is not set, one row is used by default.<br>For example, **'1fr 1fr 2fr'** indicates three rows, with the first row taking up 1/4 of the parent component's full height, the second row 1/4, and the third row 2/4. This attribute supports [auto-fill] (#auto-fill description).<br>Default value: **'1fr'**|
+| columnsGap | Length | Gap between columns.<br>Default value: **0**|
+| rowsGap | Length | Gap between rows.<br>Default value: **0**|
+| scrollBar      | [BarState](ts-appendix-enums.md#barstate) | Scrollbar status.<br>Default value: **BarState.Off**|
+| scrollBarColor | string \| number \| Color              | Color of the scrollbar.|
+| scrollBarWidth | string \| number    | Width of the scrollbar.|
+| cachedCount | number                                   | Number of grid items to be preloaded. For details, see [Minimizing White Blocks During Swiping](../../ui/ts-performance-improvement-recommendation.md#minimizing-white-blocks-during-swiping).<br>Default value: **1**|
+| editMode <sup>8+</sup>                   | boolean | Whether to enter editing mode. In editing mode, the user can drag the **\<[GridItem](ts-container-griditem.md)>** in the **\<Grid>** component.<br>Default value: **false**|
+| layoutDirection<sup>8+</sup>             | [GridDirection](#griddirection8) | Main axis direction of the grid.<br>Default value: **GridDirection.Row**|
+| maxCount<sup>8+</sup> | number  | When **layoutDirection** is **Row** or **RowReverse**: maximum number of rows that can be displayed.<br>When **layoutDirection** is **Column** or **ColumnReverse**: maximum number of columns that can be displayed.<br>Default value: **1**|
+| minCount<sup>8+</sup> | number  | When **layoutDirection** is **Row** or **RowReverse**: minimum number of rows that can be displayed.<br>When **layoutDirection** is **Column** or **ColumnReverse**: minimum number of columns that can be displayed.<br>Default value: **1**|
+| cellLength<sup>8+</sup> | number  | When **layoutDirection** is **Row** or **RowReverse**: fixed height per row.<br>When **layoutDirection** is **Column** or **ColumnReverse**: fixed width per column.<br>Default value: **0**|
+| multiSelectable<sup>8+</sup> | boolean | Whether to enable mouse frame selection.<br>Default value: **false**<br>- **false**: The mouse frame selection is disabled.<br>- **true**: The mouse frame selection is enabled.|
+| supportAnimation<sup>8+</sup> | boolean | Whether to enable animation.<br>Default value: **false**|
+
+## GridDirection<sup>8+</sup>
+
+| Name  | Description                                  |
+  | ------ | -------------------------------------- |
+| Row  | Horizontal layout, where the child components are arranged from left to right as the main axis runs along the rows.|
+| Column | Vertical layout, where the child components are arranged from top to bottom as the main axis runs down the columns.|
+| RowReverse    | Reverse horizontal layout, where the child components are arranged from right to left as the main axis runs along the rows.|
+| ColumnReverse   | Reverse vertical layout, where the child components are arranged from bottom up as the main axis runs down the columns.|
 
 ## Events
 
+In addition to the [universal events](ts-universal-events-click.md), the following events are supported.
+
 | Name| Description|
 | -------- | -------- |
-| onScrollIndex(first: number) =&gt; void | Triggered when the start item of the grid changes. |
+| onScrollIndex(event: (first: number) => void) | Triggered when the start item of the grid changes.<br>- **first**: index of the start item of the grid.|
+| onItemDragStart(event: (event: ItemDragInfo, itemIndex: number) => (() => any) \| void) | Triggered when a grid item starts to be dragged.<br>- **event**: See [ItemDragInfo](#itemdraginfo).<br>- **itemIndex**: index of the dragged element.|
+| onItemDragEnter(event: (event: ItemDragInfo) => void) | Triggered when the dragged item enters the drop target of the grid.<br>- **event**: See [ItemDragInfo](#itemdraginfo).|
+| onItemDragMove(event: (event: ItemDragInfo, itemIndex: number, insertIndex: number) => void) | Triggered when the dragged item moves over the drop target of the grid.<br>- **event**: See [ItemDragInfo](#itemdraginfo).<br>- **itemIndex**: initial position of the dragged item.<br>- **insertIndex**: index of the position to which the dragged item will be dropped.|
+| onItemDragLeave(event: (event: ItemDragInfo, itemIndex: number) => void) | Triggered when the dragged item exits the drop target of the grid.<br>- **event**: See [ItemDragInfo](#itemdraginfo).<br>- **itemIndex**: index of the dragged item.|
+| onItemDrop(event: (event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => void) | Triggered when the dragged item is dropped on the drop target of the grid.<br>- **event**: See [ItemDragInfo](#itemdraginfo).<br>- **itemIndex**: initial position of the dragged item.<br>- **insertIndex**: index of the position to which the dragged item will be dropped.<br>- **isSuccess**: whether the dragged item is successfully dropped.|
+
+## Notes About auto-fill
+
+In the **columnsTemplate** and **rowsTemplate** attributes of the **\<Grid>** component, **auto-fill** supports only the following formats:
+
+```css
+repeat(auto-fill, track-size)
+```
 
+The keywords **repeat** and **auto-fill** are used. **track-size** indicates the row height or column width, which can be in the unit of px, vp, %, or valid digits. The value must contain at least one valid row height or column width.
+
+## ItemDragInfo
+
+| Name        | Type        |   Description        |
+| ---------- | ---------- | ---------- |
+| x | number |  X-coordinate of the dragged item.   |
+| y   | number |  Y-coordinate of the dragged item.   |
 
 ## Example
 
@@ -114,5 +144,51 @@ struct GridExample {
 }
 ```
 
-![en-us_image_0000001212218434](figures/en-us_image_0000001212218434.gif)
+![zh-cn_image_0000001219744183](figures/zh-cn_image_0000001219744183.gif)
+
+**Example of auto-fill**
+
+```ts
+// grid-autofill.ets
+@Entry
+@Component
+struct Index {
+  @State gridItemWidth: string = "100%"
+  @State gridItemHeight: string = "100%"
+  @State gridWidth: string = "100%"
+  @State gridHeight: string = "100%"
+  @State itemList: string[] = []
+  build() {
+    Column() {
+      Grid() {
+        ForEach(this.itemList, (item) => {
+          GridItem() {
+            Text(item.toString())
+              .fontSize(16)
+              .width('100%')
+              .textAlign(TextAlign.Center)
+          }
+          .width(this.gridItemWidth)
+          .height(this.gridItemHeight)
+          .backgroundColor(0xF9CF93)
+        }, item => item)
+      }
+      .columnsGap(1)
+      .rowsGap(1)
+      .border({ width: 4, color: 0xffdb7093, style: BorderStyle.Dashed, radius: 5 })
+      .width(this.gridWidth)
+      .height(this.gridHeight)
+      .columnsTemplate("15% repeat(auto-fill, 10% 50px 20%) 50px")
+      .rowsTemplate("150px repeat(auto-fill, 20% 25%)")
+    }.margin(5)
+  }
+
+  aboutToAppear() {
+    for(var i = 1; i < 50; i++) {
+      this.itemList.push(i.toString())
+    }
+  }
+}
+```
 
+![grid-autofill](figures/grid-autofill.png)

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

+# GridCol
+
+The **\<GridCol>** component must be used as a child component of the [GridRow](ts-container-gridrow.md) container.
+
+>  **NOTE**
+>
+> This component is supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version. 
+
+## Child Components
+
+This component can contain only one child component.
+## APIs
+
+GridCol(option?:{span?: number | GridColColumnOption, offset?: number | GridColColumnOption, order?: number | GridColColumnOption})
+
+**Parameters**
+
+| Name| Type                         | Mandatory| Description                                                        |
+| ------ | ----------------------------- | ---- | ------------------------------------------------------------ |
+| span   | number \| GridColColumnOption | No  | Number of occupied columns. If it is set to **0**, the element is not involved in layout calculation, that is, the element is not rendered.<br>Default value: **1**|
+| offset | number \| GridColColumnOption | No  | Number of offset columns relative to the previous child component of the grid<br>Default value: **0**          |
+| order  | number \| GridColColumnOption | No  | Sequence number of the element. Child components of the grid are sorted in ascending order based on their sequence numbers.<br>Default value: **0**|
+
+## Attributes
+
+| Name| Type                         | Mandatory| Description                                                        |
+| ------ | ----------------------------- | ---- | ------------------------------------------------------------ |
+| span   | number \| GridColColumnOption | No  | Number of occupied columns. If it is set to **0**, the element is not involved in layout calculation, that is, the element is not rendered.<br>Default value: **1**|
+| offset | number \| GridColColumnOption | No  | Number of offset columns relative to the previous child component of the grid<br>Default value: **0**          |
+| order  | number \| GridColColumnOption | No  | Sequence number of the element. Child components of the grid are sorted in ascending order based on their sequence numbers.<br>Default value: **0**|
+
+## GridColColumnOption
+
+| Name  | Type  | Mandatory  | Description                                    |
+| ----- | ------ | ---- | ---------------------------------------- |
+| xs  | number | No   | Device of the minimum size.   |
+| sm  | number | No   | Small-sized device.     |
+| md  | number | No   | Medium-sized device.   |
+| lg  | number | No   | Large-sized device.     |
+| xl  | number | No   | Extra-large-sized device.   |
+| xxl | number | No   | Ultra-large-sized device. |
+
+The values of `span`, `offset`, and `order` attributes are inherited in the sequence of `xs`, `sm`, `md`, `lg`, `xl`, and `xxl`. If no value is set for a breakpoint, the value is obtained from the previous breakpoint.
+
+|Parameter\Breakpoint|xs|sm|md|lg|xl|xxl|
+|---|---|---|---|---|---|---|
+|span   |2  |2  |3  |3  |4  |4  |
+|offset |2  |2  |3  |5  |5  |5  |
+|order  |20 |20 |20 |3  |3  |3  |
+
+## Example
+See [GridRow](ts-container-gridrow.md#example).

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

 # GridContainer
 
+The **\<GridContainer>** component lays out components vertically. It is used only in the grid layout.
 
-> **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 **<GridContainer\>** component lays out components vertically. It is used only in the grid layout.
-
-
-## Required Permissions
-
-None
-
-
 ## Child Components
 
-This component can contain child components.
+Supported
 
 
 ## APIs
 
-GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeType, gutter?: Length, margin?: Length})
+GridContainer(value?: { columns?: number | 'auto', sizeType?: SizeType, gutter?: number | string, margin?: number | string})
 
-- Parameter
-  | Name | Type | Mandatory | Default Value | Description |
-  | -------- | -------- | -------- | -------- | -------- |
-  | columns | number \| 'auto' | No | 'auto' | Total number of columns in the current layout. |
-  | sizeType | SizeType | No | SizeType.Auto | Device size type. |
-  | gutter | Length | No | - | Gutter of the grid layout. |
-  | margin | Length | No | - | Margin of the grid layout. |
+**Parameters**
 
-- SizeType enums
-  | Name | Description | 
-  | -------- | -------- |
-  | XS | Minimum-sized device. | 
-  | SM | Small-sized device. | 
-  | MD | Medium-sized device. | 
-  | LG | Large-sized device. | 
-  | Auto | Auto. The size type is selected based on the device type. | 
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| columns | number \| 'auto' | No| Total number of columns in the current layout.<br>Default value: **'auto'**|
+| sizeType | SizeType | No| Device size type.<br>Default value: **SizeType.Auto**|
+| gutter | number \| string | No| Gutter of the grid layout.|
+| margin | number \| string | No| Margin of the grid layout.|
+
+## SizeType
+
+| Name| Description|
+| -------- | -------- |
+| XS | Device of the minimum size.|
+| SM | Small-sized device.|
+| MD | Medium-sized device.|
+| LG | Large-sized device.|
+| Auto | Auto. The size type is selected based on the device type.|
 
 
 ## Attributes
 
-Universal attributes and [attributes](ts-container-column.md#attributes) of the **<Column\>** component are supported.
+The universal attributes and attributes of the **[<Column\>](ts-container-column.md#attributes)** component are supported.
 
 
 ## Events
 
-Universal events are supported.
+The universal events are supported.
 
 
 ## Example
 
-
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct GridContainerExample {

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

 # GridItem
 
+The **\<GridItem>** component provides a single item in a grid.
 
-> **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;GridItem&gt;** component provides a single item in a grid.
-
-
-## Required Permissions
-
-None
-
-
 ## Child Components
 
-This component can contain child components.
+Supported
 
 
 ## APIs
@@ -25,27 +19,27 @@ GridItem()
 
 ## Attributes
 
-| Name | Type | Default Value | Description |
-| -------- | -------- | -------- | -------- |
-| rowStart | number | - | Start row number of the component. |
-| rowEnd | number | - | End row number of the component. |
-| columnStart | number | - | Start column number of the component. |
-| columnEnd | number | - | End column number of the component. |
-| forceRebuild | boolean | false | Whether to re-create this node when the component is being built. |
-| selectable<sup>8+</sup> | boolean | true | Whether the current **&lt;GridItem&gt;** is selectable by the mouse.<br/>**NOTE**<br/>This attribute takes effect only when mouse frame selection is enabled for the parent **&lt;Grid&gt;** container. |
+| Name| Type| Description|
+| -------- | -------- | -------- |
+| rowStart | number | Start row number of the component.|
+| rowEnd | number | End row number of the component.|
+| columnStart | number | Start column number of the component.|
+| columnEnd | number | End column number of the component.|
+| forceRebuild | boolean | Whether to re-create the component when it is being built.<br>Default value: **false**|
+| selectable<sup>8+</sup> | boolean | Whether the current grid item is selectable by the mouse.<br>> **NOTE**<br>> This attribute takes effect only when mouse frame selection is enabled for the parent **\<Grid>** container.<br>Default value: **true**|
 
 
 ## Events
 
-| Name | Description |
+| Name| Description|
 | -------- | -------- |
-| onSelect(callback: (isSelected: boolean) =&gt; any)<sup>8+</sup> | Triggered when the selected state of the **&lt;GridItem&gt;** changes.<br/>**isSelected**: Returns **true** if the **&lt;GridItem&gt;** is selected by the mouse; returns **false** otherwise. |
+| onSelect(event: (isSelected: boolean) =&gt; void)<sup>8+</sup> | Triggered when the selected state of the grid item changes.<br>**isSelected**: Returns **true** if the grid item is selected by the mouse; returns **false** otherwise.|
 
 
 ## Example
 
-
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct GridItemExample {

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

+# GridRow
+
+The **\<GridRow>** component is used in a grid layout, together with its child component **[\<GridCol>](ts-container-gridcol.md)**.
+
+>  **NOTE**
+>
+> This component is supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Child Components
+
+This component can contain the **\<GridCol>** child component.
+
+
+## APIs
+GridRow(option?: {columns?: number | GridRowColumnOption, gutter?: Length | GutterOption, breakpoints?: BreakPoints, direction?: GridRowDirection})
+
+**Parameters**
+| Name|Type|Mandatory|Description|
+|-----|-----|----|----|
+|gutter|Length \| GutterOption|   No |Gutter of the grid layout. **x** indicates the horizontal direction.|
+|columns| number \| GridRowColumnOption |  No |Number of columns in the grid layout.|
+|breakpoints|BreakPoints|  No |Array of breakpoints for the breakpoint value and the corresponding reference based on the window or container size.|
+|direction|GridRowDirection|   No |Arrangement direction of the grid layout.|
+
+## GutterOption
+
+| Name  | Type  | Mandatory  | Description                                    |
+| ----- | ------ | ---- | ---------------------------------------- |
+| x  | Length \| GridRowSizeOption | No  | Gutter in the horizontal direction.   |
+| y  | Length \| GridRowSizeOption | No  | Gutter in the vertical direction.     |
+
+## GridRowColumnOption
+
+Describes the numbers of grid columns for different device width types.
+
+| Name  | Type  | Mandatory  | Description                                    |
+| ----- | ------ | ---- | ---------------------------------------- |
+| xs  | number | No   | Device of the minimum size.   |
+| sm  | number | No   | Small-sized device.     |
+| md  | number | No   | Medium-sized device.   |
+| lg  | number | No   | Large-sized device.     |
+| xl  | number | No   | Extra-large-sized device.   |
+| xxl | number | No   | Ultra-large-sized device.   |
+
+## GridRowSizeOption
+
+Describes the gutter sizes for different device width types.
+
+| Name  | Type  | Mandatory  | Description                                    |
+| ----- | ------ | ---- | ---------------------------------------- |
+| xs  | Length | No   | Device of the minimum size.   |
+| sm  | Length | No   | Small-sized device.     |
+| md  | Length | No   | Medium-sized device.   |
+| lg  | Length | No   | Large-sized device.     |
+| xl  | Length | No   | Extra-large-sized device.   |
+| xxl | Length | No   | Ultra-large-sized device.   |
+
+## BreakPoints
+
+| Name  | Type  | Mandatory  | Description                                    |
+| ----- | ------ | ---- | ---------------------------------------- |
+| value  | Array&lt;string&gt; | No | Array of monotonically increasing breakpoints.<br>Default value: **["320vp", "520vp", "840vp"]**   |
+| reference  | BreakpointsReference | No   | Breakpoint switching reference.|
+```ts
+  // Enable the xs, sm, and md breakpoints.
+  breakpoints: {value: ["100vp", "200vp"]}
+  // Enable four breakpoints: xs, sm, md, and lg. The breakpoint range must be monotonically increasing.
+  breakpoints: {value: ["320vp", "520vp", "840vp"]}
+  // Enable five breakpoints: xs, sm, md, lg, and xl. The number of breakpoint ranges cannot exceed the number of breakpoints minus 1.
+  breakpoints: {value: ["320vp", "520vp", "840vp", "1080vp"]}
+```
+
+## BreakpointsReference
+| Name| Description|
+| -------- | -------- |
+| WindowSize | The window is used as a reference.|
+| ComponentSize | The container is used as a reference.|
+
+## GridRowDirection
+| Name| Description|
+| -------- | -------- |
+| Row | Grid elements are arranged in the row direction.|
+| RowReverse | Grid elements are arranged in the reverse row direction.|
+
+A grid supports a maximum of six breakpoints: xs, sm, md, lg, xl and xxl, whose names cannot be changed. Assume that the input array is [n0, n1, n2, n3, n4], then the value ranges of breakpoints are as follows. 
+
+|Breakpoint|Value Range|
+|---|-----------|
+|xs |[0, n0)    |
+|sm |[n0, n1)   |
+|md |[n1, n2)   |
+|lg |[n2, n3)   |
+|xl |[n3, n4)   |
+|xxl|[n4, INF)  |
+
+**NOTE**
+* Grid elements can be arranged only in the **Row** or **RowReverse** direction, but not in the **Column** or **ColumnReverse** direction.
+* The location and size of a grid child component can be calculated only based on **span** and **offset**. If the **span** values of child components add up to a number greater than the allowed number of columns, the grid will automatically wraps lines.
+* If the **span** value of a single child component exceeds the maximum number of columns, the maximum number of columns is used.
+* If a child component takes up more than the total number of columns according to its **offset** and **span** settings, it will be placed in a new row.
+* Below is the display effect of **Item1: GridCol({span: 6}), Item2: GridCol({ span: 8, offset:11})**. 
+
+|1      | 2     | 3     | 4     | 5     | 6     | 7     | 8     | 9     | 10    | 11    | 12    |
+| ----- | ------ | ---- | ---- | -----|-----|---------|--------|------|------- |------- |------- |
+| $\circ$ | $\circ$ | $\circ$ | $\circ$ | $\circ$|$\circ$| - |  - |  - |  -  | -  | -  |
+| -     | -     | -     | -     | -     |       |       |       |       |       |   |   |
+| $\circ$ | $\circ$ | $\circ$ | $\circ$ | $\circ$|$\circ$|$\circ$|$\circ$|  |   |   |   |
+
+## Attributes
+
+The [universal attributes](ts-universal-attributes-size.md) are supported.
+
+
+## Events
+
+### onBreakpointChange
+
+onBreakpointChange(callback: (breakpoints: string) => void)
+
+**Parameters**
+
+| Name  | Type  | Mandatory  | Description  |
+| ----- | ------ | ---- | ---------------------------------------- |
+|breakpoints| string |Yes|Breakpoint change.<br>The value can be `"xs"`, `"sm"`, `"md"`, `"lg"`, `"xl"`, or `"xxl"`.|
+
+## Example
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct GridRowExample {
+  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]
+  @State currentBp: string = 'unknown'
+  build() {
+    Column() {
+      GridRow({
+        columns: 5,
+        gutter: {x:5, y:10},
+        breakpoints: {value:["400vp", "600vp", "800vp"],
+          reference: BreakpointsReference.WindowSize},
+        direction: GridRowDirection.Row
+      }) {
+        ForEach(this.bgColors, (color)=>{
+          GridCol({ span: {xs:1, sm:2, md:3, lg:4}}) {
+            Row().width("100%").height("20vp")
+          }.borderColor(color).borderWidth(2)
+        })
+      }.width("100%").height("100%")
+      .onBreakpointChange((breakpoint) => {
+        this.currentBp = breakpoint
+      })
+    }.width('80%').margin({ left: 10,top: 5, bottom:5 }).height(200)
+    .border({color:Color.Blue, width:2})
+  }
+}
+```
+
+![figures/gridrow.png](figures/gridrow.png)

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

 # List
 
+The **\<list>** component provides a list container that presents a series of list items arranged in a column with the same width. It supports presentations of the same type of data in a multiple and coherent row style, for example, images or text.
 
 > **NOTE**
 >
-> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+> - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+> - This component can produce a bounce effect only when there is more than one screen of content.
 
 
-The **\<List>** component provides a list container that presents a series of list items arranged in columns with the same width. It supports presentation of the same type of data, for example, images or text, in a multiple and coherent row style.
+## Child Components
 
+This component supports the [\<ListItem]>(ts-container-listitem.md) and [\<ListItemGroup>](ts-container-listitemgroup.md) child components.
 
-## Required Permissions
 
-None
+## APIs
 
+List(value?:{space?: number | string, initialIndex?: number, scroller?: Scroller})
 
-## Child Components
+**Parameters**
 
-This component contains the child component [\<ListItem>](ts-container-listitem.md).
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| space | number \| string | No| Spacing between list items.<br>Default value: **0**|
+| initialIndex | number | No| Item displayed at the beginning of the viewport when the current list is loaded for the first time, that is, the first item to be displayed. If the value set is greater than the sequence number of the last item, the setting does not take effect.<br>Default value: **0**|
+| scroller | [Scroller](ts-container-scroll.md#scroller) | No| Controller bound to the list to control the scrolling.|
 
+## Attributes
 
-## APIs
+In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
 
-List(value:{space?: number | string, initialIndex?: number, scroller?: Scroller})
+| Name| Type| Description|
+| -------- | -------- | -------- |
+| listDirection | [Axis](ts-appendix-enums.md#axis) | Direction in which the list items are arranged.<br>Default value: **Axis.Vertical**|
+| divider                      | {<br>strokeWidth: [Length](ts-types.md#length),<br>color?:[ResourceColor](ts-types.md#resourcecolor),<br>startMargin?: Length,<br>endMargin?: Length<br>} \| null | Style of the divider for the list items. By default, there is no divider.<br>- **strokeWidth**: stroke width of the divider.<br>- **color**: color of the divider.<br>- **startMargin**: distance between the divider and the start edge of the list.<br>- **endMargin**: distance between the divider and the end edge of the list.|
+| scrollBar      | [BarState](ts-appendix-enums.md#barstate) | Scrollbar status.<br>Default value: **BarState.Off**|
+| cachedCount | number                                   | Number of list items to be preloaded. For details, see [Minimizing White Blocks During Swiping](../../ui/ts-performance-improvement-recommendation.md#minimizing-white-blocks-during-swiping).<br>Default value: **1**|
+| editMode | boolean | Whether to enter editing mode.<br>Default value: **false**|
+| edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | Scroll effect.<br>Default value: **EdgeEffect.Spring**|
+| chainAnimation | boolean | Whether to display chained animations on this list when it slides or its top or bottom is dragged. The list items are separated with even space, and one item animation starts after the previous animation during basic sliding interactions. The chained animation effect is similar with spring physics.<br>Default value: **false**<br>- **false**: No chained animations are displayed.<br>- **true**: Chained animations are displayed.|
+| multiSelectable<sup>8+</sup> | boolean | Whether to enable mouse frame selection.<br>Default value: **false**<br>- **false**: The mouse frame selection is disabled.<br>- **true**: The mouse frame selection is enabled.|
+| lanes<sup>9+</sup> | number \| [LengthConstrain](ts-types.md#lengthconstrain) | In the following description, **listDirection** is set to **Axis.Vertical**:<br>Number of columns in which the list items are arranged along the cross axis.<br>Default value: **1**<br>The rules are as follows:<br>- If the value is set to a number, the column width is determined based on the specified number and the cross-axis width of the **\<List>** component.<br>- If the value is set to {minLength, maxLength}, the number of columns is adjusted adaptively based on the width of the **\<List>** component, ensuring that the width respects the {minLength, maxLength} constraints during adaptation. The **minLength** constraint is prioritized. For example, if **lanes** is set to **{minLength: 40vp, maxLength: 60vp}** and the width of the **\<List>** component is 70 vp, the list items are arranged in one column with their alignment compliant with the **alignListItem** settings. If the width of the **\<List>** component is changed to 80 vp, which is twice the value of **minLength**, the list items are arranged in two columns.|
+| alignListItem<sup>9+</sup> | ListItemAlign | Alignment mode of list items along the cross axis when: Cross-axis width of the **\<List>** component > Cross-axis width of list items x Value of **lanes**.<br>Default value: **ListItemAlign.Start**|
+| sticky<sup>9+</sup> | StickyStyle | Whether to pin the header to the top or the footer to the bottom in the **\<ListItemGroup>** component. This attribute is used together with the **\<ListItemGroup>** component.<br>Default value: **StickyStyle.None**<br>**NOTE**<br>The **sticky** attribute can be set to **StickyStyle.Header** or **StickyStyle.Footer** to support both the pin-to-top and pin-to-bottom features. |
 
-- Parameters
-  | Name | Type | Mandatory | Default Value | Description |
-  | -------- | -------- | -------- | -------- | -------- |
-  | space | number&nbsp;\|&nbsp;string | No | 0 | Spacing between list items. |
-  | initialIndex | number | No | 0 | Item displayed at the beginning of the viewport when the current list is loaded for the first time, that is, the first item to be displayed. If the value set is greater than the sequence number of the last item, the setting does not take effect. |
-  | scroller | [Scroller](ts-container-scroll.md#scroller) | No | - | Controller bound to the list to control the scrolling. |
+## ListItemAlign<sup>9+</sup>
 
+| Name  | Description                                  |
+| ------ | -------------------------------------- |
+| Start  | The list items are packed toward the start edge of the **\<List>** component along the cross axis.|
+| Center | The list items are centered in the **\<List>** component along the cross axis.|
+| End    | The list items are packed toward the end edge of the **\<List>** component in the cross axis.|
 
-## Attributes
+## StickyStyle<sup>9+</sup>
+
+| Name  | Description                                  |
+| ------ | -------------------------------------- |
+| None  | In the **\<ListItemGroup>** component, the header is not pinned to the top, and the footer is not pinned to the bottom.|
+| Header | In the **\<ListItemGroup>** component, the header is pinned to the top.|
+| Footer | In the **\<ListItemGroup>** component, the footer is pinned to the bottom.|
 
-| Name | Type | Default Value | Description |
-| -------- | -------- | -------- | -------- |
-| listDirection | [Axis](ts-appendix-enums.md#axis-enums) | Vertical | Direction in which the list items are arranged. For details, see **Axis** enums. |
-| divider | {<br>strokeWidth: Length,<br>color?:Color,<br>startMargin?: Length,<br>endMargin?: Length<br>} | - | Style of the divider for the list items. By default, there is no divider.<br>**strokeWidth**: stroke width of the divider.<br>**color**: color of the divider.<br>**startMargin**: distance between the divider and the start of the list.<br>**endMargin**: distance between the divider and the end of the list. |
-| editMode | boolean | false | Whether the **\<List>** component is in editable mode. |
-| edgeEffect | EdgeEffect | EdgeEffect.Spring | Sliding effect. For details, see **EdgeEffect enums**. |
-| chainAnimation | boolean | false | Whether to display chained animations on this list when it slides or its top and bottom are dragged. The list items are separated with even space, and one item animation starts after the previous animation during basic sliding interactions. The chained animation effect is similar with spring physics.<br>- **false**: No chained animations are displayed.<br>- **true**: Chained animations are displayed. |
-| multiSelectable<sup>8+</sup> | boolean | false | Whether to enable mouse frame selection.<br>- **false**: The mouse frame selection is disabled.<br>- **true**: The mouse frame selection is enabled. |
-| restoreId<sup>8+</sup> | number | - | Migration ID of the component. During application migration, the status of the component is migrated to the component with the same migration ID on the peer end.<br>For a **<\List>** component, the status includes the item serial number displayed at the start position. |
-| lanes<sup>9+</sup> | number \|<br>{<br>minLength: Length,<br>maxLength: Length<br>} | 1 | In the following description, **listDirection** is set to **Axis.Vertical**:<br>Number of columns in which the list items are arranged along the cross axis.<br>- If the value type is number, the column width is determined based on the specified number and the cross-axis width of the **\<List>** component.<br>- If the value type is {minLength, maxLength}, the number of columns is adjusted adaptively based on the width of the **\<List>** component, ensuring that the width respects the {minLength, maxLength} constraints during adaptation. The **minLength** constraint is prioritized. For example, if **lanes** is set to **{minLength: 40vp, maxLength: 60vp}** and the width of the **\<List>** component is 70 vp, the list items are arranged in one column with their alignment compliant with the **alignListItem** settings. If the width of the **\<List>** component is changed to 80 vp, which is twice the value of **minLength**, the list items are arranged in two columns.|
-| alignListItem<sup>9+</sup> | ListItemAlign | ListItemAlign.Center | Alignment mode of list items along the cross axis when: Cross-axis width of the **\<List>** component > Cross-axis width of list items x Value of **lanes**.|
-
-- EdgeEffect enums
-  | Name | Description |
-  | -------- | -------- |
-  | Spring | Similar to the physical dynamic effect of a spring. After scrolling to the edge, the user can continue to scroll for a distance based on the initial speed or by touching the knob of the scrollbar. After the user releases their hand, the knob is rebounded. |
-  | None | No effect when the list is scrolled to the edge. |
-
-- ListItemAlign enums
-
-  | Name  | Description                                  |
-  | ------ | -------------------------------------- |
-  | Start  | The list items are packed toward the start edge of the **\<List>** component along the cross axis.|
-  | Center | The list items are centered in the **\<List>** component along the cross axis.|
-  | End    | The list items are packed toward the end edge of the **\<List>** component in the cross axis.|
 
 
 ## Events
 
-| Name | Description |
+| Name| Description|
 | -------- | -------- |
-| onItemDelete(index: number) =&gt; boolean | Triggered when a list item is deleted. |
-| onScrollBegin<sup>9+</sup>(dx: number, dy: number)&nbsp;=&gt;&nbsp;{ dxRemain: number, dyRemain: number } | Triggered when scrolling starts.<br/>Parameters:<br/>- **dx**: amount by which the list will scroll in the horizontal direction.<br/>- **dy**: amount by which the list will scroll in the vertical direction.<br/>Return value:<br/>- **dxRemain**: remaining amount by which the list can scroll in the horizontal direction.<br/>- **dyRemain**: remaining amount by which the list can scroll in the vertical direction. |
-| onScrollIndex(firstIndex:&nbsp;number,&nbsp;lastIndex:&nbsp;number)&nbsp;=&gt;&nbsp;void | Triggered when the start position and end position of the current list are changed. |
+| onItemDelete(event: (index: number) => boolean) | Triggered when a list item is deleted.<br>- **index**: index of the deleted list item.|
+| onScroll(event: (scrollOffset: number, scrollState: ScrollState) => void) | Triggered when the list scrolls.<br>- **scrollOffset**: scroll offset.<br>- **[scrollState](#scrollstate)**: current scroll state. |
+| onScrollIndex(event: (start: number, end: number) => void) | Triggered when scrolling starts.<br>When calculating the index value, the **\<ListItemGroup>** accounts for one index value as a whole, and the index values of the list items within are not calculated.<br>- **start**: index of the scroll start position.<br>- **end**: index of the scroll end position.|
+| onReachStart(event: () => void) | Triggered when the list reaches the start position.|
+| onReachEnd(event: () => void) | Triggered when the list reaches the end position.|
+| onScrollBegin<sup>9+</sup>(event: (dx: number, dy: number) => { dxRemain: number, dyRemain: number }) | Triggered when the list starts to scroll.<br>- **dx**: amount by which the list will scroll in the horizontal direction.<br>- **dy**: amount by which the list will scroll in the vertical direction.<br>- **dxRemain**: remaining amount by which the list can scroll in the horizontal direction.<br>- **dyRemain**: remaining amount by which the list can scroll in the vertical direction.|
+| onScrollStop(event: () => void) | Triggered when the list stops scrolling.|
+| onItemMove(event: (from: number, to: number) => boolean) | Triggered when a list item moves.<br>- **from**: index of the item before moving.<br>- **to**: index of the item after moving.|
+| onItemDragStart(event: (event: ItemDragInfo, itemIndex: number) => ((() => any) \| void) | Triggered when a list element starts to be dragged.<br>- **event**: See [ItemDragInfo](ts-container-grid.md#itemdraginfo).<br>- **itemIndex**: index of the dragged list element.|
+| onItemDragEnter(event: (event: ItemDragInfo) => void) | Triggered when the dragged item enters the drop target of the list.<br>- **event**: See [ItemDragInfo](ts-container-grid.md#itemdraginfo).|
+| onItemDragMove(event: (event: ItemDragInfo, itemIndex: number, insertIndex: number) => void) | Triggered when the dragged item moves over the drop target of the list.<br>- **event**: See [ItemDragInfo](ts-container-grid.md#itemdraginfo).<br>- **itemIndex**: initial position of the dragged item.<br>- **insertIndex**: index of the position to which the dragged item will be dropped.|
+| onItemDragLeave(event: (event: ItemDragInfo, itemIndex: number) => void) | Triggered when the dragged item exits the drop target of the list.<br>- **event**: See [ItemDragInfo](ts-container-grid.md#itemdraginfo).<br>- **itemIndex**: index of the list item.|
+| onItemDrop(event: (event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => void) | Triggered when the dragged item is dropped on the drop target of the list.<br>- **event**: See [ItemDragInfo](ts-container-grid.md#itemdraginfo).<br>- **itemIndex**: initial position of the dragged item.<br>- **insertIndex**: index of the position to which the dragged item will be dropped.<br>- **isSuccess**: whether the dragged item is successfully dropped.|
+
+## ScrollState
+
+| Name    | Description                    |
+| ------ | ------------------------- |
+| Idle    | Not scrolling.          |
+| Scroll   | Inertial scrolling.         |
+| Fling   | Finger dragging.          |
 
 >  **NOTE**
 >
@@ -74,7 +93,7 @@ List(value:{space?: number | string, initialIndex?: number, scroller?: Scroller}
 >
 >  - **editMode** is set to **true**.
 >
-> - The list is bound to the **onItemDelete** event, and the event returns **true** through a callback.
+>  - The list is bound to the **onItemDelete** event and the event returns **true** in the event callback.
 >
 >  - The **editable** attribute of **ListItem** is set to **true**.
 >
@@ -82,12 +101,11 @@ List(value:{space?: number | string, initialIndex?: number, scroller?: Scroller}
 >
 >  - **editMode** is set to **true**.
 >
-> - The list item is bound to the **onDragStart** event, and the event returns a floating UI through a callback.
+>  - The list item is bound to the **onDragStart** event and the event returns a floating UI during event callback.
 
 
 ## Example
 
-
 ```ts
 // xxx.ets
 @Entry
@@ -108,9 +126,9 @@ struct ListExample {
             }.editable(true)
           }, item => item)
         }
-        .listDirection(Axis.Vertical) // Direction in which the list items are arranged.
-        .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // Style of the divider for the list items.
-        .edgeEffect(EdgeEffect.None) // No effect when the list is scrolled to the edge.
+        .listDirection(Axis.Vertical) // Arrangement direction
+        .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // Divider
+        .edgeEffect(EdgeEffect.None) // No effect when the list scrolls to the edge.
         .chainAnimation(false) // Chained animations are disabled.
         .onScrollIndex((firstIndex: number, lastIndex: number) => {
           console.info('first' + firstIndex)
@@ -168,7 +186,7 @@ struct ListLanesExample {
       .lanes({ minLength: 40, maxLength: 60 })
       .alignListItem(this.alignListItem)
 
-      Button("Change alignListItem:" + this.alignListItem).onClick(() => {
+      Button("Change alignListItem: "+ this.alignListItem).onClick(() => {
         if (this.alignListItem == ListItemAlign.Start) {
           this.alignListItem = ListItemAlign.Center
         } else if (this.alignListItem == ListItemAlign.Center) {
@@ -181,4 +199,3 @@ struct ListLanesExample {
   }
 }
 ```
-

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

 # ListItem
 
+The **\<ListItem>** component displays specific items in the list. Its width occupies the **\<List>** component by default and must be used together with **\<List>**.
 
-> **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;ListItem&gt;** component displays specific items in the list. Its width occupies the **&lt;List&gt;** component by default and must be used together with **&lt;List&gt;**.
-
-
-## Required Permissions
-
-None
-
-
 ## Child Components
 
 This component can contain a single child component.
@@ -20,35 +14,51 @@ This component can contain a single child component.
 
 ## APIs
 
-ListItem()
-
+ListItem(value?: string)
 
 ## Attributes
 
-| Name | Type | Default Value | Description |
-| -------- | -------- | -------- | -------- |
-| sticky | Sticky | Sticky.None | Sticky effect of the list item. For details, see **Sticky** enums. |
-| editable | boolean | false | Whether the list item is editable. A list item can be deleted in editing mode. |
-| selectable<sup>8+</sup> | boolean | true | Whether the current **ListItem;** is selectable by the mouse.<br/>**NOTE**<br/>This attribute takes effect only when mouse frame selection is enabled for the parent **&lt;List&gt;** container. |
+In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
 
-- Sticky enums
-  | Name | Description | 
-  | -------- | -------- |
-  | None | No sticky. | 
-  | Normal | The list item is sticky. | 
+| Name| Type| Description|
+| -------- | -------- | -------- |
+| sticky | [Sticky](#sticky)| Sticky effect of the list item.<br>Default value: **Sticky.None**|
+| editable  | boolean \| [EditMode](#editmode)| Whether to enter editing mode, where the list item can be deleted or moved.<br>Default value: **false**|
+| selectable<sup>8+</sup> | boolean | Whether the current list item is selectable by mouse drag.<br>**NOTE**<br>This attribute takes effect only when mouse frame selection is enabled for the parent **\<List>** container.<br>Default value: **true**|
+| swipeAction<sup>9+</sup> | {<br>start?: CustomBuilder,<br>end?:CustomBuilder,<br>edgeEffect?: [SwipeEdgeEffect](#swipeedgeeffect9),<br>} | Component displayed when the list item is swiped out from the screen edge.<br>- **start**: component on the left of the list item when the item is swiped to the right (in vertical list layout) or component above the list item when the item is swiped down (in horizontal list layout).<br>- **end**: component on the right of the list item when the item is swiped to the left (in vertical list layout) or component below the list item when the item is swiped up (in horizontal list layout).<br>- **edgeEffect**: scroll effect.<br>|
 
+## Sticky
+| Name| Description|
+| -------- | -------- |
+| None | The list item is not sticky.|
+| Normal | The list item is sticky with no special effects.|
+| Opacity | The list item is sticky with opacity changes.|
 
-## Events
+## EditMode
 
 | Name    | Description       |
+| ------ | --------- |
+| None   | The editing operation is not restricted.   |
+| Deletable | The list item can be deleted.|
+| Movable | The list item can be moved.|
+
+## SwipeEdgeEffect<sup>9+</sup>
+| Name| Description|
 | -------- | -------- |
-| onSelect(callback: (isSelected: boolean) =&gt; any)<sup>8+</sup> | Triggered when the selected state of the **&lt;ListItem&gt;** changes.<br/>**isSelected**: Returns **true** if the **&lt;ListItem&gt;** is selected by the mouse; returns **false** otherwise. | 
+| Spring | When the list item scrolls to the edge of the list, it can continue to scroll for a distance and rebound after being released.|
+| None | The list item cannot scroll beyond the edge of the list|
 
+## Events
 
-## Example
+| Name| Description|
+| -------- | -------- |
+| onSelect(event: (isSelected: boolean) =&gt; void)<sup>8+</sup> | Triggered when the selected state of the **\<ListItem>** changes.<br>**isSelected**: Returns **true** if the **\<ListItem>** is selected by mouse drag; returns **false** otherwise.|
 
 
-```
+## Example
+
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ListItemExample {
@@ -88,3 +98,54 @@ struct ListItemExample {
 ```
 
 ![en-us_image_0000001257138339](figures/en-us_image_0000001257138339.gif)
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct ListItemExample2 {
+  @State message: string = 'Hello World'
+
+  @Builder itemEnd() {
+    Row () {
+      Button("Del").margin("4vp")
+      Button("Set").margin("4vp")
+    }.padding("4vp").justifyContent(FlexAlign.SpaceEvenly)
+  }
+
+  build() {
+    Column() {
+      List({space:10}) {
+        ListItem() {
+          Text(this.message) {
+          }
+          .width('100%')
+          .height(100)
+          .fontSize(16)
+          .textAlign(TextAlign.Center)
+          .borderRadius(10)
+          .backgroundColor(0xFFFFFF)
+        }
+        .swipeAction({ end:this.itemEnd})
+
+        ListItem() {
+          Text(this.message) {
+          }
+          .width('100%')
+          .height(100)
+          .fontSize(16)
+          .textAlign(TextAlign.Center)
+          .borderRadius(10)
+          .backgroundColor(0xFFFFFF)
+        }
+        .swipeAction({ start:this.itemEnd})
+      }
+    }
+    .padding(10)
+    .backgroundColor(0xDCDCDC)
+    .width('100%')
+    .height('100%')
+  }
+}
+```
+![en-us_image_1501929990650](figures/en-us_image_1501929990650.jpg)

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

+# ListItemGroup
+
+The **\<ListItemGroup>** component is used to display list item groups. It must be used with the **[\<List>](ts-container-list.md)** and, if not otherwise specified, takes up the entire width of the **\<List>** component.
+
+> **NOTE**
+>
+> This component is supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version.
+## Usage Guidelines
+If the **listDirection** attribute of the parent **\<List>** component is set to **Axis.Vertical**, the **height** attribute of the **\<ListItemGroup>** component cannot be set. The height of a **\<ListItemGroup>** component is the sum of its header height, footer height, and total height of the list items. If the **listDirection** attribute of the parent **\<List>** component is set to **Axis.Horizontal**, the **width** attribute of the **\<ListItemGroup>** component cannot be set. The width of a **\<ListItemGroup>** component is the sum of its header width, footer width, and total width of the list items.
+
+Currently, the list items in the **\<ListItemGroup>** component cannot be edited, selected, or dragged. That is, the **editable** and **selectable** attributes of these list items do not take effect.
+
+## Child Components
+
+This component supports the **[\<ListItem>](ts-container-listitem.md)** child component.
+
+
+## APIs
+
+ListItemGroup(options?: {header?: CustomBuilder, footer?: CustomBuilder, space?: number | string})
+
+**Parameters**
+
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| header | [CustomBuilder](ts-types.md#custombuilder8) | No|  Header of the **\<ListItemGroup>** component.|
+| footer | [CustomBuilder](ts-types.md#custombuilder8) | No|  Footer of the **\<ListItemGroup>** component.|
+| space | number \| string | No| Spacing between list items. This parameter is valid only between list items, but not between a header and list item or between a footer and list item.|
+
+## Attributes
+
+| Name| Type|  Description|
+| -------- | -------- | -------- |
+| divider | {<br>strokeWidth: [Length](ts-types.md#length),<br>color?: [ResourceColor](ts-types.md#resourcecolor),<br>startMargin?: [Length](ts-types.md#length),<br>endMargin?: [Length](ts-types.md#length)<br>} \| null | Style of the divider for the list items. By default, there is no divider.<br>- **strokeWidth**: stroke width of the divider.<br>- **color**: color of the divider.<br>**startMargin**: distance between the divider and the start of the list.<br>**endMargin**: distance between the divider and the end of the list.|
+
+
+## Example
+
+```ts
+// xxx.ets
+function itemHeadBuilder(text: string) {
+  @Builder function itemHead() {
+    Text(text)
+      .fontSize(20)
+      .backgroundColor(0xAABBCC)
+      .width("100%")
+      .padding(10)
+  }
+  return itemHead
+}
+
+function itemFootBuilder(num: number) {
+  @Builder function itemFoot() {
+    Text('' + num + " lessons in total ")
+      .fontSize(16)
+      .backgroundColor(0xAABBCC)
+      .width("100%")
+      .padding(5)
+  }
+  return itemFoot
+}
+
+@Entry
+@Component
+struct ListItemGroupExample {
+  private timetable: any = [
+    {
+      title: 'Monday',
+      projects: ['Language', 'Math', 'English']
+    },
+    {
+      title: 'Tuesday',
+      projects: ['Physics', 'Chemistry', 'Biologics']
+    },
+    {
+      title: 'Wednesday',
+      projects: ['History', 'Geography', 'Politics']
+    },
+    {
+      title: 'Thursday',
+      projects: ['Art', 'Music', 'Sports']
+    }
+  ]
+
+  build() {
+    Column() {
+      List({ space: 20 }) {
+        ForEach(this.timetable, (item) => {
+          ListItemGroup({ header:itemHeadBuilder(item.title), footer:itemFootBuilder(item.projects.length) }) {
+            ForEach(item.projects, (project) => {
+              ListItem() {
+                Text(project)
+                  .width("100%").height(100).fontSize(20)
+                  .textAlign(TextAlign.Center).backgroundColor(0xFFFFFF)
+              }
+            }, item => item)
+          }
+          .borderRadius(20)
+          .divider({ strokeWidth: 1, color: 0xDCDCDC }) // Divider between lines
+        })
+      }
+      .width('90%')
+      .sticky(StickyStyle.Header|StickyStyle.Footer)
+    }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
+  }
+}
+```
+
+

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

 # Navigator
 
+The **\<Navigator>** component provides redirection.
 
 > **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.
-
-
-## Required Permissions
-
-None
-
-
 ## Child Components
 
-This component can contain child components.
+Supported
 
 
 ## APIs
 
 Navigator(value?: {target: string, type?: NavigationType})
 
-Creates a navigator.
+**Parameters**
+
+| Name| Type      | Mandatory| Description                                      |
+| ------ | -------------- | ---- | ---------------------------------------------- |
+| target | string         | Yes  | Path of the target page to be redirected to.                      |
+| type   | NavigationType | No  | Navigation type.<br>Default value: **NavigationType.Push**|
 
-- Parameters
-  | 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. |
+## NavigationType
 
-- NavigationType enums
-  | 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. |
+| 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.             |
 
 
 ## Attributes
 
-| 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. |
+| Name  | Parameter   | Description                                                        |
+| ------ | ------- | ------------------------------------------------------------ |
+| active | boolean | Whether the **\<Navigator>** component is activated. If the component is activated, the corresponding navigation takes effect.|
+| params | object  | 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.|
+| target | string         | Path of the target page to be redirected to.                      |
+| type   | NavigationType | Navigation mode.<br>Default value: **NavigationType.Push**|
 
 
 ## Example
 
-
 ```ts
 // Navigator.ets
 @Entry
@@ -76,7 +70,6 @@ struct NavigatorExample {
 }
 ```
 
-
 ```ts
 // Detail.ets
 import router from '@system.router'

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

@@ -7,63 +7,61 @@ The **<Panel\>** component is a slidable panel that presents lightweight content
 >  This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-## Required Permissions
-
-None
-
-
 ## Child Components
 
-This component can contain child components.
+Supported
 
 
 ## APIs
 
-Panel(value:{show:boolean})
+Panel(show: boolean)
 
-- Parameters
-  | Name | Type | Mandatory | Default Value | Description |
-  | -------- | -------- | -------- | -------- | -------- |
-  | show | boolean | Yes | - | Whether to show or hide the panel. |
+**Parameters**
+
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| show | boolean | Yes| Whether the panel is shown or hidden.|
 
 
 ## Attributes
 
-| Name | Type | Default Value | Description |
-| -------- | -------- | -------- | -------- |
-| type | PanelType | PanelType.Foldable | Type of the panel. |
-| mode | PanelMode | - | Initial status of the panel. |
-| dragBar | boolean | true | Whether to enable a drag bar. The value **true** means to display the drag bar, and **false** means the opposite. |
-| fullHeight | Length | - | Panel height in the **PanelMode.Full** mode. |
-| halfHeight | Length | - | Panel height in the **PanelMode.Half** mode. The default value is half of the screen height. |
-| miniHeight | Length | - | Panel height in the **PanelMode.Mini** mode. |
-| backgroundMask<sup>9+</sup>|(color: ResourceColor)| - |Background mask of the panel.|
-
-- PanelType enums
-  | Name | Description |
-  | -------- | -------- |
-  | Minibar | A minibar panel that displays content in the minibar area or a large (fullscreen-like) area. |
-  | Foldable | A foldable panel that displays permanent content in a large (fullscreen-like), medium-sized (halfscreen-like), or small area. |
-  | Temporary | A temporary panel that displays content in a large (fullscreen-like) or medium-sized (halfscreen-like) area. |
-
-- PanelMode enums
-  | Name | Description |
-  | -------- | -------- |
-  | Mini | Display of a minibar or foldable panel in its minimum size. This attribute does not take effect for **temporary** panels. |
-  | Half | Display of a foldable or temporary panel in a medium-sized (halfscreen-like) area. This attribute does not take effect for **minibar** panels. |
-  | Full | Display of a panel in a large (fullscreen-like) area. |
+| Name| Type| Description|
+| -------- | -------- | -------- |
+| type | PanelType | Type of the panel.<br>Default value: **PanelType.Foldable**|
+| mode | PanelMode | Initial status of the panel.|
+| dragBar | boolean | Whether to enable a drag bar. The value **true** means that the drag bar will be displayed, and **false** means the opposite.<br>Default value: **true**|
+| fullHeight | string \| number | Panel height in the **PanelMode.Full** mode.|
+| halfHeight | string \| number | Panel height in the **PanelMode.Half** mode. The default value is half of the screen height.|
+| miniHeight | string \| number | Panel height in the **PanelMode.Mini** mode.|
+| show | boolean | Whether to show the panel.|
+| backgroundMask<sup>9+</sup>|[ResourceColor](ts-types.md#resourcecolor)|Background mask of the panel.|
+
+## PanelType
+
+| Name| Description|
+| -------- | -------- |
+| Minibar | A minibar panel displays content in the minibar area or a large (fullscreen-like) area.|
+| Foldable | A foldable panel displays permanent content in a large (fullscreen-like), medium-sized (halfscreen-like), or small area.|
+| Temporary | A temporary panel displays content in a large (fullscreen-like) or medium-sized (halfscreen-like) area.|
+
+## PanelMode
+
+| Name| Description|
+| -------- | -------- |
+| Mini | Displays a **minibar** or **foldable** panel in its minimum size. This attribute does not take effect for **temporary** panels.|
+| Half | Displays a **foldable** or **temporary** panel in a medium-sized (halfscreen-like) area. This attribute does not take effect for **minibar** panels.|
+| Full | Displays a panel in a large (fullscreen-like) area.|
 
 
 ## Events
 
-| Name | Description |
+| Name| Description|
 | -------- | -------- |
-| onChange(callback: (width: number, height: number, mode: PanelMode) =&gt; void) | Triggered when the panel status changes. The returned **height** value is the height of the content area. When the value of **dragbar** is **true**, the panel height is the height of the drag bar plus the height of the content area. |
-| onHeightChange(callback: (value: number) => void)<sup>9+</sup> |Triggered when the panel height changes. The returned **height** value is the height of the content area. When the value of **dragbar** is **true**, the panel height is the height of the drag bar plus the height of the content area. For user experience purposes, the panel can be slid to only this height: **fullHeight** - 8 vp. |
+| onChange(event: (width: number, height: number, mode: PanelMode) =&gt; void) | Triggered when the status of the panel changes. The returned height value is the height of the content area. When the value of **dragBar** is **true**, the height of the panel is the **dragBar** height plus the height of the content area.|
+| onHeightChange(callback: (value: number) => void)<sup>9+</sup> |Triggered when the status of the panel changes. The returned height value is the height of the content area. When the value of **dragBar** is **true**, the height of the panel is the **dragBar** height plus the height of the content area. For user experience purposes, the panel can be slid to only this height: **fullHeight** - 8 vp.|
 
 ## Example
 
-
 ```ts
 // xxx.ets
 @Entry
@@ -87,8 +85,8 @@ struct PanelExample {
         }
       }
       .type(PanelType.Foldable).mode(PanelMode.Half)
-      .dragBar(true) // The drag bar is enabled by default.
-      .halfHeight(500) // The default value is half of the screen height.
+      .dragBar(true) // The dragbar is enabled by default.
+      .halfHeight(500) // The panel height is half of the screen height by default.
       .onChange((width: number, height: number, mode: PanelMode) => {
         console.info(`width:${width},height:${height},mode:${mode}`)
       })

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

@@ -6,25 +6,21 @@
 >
 >  This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions
-
-None
-
 ## Child Components
 
 This component supports only one child component.
 
 ## APIs
 
-Refresh\(value: \{ refreshing: boolean, offset?: Length, friction?: number | string \}\)
+Refresh\(value: \{ refreshing: boolean, offset?:  number | string , friction?: number | string \}\)
 
-- Parameters
+**Parameters**
 
-  | Name| Value Type| Mandatory| Default Value| Description|
-  | -------- | -------- | -------- | -------- | -------- |
-  | refreshing | boolean | Yes| - | Whether the current component is being refreshed.<br/>This parameter can be used with [$$](../../ui/ts-syntactic-sugar.md) for two-way binding of variables. |
-  | offset | Length | No| 16 | Distance to the top of the parent component from the **<Refresh\>** component that comes to rest after a successful pull-down gesture.|
-  | friction | number&nbsp;\|&nbsp;string | No| 62 | Coefficient of friction, which indicates the **<Refresh\>** component's sensitivity to the pull-down gesture. The value ranges from 0 to 100.<br>- **0** indicates that the **\<Refresh>** component is not sensitive to the pull-down gesture.<br>- **100** indicates that the **\<Refresh>** component is highly sensitive to the pull-down gesture.<br>- A larger value indicates a more sensitive response of the **\<Refresh>** component to the pull-down gesture.|
+| Name| Value Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| refreshing | boolean | Yes| Whether the current component is being refreshed.<br>This parameter can be used with [$$](../../ui/ts-syntactic-sugar.md) for two-way binding of variables.|
+| offset | string \| number | No| Distance to the top of the parent component from the **<Refresh\>** component that comes to rest after a successful pull-down gesture.<br>Default value: **16**, in vp|
+| friction | number \| string | No| Coefficient of friction, which indicates the **<Refresh\>** component's sensitivity to the pull-down gesture. The value ranges from 0 to 100.<br>Default value: **62**<br>- **0** indicates that the **\<Refresh>** component is not sensitive to the pull-down gesture.<br>- **100** indicates that the **\<Refresh>** component is highly sensitive to the pull-down gesture.<br>- A larger value indicates a more sensitive response of the **\<Refresh>** component to the pull-down gesture.|
 
 
 
@@ -33,18 +29,18 @@ Refresh\(value: \{ refreshing: boolean, offset?: Length, friction?: number | str
 
 | Name| Description|
 | -------- | -------- |
-| onStateChange(callback: (state: RefreshStatus) => void)| Triggered when the refresh status changes.<br>**state**: refresh status.|
+| onStateChange(callback: (state: RefreshStatus) => void)| Triggered when the refresh status changes.<br>- **state**: refresh status.|
 | onRefreshing(callback: () => void)| Triggered when the component enters the refresh state.|
 
-- RefreshStatus enums
+## RefreshStatus enums
 
-  | Name| Description|
-  | -------- | -------- |
-  | Inactive | The component is not pulled down. This is the default value.|
-  | Drag | The component is being pulled down, but the pulled distance is shorter than the minimum length required to trigger the refresh.|
-  | OverDrag | The component is being pulled down, and the pulled distance exceeds the minimum length required to trigger the refresh.|
-  | Refresh | The pull-down ends, and the component rebounds to the minimum length required to trigger the refresh and enters the refresh state.|
-  | Done | The refresh is complete, and the component returns to the initial state (top).|
+| Name| Description|
+| -------- | -------- |
+| Inactive | The component is not pulled down. This is the default value.|
+| Drag | The component is being pulled down, but the pulled distance is shorter than the minimum length required to trigger the refresh.|
+| OverDrag | The component is being pulled down, and the pulled distance exceeds the minimum length required to trigger the refresh.|
+| Refresh | The pull-down ends, and the component rebounds to the minimum length required to trigger the refresh and enters the refresh state.|
+| Done | The refresh is complete, and the component returns to the initial state (top).|
 
 
 ## Example

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

@@ -6,8 +6,6 @@ The **\<RelativeContainer>** component is used for element alignment in complex
 >
 >  This component is supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version.
 
-
-
 ## Rules 
 
  * Components in a container are aligned horizontally or vertically. 

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

 # Row
 
+The **<Row\>** component lays out child components horizontally.
+
 >  **NOTE**
 >
 >  This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-The **<Row\>** component lays out child components horizontally.
-
-
-## Required Permissions
-
-None
-
-
 ## Child Components
 
 Supported
@@ -20,20 +14,21 @@ Supported
 
 ## APIs
 
-Row(value?:{space?: Length})
+Row(value?:{space?:  number | string })
 
-- Parameters
-  | Name| Type| Mandatory| Default Value| Description|
-  | -------- | -------- | -------- | -------- | -------- |
-  | space | Length | No| 0 | Space between two adjacent child components in the horizontal layout.|
+**Parameters**
+
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| space | string \| number | No| Space between two adjacent child components in the horizontal layout.<br>Default value: **0**|
 
 
 ## Attributes
 
-| Name| Type| Default Value| Description|
-| -------- | -------- | -------- | -------- |
-| alignItems | [VerticalAlign](ts-appendix-enums.md#verticalalign) | VerticalAlign.Center | Alignment mode of the child components in the vertical direction.|
-| justifyContent<sup>8+</sup> | [FlexAlign](ts-appendix-enums.md#flexalign) | FlexAlign.Start | Alignment mode of the child components in the horizontal direction.|
+| Name| Type| Description|
+| -------- | -------- | -------- |
+| alignItems | [VerticalAlign](ts-appendix-enums.md#verticalalign) | Alignment mode of child components in the vertical direction.<br>Default value: **VerticalAlign.Center**|
+| justifyContent<sup>8+</sup> | [FlexAlign](ts-appendix-enums.md#flexalign) | Alignment mode of the child components in the horizontal direction.<br>FlexAlign.Start |
 
 
 ## Example
@@ -79,4 +74,4 @@ struct RowExample {
 }
 ```
 
-![en-us_image_0000001174422908](figures/row.png)
+![en_us_image_0000001174422908](figures/row.png)

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

 # RowSplit
 
-
-> **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 **<RowSplit\>** component lays out child components horizontally and inserts a vertical divider between every two child components.
+The **\<RowSplit>** lays out child components horizontally and inserts a vertical divider between every two child components.
 
 
 ## Required Permissions
@@ -15,7 +14,7 @@ None
 
 ## Child Components
 
-This component can contain child components.
+Supported
 
 
 ## APIs
@@ -25,18 +24,18 @@ RowSplit()
 
 ## Attributes
 
-| Name | Type | Description |
+| Name| Type| Description| 
 | -------- | -------- | -------- |
-| resizeable | boolean | Whether the divider is draggable. The default value is **false**. |
+| resizeable | boolean | Whether the divider can be dragged. The default value is **false**.| 
 
-> **NOTE**<br>
-> Similar to **<RowSplit\>**, the divider of **<RowSplit\>** can be dragged to a position that just fully holds a component.
+>  **NOTE**
+> Similar to **\<RowSplit>**, the divider of **\<RowSplit>** can be dragged to a position that just fully holds a component.
 
 
 ## Example
 
-
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct RowSplitExample {

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

 # Scroll
 
+The **\<Scroll>** component scrolls the content when the layout size of a component exceeds the size of its parent component.
+
 >  **NOTE**
 >  - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 >  - When nesting a **\<List>** within this component, specify the width and height for the **\<List>** under scenarios where consistently high performance is required. If the width and height are not specified, this component will load all content of the **\<List>**.
->  - This component can produce a bounce effect only when there is more than one screen of content.
-
-
-The **\<Scroll>** component scrolls the content when the layout size of a component exceeds the viewport of its parent component.
-
-
-## Required Permissions
-
-None.
+>  - This component can scroll only when the size on the main axis is less than the content size.
+>  - The prerequisite for the component to rebound is that the component is scrolled.
 
 
 ## Child Components
@@ -23,47 +18,42 @@ This component supports only one child component.
 
 Scroll(scroller?: Scroller)
 
-
 ## Attributes
 
-| Name            | Type                                    | Default Value                     | Description       |
-| -------------- | ---------------------------------------- | ------------------------ | --------- |
-| scrollable     | ScrollDirection                          | ScrollDirection.Vertical | Scroll method.  |
-| scrollBar      | [BarState](ts-appendix-enums.md#barstate) | BarState.Off     | Scrollbar status. |
-| scrollBarColor | string&nbsp;\|&nbsp;number&nbsp;\|&nbsp;Color   | -                  | Color of the scrollbar.|
-| scrollBarWidth | Length                                   | -                        | Width of the scrollbar.|
-| edgeEffect     | EdgeEffect                               | EdgeEffect.Spring | Scroll effect. For details, see **EdgeEffect**.|
+In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
 
-## ScrollDirection
-  | Name        | Description        |
-  | ---------- | ---------- |
-  | Horizontal | Only horizontal scrolling is supported.|
-  | Vertical   | Only vertical scrolling is supported.|
-  | None       | Scrolling is disabled.     |
-
-## EdgeEffect
+| Name            | Type                                    | Description       |
+| -------------- | ---------------------------------------- | --------- |
+| scrollable     | ScrollDirection                          | Scroll direction.<br>Default value: **ScrollDirection.Vertical**|
+| scrollBar      | [BarState](ts-appendix-enums.md#barstate) | Scrollbar status.<br>Default value: **BarState.Off**|
+| scrollBarColor | string \| number \| Color   | Color of the scrollbar.|
+| scrollBarWidth | string \| number         | Width of the scrollbar.|
+| edgeEffect     | [EdgeEffect](ts-appendix-enums.md#edgeeffect)            | Scroll effect. For details, see **EdgeEffect**.<br>Default value: **EdgeEffect.Spring**|
 
+## ScrollDirection
 | Name      | Description                    |
-| ------ | ---------------------------------------- |
-| Spring | Spring effect. When at one of the edges, the component can move beyond the bounds through touches, and produces a bounce effect when the user releases their finger.|
-| Fade   | Fade effect. When at one of the edges, the component produces a fade effect.         |
-| None   | No effect when the component is at one of the edges.                              |
+| ---------- | ------------------------ |
+| Horizontal | Only horizontal scrolling is supported.    |
+| Vertical   | Only vertical scrolling is supported.    |
+| None       | Scrolling is disabled.              |
+| Free<sup>(deprecated) </sup> | Vertical or horizontal scrolling is supported.<br> This API is deprecated since API version 9.|
 
 ## Events
 
 | Name                                                        | Description                                                    |
-| ---------------------------------------- | ----------------------------- |
-| onScrollBegin<sup>9+</sup>(dx: number, dy: number)&nbsp;=&gt;&nbsp;{ dxRemain: number, dyRemain: number } | Invoked when scrolling starts.<br>Parameters:<br>- **dx**: amount to scroll by in the horizontal direction.<br>- **dy**: amount to scroll by in the vertical direction.<br>Return value:<br>- **dxRemain**: remaining amount to scroll by in the horizontal direction.<br>- **dyRemain**: remaining amount to scroll by in the vertical direction.|
-| onScroll(event: (xOffset: number, yOffset: number) => void) | Invoked to return the horizontal and vertical offsets during scrolling when the specified scroll event occurs.|
+| ------------------------------------------------------------ | ------------------------------------------------------------ |
+| onScrollBegin<sup>9+</sup>(event: (dx: number, dy: number) => { dxRemain: number, dyRemain: number }) | Invoked when scrolling starts.<br>Parameters:<br>- **dx**: amount to scroll by in the horizontal direction.<br>- **dy**: amount to scroll by in the vertical direction.<br>Return value:<br>- **dxRemain**: remaining amount to scroll by in the horizontal direction.<br>- **dyRemain**: remaining amount to scroll by in the vertical direction.|
+| onScroll(event: (xOffset: number, yOffset: number) => void)  | Invoked to return the horizontal and vertical offsets during scrolling when the specified scroll event occurs.         |
 | onScrollEdge(event: (side: Edge) => void)                    | Invoked when scrolling reaches the edge.                                        |
 | onScrollEnd(event: () => void)                               | Invoked when scrolling stops.                                          |
 
 >  **NOTE**
+>
 >  If the **onScrollBegin** event and **scrollBy** API are used to implement nested scrolling, you must set **edgeEffect** of the scrolling child node to **None**. For example, if a **\<List>** is nested in the **\<Scroll>** component, the **edgeEffect** attribute of the **\<List>** must be set to **EdgeEffect.None**.
 
 ## Scroller
 
-Implements a controller for a scrollable container component. You can bind this component to a container component and use it to control the scrolling of that component. Currently, this component can be bound to the **\<Scroll>** and **\<ScrollBar>** components.
+Implements a controller for a scrollable container component. You can bind this component to a container component and use it to control the scrolling of that component. Currently, this controller can be bound to the **\<List>**, **\<Scroll>** and **\<ScrollBar>** components. One controller can control only one container component.
 
 
 ### Objects to Import
@@ -80,13 +70,13 @@ scrollTo(value: { xOffset: number | string, yOffset: number | string, animation?
 
 Scrolls to the specified position.
 
+**Parameters**
 
-- Parameters
-  | Name      | Type                                    | Mandatory  | Default Value | Description                                    |
-  | --------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
-  | xOffset   | Length                                   | Yes   | -    | Horizontal scrolling offset.                                 |
-  | yOffset   | Length                                   | Yes   | -    | Vertical scrolling offset.                                 |
-  | animation | {<br>duration:&nbsp;number,<br>curve:&nbsp;[Curve](ts-animatorproperty.md)&nbsp;\|<br>CubicBezier&nbsp;\|<br>SpringCurve<br>} | No   |      | Animation configuration, which includes the following:<br>- **duration**: scrolling duration.<br>- **curve**: scrolling curve.|
+| Name   | Type                                                    | Mandatory| Description                                                    |
+| --------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
+| xOffset   | Length                                                       | Yes  | Horizontal scrolling offset.                                              |
+| yOffset   | Length                                                       | Yes  | Vertical scrolling offset.                                              |
+| animation | {<br>duration: number,<br>curve: [Curve](ts-animatorproperty.md)<br>} | No  | Animation configuration, which includes the following:<br>- **duration**: scrolling duration.<br>- **curve**: scrolling curve.|
 
 
 ### scrollEdge
@@ -96,13 +86,11 @@ scrollEdge(value: Edge): void
 
 Scrolls to the edge of the container.
 
+**Parameters**
 
-- Parameters
-  | Name  | Type| Mandatory  | Default Value | Description     |
-  | ----- | ---- | ---- | ---- | --------- |
-  | value | [Edge](ts-appendix-enums.md#edge) | Yes   | -    | Edge position to scroll to.|
-
-
+| Name  | Type| Mandatory  | Description     |
+| ----- | ---- | ---- | --------- |
+| value | [Edge](ts-appendix-enums.md#edge) | Yes   | Edge position to scroll to.|
 
 
 ### scrollPage
@@ -111,25 +99,26 @@ scrollPage(value: { next: boolean, direction?: Axis }): void
 
 Scrolls to the next or previous page.
 
-- Parameters
-  | Name      | Type   | Mandatory  | Default Value | Description                          |
-  | --------- | ------- | ---- | ---- | ------------------------------ |
-  | next      | boolean | Yes   | -    | Whether to turn to the next page. The value **true** means to scroll to the next page, and **false** means to scroll to the previous page.|
-  | direction | [Axis](ts-appendix-enums.md#axis)    | No   | -    | Scrolling direction: horizontal or vertical.               |
+**Parameters**
+
+| Name      | Type   | Mandatory  | Description                          |
+| --------- | ------- | ---- | ------------------------------ |
+| next      | boolean | Yes   | Whether to turn to the next page. The value **true** means to scroll to the next page, and **false** means to scroll to the previous page.|
+| direction<sup>(deprecated) </sup> | [Axis](ts-appendix-enums.md#axis)    | No   | Scrolling direction: horizontal or vertical.<br> This API is deprecated since API version 9.               |
 
 
 ### currentOffset
 
-currentOffset(): Object
+currentOffset()
 
 
 Obtains the scrolling offset.
 
+**Return value**
 
-- Return value
-  | Type                                      | Description                                      |
-  | ---------------------------------------- | ---------------------------------------- |
-  | {<br>xOffset:&nbsp;number,<br>yOffset:&nbsp;number<br>} | **xOffset**: horizontal scrolling offset.<br>**yOffset**: vertical scrolling offset.|
+| Type                                      | Description                                      |
+| ---------------------------------------- | ---------------------------------------- |
+| {<br>xOffset: number,<br>yOffset: number<br>} | **xOffset**: horizontal scrolling offset.<br>**yOffset**: vertical scrolling offset.|
 
 
 ### scrollToIndex
@@ -141,16 +130,17 @@ Scrolls to the item with the specified index.
 
 
 >  **NOTE**
+>
 >  Only the **\<List>** component is supported.
 
+**Parameters**
 
-- Parameters
-  | Name  | Type  | Mandatory  | Default Value | Description             |
-  | ----- | ------ | ---- | ---- | ----------------- |
-  | value | number | Yes   | -    | Index of the item to be scrolled to in the list.|
+| Name| Type| Mandatory| Description                          |
+| ------ | -------- | ---- | ---------------------------------- |
+| value  | number   | Yes  | Index of the item to be scrolled to in the list.|
 
 
-### scrollBy
+### scrollBy<sup>9+</sup>
 
 scrollBy(dx: Length, dy: Length): void
 
@@ -159,14 +149,15 @@ Scrolls by the specified amount.
 
 
 >  **NOTE**
+>
 >  Only the **\<Scroll>** component is supported.
 
+**Parameters**
 
-- Parameters
-  | Name  | Type  | Mandatory  | Default Value | Description             |
-  | ----- | ------ | ---- | ---- | ----------------- |
-  | dx | Length | Yes   | -    | Amount to scroll by in the horizontal direction.|
-  | dy | Length | Yes   | -    | Amount to scroll by in the vertical direction.|
+| Name  | Type  | Mandatory  | Description             |
+| ----- | ------ | ---- | ----------------- |
+| dx | Length | Yes   | Amount to scroll by in the horizontal direction. The percentage format is not supported.|
+| dy | Length | Yes   | Amount to scroll by in the vertical direction. The percentage format is not supported.|
 
 
 ## Example
@@ -209,21 +200,26 @@ struct ScrollExample {
         console.info('Scroll Stop')
       })
       
+      Button('scroll 150')
+        .onClick(() => { // Click to scroll down to 150.0 vp.
+          this.scroller.scrollBy(0,150)
+        })
+        .margin({ top: 10, left: 20 })
       Button('scroll 100')
-        .onClick(() => { // Click to scroll down 100.0.
+        .onClick(() => { // Click to scroll down by 100.0 vp.
           this.scroller.scrollTo({ xOffset: 0, yOffset: this.scroller.currentOffset().yOffset + 100 })
         })
-        .margin({ top: 10, left: 20 })
+        .margin({ top: 60, left: 20 })
       Button('back top')
         .onClick(() => { // Click to go back to the top.
           this.scroller.scrollEdge(Edge.Top)
         })
-        .margin({ top: 60, left: 20 })
+        .margin({ top: 110, left: 20 })
       Button('next page')
-        .onClick(() => { // Click to scroll down to the bottom.
+        .onClick(() => { // Click to go to the next page.
           this.scroller.scrollPage({ next: true })
         })
-        .margin({ top: 110, left: 20 })
+        .margin({ top: 170, left: 20 })
     }.width('100%').height('100%').backgroundColor(0xDCDCDC)
   }
 }

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

 # SideBarContainer
 
+The **\<SideBarContainer>** component contains a sidebar and content area as its child components. The sidebar is the first child component and can be shown or hidden as needed. The content area is the second child component.
+
 >  **NOTE**
 >
 >  This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-The **\<SideBarContainer>** component contains a sidebar and content area as its child components. The sidebar is the first child component and can be shown or hidden as needed. The content area is the second child component.
-
-
-## Required Permissions
-
-None
-
-
 ## Child Components
 
 Supported
@@ -22,46 +16,55 @@ Supported
 
 SideBarContainer( type?: SideBarContainerType )
 
-- Parameters
-  | Name| Type| Mandatory| Default Value| Description|
-  | -------- | -------- | -------- | -------- | -------- |
-  | type | SideBarContainerType | No| SideBarContainerType.Embed | Display type of the sidebar.|
+**Parameters**
+
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| type | SideBarContainerType | No| Display type of the sidebar.<br>Default value: **SideBarContainerType.Embed**|
+
+## SideBarContainerType enums
 
-- SideBarContainerType enums
-  | Name| Description|
-  | -------- | -------- |
-  | Embed | The sidebar is embedded in the component and displayed side by side with the content area.|
-  | Overlay | The sidebar is displayed overlaid on the content area.|
+| Name| Description|
+| -------- | -------- |
+| Embed | The sidebar is embedded in the component and displayed side by side with the content area.|
+| Overlay | The sidebar is displayed overlaid on the content area.|
 
 ## Attributes
 
-| Name| Type| Default Value| Description|
+| Name| Type| Description|
+| -------- | -------- | -------- |
+| showSideBar | boolean | Whether to display the sidebar.<br>Default value: **true**|
+| controlButton | ButtonStyle                                                | Attributes of the sidebar control button.|
+| showControlButton | boolean | Whether to display the sidebar control button.<br>Default value: **true**|
+| sideBarWidth | number \| Length<sup>9+</sup> | Width of the sidebar.<br>Default value: **200**, in vp|
+| minSideBarWidth | number \| Length<sup>9+</sup> | Minimum width of the sidebar.<br>Default value: **200**, in vp|
+| maxSideBarWidth | number \| Length<sup>9+</sup> | Maximum width of the sidebar.<br>Default value: **280**, in vp|
+| autoHide<sup>9+</sup> | boolean | Whether to automatically hide the sidebar when it is dragged to be smaller than the minimum width.<br>Default value: **true**|
+| sideBarPosition<sup>9+</sup> | SideBarPosition | Position of the sidebar.<br>Default value: **SideBarPosition.Start**|
+
+## ButtonStyle
+
+| Name| Type| Mandatory| Description|
 | -------- | -------- | -------- | -------- |
-| showSideBar | boolean | true | Whether to display the sidebar.|
-| controlButton | ButtonStyle                                                | - | Attributes of the sidebar control button.|
-| showControlButton | boolean | true | Whether to display the sidebar control button.|
-| sideBarWidth | number \| [Length<sup>9+</sup>](../../ui/ts-types.md#length-type)| 200 | Width of the sidebar.|
-| minSideBarWidth | number \| [Length<sup>9+</sup>](../../ui/ts-types.md#length-type)| 200 | Minimum width of the sidebar.|
-| maxSideBarWidth | number \| [Length<sup>9+</sup>](../../ui/ts-types.md#length-type)| 280 | Maximum width of the sidebar.|
-| autoHide<sup>9+</sup> | boolean | true | Whether to automatically hide the sidebar when it is dragged to be smaller than the minimum width.|
-| sideBarPosition<sup>9+</sup> | SideBarPosition | SideBarPosition.Start | Position of the sidebar.|
-
-- ButtonStyle
-  | Name| Type| Mandatory| Default Value| Description|
-  | -------- | -------- | -------- | -------- | -------- |
-  | left | number | No| 16 | Spacing between the sidebar control button and the left of the container.|
-  | top | number | No| 48 | Spacing between the sidebar control button and the top of the container.|
-  | width | number | No| 32 | Width of the sidebar control button.|
-  | height | number | No| 32 | Height of the sidebar control button.|
-  | icons | {<br>shown:&nbsp;string \| PixelMap \| [Resource](../../ui/ts-types.md) ,<br>hidden:&nbsp;string \| PixelMap \| [Resource](../../ui/ts-types.md) ,<br>switching?:&nbsp;string \| PixelMap \| [Resource](../../ui/ts-types.md) <br>} | No| - | Icons of the sidebar control button.<br> </p> - **shown**: icon of the control button when the sidebar is shown.<br>- **hidden**: icon of the control button when the sidebar is hidden.<br>- **switching**: icon of the control button when the sidebar is switching between the shown and hidden states.|
-
-- SideBarPosition<sup>9+</sup>
-  | Name| Description|
-  | -------- | -------- |
-  | Start | The sidebar is on the left side of the container.|
-  | End | The sidebar is on the right side of the container.|
+| left | number | No| Spacing between the sidebar control button and the left of the container.<br>Default value: **16**, in vp|
+| top | number | No| Spacing between the sidebar control button and the top of the container.<br>Default value: **48**, in vp|
+| width | number | No| Width of the sidebar control button.<br>Default value: **32**, in vp|
+| height | number | No| Height of the sidebar control button.<br>Default value: **32**, in vp|
+| icons | {<br>shown: string \| PixelMap \| [Resource](ts-types.md#resource) ,<br>hidden: string \| PixelMap \| [Resource](ts-types.md#resource) ,<br>switching?: string \| PixelMap \| [Resource](ts-types.md#resource) <br>} | No| Icons of the sidebar control button.<br> </p> - **shown**: icon of the control button when the sidebar is shown.<br>- **hidden**: icon of the control button when the sidebar is hidden.<br>- **switching**: icon of the control button when the sidebar is switching between the shown and hidden states.|
 
+## SideBarPosition<sup>9+</sup>
 
+| Name| Description|
+| -------- | -------- |
+| Start | The sidebar is on the left side of the container.|
+| End | The sidebar is on the right side of the container.|
+
+## SideBarPosition<sup>9+</sup>
+
+| Name| Description|
+| -------- | -------- |
+| Start | The sidebar is on the left side of the container.|
+| End | The sidebar is on the right side of the container.|
 
 ## Events
 
@@ -77,8 +80,8 @@ SideBarContainer( type?: SideBarContainerType )
 @Entry
 @Component
 struct SideBarContainerExample {
-  normalIcon : Resource = $r("app.media.user")
-  selectedIcon: Resource = $r("app.media.userFull")
+  normalIcon : Resource = $r("app.media.icon")
+  selectedIcon: Resource = $r("app.media.icon")
   @State arr: number[] = [1, 2, 3]
   @State current: number = 1
 
@@ -101,18 +104,17 @@ struct SideBarContainerExample {
       }.width('100%')
       .justifyContent(FlexAlign.SpaceEvenly)
       .backgroundColor('#19000000')
-      RowSplit() {
-        Column(){
-          Text('Split page one').fontSize(30)
-        }.justifyContent(FlexAlign.Center)
-        Column(){
-          Text('Split page two').fontSize(30)
-        }.justifyContent(FlexAlign.Center)
-      }.width('100%')
+
+
+      Column() {
+        Text('SideBarContainer content text1').fontSize(25)
+        Text('SideBarContainer content text2').fontSize(25)
+      }
+      .margin({ top: 50, left: 20, right: 30 })
     }
-    .sideBarWidth(240)
-    .minSideBarWidth(210)
-    .maxSideBarWidth(260)
+    .sideBarWidth(150)
+    .minSideBarWidth(50)
+    .maxSideBarWidth(300)
     .onChange((value: boolean) => {
       console.info('status:' + value)
     })

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

 # Stack
 
+The **\<Stack>** component provides a stack container where child components are successively stacked and the latter one overwrites the previous one.
 
-> **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 **<Stack\>** component provides a stack container where child components are successively stacked and the latter one overwrites the previous one.
-
-
-## Required Permissions
-
-None
-
-
 ## Child Components
 
- Supported
+Supported
 
 
 ## APIs
 
-Stack(value:{alignContent?: Alignment})
+Stack(value?: { alignContent?: Alignment })
 
-- Parameters
-  | Name | Type | Mandatory | Default Value | Description |
-  | -------- | -------- | -------- | -------- | -------- |
-  | alignContent | [Alignment](ts-appendix-enums.md#alignment-enums) | No | Center | Alignment of child components in the container. |
+**Parameters**
 
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| alignContent | [Alignment](ts-appendix-enums.md#alignment) | No| Alignment of child components in the container.<br>Default value: **Alignment.Center**|
 
-## Example
 
+## Example
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct StackExample {

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

 # Swiper
 
-
-The **\<Swiper>** component provides a container that allows users to switch among child components using swipe gestures.
+ The **\<Swiper>** component is able to display child components in looping mode.
 
 > **NOTE**
 >
 > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-## Required Permissions
-
-None
-
-
 ## Child Components
 
 This component can contain child components.
@@ -20,18 +14,18 @@ This component can contain child components.
 
 ## APIs
 
-Swiper(value:{controller?: SwiperController})
+Swiper(controller?: SwiperController)
 
 **Parameters**
 
 | Name       | Type                          | Mandatory | Description                |
 | ---------- | ------------------------------------- | ---- | -------------------- |
-| controller | [SwiperController](#swipercontroller) | No  | Controller bound to the component to control the page switching.<br>Default value: **null** |
+| controller | [SwiperController](#swipercontroller) | No  | Controller bound to the component to control the page switching.|
 
 
 ## Attributes
 
-[Menu control](ts-universal-attributes-menu.md) is not supported.
+In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. [Menu control](ts-universal-attributes-menu.md) is not supported.
 
 | Name                         | Type                              | Description                                      |
 | --------------------------- | ---------------------------------------- | ---------------------------------------- |
@@ -42,12 +36,12 @@ Swiper(value:{controller?: SwiperController})
 | loop                        | boolean                                  | Whether to enable loop playback.<br>The value **true** means to enable loop playback. When LazyForEach is used, it is recommended that the number of the components to load exceed 5.<br>Default value: **true**|
 | duration                    | number                                   | Duration of the animation for switching child components, in ms.<br>Default value: **400**                       |
 | vertical                    | boolean                                  | Whether vertical swiping is used.<br>Default value: **false**                                |
-| itemSpace                   | Length                                   | Space between child components.<br>Default value: **0**                          |
+| itemSpace                   | number \| string          | Space between child components.<br>Default value: **0**                          |
 | displayMode                 | SwiperDisplayMode                        | Mode in which elements are displayed along the main axis. This attribute takes effect only when **displayCount** is not set.<br>Default value: **SwiperDisplayMode.Stretch**|
 | cachedCount<sup>8+</sup>    | number                                   | Number of child components to be cached.<br>Default value: **1**                             |
 | disableSwipe<sup>8+</sup>   | boolean                                  | Whether to disable the swipe feature.<br>Default value: **false**                             |
-| curve<sup>8+</sup>          | [Curve](ts-appendix-enums.md#curve) \| string | Animation curve. The ease-in/ease-out curve is used by default. For details about common curves, see [Curve](ts-appendix-enums.md#curve). You can also create custom curves ([interpolation curve objects](ts-interpolation-calculation.md)) by using the API provided by the interpolation calculation module.<br>Default value: **Curve.Ease** |
-| indicatorStyle<sup>8+</sup> | {<br/>left?:&nbsp;Length,<br/>top?:&nbsp;Length,<br/>right?:&nbsp;Length,<br/>bottom?:&nbsp;Length,<br/>size?:&nbsp;Length,<br/>mask?:&nbsp;boolean,<br/>color?:&nbsp;[ResourceColor](../../ui/ts-types.md),<br/>selectedColor?:&nbsp;[ResourceColor](../../ui/ts-types.md)<br/>} | Style of the navigation dots indicator.<br>- **left**: distance between the navigation dots indicator and the left edge of the **\<Swiper>** component.<br>- **top**: distance between the navigation dots indicator and the top edge of the **\<Swiper>** component.<br>- **right**: distance between the navigation dots indicator and the right edge of the **\<Swiper>** component.<br>- **bottom**: distance between the navigation dots indicator and the bottom edge of the **\<Swiper>** component.<br>- **size**: diameter of the navigation dots indicator.<br>- **color**: color of the navigation dots indicator.<br>- **selectedColor**: color of the selected navigation dot.|
+| curve<sup>8+</sup>          | [Curve](ts-appendix-enums.md#curve)  \| string | Animation curve. The ease-in/ease-out curve is used by default. For details about common curves, see [Curve](ts-appendix-enums.md#curve). You can also create custom curves ([interpolation curve objects](ts-interpolation-calculation.md)) by using the API provided by the interpolation calculation module.<br>Default value: **Curve.Ease**|
+| indicatorStyle<sup>8+</sup> | {<br>left?: [Length](ts-types.md#length),<br>top?: [Length](ts-types.md#length),<br>right?: [Length](ts-types.md#length),<br>bottom?: [Length](ts-types.md#length),<br>size?: [Length](ts-types.md#length),<br>mask?: boolean,<br>color?: [ResourceColor](ts-types.md#resourcecolor),<br>selectedColor?: [ResourceColor](ts-types.md#resourcecolor)<br>} | Style of the navigation dots indicator.<br>\- **left**: distance between the navigation dots indicator and the left edge of the **\<Swiper>** component.<br>\- **top**: distance between the navigation dots indicator and the top edge of the **\<Swiper>** component.<br>\- **right**: distance between the navigation dots indicator and the right edge of the **\<Swiper>** component.<br>\- **bottom**: distance between the navigation dots indicator and the bottom edge of the **\<Swiper>** component.<br>\- **size**: diameter of the navigation dots indicator.<br>\- **mask**: whether to enable the mask for the navigation dots indicator.<br>\- **color**: color of the navigation dots indicator.<br>\- **selectedColor**: color of the selected navigation dot.|
 | displayCount<sup>8+</sup>   | number\|string                                               | Number of elements to display.<br>Default value: **1**                                          |
 | effectMode<sup>8+</sup>     | [EdgeEffect](ts-appendix-enums.md#edgeeffect)  | Swipe effect. For details, see **EdgeEffect**.<br>Default value: **EdgeEffect.Spring**|
 
@@ -56,15 +50,15 @@ Swiper(value:{controller?: SwiperController})
 | Name| Description|
 | ----------- | ------------------------------------------ |
 | Stretch     | The slide width of the **\<Swiper>** component is equal to the width of the component.|
-| AutoLinear  | The slide width of the **\<Swiper>** component is equal to the maximum width of the child components.|
+| AutoLinear  | The slide width of the **\<Swiper>** component is equal to that of the child component with the maximum width.|
 
 ## EdgeEffect
 
 | Name  | Description                                                                     |
 | ------ | ------------------------------------------------------------------------- |
-| Spring | Spring effect. When at one of the edges, the component can move beyond the bounds through touches, and produce a bounce effect when the user releases their finger.   |
-| Fade   | Fade effect. When at one of the edges, the component can move beyond the bounds through touches, and produce a fade effect along the way; when the user releases their finger, the fade changes.           |
-| None   | No effect. When at one of the edges, the component cannot move beyond the bounds.                                                     |
+| Spring | Spring effect. When sliding to one edge, the component can move beyond the bounds through touches, and produce a bounce effect when the user releases their finger.   |
+| Fade   | Fade effect. When sliding to one edge, the component can move beyond the bounds through touches, and produce a fade effect along the way; when the user releases their finger, the fade changes.           |
+| None   | No effect. When sliding to one edge, the component cannot move beyond the bounds.                                                     |
 
 ## SwiperController
 
@@ -86,7 +80,7 @@ Turns to the previous page.
 
 finishAnimation(callback?: () => void): void
 
-Stops this animation.
+Stops an animation.
 
 **Parameters**
 
@@ -100,7 +94,7 @@ Stops this animation.
 
 onChange(event: (index: number) => void)
 
-Triggered when the index of the currently displayed component changes.
+Triggered when the index of the currently displayed child component changes.
 
 **Parameters**
 

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

@@ -23,7 +23,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 
 | Name| Type| Description|
 | -------- | -------- | -------- |
-| tabBar | string \| Resource \| {<br>icon?: string \| Resource,<br>text?: string \| Resource<br>}<br>\| [CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | Content displayed on the tab bar.<br>**CustomBuilder**: builder, to which components can be passed (applicable to API version 8 and later versions).<br>> **NOTE**<br>If an icon uses an SVG image, the width and height attributes of the SVG image must be deleted. Otherwise, the icon size will be determined by the width and height attributes of the SVG image.|
+| tabBar | string \| Resource \| {<br>icon?: string \| Resource,<br>text?: string \| Resource<br>}<br>\| [CustomBuilder](ts-types.md)<sup>8+</sup> | Content displayed on the tab bar.<br>**CustomBuilder**: builder, to which components can be passed (applicable to API version 8 and later versions).<br>> **NOTE**<br>If an icon uses an SVG image, the width and height attributes of the SVG image must be deleted. Otherwise, the icon size will be determined by the width and height attributes of the SVG image.|
 
 >  **NOTE**
 > - The **\<TabContent>** component does not support setting of the common width attribute. By default, its width is the same as that of the parent **\<Tabs>** component.

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

@@ -2,7 +2,7 @@
 
 The **\<Tabs>** component is a container component that allows users to switch between content views through tabs. Each tab page corresponds to a content view.
 
->  **NOTE**
+>  **NOTE**<br>
 >
 >  This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
@@ -14,7 +14,7 @@ This component can contain multiple [\<TabContent>](ts-container-tabcontent.md)
 
 ## APIs
 
-Tabs(value: {barPosition?: BarPosition, index?: number, controller?: [TabsController](#tabscontroller)})
+Tabs(value?: {barPosition?: BarPosition, index?: number, controller?: [TabsController](#tabscontroller)})
 
 **Parameters**
 
@@ -41,8 +41,8 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 | vertical          | boolean | Whether to use vertical tabs. The value **true** means to use vertical tabs, and **false** means to use horizontal tabs.<br>Default value: **false**|
 | scrollable        | boolean | Whether the tabs are scrollable. The value **true** means that the tabs are scrollable, and **false** means the opposite.<br>Default value: **true**|
 | barMode           | BarMode | Tab bar layout mode. For details, see **BarMode**.<br>Default value: **BarMode.Fixed**|
-| barWidth          | number \| string<sup>8+</sup>  | Width of the tab bar.    |
-| barHeight         | number \| string<sup>8+</sup>  | Height of the tab bar.    |
+| barWidth          | number \| Length<sup>8+</sup>  | Width of the tab bar.    |
+| barHeight         | number \| Length<sup>8+</sup>  | Height of the tab bar.    |
 | animationDuration | number | Animation duration of the tab content.<br>Default value: **200**|
 
 ## BarMode
@@ -58,7 +58,7 @@ In addition to the universal events (ts-universal-events-click.md), the followin
 
 | Name| Description|
 | -------- | -------- |
-| onChange(callback: (index: number) =&gt; void) | Event triggered when a tab is switched.|
+| onChange(event: (index: number) =&gt; void) | Event triggered when a tab is switched.|
 
 ## TabsController
 

en/application-dev/reference/arkui-ts/ts-drawing-components-circle.md

@@ -28,15 +28,15 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 
 | Name| Type| Default Value| Mandatory| Description|
 | -------- | -------- | -------- | -------- | -------- |
-| fill | [ResourceColor](../../ui/ts-types.md) | Color.Black | No| Color of the fill area.|
-| fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource-type)| 1 | No| Opacity of the fill area.|
-| stroke | [ResourceColor](../../ui/ts-types.md) | Color.Black | No| Stroke color.|
+| fill | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No| Color of the fill area.|
+| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Opacity of the fill area.|
+| stroke | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No| Stroke color.|
 | strokeDashArray | Array<Length> | [] | No| Stroke dashes.|
 | strokeDashOffset | number \| string | 0 | No| Offset of the start point for drawing the stroke.|
 | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | No| Cap style of the stroke.|
 | strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | No| Join style of the stroke.|
 | strokeMiterLimit | number \| string | 4 | No| Limit value when the sharp angle is drawn as a miter.|
-| strokeOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource-type)| 1 | No| Stroke opacity.|
+| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Stroke opacity.|
 | strokeWidth | Length | 1 | No| Stroke width.|
 | antiAlias | boolean | true | No| Whether anti-aliasing is enabled.|
 

en/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md

 # Ellipse
 
-
 The **\<Ellipse>** component is used to draw an ellipse.
 
 >  **NOTE**
@@ -8,11 +7,6 @@ The **\<Ellipse>** component is used to draw an ellipse.
 >  This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-## Required Permissions
-
-None
-
-
 ## Child Components
 
 Not supported
@@ -22,12 +16,12 @@ Not supported
 
 ellipse(options?: {width?: string | number, height?: string | number})
 
-- Parameters
-  | Name| Type| Mandatory| Default Value| Description|
-  | -------- | -------- | -------- | -------- | -------- |
-  | width | string \| number | No| 0 | Width of the ellipse. |
-  | height | string \| number | No| 0 | Height of the ellipse. |
+**Parameters**
 
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| width | string \| number | No| Width.<br>Default value: **0**|
+| height | string \| number | No| Height.<br>Default value: **0**|
 
 ## Attributes
 
@@ -35,15 +29,15 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 
 | Name| Type| Default Value| Mandatory| Description|
 | -------- | -------- | -------- | -------- | -------- |
-| fill | [ResourceColor](../../ui/ts-types.md) | Color.Black | No| Color of the fill area.|
-| fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource)| 1 | No| Opacity of the fill area.|
-| stroke | [ResourceColor](../../ui/ts-types.md) | Color.Black | No|Stroke color.|
+| fill | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No| Color of the fill area.|
+| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Opacity of the fill area.|
+| stroke | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No|Stroke color.|
 | strokeDashArray | Array&lt;Length&gt; | [] | No| Stroke dash.|
 | strokeDashOffset | number \| string | 0 | No| Offset of the start point for drawing the stroke.|
 | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | No| Cap style of the stroke.|
 | strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | No| Join style of the stroke.|
 | strokeMiterLimit | number \| string | 4 | No| Limit value when the sharp angle is drawn as a miter.|
-| strokeOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource)| 1 | No| Stroke opacity.|
+| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Stroke opacity.|
 | strokeWidth | Length | 1 | No| Stroke width.|
 | antiAlias | boolean | true | No| Whether anti-aliasing is enabled.|
 
@@ -57,9 +51,9 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 struct EllipseExample {
   build() {
     Flex({ justifyContent: FlexAlign.SpaceAround }) {
-      // Draw an ellipse in a 150 x 70 rectangle.
+      // Draw an ellipse in a 150 x 80 rectangle.
       Ellipse({ width: 150, height: 80 })
-      // Draw an ellipse in a 150 x 70 rectangle.
+      // Draw an ellipse in a 150 x 80 rectangle.
       Ellipse().width(150).height(80)
     }.width('100%').margin({ top: 5 })
   }

en/application-dev/reference/arkui-ts/ts-drawing-components-line.md

@@ -4,7 +4,6 @@
 The **\<Line>** component is used to draw a straight line.
 
 >  **NOTE**
->
 > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
@@ -20,13 +19,13 @@ Not supported
 
 ## APIs
 
-Line(options?: {width?: string | number, height?: string | number})
+Line(value?: {width?: string | number, height?: string | number})
 
 - Parameters
   | Name| Type| Mandatory| Default Value| Description|
   | -------- | -------- | -------- | -------- | -------- |
-  | width | string \| number | No| 0 | Width of the line. |
-  | height | string \| number | No| 0 | Height of the line. |
+  | width | string \| number | No| 0 | Width.|
+  | height | string \| number | No| 0 | Height.|
 
 
 ## Attributes
@@ -35,17 +34,17 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 
 | Name| Type| Default Value| Mandatory| Description|
 | -------- | -------- | -------- | -------- | -------- |
-| startPoint | Array | [0, 0] | Yes  | Coordinates (relative coordinates) of the start point of the line. |
-| endPoint   | Array | [0, 0] | Yes  | Coordinates (relative coordinates) of the end point of the line. |
-| fill | [ResourceColor](../../ui/ts-types.md) | Color.Black | No| Color of the fill area.|
-| fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource)| 1 | No| Opacity of the fill area.|
-| stroke | [ResourceColor](../../ui/ts-types.md) | Color.Black | No| Stroke color.|
+| startPoint | Array&lt;Length&gt; | [0, 0] | No  | Coordinates (relative coordinates) of the start point of the line, in vp.|
+| endPoint   | Array&lt;Length&gt; | [0, 0] | No  | Coordinates (relative coordinates) of the end point of the line, in vp.|
+| fill | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No| Color of the fill area.|
+| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Opacity of the fill area.|
+| stroke | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No| Stroke color.|
 | strokeDashArray | Array&lt;Length&gt; | [] | No| Stroke dashes.|
 | strokeDashOffset | number \| string | 0 | No| Offset of the start point for drawing the stroke.|
 | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | No| Cap style of the stroke.|
 | strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | No| Join style of the stroke.|
 | strokeMiterLimit | number \| string | 4 | No| Limit value when the sharp angle is drawn as a miter.|
-| strokeOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource)| 1 | No| Stroke opacity.|
+| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Stroke opacity.|
 | strokeWidth | Length | 1 | No| Stroke width.|
 | antiAlias | boolean | true | No| Whether anti-aliasing is enabled.|
 
@@ -59,7 +58,8 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 struct LineExample {
   build() {
     Column() {
-      Line({ width: 50, height: 100 }).startPoint([0, 0]).endPoint([50, 100])
+      Line().startPoint([0, 0]).endPoint([50, 100])
+      Line({ width: 50, height: 50 }).startPoint([0, 0]).endPoint([100, 100])
       Line().width(200).height(200).startPoint([50, 50]).endPoint([150, 150])
     }.margin({ top: 5 })
   }

en/application-dev/reference/arkui-ts/ts-drawing-components-path.md

 # Path
 
+The **<Path\>** component is used to define a closed shape.
 
 > **NOTE**
 >
 > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-The **<Path\>** component is used to draw a path.
-
-
-## Required Permissions
-
-None
-
-
 ## Child Components
 
 Not supported
 
+## APIs
 
-## Attributes
-
-| Name | Type | Default Value | Mandatory | Description |
-| -------- | -------- | -------- | -------- | -------- |
-| width | Length | 0 | No | Width of the rectangle where the path is located. |
-| height | Length | 0 | No | Height of the rectangle where the path is located. |
-| commands | string | '' | Yes | Commands for drawing the path. |
-
-
-The supported commands are as follows:
-
-
-- M = moveto
-
-- L = lineto
-
-- H = horizontal lineto
-
-- V = vertical lineto
-
-- C = curveto
+Path(value?: { width?: number | string; height?: number | string; commands?: string })
 
-- S = smooth curveto
+**Parameters**
 
-- Q = quadratic Bezier curve
+| Name  | Type        | Mandatory| Description                           |
+| -------- | ---------------- | ---- | ----------------------------------- |
+| width    | number \| string | No  | Width of the rectangle where the path is located.<br>Default value: **0**   |
+| height   | number \| string | No  | Height of the rectangle where the path is located.<br>Default value: **0**   |
+| commands | string           | No  | Command for drawing the path.<br>Default value: **''**|
 
-- T = smooth quadratic Bezier curveto
-
-- A = elliptical Arc
+## Attributes
 
-- Z = closepath
+In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
 
+| Name    | Type                               | Default Value | Mandatory  | Description                                    |
+| -------- | ----------------------------------- | ---- | ---- | ---------------------------------------- |
+| commands | string                              | ''   | No | Command for drawing the path. The unit is px. For details about how to convert the pixel units, see [Pixel Unit Conversion](../../ui/ts-pixel-units.md).|
+| fill | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No| Color of the fill area.|
+| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Opacity of the fill area.|
+| stroke | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No| Stroke color.|
+| strokeDashArray | Array&lt;Length&gt; | [] | No| Stroke dashes.|
+| strokeDashOffset | number \| string | 0 | No| Offset of the start point for drawing the stroke.|
+| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | No| Cap style of the stroke.|
+| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | No| Join style of the stroke.|
+| strokeMiterLimit | number \| string | 4 | No| Limit value when the sharp angle is drawn as a miter.|
+| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Opacity of the stroke.|
+| strokeWidth | Length | 1 | No| Width of the stroke.|
+| antiAlias | boolean | true | No| Whether anti-aliasing is enabled.|
 
-For example, the command **M0 20 L50 50 L50 100 Z** defines a path that starts from (0, 20), reaches (50, 50) and then (50, 100), and ends at (0, 20).
+The supported commands are as follows:
 
+| Command  | Attribute                              | Parameter                                      | Description                                      |
+| ---- | -------------------------------- | ---------------------------------------- | ---------------------------------------- |
+| M    | moveto                           | (x y)                                   | Starts a new subpath at the point specified by the given (x, y) coordinates. For example, `M 0 0` starts a new subpath at point (0, 0).|
+| L    | lineto                           | (x y)                                   | Draws a line from the current point to the point specified by the given (x, y) coordinates. The specified point becomes the start point of the new subpath. For example, `L 50 50` draws a line from the current point to point (50, 50), which is the start point of the new subpath.|
+| H    | horizontal lineto                | x                                        | Draws a horizontal line from the current point. This command is equivalent to the **L** command where the y-coordinate is 0. For example, `H 50 ` draws a line from the current point to point (50, 0), which is the start point of the new subpath.|
+| V    | vertical lineto                  | y                                        | Draws a vertical line from the current point. This command is equivalent to the **L** command where the x-coordinate is 0. For example, `V 50 ` draws a line from the current point to point (0, 50), which is the start point of the new subpath.|
+| C    | curveto                          | (x1 y1 x2 y2 x y)                        | Draws a cubic Bezier curve from the current point to the point specified by the given (x, y) coordinates, with (x1, y1) as the control point of the curve start point and (x2, y2) as the control point of the curve end point. For example, `C100 100 250 100 250 200 ` draws a cubic Bezier curve from the current point to point (250, 200), which is the start point of the new subpath.|
+| S    | smooth curveto                   | (x2 y2 x y)                              | Draws a cubic Bezier curve from the current point to the point specified by the given (x, y) coordinates, with (x2, y2) as the control point of the curve end point. If the previous command is **C** or **S**, the control point of the curve start point is the mapping of the control point of the curve end point in the previous command relative to the start point. For example, in `C100 100 250 100 250 200 S400 300 400 200`, the second segment of the cubic Bezier curve uses point (250, 300) as the control point of the curve start point. If there is no previous command or the previous command is not **C** or **S**, the control point of the curve start point coincides with the current point.|
+| Q    | quadratic Belzier curve          | (x1 y1 x y)                              | Use (x1, y1) as the control point to draw a quadratic Bessel curve from the current point to (x, y). For example, Q400 50 600 300 indicates that a quadratic Bessel curve from the current point to the (600, 300) point is drawn, and the (600, 300) point is used as the starting point of the new subpath.|
+| T    | smooth quadratic Belzier curveto | (x y)                                    | Draw a quadratic Bessel curve from the current point to (x, y). If the previous command is Q or T, the control point is the mapping of the end point control point of the previous command relative to the start point. For example, a control point of the second Bessel curve segment of the Q400 50 600 300 T1000 300 is (800, 350). If there is no previous command or the previous command is not Q or T, the first control point coincides with the current point.|
+| A    | elliptical Arc                   | (rx ry x-axis-rotation large-arc-flag sweep-flag x y) | Draws an elliptical arc from the current point to (x, y). The size and direction of an ellipse are defined by two radiuses (rx, ry) and x-axis-rotation, indicating how the entire ellipse rotates relative to the current coordinate system (in degrees). large-arc-flag and sweep-flag determine an arc drawing manner.|
+| Z    | closepath                        | none                                     | Closes the current subpath by connecting the current path back to the initial point of the current subpath.            |
+
+For example, commands('M0 20 L50 50 L50 100 Z') defines a triangle that starts from position (0, 20), draws a straight line from point (0, 20) to point (50, 50), draws a straight line from point (50, 50) to point (50, 100), and draws a closed path from point (50, 100) to point (0, 20) to form a closed triangle.
 
 ## Example
 
-
 ```ts
+// xxx.ets
 @Entry
 @Component
 struct PathExample {
   build() {
     Column({ space: 5 }) {
       Text('Straight line').fontSize(9).fontColor(0xCCCCCC).width('90%')
+      // Draw a straight line with a length of 900px and a width of 3vp.
       Path().width(300).height(10).commands('M0 0 L900 0').stroke(Color.Black).strokeWidth(3)
 
       Text('Straight line graph').fontSize(9).fontColor(0xCCCCCC).width('90%')
       Flex({ justifyContent: FlexAlign.SpaceAround }) {
-        // Run MoveTo(150, 0), LineTo(300, 300), LineTo(0, 300), and ClosePath() in sequence.
         Path().width(100).height(100).commands('M150 0 L300 300 L0 300 Z')
-        // Run MoveTo(0, 0), HorizontalLineto(300), VerticalLineto(300), HorizontalLineto(0), and ClosePath() in sequence.
         Path().width(100).height(100).commands('M0 0 H300 V300 H0 Z')
-        // Run MoveTo(150, 0), LineTo(0, 150), LineTo(60, 300), LineTo(240, 300), LineTo(300, 150), and ClosePath() in sequence.
         Path().width(100).height(100).commands('M150 0 L0 150 L60 300 L240 300 L300 150 Z')
       }.width('100%')
 
       Text('Curve graphics').fontSize(9).fontColor(0xCCCCCC).width('90%')
       Flex({ justifyContent: FlexAlign.SpaceAround }) {
-        / / Run MoveTo(0, 300), draw a curve between (150, 0) and (300, 300), and then run ClosePath().
         Path().width(100).height(100).commands("M0 300 S150 0 300 300 Z")
-        / / Run MoveTo(0, 150), draw a curve among (0, 150), (150, 0), and (300, 150), and then run ClosePath().
         Path().width(100).height(100).commands('M0 150 C0 150 150 0 300 150 L150 300 Z')
       }
     }.width('100%').margin({ top: 5 })
@@ -89,4 +89,4 @@ struct PathExample {
 }
 ```
 
-![en-us_image_0000001212058492](figures/en-us_image_0000001212058492.png)
+![zh-cn_image_0000001219744193](figures/zh-cn_image_0000001219744193.png)
\ No newline at end of file

en/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md

 # Polygon
 
-
 The **\<Polygon>** component is used to draw a polygon.
 
 >  **NOTE**
@@ -8,11 +7,6 @@ The **\<Polygon>** component is used to draw a polygon.
 >  This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-## Required Permissions
-
-None
-
-
 ## Child Components
 
 Not supported
@@ -20,13 +14,13 @@ Not supported
 
 ## APIs
 
-Polygon(options?: {width?: string | number, height?: string | number})
+Polygon(value?: {width?: string | number, height?: string | number})
 
 - Parameters
   | Name| Type| Mandatory| Default Value| Description| 
   | -------- | -------- | -------- | -------- | -------- |
-  | width | string \| number | No| 0 | Width of the polygon. |
-  | height | string \| number | No| 0 | Height of the polygon. |
+  | width | string \| number | No| 0 | Width.| 
+  | height | string \| number | No| 0 | Height.| 
 
 
 ## Attributes
@@ -36,15 +30,15 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 | Name| Type| Default Value| Mandatory| Description| 
 | -------- | -------- | -------- | -------- | -------- |
 | points | Array&lt;Point&gt; | [] | No| Vertex coordinates of the polygon.|
-| fill | [ResourceColor](../../ui/ts-types.md) | Color.Black | No| Color of the fill area.|
-| fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource)| 1 | No| Opacity of the fill area.|
-| stroke | [ResourceColor](../../ui/ts-types.md) | Color.Black | No| Stroke color.|
+| fill | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No| Color of the fill area.|
+| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Opacity of the fill area.|
+| stroke | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No| Stroke color.|
 | strokeDashArray | Array&lt;Length&gt; | [] | No| Stroke dashes.|
 | strokeDashOffset | number \| string | 0 | No| Offset of the start point for drawing the stroke.|
 | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | No| Cap style of the stroke.|
 | strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | No| Join style of the stroke.|
 | strokeMiterLimit | number \| string | 4 | No| Limit value when the sharp angle is drawn as a miter.|
-| strokeOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource)| 1 | No| Stroke opacity.|
+| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Stroke opacity.|
 | strokeWidth | Length | 1 | No| Stroke width.|
 | antiAlias | boolean | true | No| Whether anti-aliasing is enabled.|
 
@@ -79,4 +73,4 @@ struct PolygonExample {
 }
 ```
 
-![en-us_image_0000001212218458](figures/en-us_image_0000001212218458.gif)
+![en-us_image_0000001174582856](figures/en-us_image_0000001174582856.gif)
\ No newline at end of file

en/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md

 # Polyline
 
-
 The **\<Polyline>** component is used to draw a polyline.
 
 >  **NOTE**
@@ -8,11 +7,6 @@ The **\<Polyline>** component is used to draw a polyline.
 >  This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-## Required Permissions
-
-None
-
-
 ## Child Components
 
 Not supported
@@ -20,13 +14,13 @@ Not supported
 
 ## APIs
 
-Polyline(options?: {width?: string | number, height?: string | number})
+Polyline(value?: {width?: string | number, height?: string | number})
 
 - Parameters
   | Name| Type| Mandatory| Default Value| Description| 
   | -------- | -------- | -------- | -------- | -------- |
-  | width | string \| number | No| 0 | Width of the polyline. |
-  | height | string \| number | No| 0 | Height of the polyline. |
+  | width | string \| number | No| 0 | Width.| 
+  | height | string \| number | No| 0 | Height.| 
 
 
 ## Attributes
@@ -36,15 +30,15 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 | Name| Type| Default Value| Mandatory| Description| 
 | -------- | -------- | -------- | -------- | -------- |
 | points | Array&lt;Point&gt; | [] | No| List of coordinates that the polyline passes through.| 
-| fill | [ResourceColor](../../ui/ts-types.md) | Color.Black | No| Color of the fill area.|
-| fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource-type)| 1 | No| Opacity of the fill area.|
-| stroke | [ResourceColor](../../ui/ts-types.md) | Color.Black | No| Stroke color.|
+| fill | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No| Color of the fill area.|
+| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Opacity of the fill area.|
+| stroke | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No| Stroke color.|
 | strokeDashArray | Array&lt;Length&gt; | [] | No| Stroke dashes.|
 | strokeDashOffset | number \| string | 0 | No| Offset of the start point for drawing the stroke.|
 | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | No| Cap style of the stroke.|
 | strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | No| Join style of the stroke.|
 | strokeMiterLimit | number \| string | 4 | No| Limit value when the sharp angle is drawn as a miter.|
-| strokeOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource-type)| 1 | No| Stroke opacity.|
+| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Stroke opacity.|
 | strokeWidth | Length | 1 | No| Stroke width.|
 | antiAlias | boolean | true | No| Whether anti-aliasing is enabled.|
 

en/application-dev/reference/arkui-ts/ts-drawing-components-rect.md

 # Rect
 
-
 The **\<Rect>** component is used to draw a rectangle.
 
 >  **NOTE**
 >
 >  This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions
-
-None
-
 
 ## Child Components
 
@@ -19,14 +14,14 @@ Not supported
 
 ## APIs
 
-Rect(options?: {width?: string | number,height?: string | number,radius?: string | number | Array&lt;string | number&gt;} |
+Rect(value?: {width?: string | number,height?: string | number,radius?: string | number | Array&lt;string | number&gt;} |
   {width?: string | number,height?: string | number,radiusWidth?: string | number,radiusHeight?: string | number})
 
 - Parameters
   | Name| Type| Mandatory| Default Value| Description| 
   | -------- | -------- | -------- | -------- | -------- |
-  | width | string \| number | No| 0 | Width of the rectangle. |
-  | height | string \| number | No| 0 | Height of the rectangle. |
+  | width | string \| number | No| 0 | Width.| 
+  | height | string \| number | No| 0 | Height.| 
   | radius | string \| number \| Array&lt;string \| number&gt; | No| 0 | Radius of the rounded corner. You can set separate radiuses for four rounded corners.| 
   | radiusWidth | string \| number | No| 0 | Width of the rounded corner.| 
   | radiusHeight | string \| number | No| 0 | Height of the rounded corner.| 
@@ -41,15 +36,15 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 | radiusWidth | string \| number | 0 | No| Width of the rounded corner. The width and height are the same when only the width is set.| 
 | radiusHeight | string \| number | 0 | No| Height of the rounded corner. The width and height are the same only when the height is set.| 
 | radius | string \| number \| Array&lt;string \| number&gt; | 0 | No| Radius of the rounded corner. You can set separate radiuses for four rounded corners.|
-| fill | [ResourceColor](../../ui/ts-types.md) | Color.Black | No| Color of the fill area.|
-| fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource-type)| 1 | No| Opacity of the fill area.|
-| stroke | [ResourceColor](../../ui/ts-types.md) | Color.Black | No| Stroke color.|
+| fill | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No| Color of the fill area.|
+| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Opacity of the fill area.|
+| stroke | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No| Stroke color.|
 | strokeDashArray | Array&lt;Length&gt; | [] | No| Stroke dash.|
 | strokeDashOffset | number \| string | 0 | No| Offset of the start point for drawing the stroke.|
 | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | No| Cap style of the stroke.|
 | strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | No| Join style of the stroke.|
 | strokeMiterLimit | number \| string | 4 | No| Limit value when the sharp angle is drawn as a miter.|
-| strokeOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource-type)| 1 | No| Stroke opacity.|
+| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Stroke opacity.|
 | strokeWidth | Length | 1 | No| Stroke width.|
 | antiAlias | boolean | true | No| Whether anti-aliasing is enabled.|
 

en/application-dev/reference/arkui-ts/ts-drawing-components-shape.md

 # Shape
 
->  **NOTE**
-> 
-> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-
-
 The **\<Shape>** component is the parent component of the drawing components. The attributes described in this topic are universal attributes supported by all the drawing components.
 
 
 1. Drawing components use **\<Shape>** as their parent to implement the effect similar to SVG.
 
-
 2. The **\<Shape>** component is used independently to draw a specific shape.
 
-
-## Required Permissions
-
-None
+>  **NOTE**
+>
+>  This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
 ## Child Components
@@ -41,15 +34,15 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 | Name| Type| Default Value| Mandatory| Description|
 | -------- | -------- | -------- | -------- | -------- |
 | viewPort | {<br>x?: number \| string,<br>y?: number \| string,<br>width?: number \| string,<br>height?: number \| string<br>} | { x:0, y:0, width:0, height:0 } | No| View port of the shape.|
-| fill | [ResourceColor](../../ui/ts-types.md) | Color.Black | No| Color of the fill area.|
-| fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource-type)| 1 | No| Opacity of the fill area.|
-| stroke | [ResourceColor](../../ui/ts-types.md) | Color.Black | No| Stroke color.|
+| fill | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No| Color of the fill area.|
+| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Opacity of the fill area.|
+| stroke | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No| Stroke color.|
 | strokeDashArray | Array&lt;Length&gt; | [] | No| Stroke dash.|
 | strokeDashOffset | number \| string | 0 | No| Offset of the start point for drawing the stroke.|
 | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | No| Cap style of the stroke.|
 | strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | No| Join style of the stroke.|
 | strokeMiterLimit | number \| string | 4 | No| Limit value when the sharp angle is drawn as a miter.|
-| strokeOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource-type)| 1 | No| Stroke opacity.|
+| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Stroke opacity.|
 | strokeWidth | number \| string | 1 | No| Stroke width.|
 | antiAlias | boolean | true | No| Whether anti-aliasing is enabled.|
 | mesh<sup>8+</sup> | Array&lt;number&gt;,number,number | [],0,0 | No| Mesh effect. The first parameter is an array of lengths (column + 1) * (row + 1) * 2, which records the position of each vertex of the distorted bitmap. The second parameter is the number of columns in the mesh matrix. The third parameter is the number of rows in the mesh matrix.|

en/application-dev/reference/arkui-ts/ts-explicit-animation.md

@@ -9,10 +9,10 @@ You can create explicit animation with your custom settings.
 
 | API                                                    | Description                                                    |
 | ------------------------------------------------------------ | ------------------------------------------------------------ |
-| animateTo(value: [AnimationOptions](#animationoptions), event: ()=&gt; void) : void | Provides a transition animation when the status changes due to the closure code.<br>**event** specifies the closure function that displays the dynamic effect. The system automatically inserts the transition animation if the status changes in the closure function.|
+| animateTo(value: [AnimateParam](#animateparam), event: ()=&gt; void) : void | Provides a transition animation when the status changes due to the closure code.<br>**event** specifies the closure function that displays the dynamic effect. The system automatically inserts the transition animation if the status changes in the closure function.|
 
 
-## AnimationOptions
+## AnimateParam
 
 | Name| Type| Description|
 | -------- | -------- | -------- |

en/application-dev/reference/arkui-ts/ts-gesture-settings.md

-# Gesture Binding Methods
+# Gesture Binding
 
+Bind different types of gesture events to components and set response methods for them.
 
-> **NOTE**<br>
-> This method is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+>  **NOTE**
+>
+>  The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
 ## Required Permissions
@@ -16,50 +18,76 @@ 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 | 
+| Parameter| 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/>**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/>**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 that are the same for the parent component and child components can be triggered, thereby implementing a bubbling effect.|
 
 
-- GestureMask enums
-  | Name | Description | 
+- GestureMask
+  | 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/>**NOTE**<br/>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 **<List>** component, the built-in sliding gestures can still be triggered.|
 
 
-- GestureType enums
-  | Name | Description | 
+- GestureType
+  | 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, which requires a minimum 5 vp movement distance of a finger on the screen.|
+  | PinchGesture | Pinch gesture.|
+  | RotationGesture | Rotation gesture.|
+  | SwipeGesture | Swipe gesture, which can be recognized 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 events, see the section of each gesture object.
+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 definitions of other gestures, see the corresponding gesture sections.
 
-- TapGesture events
-  | Name | Description | 
+- TapGesture
+  | 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<sup>8+</sup> | number | Timestamp of the event. It is interval between the time when the event is triggered and the time when the system starts, in nanoseconds.|
+  | target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md) | Display area of the element that triggers the gesture event.|
+  | source<sup>8+</sup> | SourceType | Event input device.|
+  | repeat | boolean | Whether the event is triggered repeatedly. This parameter is used for the **LongPressGesture** event.|
+  | fingerList<sup>8+</sup> | FingerInfo[] | Information about all fingers that trigger the event, which is used for the **LongPressGesture** and **TapGesture** events.|
+  | offsetX | number | Offset of the gesture event on the x-axis, in vp. This parameter is used for the **PanGesture** event.|
+  | offsetY | number | Offset of the gesture event on the y-axis, in vp. This parameter is used for the **PanGesture** event.|
+  | angle | number | Rotation angle for the **RotationGesture** event; angle of the swipe gesture for the **SwipeGesture** event, that is, the change in the included angle between the line segment created by the two fingers and the horizontal direction.<br>**NOTE**<br>Angle calculation method: After a swipe gesture is recognized, a line connecting the two fingers is identified as the initial line. As the fingers swipe, the line between the fingers rotates. Based on the coordinates of the initial line's and current line's end points, an arc tangent function is used to calculate the respective included angle of the points relative to the horizontal direction by using the following formula: Rotation angle = arctan2(cy2-cy1,cx2-cx1) - arctan2(y2-y1,x2-x1) The initial line is used as the coordinate system. The clockwise rotation is 0 to 180 degrees, and the counter-clockwise rotation is –180 to 0 degrees. |
+  | speed<sup>8+</sup> | number | Swipe gesture speed, that is, the average swipe speed of all fingers. The unit is vp/s. This attribute is used for the **SwipeGesture** event.|
+  | scale | number | Scale ratio. This attribute is used for the **PinchGesture** event.|
+  | pinchCenterX | number | X-coordinate of the center of the pinch gesture, in px. This attribute is used for the **PinchGesture** event.|
+  | pinchCenterY | number | Y-coordinate of the center of the pinch gesture, in px. This attribute is used for the **PinchGesture** event.|
+  
+- SourceType
+  | Name| Description|
+  | -------- | -------- |
+  | Unknown | Unknown device type.|
+  | Mouse | Mouse.|
+  | TouchScreen | Touchscreen.|
+
+- FingerInfo
+  | Name| Type| Description|
+  | -------- | -------- | -------- |
+  | id | number | Index of a finger.|
+  | globalX | number | X-coordinate relative to the upper left corner of the application window.|
+  | globalY | number | Y-coordinate relative to the upper left corner of the application window.|
+  | localX | number | X-coordinate relative to the upper left corner of the current component.|
+  | localY | number | Y-coordinate relative to the upper left corner of the current component.|
 
 
 ## Example
 
-
 ```ts
 // xxx.ets
 @Entry
@@ -91,4 +119,4 @@ struct GestureSettingsExample {
 }
 ```
 
-![en-us_image_0000001256858411](figures/en-us_image_0000001256858411.gif)
+![en-us_image_0000001257058419](figures/en-us_image_0000001257058419.gif)
\ No newline at end of file

en/application-dev/reference/arkui-ts/ts-interpolation-calculation.md

 # Interpolation Calculation
 
+Interpolation calculation can be implemented to set the animation interpolation curve, which is used to construct the step curve, cubic Bezier curve, and spring curve objects.
+
+> **NOTE**
+>
+> This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-> **NOTE**<br>
-> This animation is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 ## Modules to Import
 
-```ts
-import curves from '@ohos.curves'
+```js
+import Curves from '@ohos.curves'
 ```
 
-## Required Permissions
 
-None
+## Curves.initCurve<sup>9+</sup>
 
-## curves.init
+initCurve(curve?: Curve): ICurve
 
-init(curve?: Curve): Object
 
 Implements initialization for the interpolation curve, which is used to create an interpolation curve object based on the input parameter.
 
-- Parameters
+**Parameters**
+
+| Name| Type                                                        | Mandatory| Default Value      | Description      |
+| ------ | ------------------------------------------------------------ | ---- | ------------ | ---------- |
+| curve  | [Curve](#curve-enums)| No  | Curve.Linear | Curve type.|
+
+**Return value**
+
+| Type                          | Description            |
+| ---------------------------------- | ---------------- |
+|  [ICurve](#icurve) | Interpolation object of the curve.|
+
+
+**Example**
+
+```ts
+import Curves from '@ohos.curves'
+Curves.initCurve(Curve.EaseIn) // Create an ease-in curve.
+```
 
-  | Name | Type | Mandatory | Default Value | Description |
-  | -------- | -------- | -------- | -------- | -------- |
-  | curve | Curve | No | Linear | Curve object. |
 
-- Return value<br>
-  Curve object.
+##  Curves.stepsCurve<sup>9+</sup>
 
-## curves.steps
+stepsCurve(count: number, end: boolean): ICurve
 
-steps(count: number, end: boolean): Object
 
 Constructs a step curve object.
 
-- Parameters
+**Parameters**
+
+| Name| Type   | Mandatory| Description                                                        |
+| ------ | ------- | ----| ------------------------------------------------------------ |
+| count  | number  | Yes  | Number of steps. Must be a positive integer.                                  |
+| end    | boolean | Yes  | Whether the step change occurs at the start or end point of each interval.<br>- **true**: The step change occurs at the end point.<br>- **false**: The step change occurs at the start point.|
+
+**Return value**
+
+| Type                          | Description            |
+| ---------------------------------- | ---------------- |
+|  [ICurve](#icurve) | Curve object.|
 
-  | Name | Type | Mandatory | Default Value | Description |
-  | -------- | -------- | -------- | -------- | -------- |
-  | count | number | Yes | - | Number of steps. The value must be a positive integer. |
-  | end | boolean | No | true | Step change at the start or end point of each interval. Defaults to **true**, indicating that the step change occurs at the end point. |
 
-- Return value
+**Example**
+
+```ts
+import Curves from '@ohos.curves'
+Curves.stepsCurve(9, true) // Create a step curve.
+```
+
 
-  Curve object.
+## Curves.cubicBezierCurve<sup>9+</sup>
 
-## curves.cubicBezier
+cubicBezierCurve(x1: number, y1: number, x2: number, y2: number): ICurve
 
-cubicBezier(x1: number, y1: number, x2: number, y2: number): Object
 
 Constructs a third-order Bezier curve object. The curve value must be between 0 and 1.
 
-1. Parameters
 
-   | Name | Type   | Mandatory | Description                                                    |
-   | ---- | ------ | --------- | -------------------------------------------------------------- |
-   | x1   | number | Yes       | Horizontal coordinate of the first point on the Bezier curve.  |
-   | y1   | number | Yes       | Vertical coordinate of the first point on the Bezier curve.    |
-   | x2   | number | Yes       | Horizontal coordinate of the second point on the Bezier curve. |
-   | y2   | number | Yes       | Vertical coordinate of the second point on the Bezier curve.   |
+**Parameters**
+| Name | Type    | Mandatory  | Description            |
+| ---- | ------ | ---- | -------------- |
+| x1   | number | Yes   | Horizontal coordinate of the first point on the Bezier curve.|
+| y1   | number | Yes   | Vertical coordinate of the first point on the Bezier curve.|
+| x2   | number | Yes   | Horizontal coordinate of the second point on the Bezier curve.|
+| y2   | number | Yes   | Vertical coordinate of the second point on the Bezier curve.|
 
-2. Return value
+**Return value**
 
-  Curve object.
+| Type                          | Description            |
+| ---------------------------------- | ---------------- |
+|  [ICurve](#icurve) | Curve object.|
 
-## curves.spring
 
-spring(velocity: number, mass: number, stiffness: number, damping: number): Object
+**Example**
+
+```ts
+import Curves from '@ohos.curves'
+Curves.cubicBezierCurve(0.1, 0.0, 0.1, 1.0) // Create a cubic Bezier curve.
+```
+
+
+##  Curves.springCurve<sup>9+</sup>
+
+springCurve(velocity: number, mass: number, stiffness: number, damping: number): ICurve
+
 
 Constructs a spring curve object.
 
-1. Parameters
 
-   | Name      | Type   | Mandatory | Description       |
-   | --------- | ------ | --------- | ----------------- |
-   | velocity  | number | Yes       | Initial velocity. |
-   | mass      | number | Yes       | Mass.             |
-   | stiffness | number | Yes       | Stiffness.        |
-   | damping   | number | Yes       | Damping.          |
+**Parameters**
+| Name      | Type    | Mandatory  | Description   |
+| --------- | ------ | ---- | ----- |
+| velocity  | number | Yes   | Initial velocity. It is a parameter that affects the elastic dynamic effect by external factors. It aims to ensure the smooth transition from the previous motion state to the elastic dynamic effect.|
+| mass      | number | Yes   | Quality. The force object of the elastic system will have inertia effects on the elastic system. The greater the mass, the greater the amplitude of the oscillation, and the slower the speed of restoring to the equilibrium position.|
+| stiffness | number | Yes   | Stiffness. It is the degree to which an object deforms by resisting the force applied. In an elastic system, the greater the stiffness, the stronger the ability to resist deformation, and the faster the speed of restoring to the equilibrium position.|
+| damping   | number | Yes   | Damping. It is a pure number and has no real physical meaning. It is used to describe the oscillation and attenuation of the system after being disturbed. The larger the damping, the smaller the number of oscillations of elastic motion and the smaller the oscillation amplitude.|
 
-2. Return value
 
-  Curve object.
+**Return value**
+
+| Type                          | Description            |
+| ---------------------------------- | ---------------- |
+|  [ICurve](#icurve)| Curve object.|
 
-## Example
+
+**Example**
 
 ```ts
 import Curves from '@ohos.curves'
-let curve1 = Curves.init() // Create a default linear interpolation curve.
-let curve2 = Curves.init(Curve.EaseIn) // Create an interpolation curve which is slow and then fast by default.
-let curve3 = Curves.spring(100, 1, 228, 30) // Create a spring interpolation curve.
-let curve3 = Curves.cubicBezier(0.1, 0.0, 0.1, 1.0) // Create a third-order Bezier curve.
+Curves.springCurve(100, 1, 228, 30) // Create a spring curve.
 ```
 
-Curve objects can be created only by the preceding APIs.
-| API | Description |
-| -------- | -------- |
-| interpolate(time: number): number | Calculation function of the interpolation curve. Passing a normalized time parameter to this function returns the current interpolation.<br/>**time**: indicates the current normalized time. The value ranges from 0 to 1.<br/>The curve interpolation corresponding to the normalized time point is returned. |
 
-- Example
+## ICurve
+
+
+### interpolate
+
+interpolate(fraction: number): number
+
+
+Calculation function of the interpolation curve. Passing a normalized time parameter to this function returns the current interpolation.
+
+**Parameters**
+
+| Name  | Type  | Mandatory| Description                                        |
+| -------- | ------ | ---- | -------------------------------------------- |
+| fraction | number | Yes  | Current normalized time. The value ranges from 0 to 1.|
+
+**Return value**
+
+| Type  | Description                                |
+| ------ | ------------------------------------ |
+| number | The curve interpolation corresponding to the normalized time point is returned.|
+
+**Example**
+
+```ts
+import Curves from '@ohos.curves'
+let curve = Curves.initCurve(Curve.EaseIn) // Create an ease-in curve.
+let value: number = curve.interpolate(0.5) // Calculate the interpolation for half of the time.
+```
+
+
+## Curves.init<sup>(deprecated)</sup>
+
+init(curve?: Curve): string
+
+
+Implements initialization to create a curve object based on the input parameter. This API is deprecated since API version 9. Use [Curves.initCurve](#curvesinitcurve9) instead.
+
+**Parameters**
+
+| Name| Type                                                        | Mandatory| Default Value      | Description      |
+| ------ | ------------------------------------------------------------ | ---- | ------------ | ---------- |
+| curve  |[Curve](#curve-enums)| No  | Curve.Linear | Curve type.|
+
+
+## Curves.steps<sup>(deprecated)</sup>
+
+steps(count: number, end: boolean): string
+
+
+Constructs a step curve object. This API is deprecated since API version 9. Use [Curves.stepsCurve](# curvesstepscurve9) instead.
+
+**Parameters**
+
+| Name| Type   | Mandatory| Description                                                        |
+| ------ | ------- | ----| ------------------------------------------------------------ |
+| count  | number  | Yes  | Number of steps. Must be a positive integer.                                  |
+| end    | boolean | Yes  | Whether the step change occurs at the start or end of each interval.<br>- **true**: The step change occurs at the end point.<br>- **false**: The step change occurs at the start point.|
+
+
+## Curves.cubicBezier<sup>(deprecated)</sup>
+
+cubicBezier(x1: number, y1: number, x2: number, y2: number): string
+
+
+Constructs a cubic Bezier curve object. The curve value must range from 0 to 1. This API is deprecated since API version 9. Use [Curves.cubicBezierCurve](#curvescubicbeziercurve9) instead.
+
+
+**Parameters**
+| Name | Type    | Mandatory  | Description            |
+| ---- | ------ | ---- | -------------- |
+| x1   | number | Yes   | Horizontal coordinate of the first point on the Bezier curve.|
+| y1   | number | Yes   | Vertical coordinate of the first point on the Bezier curve.|
+| x2   | number | Yes   | Horizontal coordinate of the second point on the Bezier curve.|
+| y2   | number | Yes   | Vertical coordinate of the second point on the Bezier curve.|
+
+
+## Curves.spring<sup>(deprecated)</sup>
+
+spring(velocity: number, mass: number, stiffness: number, damping: number): string
+
+
+Constructs a spring curve object. This API is deprecated since API version 9. Use [Curves.cubicBezierCurve](#curvescubicbeziercurve9) instead.
+
+**Parameters**
+
+| Name      | Type    | Mandatory  | Description   |
+| --------- | ------ | ---- | ----- |
+| velocity  | number | Yes   | Initial velocity. It is a parameter that affects the elastic dynamic effect by external factors. It aims to ensure the smooth transition from the previous motion state to the elastic dynamic effect.|
+| mass      | number | Yes   | Quality. The force object of the elastic system will have inertia effects on the elastic system. The greater the mass, the greater the amplitude of the oscillation, and the slower the speed of restoring to the equilibrium position.|
+| stiffness | number | Yes   | Stiffness. It is the degree to which an object deforms by resisting the force applied. In an elastic system, the greater the stiffness, the stronger the ability to resist deformation, and the faster the speed of restoring to the equilibrium position.|
+| damping   | number | Yes   | Damping. It is a pure number and has no real physical meaning. It is used to describe the oscillation and attenuation of the system after being disturbed. The larger the damping, the smaller the number of oscillations of elastic motion and the smaller the oscillation amplitude.|
+
+
+## Curve
+
+| Name                 | Description                                      |
+| ------------------- | ---------------------------------------- |
+| Linear              | The animation speed keeps unchanged.                       |
+| Ease                | The animation starts slowly, accelerates, and then slows down towards the end. The cubic-bezier curve (0.25, 0.1, 0.25, 1.0) is used.|
+| EaseIn              | The animation starts at a low speed and then picks up speed until the end. The cubic-bezier curve (0.42, 0.0, 1.0, 1.0) is used.|
+| EaseOut             | The animation ends at a low speed. The cubic-bezier curve (0.0, 0.0, 0.58, 1.0) is used.|
+| EaseInOut           | The animation starts and ends at a low speed. The cubic-bezier curve (0.42, 0.0, 0.58, 1.0) is used.|
+| FastOutSlowIn       | The animation uses the standard cubic-bezier curve (0.4, 0.0, 0.2, 1.0).|
+| LinearOutSlowIn     | The animation uses the deceleration cubic-bezier curve (0.0, 0.0, 0.2, 1.0).|
+| FastOutLinearIn     | The animation uses the acceleration cubic-bezier curve (0.4, 0.0, 1.0, 1.0).|
+| ExtremeDeceleration | The animation uses the extreme deceleration cubic-bezier curve (0.0, 0.0, 0.0, 1.0).|
+| Sharp               | The animation uses the sharp cubic-bezier curve (0.33, 0.0, 0.67, 1.0).|
+| Rhythm              | The animation uses the rhythm cubic-bezier curve (0.7, 0.0, 0.2, 1.0).|
+| Smooth              | The animation uses the smooth cubic-bezier curve (0.4, 0.0, 0.4, 1.0).|
+| Friction            | The animation uses the friction cubic-bezier curve (0.2, 0.0, 0.2, 1.0).|
 
-  ```ts
-  import Curves from '@ohos.curves'
-  let curve = Curves.init(Curve.EaseIn) // Create an interpolation curve which is slow and then fast by default.
-  let value: number = curve.interpolate(0.5) // Calculate the interpolation for half of the time.
-  ```
 
 ## Example
 
 ```ts
+// xxx.ets
 import Curves from '@ohos.curves'
 @Entry
 @Component
@@ -124,14 +265,13 @@ struct ImageComponent {
         .height(this.heightSize)
         .backgroundColor(Color.Red)
         .onClick(()=> {
-          let curve = Curves.cubicBezier(0.25, 0.1, 0.25, 1.0);
+          let curve = Curves.cubicBezierCurve(0.25, 0.1, 0.25, 1.0);
           this.widthSize = curve.interpolate(0.5) * this.widthSize;
           this.heightSize = curve.interpolate(0.5) * this.heightSize;
         })
-        .animation({duration: 2000 , curve: Curves.spring(0.25, 0.1, 0.25, 1.0)})
+        .animation({duration: 2000 , curve: Curves.stepsCurve(9, true)})
     }.width("100%").height("100%")
   }
 }
 ```
-
 ![en-us_image_0000001212058456](figures/en-us_image_0000001212058456.gif)

en/application-dev/reference/arkui-ts/ts-matrix-transformation.md

 # Matrix Transformation
 
-> **NOTE**<br>
-> This animation is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+Matrix transformation enables you to rotate, scale, skew, or translate an image.
+
+> **NOTE**
+>
+> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+
 
 ## Modules to Import
 
@@ -9,100 +13,138 @@
 import matrix4 from '@ohos.matrix4'
 ```
 
-## Required Permissions
-
-None
 
 ## matrix4.init
 
-init(array: Array&lt;number&gt;): Object
+init(array: Array&lt;number&gt;): Matrix4Transit
+
 
 Matrix constructor, which is used to create a 4x4 matrix by using the input parameter. Column-major order is used.
 
-1. Parameters
-  | Name | Type | Mandatory | Default Value | Description |
-  | -------- | -------- | -------- | -------- | -------- |
-  | array | Array&lt;number&gt; | Yes | [1, 0, 0, 0,<br/>0, 1, 0, 0,<br/>0, 0, 1, 0,<br/>0, 0, 0, 1] | A number array whose length is 16 (4 x 4). For details, see the parameter description. |
-
-2. Return value
-  | Type   | Description                                             |
-  | ------ | ------------------------------------------------------- |
-  | Object | 4x4 matrix object created based on the input parameter. |
-
-3. Parameter description
-  | Name | Type   | Mandatory | Description                                                                     |
-  | ---- | ------ | --------- | ------------------------------------------------------------------------------- |
-  | m00  | number | Yes       | Scaling value of the x-axis. Defaults to **1** for the unit matrix.             |
-  | m01  | number | Yes       | The second value, which is affected by the rotation of the x, y, and z axes.    |
-  | m02  | number | Yes       | The third value, which is affected by the rotation of the x, y, and z axes.     |
-  | m03  | number | Yes       | Meaningless.                                                                    |
-  | m10  | number | Yes       | The fifth value, which is affected by the rotation of the x, y, and z axes.     |
-  | m11  | number | Yes       | Scaling value of the y-axis. Defaults to **1** for the unit matrix.             |
-  | m12  | number | Yes       | The seventh value, which is affected by the rotation of the x, y, and z axes.   |
-  | m13  | number | Yes       | Meaningless.                                                                    |
-  | m20  | number | Yes       | The ninth value, which is affected by the rotation of the x, y, and z axes.     |
-  | m21  | number | Yes       | The tenth value, which is affected by the rotation of the x, y, and z axes.     |
-  | m22  | number | Yes       | Scaling value of the z-axis. Defaults to **1** for the unit matrix.             |
-  | m23  | number | Yes       | Meaningless.                                                                    |
-  | m30  | number | Yes       | Translation value of the x-axis, in px. Defaults to **0** for the unit matrix.  |
-  | m31  | number | Yes       | Translation value of the y-axis, in px. Defaults to **0** for the unit matrix.  |
-  | m32  | number | Yes       | Translation value of the z-axis, in px. Defaults to **0** for the unit matrix.  |
-  | m33  | number | Yes       | Valid in homogeneous coordinates, presenting the perspective projection effect. |
-
-4. Example
-  
-  ```ts
-  import Matrix4 from '@ohos.matrix4'
-  // Create a 4x4 matrix.
-  let matrix = Matrix4.init([1.0, 0.0, 0.0, 0.0,
+**Parameters**
+
+| Name| Type               | Mandatory| Description                                                        |
+| ------ | ------------------- | ---- | ------------------------------------------------------------ |
+| array  | Array&lt;number&gt; | Yes  | A number array whose length is 16 (4 x 4). For details, see **array**.<br>Default value:<br>[1, 0, 0, 0,<br>0, 1, 0, 0,<br>0, 0, 1, 0,<br>0, 0, 0, 1] |
+
+**Return value**
+
+| Type          | Description                        |
+| -------------- | ---------------------------- |
+| Matrix4Transit | 4x4 matrix object created based on the input parameter.|
+
+**array**
+
+| Name | Type    | Mandatory  | Description                  |
+| ---- | ------ | ---- | -------------------- |
+| m00  | number | Yes   | Scaling value of the x-axis. Defaults to **1** for the identity matrix.     |
+| m01  | number | Yes   | The second value, which is affected by the rotation of the x, y, and z axes.  |
+| m02  | number | Yes   | The third value, which is affected by the rotation of the x, y, and z axes.  |
+| m03  | number | Yes   | Meaningless.              |
+| m10  | number | Yes   | The fifth value, which is affected by the rotation of the x, y, and z axes.  |
+| m11  | number | Yes   | Scaling value of the y-axis. Defaults to **1** for the identity matrix.     |
+| m12  | number | Yes   | The seventh value, which is affected by the rotation of the x, y, and z axes.  |
+| m13  | number | Yes   | Meaningless.              |
+| m20  | number | Yes   | The ninth value, which is affected by the rotation of the x, y, and z axes.  |
+| m21  | number | Yes   | The tenth value, which is affected by the rotation of the x, y, and z axes. |
+| m22  | number | Yes   | Scaling value of the z-axis. Defaults to **1** for the identity matrix.     |
+| m23  | number | Yes   | Meaningless.              |
+| m30  | number | Yes   | Translation value of the x-axis, in px. Defaults to **0** for the identity matrix.|
+| m31  | number | Yes   | Translation value of the y-axis, in px. Defaults to **0** for the identity matrix.|
+| m32  | number | Yes   | Translation value of the z-axis, in px. Defaults to **0** for the identity matrix.|
+| m33  | number | Yes   | Valid in homogeneous coordinates, presenting the perspective projection effect.   |
+
+**Example**
+
+```ts
+import matrix4 from '@ohos.matrix4'
+// Create a 4x4 matrix.
+let matrix = matrix4.init([1.0, 0.0, 0.0, 0.0,
                           0.0, 1.0, 0.0, 0.0,
                           0.0, 0.0, 1.0, 0.0,
                           0.0, 0.0, 0.0, 1.0])
-  ```
+@Entry
+@Component
+struct Tests {
+  build() {
+    Column() {
+      Image($r("app.media.zh"))
+        .width("40%")
+        .height(100)
+        .transform(matrix)
+    }
+  }
+}
+```
+
 
 ## matrix4.identity
 
-identity(): Object
+identity(): Matrix4Transit
+
 
-Matrix initialization function. Can return a unit matrix object.
+Matrix initialization function. Can return an identity matrix object.
 
-1. Return value
-  | Type   | Description         |
-  | ------ | ------------------- |
-  | Object | Unit matrix object. |
+**Return value**
 
-2. Example
+| Type          | Description          |
+| -------------- | -------------- |
+| Matrix4Transit | Identity matrix object.|
 
-  ```ts
-  // The effect of matrix 1 is the same as that of matrix 2.
-  import Matrix4 from '@ohos.matrix4'
-  let matrix = Matrix4.init([1.0, 0.0, 0.0, 0.0,
+**Example**
+
+```ts
+// The effect of matrix 1 is the same as that of matrix 2.
+import matrix4 from '@ohos.matrix4'
+let matrix1 = matrix4.init([1.0, 0.0, 0.0, 0.0,
                           0.0, 1.0, 0.0, 0.0,
                           0.0, 0.0, 1.0, 0.0,
                           0.0, 0.0, 0.0, 1.0])
-  let matrix2 = Matrix4.identity()
-  ```
+let matrix2 = matrix4.identity()
+@Entry
+@Component
+struct Tests {
+  build() {
+    Column() {
+      Image($r("app.media.zh"))
+        .width("40%")
+        .height(100)
+        .transform(matrix1)
+      Image($r("app.media.zh"))
+        .width("40%")
+        .height(100)
+        .margin({ top: 150 })
+        .transform(matrix2)
+    }
+  }
+}
+```
+
 
 ## matrix4.copy
 
-copy(): Object
+copy(): Matrix4Transit
+
 
 Matrix copy function, which is used to copy the current matrix object.
 
-1. Return value
-  | Type   | Description                        |
-  | ------ | ---------------------------------- |
-  | Object | Copy object of the current matrix. |
+**Return value**
+
+| Type          | Description                |
+| -------------- | -------------------- |
+| Matrix4Transit | Copy object of the current matrix.|
 
-2. Example
+**Example**
 
-  ```ts
-  import Matrix4 from '@ohos.matrix4'
-  @Entry
-  @Component
-  struct Test {
+```ts
+// xxx.ets
+import matrix4 from '@ohos.matrix4'
+@Entry
+@Component
+struct Test {
   private matrix1 = Matrix4.identity().translate({x:100})
   private matrix2 = this.matrix1.copy().scale({x:2})
+
   build() {
     Column() {
       Image($r("app.media.bg1"))
@@ -116,99 +158,138 @@ Matrix copy function, which is used to copy the current matrix object.
         .transform(this.matrix2)
     }
   }
-  }
-  ```
+}
+```
+
+![en-us_image_0000001256858419](figures/en-us_image_0000001256858419.png)
 
-  ![en-us_image_0000001256858419](figures/en-us_image_0000001256858419.png)
 
 ## Matrix4
 
+
 ### combine
 
-combine(matrix: Matrix4): Object
+combine(matrix: Matrix4): Matrix4Transit
+
 
 Matrix overlay function, which is used to overlay the effects of two matrices to generate a new matrix object.
 
-1. Parameters
-  | Name   | Type    | Mandatory | Default Value | Description                   |
-  | ------ | ------- | --------- | ------------- | ----------------------------- |
-  | matrix | Matrix4 | Yes       | -             | Matrix object to be overlaid. |
-
-2. Return value
-  | Type   | Description                  |
-  | ------ | ---------------------------- |
-  | Object | Object after matrix overlay. |
-
-- Example
-  
-  ```ts
-  import Matrix4 from '@ohos.matrix4'
-  @Entry
-  @Component
-  struct Test {
-    private matrix1 = Matrix4.identity().translate({x:200}).copy()
-    private matrix2 = Matrix4.identity().scale({x:2}).copy()
+**Parameters**
+
+| Name| Type   | Mandatory| Description              |
+| ------ | ------- | ---- | ------------------ |
+| matrix | Matrix4 | Yes  | Matrix object to be overlaid.|
+
+**Return value**
+
+| Type          | Description              |
+| -------------- | ------------------ |
+| Matrix4Transit | Object after matrix overlay.|
+
+**Example**
+
+```ts
+// xxx.ets
+import matrix4 from '@ohos.matrix4'
+@Entry
+@Component
+struct Test {
+  private matrix1 = matrix4.identity().translate({x:200}).copy()
+  private matrix2 = matrix4.identity().scale({x:2}).copy()
+
   build() {
     Column() {
-       // Translate the x-axis by 100 pixels and then scale it up or down by 2x.
-        Image($r("app.media.bg1")).transform(this.matrix1.combine(this.matrix2)) 
+      // Before matrix transformation
+      Image($r("app.media.icon"))
+        .width("40%")
+        .height(100)
+        .margin({top:50})
+      // Translate the x-axis by 200px, and then scale down the x-axis twice.
+      Image($r("app.media.icon"))
+        .transform(this.matrix1.combine(this.matrix2))
         .width("40%")
       .height(100)
         .margin({top:50})
     }
   }
-  }
-  ```
+}
+```
+
+![en-us_image_0000001212378428](figures/en-us_image_0000001212378428.png)
 
-  ![en-us_image_0000001212378428](figures/en-us_image_0000001212378428.png)
 
 ### invert
 
-invert(): Object
+invert(): Matrix4Transit
+
 
 Matrix inverse function. Can return an inverse matrix of the current matrix object, that is, get an opposite effect.
 
-1. Return value
-  | Type | Description |
-  | ------ | -------- |
-  | Object | Inverse matrix object of the current matrix. |
+**Return value**
 
-2. Example
+| Type          | Description                  |
+| -------------- | ---------------------- |
+| Matrix4Transit | Inverse matrix object of the current matrix.|
+
+**Example**
+
+```ts
+import matrix4 from '@ohos.matrix4'
+// The effect of matrix 1 (width scaled up by 2x) is opposite to that of matrix 2 (width scaled down by 2x).
+let matrix1 = matrix4.identity().scale({x:2})
+let matrix2 = matrix1.invert()
+@Entry
+@Component
+struct Tests {
+  build() {
+    Column() {
+      Image($r("app.media.zh"))
+        .width(200)
+        .height(100)
+        .transform(matrix1)
+        .margin({ top: 100 })
+      Image($r("app.media.zh"))
+        .width(200)
+        .height(100)
+        .margin({ top: 150 })
+        .transform(matrix2)
+    }
+  }
+}
+```
 
-  ```ts
-  import Matrix4 from '@ohos.matrix4'
-  // The effect of matrix 1 (width scaled up by 2x) is opposite to that of matrix 2 (width scaled down by 2x).
-  let matrix1 = Matrix4.identity().scale({x:2})
-  let matrix2 = matrix1.invert()
-  ```
 
 ### translate
 
-translate({x?: number, y?: number, z?: number}): Object
+translate({x?: number, y?: number, z?: number}): Matrix4Transit
+
 
 Matrix translation function, which is used to add the translation effect to the x, y, and z axes of the current matrix.
 
-1. Parameters
-  | Name | Type   | Mandatory | Default Value | Description                                |
-  |----- | ------ | -------- | -------------- | ------------------------------------------ |
-  | x    | number | No       | 0              | Translation distance of the x-axis, in px. |
-  | y    | number | No       | 0              | Translation distance of the y-axis, in px. |
-  | z    | number | No       | 0              | Translation distance of the z-axis, in px. |
+**Parameter**
 
+| Name| Type  | Mandatory| Description                                 |
+| ------ | ------ | ---- | ------------------------------------- |
+| x      | number | No  | Translation distance of the x-axis, in px.<br>Default value: **0**|
+| y      | number | No  | Translation distance of the y-axis, in px.<br>Default value: **0**|
+| z      | number | No  | Translation distance of the z-axis, in px.<br>Default value: **0**|
 
-2. Return value
-  | Type   | Description                                          |
-  | ------ | ---------------------------------------------------- |
-  | Object | Matrix object after the translation effect is added. |
+**Return value**
 
-3. Example
+| Type          | Description                        |
+| -------------- | ---------------------------- |
+| Matrix4Transit | Matrix object after the translation effect is added.|
+
+**Example**
+
+```ts
+// xxx.ets
+import matrix4 from '@ohos.matrix4'
+@Entry
+@Component
+struct Test {
+  private matrix1 = matrix4.identity().translate({x:100, y:200, z:30})
 
-  ```ts
-  import Matrix4 from '@ohos.matrix4'
-  @Entry
-  @Component
-  struct Test {
-    private matrix1 = Matrix4.identity().translate({x:100, y:200, z:30})
   build() {
     Column() {
       Image($r("app.media.bg1")).transform(this.matrix1)
@@ -216,40 +297,45 @@ Matrix translation function, which is used to add the translation effect to the
         .height(100)
     }
   }
-  }
-  ```
+}
+```
+
+![en-us_image_0000001212058494](figures/en-us_image_0000001212058494.png)
 
-  ![en-us_image_0000001212058494](figures/en-us_image_0000001212058494.png)
 
 ### scale
 
-scale({x?: number, y?: number, z?: number, centerX?: number, centerY?: number}): Object
+scale({x?: number, y?: number, z?: number, centerX?: number, centerY?: number}): Matrix4Transit
+
 
 Matrix scaling function, which is used to add the scaling effect to the x, y, and z axes of the current matrix.
 
-1. Parameters
-  | Name    | Type   | Mandatory | Default Value | Description                       |
-  | ------- | ------ | --------- | ------------- | --------------------------------- |
-  | x       | number | No        | 1             | Scaling multiple of the x-axis.   |
-  | y       | number | No        | 1             | Scaling multiple of the y-axis.   |
-  | z       | number | No        | 1             | Scaling multiple of the z-axis.   |
-  | centerX | number | No        | 0             | X coordinate of the center point. |
-  | centerY | number | No        | 0             | Y coordinate of the center point. |
-
-
-2. Return value
-  | Type   | Description                                      |
-  | ------ | ------------------------------------------------ |
-  | Object | Matrix object after the scaling effect is added. |
-
-3. Example
-  
-  ```ts
-  import Matrix4 from '@ohos.matrix4'
-  @Entry
-  @Component
-  struct Test {
-    private matrix1 = Matrix4.identity().scale({x:2, y:3, z:4, centerX:50, centerY:50})
+**Parameters**
+
+| Name | Type  | Mandatory| Description                             |
+| ------- | ------ | ---- | --------------------------------- |
+| x       | number | No  | Scaling multiple of the x-axis.<br>Default value: **1**    |
+| y       | number | No  | Scaling multiple of the y-axis.<br>Default value: **1**    |
+| z       | number | No  | Scaling multiple of the z-axis.<br>Default value: **1**    |
+| centerX | number | No  | X coordinate of the center point.<br>Default value: **0**|
+| centerY | number | No  | Y coordinate of the center point.<br>Default value: **0**|
+
+**Return value**
+
+| Type          | Description                        |
+| -------------- | ---------------------------- |
+| Matrix4Transit | Matrix object after the scaling effect is added.|
+
+**Example**
+
+```ts
+// xxx.ets
+import matrix4 from '@ohos.matrix4'
+@Entry
+@Component
+struct Test {
+  private matrix1 = matrix4.identity().scale({x:2, y:3, z:4, centerX:50, centerY:50})
+
   build() {
     Column() { 
       Image($r("app.media.bg1")).transform(this.matrix1)
@@ -257,40 +343,46 @@ Matrix scaling function, which is used to add the scaling effect to the x, y, an
         .height(100)
     }
   }
-  }
-  ```
+}
+```
+
+![zh-cn_image_0000001219864131](figures/zh-cn_image_0000001219864131.png)
 
-  ![en-us_image_0000001256978367](figures/en-us_image_0000001256978367.png)
 
 ### rotate
 
-rotate({x?: number, y?: number, z?: number, angle?: number, centerX?: Length, centerY?: Length}): Object
+rotate({x?: number, y?: number, z?: number, angle?: number, centerX?: Length, centerY?: Length}): Matrix4Transit
+
 
 Matrix rotation function, which is used to add the rotation effect to the x, y, and z axes of the current matrix.
 
-1. Parameters
-  | Name    | Type   | Mandatory | Default Value | Description                               |
-  | ------- | ------ | --------- | ------------- | ----------------------------------------- |
-  | x       | number | No        | 1             | X coordinate of the rotation axis vector. |
-  | y       | number | No        | 1             | Y coordinate of the rotation axis vector. |
-  | z       | number | No        | 1             | Z coordinate of the rotation axis vector. |
-  | angle   | number | No        | 0             | Rotation angle.                           |
-  | centerX | number | No        | 0             | X coordinate of the center point.         |
-  | centerY | number | No        | 0             | Y coordinate of the center point.         |
-
-2. Return value
-  | Type   | Description                                       |
-  | ------ | ------------------------------------------------- |
-  | Object | Matrix object after the rotation effect is added. |
-
-3. Example
-  
-  ```ts
-  import Matrix4 from '@ohos.matrix4'
-  @Entry
-  @Component
-  struct Test {
-    private matrix1 = Matrix4.identity().rotate({x:1, y:1, z:2, angle:30})
+**Parameters**
+
+| Name | Type  | Mandatory| Description                             |
+| ------- | ------ | ---- | --------------------------------- |
+| x       | number | No  | X coordinate of the rotation axis vector.<br>Default value: **1**  |
+| y       | number | No  | Y coordinate of the rotation axis vector.<br>Default value: **1**  |
+| z       | number | No  | Z coordinate of the rotation axis vector.<br>Default value: **1**  |
+| angle   | number | No  | Rotation angle.<br>Default value: **0**         |
+| centerX | number | No  | X coordinate of the center point.<br>Default value: **0**|
+| centerY | number | No  | Y coordinate of the center point.<br>Default value: **0**|
+
+**Return value**
+
+| Type          | Description                        |
+| -------------- | ---------------------------- |
+| Matrix4Transit | Matrix object after the rotation effect is added.|
+
+**Example**
+
+```ts
+// xxx.ets
+import matrix4 from '@ohos.matrix4'
+@Entry
+@Component
+struct Test {
+  private matrix1 = matrix4.identity().rotate({x:1, y:1, z:2, angle:30})
+
   build() {
     Column() {
       Image($r("app.media.bg1")).transform(this.matrix1)
@@ -298,37 +390,43 @@ Matrix rotation function, which is used to add the rotation effect to the x, y,
         .height(100)
     }.width("100%").margin({top:50})
   }
-  }
-  ```
+}
+```
+
+![en-us_image_0000001211898504](figures/en-us_image_0000001211898504.png)
 
-  ![en-us_image_0000001211898504](figures/en-us_image_0000001211898504.png)
 
 ### transformPoint
 
 transformPoint(point: Point): Point
 
+
 Matrix point transformation function, which is used to apply the current transformation effect to a coordinate point.
 
-1. Parameters
-  | Name  | Type  | Mandatory | Default Value | Description              |
-  | ----- | ----- | --------- | ------------- | ------------------------ |
-  | point | Point | Yes       | -             | Point to be transformed. |
+**Parameters**
+
+| Name| Type | Mandatory| Description              |
+| ------ | ----- | ---- | ------------------ |
+| point  | Point | Yes  | Point to be transformed.|
 
-2. Return value
-  | Type  | Description                               |
-  | ----- | ----------------------------------------- |
-  | Point | Point object after matrix transformation. |
+**Return value**
 
-3. Example
+| Type   | Description              |
+| ----- | ---------------- |
+| Point | Point object after matrix transformation|
 
-  ```ts
-  import Matrix4 from '@ohos.matrix4'
-  import prompt from '@system.prompt'
+**Example**
+
+```ts
+// xxx.ets
+import matrix4 from '@ohos.matrix4'
+import prompt from '@system.prompt'
+
+@Entry
+@Component
+struct Test {
+  private matrix1 = matrix4.identity().transformPoint([100, 10])
   
-  @Entry
-  @Component
-  struct Test {
-    private matrix1 = Matrix4.identity().transformPoint([100, 10])
   build() {
     Column() {
      Button("get Point")
@@ -337,7 +435,7 @@ Matrix point transformation function, which is used to apply the current transfo
       }).backgroundColor(0x2788D9)
     }.width("100%").padding(50)
   }
-  }
-  ```
+}
+```
 
-  ![en-us_image_0000001212218464](figures/en-us_image_0000001212218464.gif)
+![en-us_image_0000001212218464](figures/en-us_image_0000001212218464.gif)
\ No newline at end of file

en/application-dev/reference/arkui-ts/ts-media-components-video.md

@@ -2,7 +2,7 @@
 
 The **\<Video>** component is used to play a video and control its playback.
 
->  **NOTE**<br>
+>  **NOTE**
 >
 >  This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
@@ -24,9 +24,9 @@ Video(value: {src?: string | Resource, currentProgressRate?: number | string | P
 
 | Name             | Type                                                    | Mandatory| Description                                                    |
 | ------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
-| src                 | string \| [Resource](../../ui/ts-types.md)                   | No  | Path of the video source, which can be a local path or a URL.<br>The video resources can be stored in the **video** or **rawfile** folder under **resources**.<br>The path can include a **dataability://** prefix, which is used to access the video path provided by a Data ability. For details about the path, see [Data Ability Development](../../ability/fa-dataability.md).<br>**NOTE**<br>The supported video formats are MP4, MKV, WebM, and TS. |
-| currentProgressRate | number \| string \| PlaybackSpeed<sup>8+</sup> | No  | Video playback speed.<br>**NOTE**<br>The value of the number type can only be **0.75**, **1.0**, **1.25**, **1.75**, or **2.0**.<br>Default value: **1.0** \| **PlaybackSpeed.Speed_Forward_1_00_X** |
-| previewUri          | string \| PixelMap<sup>8+</sup> \| [Resource](../../ui/ts-types.md) | No  | Path of the preview image.                                            |
+| src                 | string \| [Resource](ts-types.md#resource)                   | No  | Path of the video source, which can be a local path or a URL.<br>The video resources can be stored in the **video** or **rawfile** folder under **resources**.<br>The path can include a **dataability://** prefix, which is used to access the video path provided by a Data ability. For details about the path, see [Data Ability Development](../../ability/fa-dataability.md).<br>**NOTE**<br>The supported video formats are MP4, MKV, WebM, and TS. |
+| currentProgressRate | number \| string \| PlaybackSpeed<sup>8+</sup> | No  | Video playback speed.<br>**NOTE**<br>The value of the number type can only be **0.75**, **1.0**, **1.25**, **1.75**, or **2.0**.<br>Default value: **1.0** \| PlaybackSpeed.Speed_Forward_1_00_X |
+| previewUri          | string \| PixelMap<sup>8+</sup> \| [Resource](ts-types.md#resource) | No  | Path of the preview image.                                            |
 | controller          | [VideoController](#videocontroller)                          | No  | Controller.                                                    |
 
 ## PlaybackSpeed<sup>8+</sup>
@@ -62,9 +62,10 @@ In addition to the universal events (ts-universal-events-click.md), the followin
 | onFinish(event:() =&gt; void)                      | Triggered when the video playback is finished.                                      |
 | onError(event:() =&gt; void)                       | Triggered when the video playback fails.                                      |
 | onPrepared(callback:(event?: { duration: number }) =&gt; void) | Triggered when video preparation is complete. The video duration (in seconds) is obtained from **duration**.|
-| onSeeking(callback:(event?: { duration: number }) =&gt; void) | Triggered to report the time (in seconds) when the progress bar is being dragged.                     |
-| onSeeked(callback:(event?: { duration: number }) =&gt; void) | Triggered to report the playback time (in seconds) when the user finishes dragging the progress bar.               |
-| onUpdate(callback:(event?: { duration: number }) =&gt; void) | Triggered once per 250 ms when the playback progress changes. The unit of the current playback time is second.    |
+| onSeeking(callback:(event?: { time: number }) =&gt; void) | Triggered to report the time (in seconds) when the progress bar is being dragged.                     |
+| onSeeked(callback:(event?: { time: number }) =&gt; void) | Triggered to report the playback time (in seconds) when the user finishes dragging the progress bar.               |
+| onUpdate(callback:(event?: { time: number }) =&gt; void) | Triggered once per 250 ms when the playback progress changes. The unit of the current playback time is second.    |
+| onFullscreenChange(callback:(event?: { fullscreen: boolean }) =&gt; void) | Triggered when the playback mode is switched between full-screen mode and non-full-screen mode. The value **true** means that the playback is in full-screen mode, and **false** means that the playback is non-full-screen mode.    |
 
 
 ## VideoController
@@ -158,7 +159,7 @@ Sets the video playback position with the specified seek mode.
 @Entry
 @Component
 struct VideoCreateComponent {
-  @State srcs: Resource = $rawfile('video1');
+  @State srcs: Resource = $rawfile('video1.mp4');
   @State previewUris: Resource = $r('app.media.img');
   @State currentProgressRates: number = 1;
   @State autoPlays: boolean = false;
@@ -201,7 +202,7 @@ struct VideoCreateComponent {
                 })
       Row() {
         Button("src").onClick(() => {
-            this.srcs = $rawfile('video2');
+            this.srcs = $rawfile('video2.mp4');
         });
         Button("previewUri").onClick(() => {
             this.previewUris = $r('app.media.img1');

en/application-dev/reference/arkui-ts/ts-methods-action-sheet.md

 # Action Sheet
 
+An action sheet is a dialog box that displays actions a user can take.
 
 >  **NOTE**
 >
-> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
-
-
-An action sheet is a dialog box that displays actions a user can take.
+>  The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
 
 ## Required Permissions
@@ -16,39 +14,41 @@ None
 
 ## ActionSheet.show
 
-show(options: { paramObject1})
+show(value: { title: string | Resource, message: string | Resource, confirm?: {value: string | Resource, action:() => void}, cancel?:()=>void, sheets: Array<SheetInfo>, autoCancel?:boolean, alignment?: DialogAlignment, offset?: { dx: number | string | Resource; dy: number | string | Resource } })
 
-Defines and shows an action sheet.
+Defines and shows the action sheet.
 
-- paramObject1 parameters
-  | Name | Type | Mandatory | Default Value | Description |
-  | -------- | -------- | -------- | -------- | -------- |
-  | title | string \|[Resource](../../ui/ts-types.md) | No | None | Title of the dialog box. |
-  | message | string \|[Resource](../../ui/ts-types.md) |  |  | Content of the dialog box. |
-  | autoCancel | boolean | No | true | Whether to close the dialog box when the overlay is clicked. |
-  | confirm | {<br/>value: string \| [Resource](../../ui/ts-types.md),<br/>action: () =&gt; void<br/>} | No | - | Text content of the confirm button and callback upon button clicking.<br/>**value**: button text.<br/>**action**: callback upon button clicking. |
-  | cancel | () =&gt; void | No | - | Callback invoked when the dialog box is closed after the overlay is clicked. |
-  | alignment | [DialogAlignment](ts-methods-custom-dialog-box.md) | No | DialogAlignment.Default | Alignment mode of the dialog box in the vertical direction. |
-  | offset | {<br/>dx: Length,<br/>dy: Length<br/>} | No | {<br/>dx: 0,<br/>dy: 0<br/>} | Offset of the dialog box relative to the alignment position. |
-  | sheets | Array<SheetInfo&gt; | Yes | - | Options in the dialog box. Each option supports the image, text, and callback. |
+**Parameters**
 
-- SheetInfo parameters
-  | Name | Type | Mandatory | Default Value | Description |
-  | -------- | -------- | -------- | -------- | -------- |
-  | title | string \| [Resource](../../ui/ts-types.md) | Yes | - | Sheet text. |
-  | icon | string \| [Resource](../../ui/ts-types.md) | No | None | Sheet icon. |
-  | action | ()=&gt;void | Yes | - | Callback when the sheet is selected. |
+| Name       | Type                   | Mandatory | Description                         |
+| ---------- | -------------------------- | ------- | ----------------------------- |
+| title      | string \| [Resource](ts-types.md#resource) | Yes    |  Title of the dialog box.|
+| message    | string \| [Resource](ts-types.md#resource) | Yes    | Content of the dialog box. |
+| autoCancel | boolean                           | No    | Whether to close the dialog box when the overlay is clicked.<br>Default value: **true**|
+| confirm    | {<br>value: string \| [Resource](ts-types.md#resource),<br>action: () =&gt; void<br>} | No | Text content of the confirm button and callback upon button clicking.<br>Default value:<br>**value**: button text.<br>**action**: callback upon button clicking.|
+| cancel     | () =&gt; void           | No    | Callback invoked when the dialog box is closed after the overlay is clicked.  |
+| alignment  | [DialogAlignment](ts-methods-custom-dialog-box.md#dialogalignment) | No    |  Alignment mode of the dialog box in the vertical direction.<br>Default value: **DialogAlignment.Default**|
+| offset     | {<br>dx: Length,<br>dy: Length<br>} | No     | Offset of the dialog box relative to the alignment position.{<br>dx: 0,<br>dy: 0<br>} |
+| sheets     | Array&lt;SheetInfo&gt; | Yes      | Options in the dialog box. Each option supports the image, text, and callback.|
 
+## SheetInfo parameters
 
-## Example
+| Name| Type                                                    | Mandatory| Description         |
+| ------ | ------------------------------------------------------------ | ---- | ----------------- |
+| title  | string \| [Resource](ts-types.md#resource) | Yes  | Sheet text.      |
+| icon   | string \| [Resource](ts-types.md#resource) | No  | Sheet icon. By default, no icon is displayed.    |
+| action | ()=&gt;void                                          | Yes  | Callback when the sheet is selected.|
 
 
+## Example
+
 
 ```ts
 // xxx.ets
 @Entry
 @Component
 struct ActionSheetExample {
+
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
       Button('Click to Show ActionSheet')
@@ -90,6 +90,4 @@ struct ActionSheetExample {
 }
 ```
 
-
 ![en-us_image_0000001212058508](figures/en-us_image_0000001212058508.gif)
-

en/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md

 # Alert Dialog Box
 
+You can set the text content and response callback for an alert dialog box.
 
 >  **NOTE**
 >
-> This method is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-
-
-The **<AlertDialog\>** component is used to display an alert dialog box. You can set the text content and response callback for an alert dialog box as needed.
+> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
 ## Attributes
 
-| Name | Type | Default Value | Description |
-| -------- | -------- | -------- | -------- |
-| show | options: { paramObject1 \| paramObject2} | - | Defines and displays the **<AlertDialog\>** component. |
-
-- paramObject1 parameters
-    | Name | Type | Mandatory | Default Value | Description |
-  | -------- | -------- | -------- | -------- | -------- |
-  | title | string \| [Resource](../../ui/ts-types.md) | No | - | Title of a dialog box. |
-  | message | string \| [Resource](../../ui/ts-types.md) | Yes | - | Content of the dialog box. |
-  | autoCancel | boolean | No | true | Whether to close the dialog box when the overlay is clicked. |
-  | confirm | {<br/>value: string \| [Resource](../../ui/ts-types.md),<br>fontColor?: Color\| number \| string \| [Resource](../../ui/ts-types.md),<br/>backgroundColor?:Color \| number \| string \| [Resource](../../ui/ts-types.md),<br>action: () =&gt; void<br/>} <br/> | No | - | Text content, text color, background color, and click callback of the confirm button. |
-  | cancel | () =&gt; void | No | - | Callback invoked when the dialog box is closed after the overlay is clicked. |
-  | alignment | [DialogAlignment](ts-methods-custom-dialog-box.md) | No | DialogAlignment.Default | Alignment mode of the dialog box in the vertical direction. |
-  | offset | {<br/>dx: Length \| [Resource](../../ui/ts-types.md),<br/>dy: Length \| [Resource](../../ui/ts-types.md)<br/>} | No | - | Offset of the dialog box relative to the alignment position. |
-  | gridCount | number | No | - | Number of grid columns occupied by the width of the dialog box. |
+| Name   | Type | Description|
+| ---- | --------------- | -------- |
+| show | AlertDialogParamWithConfirm \| AlertDialogParamWithButtons  | Shows the **\<AlertDialog>** component. |
 
-- paramObject2 parameters
-  | Name | Type | Mandatory | Default Value | Description |
-  | -------- | -------- | -------- | -------- | -------- |
-  | title | string \| [Resource](../../ui/ts-types.md) | No | - | Title of a dialog box. |
-  | message | string \| [Resource](../../ui/ts-types.md) | Yes | - | Content of the dialog box. |
-  | autoCancel | boolean | No | true | Whether to close the dialog box when the overlay is clicked. |
-  | primaryButton | {<br/>value: string \| [Resource](../../ui/ts-types.md),<br>fontColor?: Color \| number \| string \| [Resource](../../ui/ts-types.md),<br/>backgroundColor?:Color \| number\| string\| [Resource](../../ui/ts-types.md),<br>action: () =&gt; void<br/>} <br/> | No | - | Text content, text color, background color, and click callback of the primary button. |
-  | secondaryButton | {<br/>value: string \|[Resource](../../ui/ts-types.md),<br>fontColor?: Color \| number \| string \| [Resource](../../ui/ts-types.md),<br/>backgroundColor?:Color \| number\| string\| [Resource](../../ui/ts-types.md),<br>action: () =&gt; void<br/>} <br/> | No | - | Text content, text color, background color, and click callback of the secondary button. |
-  | cancel | () =&gt; void | No | - | Callback invoked when the dialog box is closed after the overlay is clicked. |
-  | alignment | [DialogAlignment](ts-methods-custom-dialog-box.md) | No | DialogAlignment.Default | Alignment mode of the dialog box in the vertical direction. |
-  | offset | {<br/>dx: Length \| [Resource](../../ui/ts-types.md),<br/>dy: Length  \| [Resource](../../ui/ts-types.md)<br/>} | No | - | Offset of the dialog box relative to the alignment position. |
-  | gridCount | number | No | - | Number of grid columns occupied by the width of the dialog box. |
+## AlertDialogParamWithConfirm
+| Name      | Type    | Mandatory    | Description        |
+| ---------- | ---------------- | ---------- | ------------------------------- |
+| title      | [ResourceStr](ts-types.md#resourcestr) | No   | Title of the dialog box.|
+| message    | [ResourceStr](ts-types.md#resourcestr) | Yes   | Content of the dialog box.|
+| autoCancel | boolean | No  | Whether to close the dialog box when the overlay is clicked.<br>Default value: **true**|
+| confirm    | {<br>value: string \| [Resource](ts-types.md#resource),<br>fontColor?: Color \| number \| string \| [Resource](ts-types.md#resource),<br>backgroundColor?: Color \| number \| string \| [Resource](ts-types.md#resource),<br>action: () =&gt; void<br>} | No  | Text content, text color, background color, and click callback of the confirm button.|
+| cancel     | () =&gt; void      | No    | Callback invoked when the dialog box is closed after the overlay is clicked.|
+| alignment  | [DialogAlignment](ts-methods-custom-dialog-box.md#dialogalignment) | No  | Alignment mode of the dialog box in the vertical direction.<br>Default value: **DialogAlignment.Default**|
+| offset     | [Offset](ts-types.md#offset) | No    | Offset of the dialog box relative to the alignment position.|
+| gridCount  | number                       | No    | Number of grid columns occupied by the width of the dialog box.         |
 
+## AlertDialogParamWithButtons
+| Name            | Type               | Mandatory    | Description                    |
+| --------------- | ---------------------- | ------------ | --------------------- |
+| title           | [ResourceStr](ts-types.md#resourcestr) | No    | Title of the dialog box.             |
+| message         | [ResourceStr](ts-types.md#resourcestr) | Yes    | Content of the dialog box.             |
+| autoCancel      | boolean           | No  | Whether to close the dialog box when the overlay is clicked.<br>Default value: **true**     |
+| primaryButton   | {<br>value: string \| [Resource](ts-types.md#resource),<br>fontColor?: Color \| number \| string \| [Resource](ts-types.md#resource),<br>backgroundColor?: Color \| number \| string \| [Resource](ts-types.md#resource),<br>action: () =&gt; void;<br>} | No| Text content, text color, background color, and click callback of the primary button.|
+| secondaryButton | {<br>value: string \| [Resource](ts-types.md#resource),<br>fontColor?: Color \| number \| string \| [Resource](ts-types.md#resource),<br>backgroundColor?: Color \| number \| string \| [Resource](ts-types.md#resource),<br>action: () =&gt; void;<br>} | No | Text content, text color, background color, and click callback of the primary button.|
+| cancel          | () =&gt; void      | No | Callback invoked when the dialog box is closed after the overlay is clicked.        |
+| alignment       | [DialogAlignment](ts-methods-custom-dialog-box.md#dialogalignment) | No  | Alignment mode of the dialog box in the vertical direction.<br>Default value: **DialogAlignment.Default**|
+| offset          | [Offset](ts-types.md#offset) | No | Offset of the dialog box relative to the alignment position.|
+| gridCount       | number                       | No | Number of grid columns occupied by the width of the dialog box.         |
 
 ## Example
 
-
 ```ts
 // xxx.ets
 @Entry
 @Component
 struct AlertDialogExample {
+  
   build() {
     Column({ space: 5 }) {
       Button('one button dialog')

en/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md

@@ -7,35 +7,39 @@ A custom dialog box is a dialog box you customize by using APIs of the **CustomD
 > The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
+
+
 ## APIs
 
-CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, autoCancel?: boolean, alignment?: DialogAlignment, offset?: Offset, customStyle?: boolean})
-
-
-- Parameters
-  | Name                   | Type                                    | Mandatory  | Default Value                    | Description                  |
-  | ---------------------- | ---------------------------------------- | ---- | ----------------------- | ---------------------- |
-  | builder                | [CustomDialog](../../ui/ts-component-based-customdialog.md) | Yes   | -                       | Constructor of the custom dialog box content.           |
-  | cancel                 | () => void                  | No   | -                       | Callback invoked when the dialog box is closed after the overlay exits.          |
-  | autoCancel             | boolean                                  | No   | true                    | Whether to allow users to click the overlay to exit.          |
-  | alignment              | DialogAlignment                          | No   | DialogAlignment.Default | Alignment mode of the dialog box in the vertical direction.        |
-  | offset                 | {<br>dx: Length \| [Resource](../../ui/ts-types.md#resource)<br>dy: Length  \| [Resource](../../ui/ts-types.md#resource)<br>} | No   | -                       | Offset of the dialog box relative to the alignment position.|
-  | customStyle            | boolean                                  | No   | false                   | Whether to use a custom style for the dialog box.          |
-  | gridCount<sup>8+</sup> | number                                   | No   | -                       | Number of grid columns occupied by the dialog box.         |
-
-- DialogAlignment
-  | Name                      | Description     |
-  | ------------------------ | ------- |
-  | Top                      | Vertical top alignment.|
-  | Center                   | Vertical center alignment.|
-  | Bottom                   | Vertical bottom alignment.|
-  | Default                  | Default alignment.  |
-  | TopStart<sup>8+</sup>    | Top left alignment.  |
-  | TopEnd<sup>8+</sup>      | Top right alignment.  |
-  | CenterStart<sup>8+</sup> | Center left alignment.  |
-  | CenterEnd<sup>8+</sup>   | Center right alignment.  |
-  | BottomStart<sup>8+</sup> | Bottom left alignment.  |
-  | BottomEnd<sup>8+</sup>   | Bottom right alignment.  |
+CustomDialogController(value:{builder: CustomDialog, cancel?: () =&gt; void, autoCancel?: boolean, alignment?: DialogAlignment, offset?: Offset, customStyle?: boolean, gridCount?: number})
+
+
+**Parameters**
+
+| Name                   | Type                                    | Mandatory                 | Description                  |
+| ---------------------- | ---------------------------------------- | ------------------------- | ---------------------- |
+| builder                | [CustomDialog](../../ui/ts-component-based-customdialog.md) | Yes    | Constructor of the custom dialog box content.           |
+| cancel                 | () =&gt; void                            | No             | Callback invoked when the dialog box is closed after the overlay exits.          |
+| autoCancel             | boolean                                            | No             | Whether to allow users to click the overlay to exit.<br>Default value: **true**          |
+| alignment              | [DialogAlignment](#dialogalignment)           | No             | Alignment mode of the dialog box in the vertical direction.<br>Default value: **DialogAlignment.Default**       |
+| offset                 | {<br>dx: Length \| [Resource](ts-types.md#resource),<br>dy: Length  \| [Resource](ts-types.md#resource)<br>} | No   | Offset of the dialog box relative to the alignment position.|
+| customStyle            | boolean                                  | No                   | Whether to use a custom style for the dialog box.<br>Default value: **false**          |
+| gridCount<sup>8+</sup> | number                                   | No                   | Number of grid columns occupied by the dialog box.             |
+
+## DialogAlignment
+
+| Name                      | Description     |
+| ------------------------ | ------- |
+| Top                      | Vertical top alignment.|
+| Center                   | Vertical center alignment.|
+| Bottom                   | Vertical bottom alignment.|
+| Default                  | Default alignment.  |
+| TopStart<sup>8+</sup>    | Top left alignment.  |
+| TopEnd<sup>8+</sup>      | Top right alignment.  |
+| CenterStart<sup>8+</sup> | Center left alignment.  |
+| CenterEnd<sup>8+</sup>   | Center right alignment.  |
+| BottomStart<sup>8+</sup> | Bottom left alignment.  |
+| BottomEnd<sup>8+</sup>   | Bottom right alignment.  |
 
 
 ## CustomDialogController

en/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md

@@ -4,7 +4,7 @@ A date picker dialog box is a dialog box that allows users to select a date from
 
 >  **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 of this module are supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version.
 
 
 ## Required Permissions
@@ -24,9 +24,9 @@ Shows a date picker dialog box.
   | end | Date | No| Date('2100-12-31') | End date of the picker.|
   | selected | Date | No| Current system date| Date of the selected item.|
   | lunar | boolean | No| false | Whether to display the lunar calendar.|
-  | onAccept | (value: [DatePickerResult](ts-basic-components-datepicker.md#DatePickerResult)) => void | No| - | Callback invoked when the OK button in the dialog box is clicked. |
-  | onCancel | () => void | No| - | Callback invoked when the Cancel button in the dialog box is clicked. |
-  | onChange | (value: [DatePickerResult](ts-basic-components-datepicker.md#DatePickerResult)) => void | No| - | Callback invoked when the selected item in the picker changes. |
+  | onAccept | (value: [DatePickerResult](ts-basic-components-datepicker.md#DatePickerResult)) => void | No| - | Callback invoked when the OK button in the dialog box is clicked.|
+  | onCancel | () => void | No| - | Callback invoked when the Cancel button in the dialog box is clicked.|
+  | onChange | (value: [DatePickerResult](ts-basic-components-datepicker.md#DatePickerResult)) => void | No| - | Callback invoked when the selected item in the picker changes.|
 
 ## Example
 

en/application-dev/reference/arkui-ts/ts-methods-menu.md

 # Menu
 
-The menu bound to a component through [bindContextMenu](../ts-universal-attributes-menu.md#atrributes) on a page can be closed as needed.
+The menu bound to a component through [bindContextMenu](./ts-universal-attributes-menu.md#atrributes) on a page can be closed as needed.
 
 >  **NOTE**
 >
@@ -15,7 +15,7 @@ None
 ## ContextMenu.close
 |Name|Description|
 |----|---|
-| close(): void | Closes the menu bound to this component through [bindContextMenu](../ts-universal-attributes-menu.md#atrributes) on a page. |
+| close(): void | Closes the menu bound to this component through [bindContextMenu](./ts-universal-attributes-menu.md#atrributes) on a page.|
 
 
 ## Example

en/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md

@@ -13,20 +13,20 @@ None
 
 ## TextPickerDialog.show
 
-show(options: TextPickerDialogOptions)
+show(options?: TextPickerDialogOptions)
 
 Shows a text picker in the given settings.
 
 - TextPickerDialogOptions
   | Name| Type| Mandatory| Default Value| Description|
   | -------- | -------- | -------- | -------- | -------- |
-  | range | string[] | Yes| - | Data selection range of the picker.|
+  | range | string[] \| [Resource](../../ui/ts-types.md#resource)| Yes| - | Data selection range of the picker.|
   | selected | number | No| 0 | Index of the selected item in the range.|
   | value       | string           | No   | -    | Value of the selected item. This parameter does not take effect when the **selected** parameter is set. If the value is not within the range, the first item in the range is used instead.|
   | defaultPickerItemHeight | number \| string | No| - | Default height of an item in the picker.|
-  | onAccept | (value: TextPickerResult) => void | No| - | Callback invoked when the OK button in the dialog box is clicked. |
-  | onCancel | () => void | No| - | Callback invoked when the Cancel button in the dialog box is clicked. |
-  | onChange | (value: TextPickerResult) => void | No| - | Callback invoked when the selected item in the picker changes. |
+  | onAccept | (value: TextPickerResult) => void | No| - | Callback invoked when the OK button in the dialog box is clicked.|
+  | onCancel | () => void | No| - | Callback invoked when the Cancel button in the dialog box is clicked.|
+  | onChange | (value: TextPickerResult) => void | No| - | Callback invoked when the selected item in the picker changes.|
 
 - TextPickerResult
   | Name| Type| Description|

en/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md

@@ -4,7 +4,7 @@ A time picker dialog box is a dialog box that allows users to select a time from
 
 >  **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 of this module are supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version.
 
 
 ## Required Permissions
@@ -22,9 +22,9 @@ Shows a time picker dialog box.
   | -------- | -------- | -------- | -------- | -------- |
   | selected | Date | No| Current system time| Time of the selected item.|
   | useMilitaryTime | boolean | No| false | Whether to display time in 24-hour format.|
-  | onAccept | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult)) => void | No| - | Callback invoked when the OK button in the dialog box is clicked. |
-  | onCancel | () => void | No| - | Callback invoked when the Cancel button in the dialog box is clicked. |
-  | onChange | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult)) => void | No| - | Callback invoked when the selected item in the picker changes. |
+  | onAccept | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult)) => void | No| - | Callback invoked when the OK button in the dialog box is clicked.|
+  | onCancel | () => void | No| - | Callback invoked when the Cancel button in the dialog box is clicked.|
+  | onChange | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult)) => void | No| - | Callback invoked when the selected item in the picker changes.|
 
 ## Example
 

en/application-dev/reference/arkui-ts/ts-motion-path-animation.md

@@ -9,7 +9,7 @@ The motion path animation is used to animate a component along a custom path.
 
 ## Attributes
 
-| Parameter| Type| Default Value| Description|
+| Name| Type| Default Value| Description|
 | -------- | -------- | -------- | -------- |
 | 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 value is an SVG path string.<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.|
 
@@ -26,6 +26,7 @@ struct MotionPathExample {
   build() {
     Column() {
       Button('click me')
+        // Execute the animation: Move from the start point to (300,200), then to (300,500), and finally to the end point.
         .motionPath({ path: 'Mstart.x start.y L300 200 L300 500 Lend.x end.y', from: 0.0, to: 1.0, rotatable: true })
         .onClick((event: ClickEvent) => {
           animateTo({ duration: 4000, curve: Curve.Linear }, () => {

en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md

 # OffscreenCanvasRenderingContext2D
 
-
-> **NOTE**<br>The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
+Use **OffscreenCanvasRenderingContext2D** to draw rectangles, images, and text offscreen onto a canvas. Drawing offscreen onto a canvas is a process where content to draw onto the canvas is first drawn in the buffer, and then converted into a picture, and finally the picture is drawn on the canvas. This process increases the drawing efficiency.
 
 
-Use **OffscreenCanvasRenderingContext2D** to draw rectangles, images, and text offscreen onto a canvas. Drawing offscreen onto a canvas is a process where content to draw onto the canvas is first drawn in the buffer, and then converted into a picture, and finally the picture is drawn on the canvas. This process increases the drawing efficiency.
+>  **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.
 
 
 ## APIs
 
 OffscreenCanvasRenderingContext2D(width: number, height: number, setting: RenderingContextSettings)
 
-- Parameters
-    | Name    | Type                                     | Mandatory | Default Value | Description                     |
-    | ------- | ---------------------------------------- | --------- | ------------- | ------------------------------- |
-    | width   | number                                   | Yes       | -             | Width of the offscreen canvas.  |
-    | height  | number                                   | Yes       | -             | Height of the offscreen canvas. |
-    | setting | [RenderingContextSettings](ts-canvasrenderingcontext2d.md#renderingcontextsettings) | Yes       | -             | See RenderingContextSettings.   |
+**Parameters**
+
+| Name    | Type                                    | Mandatory  | Default Value | Description                          |
+| ------- | ---------------------------------------- | ---- | ---- | ------------------------------ |
+| width   | number                                   | Yes   | -    | Width of the offscreen canvas.                       |
+| height  | number                                   | Yes   | -    | Height of the offscreen canvas.                       |
+| setting | [RenderingContextSettings](ts-canvasrenderingcontext2d.md#renderingcontextsettings) | Yes   | -    | See RenderingContextSettings.|
 
 
 ## Attributes
 
-| Name                                     | Type                                     | Default Value                   | Description                              |
-| ---------------------------------------- | ---------------------------------------- | ------------------------------- | ---------------------------------------- |
-| [fillStyle](#fillstyle)                  | &lt;color&gt; \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | -                               | Style used to fill an area.<br/>- When the type is **&lt;color&gt;**, this attribute indicates the fill color.<br/>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the [createLinearGradient](#createlineargradient) method.<br/>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the [createPattern](#createpattern) method. |
-| [lineWidth](#linewidth)                  | number                                   | -                               | Line width.                              |
-| [strokeStyle](#strokestyle)              | &lt;color&gt; \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | -                               | Stroke style.<br/>- When the type is **&lt;color&gt;**, this attribute indicates the stroke color.<br/>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the [createLinearGradient](#createlineargradient) method.<br/>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the [createPattern](#createpattern) method. |
-| [lineCap](#linecap)                      | string                                   | 'butt'                          | Style of the line endpoints. The options are as follows:<br/>- **'butt'**: The endpoints of the line are squared off.<br/>- **'round'**: The endpoints of the line are rounded.<br/>- **'square'**: The endpoints of the line are squared off by adding a box with an equal width and half the height of the line's thickness. |
-| [lineJoin](#linejoin)                    | string                                   | 'miter'                         | Style of the shape used to join line segments. The options are as follows:<br/>- **'round'**: The shape used to join line segments is a rounded corner with the radius equal to the line width.<br/>- **'bevel'**: The shape used to join line segments is a beveled corner. The rectangular corner of each line is independent.<br/>- **'miter'**: The shape used to join line segments is a mitered corner. The corner is formed by extending the outside edges of the lines until they meet. You can adjust the effect of this attribute using **miterLimit**. |
-| [miterLimit](#miterlimit)                | number                                   | 10                              | Maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet. |
-| [font](#font)                            | string                                   | 'normal normal 14px sans-serif' | Font style.<br/>Syntax: ctx.font='font-size font-family'<br/>- (Optional) **font-size**: font size and row height. The unit can only be px.<br/>- (Optional) **font-family**: font family.<br/>Syntax: ctx.font='font-style font-weight font-size font-family'<br/>- (Optional) **font-style**: specifies the font style. Available values are **'normal'** and **'italic'**.<br/>- (Optional) **font-weight**: font weight. Available values are as follows: **'normal'**, **'bold'**, **'bolder'**, **'lighter'**, **100**, **200**, **300**, **400**, **500**, **600**, **700**, **800**, **900**<br/>- (Optional) **font-size**: font size and row height. The unit can only be px.<br/>- (Optional) **font-family**: font family. Available values are **'sans-serif'**, **'serif'**, and **'monospace'**. |
-| [textAlign](#textalign)                  | string                                   | 'left'                          | Text alignment mode. Available values are as follows:<br/>- **'left'**: The text is left-aligned.<br/>- **'right'**: The text is right-aligned.<br/>- **'center'**: The text is center-aligned.<br/>- **'start'**: The text is aligned with the start bound.<br/>- **'end'**: The text is aligned with the end bound.<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>> In the **ltr** layout mode, the value **start** equals **left**. In the **rtl** layout mode, the value **start** equals **right**. |
-| [textBaseline](#textbaseline)            | string                                   | 'alphabetic'                    | Horizontal alignment mode of text. Available values are as follows:<br/>- **'alphabetic'**: The text baseline is the normal alphabetic baseline.<br/>- **'top'**: The text baseline is on the top of the text bounding box.<br/>- **'hanging'**: The text baseline is a hanging baseline over the text.<br/>- **'middle'**: The text baseline is in the middle of the text bounding box.<br/>- **'ideographic'**: The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline, the ideographic baseline is located at the bottom of the excess character.<br/>- **'bottom'**: The text baseline is at the bottom of the text bounding box. Its difference from the ideographic baseline is that the ideographic baseline does not consider letters in the next line. |
-| [globalAlpha](#globalalpha)              | number                                   | -                               | Opacity. **0.0**: completely transparent; **1.0**: completely opaque. |
-| [lineDashOffset](#linedashoffset)        | number                                   | 0.0                             | Offset of the dashed line. The precision is float. |
-| [globalCompositeOperation](#globalcompositeoperation) | string                                   | 'source-over'                   | Composition operation type. Available values are as follows: **'source-over'**, **'source-atop'**, **'source-in'**, **'source-out'**, **'destination-over'**, **'destination-atop'**, **'destination-in'**, **'destination-out'**, **'lighter'**, **'copy'**, and **'xor'**. |
-| [shadowBlur](#shadowblur)                | number                                   | 0.0                             | Blur level during shadow drawing. A larger value indicates a more blurred effect. The precision is float. |
-| [shadowColor](#shadowcolor)              | &lt;color&gt;                            | -                               | Shadow color.                            |
-| [shadowOffsetX](#shadowoffsetx)          | number                                   | -                               | X-axis shadow offset relative to the original object. |
-| [shadowOffsetY](#shadowoffsety)          | number                                   | -                               | Y-axis shadow offset relative to the original object. |
-| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean                                  | true                            | Whether to adjust the image smoothness during image drawing. The value **true** means to enable this feature, and **false** means the opposite. |
-| imageSmoothingQuality                    | string                                   | 'low'                           | Image smoothness. The value can be **'low'**, **'medium'**, or **'high'**. |
+| Name                                                  | Type                                                         | Description                                                  |
+| ----------------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
+| [fillStyle](#fillstyle)                               | string \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | Style to fill an area.<br>- When the type is **\<color>**, this parameter indicates the color of the filling area.<br>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.<br>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API. |
+| [lineWidth](#linewidth)                               | number                                                       | Line width.                                                  |
+| [strokeStyle](#strokestyle)                           | string \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | Stroke style.<br>- When the type is **\<color>**, this parameter indicates the stroke color.<br>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.<br>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API. |
+| [lineCap](#linecap)                                   | CanvasLineCap                                                | Style of the line endpoints. The options are as follows:<br>- **butt**: The endpoints of the line are squared off.<br>- **round**: The endpoints of the line are rounded.<br>- **square**: The endpoints of the line are squared off, and each endpoint has added a rectangle whose length is the same as the line thickness and whose width is half of the line thickness.<br>- Default value: **'butt'** |
+| [lineJoin](#linejoin)                                 | CanvasLineJoin                                               | Style of the shape used to join line segments. The options are as follows:<br>- **round**: The intersection is a sector, whose radius at the rounded corner is equal to the line width.<br>- **bevel**: The intersection is a triangle. The rectangular corner of each line is independent.<br>- **miter**: The intersection has a miter corner by extending the outside edges of the lines until they meet. You can view the effect of this attribute in **miterLimit**.<br>- Default value: **'miter'** |
+| [miterLimit](#miterlimit)                             | number                                                       | Maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet.<br>- Default value: **10** |
+| [font](#font)                                         | string                                                       | Font style.<br>Syntax: ctx.font='font-size font-family'<br>- (Optional) **font-size**: font size and row height. The unit can only be pixels.<br>(Optional) **font-family**: font family.<br>Syntax: ctx.font='font-style font-weight font-size font-family'<br>- (Optional) **font-style**: font style. Available values are **normal** and **italic**.<br>- (Optional) **font-weight**: font weight. Available values are as follows: **normal**, **bold**, **bolder**, **lighter**, **100**, **200**, **300**, **400**, **500**, **600**, **700**, **800**, **900**.<br>- (Optional) **font-size**: font size and row height. The unit can only be pixels.<br>- (Optional) **font-family**: font family. Available values are **sans-serif**, **serif**, and **monospace**.<br>Default value: **'normal normal 14px sans-serif'** |
+| [textAlign](#textalign)                               | CanvasTextAlign                                              | Text alignment mode. Available values are as follows:<br>- **left**: The text is left-aligned.<br>- **right**: The text is right-aligned.<br>- **center**: The text is center-aligned.<br>- **start**: The text is aligned with the start bound.<br>- **end**: The text is aligned with the end bound.<br>**NOTE**<br>In the **ltr** layout mode, the value **'start'** equals **'left'**. In the **rtl** layout mode, the value **'start'** equals **'right'**.<br>- Default value: **'left'** |
+| [textBaseline](#textbaseline)                         | CanvasTextBaseline                                           | Horizontal alignment mode of text. Available values are as follows:<br>- **alphabetic**: The text baseline is the normal alphabetic baseline.<br>- **top**: The text baseline is on the top of the text bounding box.<br>- **hanging**: The text baseline is a hanging baseline over the text.<br>- **middle**: The text baseline is in the middle of the text bounding box.<br>**'ideographic'**: The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline, the ideographic baseline is located at the bottom of the excess character.<br>- **bottom**: The text baseline is at the bottom of the text bounding box. Its difference from the ideographic baseline is that the ideographic baseline does not consider letters in the next line.<br>- Default value: **'alphabetic'** |
+| [globalAlpha](#globalalpha)                           | number                                                       | Opacity.<br>**0.0**: completely transparent.<br>**1.0**: completely opaque. |
+| [lineDashOffset](#linedashoffset)                     | number                                                       | Offset of the dashed line. The precision is float.<br>- Default value: **0.0** |
+| [globalCompositeOperation](#globalcompositeoperation) | string                                                       | Composition operation type. Available values are as follows: **'source-over'**, **'source-atop'**, **'source-in'**, **'source-out'**, **'destination-over'**, **'destination-atop'**, **'destination-in'**, **'destination-out'**, **'lighter'**, **'copy'**, and **'xor'**.<br>- Default value: **'source-over'** |
+| [shadowBlur](#shadowblur)                             | number                                                       | Blur level during shadow drawing. A larger value indicates a more blurred effect. The precision is float.<br>- Default value: **0.0** |
+| [shadowColor](#shadowcolor)                           | string                                                       | Shadow color.                                                |
+| [shadowOffsetX](#shadowoffsetx)                       | number                                                       | X-axis shadow offset relative to the original object.        |
+| [shadowOffsetY](#shadowoffsety)                       | number                                                       | Y-axis shadow offset relative to the original object.        |
+| [imageSmoothingEnabled](#imagesmoothingenabled)       | boolean                                                      | Whether to adjust the image smoothness during image drawing. The value **true** means to enable this feature, and **false** means the opposite.<br>- Default value: **true** |
+| imageSmoothingQuality                                 | string                                                       | Image smoothness. The value can be **'low'**, **'medium'**, or **'high'**.<br>- Default value: **'low'** |
 
 > **NOTE**
-> The value of the **&lt;color&gt;** type can be in 'rgb(255, 255, 255)', 'rgba(255, 255, 255, 1.0)', or '\#FFFFFF' format.
+>
+> For **fillStyle**, **shadowColor**, and **strokeStyle**, the value format of the string type is 'rgb(255, 255, 255)', 'rgba(255, 255, 255, 1.0)', '\#FFFFFF'.
 
 
 ### fillStyle
 
-
 ```ts
 // xxx.ets
 @Entry
@@ -82,7 +84,6 @@ struct FillStyleExample {
 
 ### lineWidth
 
-
 ```ts
 // xxx.ets
 @Entry
@@ -116,7 +117,6 @@ struct LineWidthExample {
 
 ### strokeStyle
 
-
 ```ts
 // xxx.ets
 @Entry
@@ -146,13 +146,11 @@ struct StrokeStyleExample {
 }
 ```
 
-
 ![en-us_image_0000001257058429](figures/en-us_image_0000001257058429.png)
 
 
 ### lineCap
 
-
 ```ts
 // xxx.ets
 @Entry
@@ -190,7 +188,6 @@ struct LineCapExample {
 
 ### lineJoin
 
-
 ```ts
 // xxx.ets
 @Entry
@@ -229,7 +226,6 @@ struct LineJoinExample {
 
 ### miterLimit
 
-
 ```ts
 // xxx.ets
 @Entry
@@ -268,7 +264,6 @@ struct MiterLimit {
 
 ### font
 
-
 ```ts
 // xxx.ets
 @Entry
@@ -302,7 +297,6 @@ struct Fonts {
 
 ### textAlign
 
-
 ```ts
 // xxx.ets
 @Entry
@@ -351,7 +345,6 @@ struct CanvasExample {
 
 ### textBaseline
 
-
 ```ts
 // xxx.ets
 @Entry
@@ -400,7 +393,6 @@ struct TextBaseline {
 
 ### globalAlpha
 
-
 ```ts
 // xxx.ets
 @Entry
@@ -437,7 +429,6 @@ struct GlobalAlpha {
 
 ### lineDashOffset
 
-
 ```ts
 // xxx.ets
 @Entry
@@ -456,6 +447,7 @@ struct LineDashOffset {
         .onReady(() =>{
           this.offContext.arc(100, 75, 50, 0, 6.28)
           this.offContext.setLineDash([10,20])
+          this.offContext.lineDashOffset = 10.0;
           this.offContext.stroke();
           var image = this.offContext.transferToImageBitmap()
           this.context.transferFromImageBitmap(image)
@@ -465,27 +457,26 @@ struct LineDashOffset {
     .height('100%')
   }
 }
-```
 
+```
 ![en-us_image_0000001212058506](figures/en-us_image_0000001212058506.png)
 
 
 ### globalCompositeOperation
 
 | Name              | Description                      |
-| ---------------- | ---------------------------------------- |
+| ---------------- | ------------------------ |
 | source-over      | Displays the new drawing above the existing drawing. This attribute is used by default.  |
 | source-atop      | Displays the new drawing on the top of the existing drawing.       |
 | source-in        | Displays the new drawing inside the existing drawing.        |
-| source-out       | Displays the part of the new drawing that is outside of the existing drawing. |
+| source-out       | Displays part of the new drawing that is outside of the existing drawing.       |
 | destination-over | Displays the existing drawing above the new drawing.       |
 | destination-atop | Displays the existing drawing on the top of the new drawing.       |
 | destination-in   | Displays the existing drawing inside the new drawing.        |
-| destination-out  | Displays the part of the existing drawing that is outside of the new drawing. |
-| lighter          | Displays both the new drawing and the existing drawing. |
+| destination-out  | Displays the existing drawing outside the new drawing.        |
+| lighter          | Displays both the new and existing drawing.         |
 | copy             | Displays the new drawing and neglects the existing drawing.       |
-| xor              | Combines the new drawing and existing drawing using the XOR operation. |
-
+| xor              | Combines the new drawing and existing drawing using the XOR operation.|
 
 ```ts
 // xxx.ets
@@ -528,7 +519,6 @@ struct GlobalCompositeOperation {
 
 ### shadowBlur
 
-
 ```ts
 // xxx.ets
 @Entry
@@ -564,7 +554,6 @@ struct ShadowBlur {
 
 ### shadowColor
 
-
 ```ts
 // xxx.ets
 @Entry
@@ -601,7 +590,6 @@ struct ShadowColor {
 
 ### shadowOffsetX
 
-
 ```ts
 // xxx.ets
 @Entry
@@ -638,7 +626,6 @@ struct ShadowOffsetX {
 
 ### shadowOffsetY
 
-
 ```ts
 // xxx.ets
 @Entry
@@ -675,7 +662,6 @@ struct ShadowOffsetY {
 
 ### imageSmoothingEnabled
 
-
 ```ts
 // xxx.ets
 @Entry
@@ -717,15 +703,16 @@ fillRect(x: number, y: number, w: number, h: number): void
 
 Fills a rectangle on the canvas.
 
-- Parameters
-    | Name   | Type   | Mandatory | Default Value | Description                              |
-    | ------ | ------ | --------- | ------------- | ---------------------------------------- |
-    | x      | number | Yes       | 0             | X-coordinate of the upper left corner of the rectangle. |
-    | y      | number | Yes       | 0             | Y-coordinate of the upper left corner of the rectangle. |
-    | width  | number | Yes       | 0             | Width of the rectangle.                  |
-    | height | number | Yes       | 0             | Height of the rectangle.                 |
+ **Parameters**
 
-- Example
+| Name    | Type    | Mandatory  | Default Value | Description           |
+| ------ | ------ | ---- | ---- | ------------- |
+| x      | number | Yes   | 0    | X-coordinate of the upper left corner of the rectangle.|
+| y      | number | Yes   | 0    | Y-coordinate of the upper left corner of the rectangle.|
+| width  | number | Yes   | 0    | Width of the rectangle.     |
+| height | number | Yes   | 0    | Height of the rectangle.     |
+
+ **Example**
 
   ```ts
   // xxx.ets
@@ -763,15 +750,16 @@ strokeRect(x: number, y: number, w: number, h: number): void
 
 Draws an outlined rectangle on the canvas.
 
-- Parameters
-    | Name   | Type   | Mandatory | Default Value | Description                              |
-    | ------ | ------ | --------- | ------------- | ---------------------------------------- |
-    | x      | number | Yes       | 0             | X-coordinate of the upper left corner of the rectangle. |
-    | y      | number | Yes       | 0             | Y-coordinate of the upper left corner of the rectangle. |
-    | width  | number | Yes       | 0             | Width of the rectangle.                  |
-    | height | number | Yes       | 0             | Height of the rectangle.                 |
+ **Parameters**
+
+| Name    | Type    | Mandatory  | Default Value | Description          |
+| ------ | ------ | ---- | ---- | ------------ |
+| x      | number | Yes   | 0    | X-coordinate of the upper left corner of the rectangle.|
+| y      | number | Yes   | 0    | Y-coordinate of the upper left corner of the rectangle.|
+| width  | number | Yes   | 0    | Width of the rectangle.    |
+| height | number | Yes   | 0    | Height of the rectangle.    |
 
-- Example
+ **Example**
 
   ```ts
   // xxx.ets
@@ -808,15 +796,16 @@ clearRect(x: number, y: number, w: number, h: number): void
 
 Clears the content in a rectangle on the canvas.
 
-- Parameters
-    | Name   | Type   | Mandatory | Default Value | Description                              |
-    | ------ | ------ | --------- | ------------- | ---------------------------------------- |
-    | x      | number | Yes       | 0             | X-coordinate of the upper left corner of the rectangle. |
-    | y      | number | Yes       | 0             | Y-coordinate of the upper left corner of the rectangle. |
-    | width  | number | Yes       | 0             | Width of the rectangle.                  |
-    | height | number | Yes       | 0             | Height of the rectangle.                 |
+ **Parameters**
+
+| Name    | Type    | Mandatory  | Default Value | Description           |
+| ------ | ------ | ---- | ---- | ------------- |
+| x      | number | Yes   | 0    | X-coordinate of the upper left corner of the rectangle.|
+| y      | number | Yes   | 0    | Y-coordinate of the upper left corner of the rectangle.|
+| width  | number | Yes   | 0    | Width of the rectangle.     |
+| height | number | Yes   | 0    | Height of the rectangle.     |
 
-- Example
+ **Example**
 
   ```ts
   // xxx.ets
@@ -851,18 +840,20 @@ Clears the content in a rectangle on the canvas.
 
 ### fillText
 
-fillText(text: string, x: number, y: number): void
+fillText(text: string, x: number, y: number, maxWidth?: number): void
 
 Draws filled text on the canvas.
 
-- Parameters
-    | Name | Type   | Mandatory | Default Value | Description                              |
-    | ---- | ------ | --------- | ------------- | ---------------------------------------- |
-    | text | string | Yes       | ""            | Text to draw.                            |
-    | x    | number | Yes       | 0             | X-coordinate of the lower left corner of the text. |
-    | y    | number | Yes       | 0             | Y-coordinate of the lower left corner of the text. |
+**Parameters**
 
-- Example
+| Name  | Type    | Mandatory  | Default Value | Description             |
+| ---- | ------ | ---- | ---- | --------------- |
+| text | string | Yes   | ""  | Text to draw.     |
+| x    | number | Yes   | 0    | X-coordinate of the lower left corner of the text.|
+| y    | number | Yes   | 0    | Y-coordinate of the lower left corner of the text.|
+| maxWidth    | number | No   | -   | Maximum width allowed for the text.|
+
+ **Example**
 
   ```ts
   // xxx.ets
@@ -900,14 +891,16 @@ strokeText(text: string, x: number, y: number): void
 
 Draws a text stroke on the canvas.
 
-- Parameters
-    | Name | Type   | Mandatory | Default Value | Description                              |
-    | ---- | ------ | --------- | ------------- | ---------------------------------------- |
-    | text | string | Yes       | ""            | Text to draw.                            |
-    | x    | number | Yes       | 0             | X-coordinate of the lower left corner of the text. |
-    | y    | number | Yes       | 0             | Y-coordinate of the lower left corner of the text. |
+**Parameters**
+
+| Name  | Type    | Mandatory  | Default Value | Description             |
+| ---- | ------ | ---- | ---- | --------------- |
+| text | string | Yes   | ""  | Text to draw.     |
+| x    | number | Yes   | 0    | X-coordinate of the lower left corner of the text.|
+| y    | number | Yes   | 0    | Y-coordinate of the lower left corner of the text.|
+| maxWidth   | number | No   | -    | Maximum width of the text to be drawn.|
 
-- Example
+ **Example**
 
   ```ts
   // xxx.ets
@@ -945,22 +938,37 @@ measureText(text: string): TextMetrics
 
 Returns a **TextMetrics** object used to obtain the width of specified text.
 
-- Parameters
-    | Name | Type   | Mandatory | Default Value | Description          |
-    | ---- | ------ | --------- | ------------- | -------------------- |
-    | text | string | Yes       | ""            | Text to be measured. |
+ **Parameters**
+
+| Name  | Type    | Mandatory  | Default Value | Description        |
+| ---- | ------ | ---- | ---- | ---------- |
+| text | string | Yes   | ""   | Text to be measured.|
+
+ **Return value**
 
-- Return value
-    | Type        | Description             |
-    | ----------- | ----------------------- |
-    | TextMetrics | **TextMetrics** object. |
+| Type         | Description     |
+| ----------- | ------- |
+| TextMetrics | **TextMetrics** object.|
 
-- **TextMetrics** attributes
-    | Name  | Type   | Description        |
-    | ----- | ------ | ------------------ |
-    | width | number | Width of the text. |
+**TextMetrics**
 
-- Example
+| Name                    | Type    | Description     |
+| -----                    | ------ | ------- |
+| width                    | number | Width of the text.|
+| height                   | number | Height of the text.|
+| actualBoundingBoxAscent  | number | Distance from the horizontal line specified by the **CanvasRenderingContext2D.textBaseline** attribute to the top of the bounding rectangle used to render the text. The current value is **0**.|
+| actualBoundingBoxDescent | number | Distance from the horizontal line specified by the **CanvasRenderingContext2D.textBaseline** attribute to the bottom of the bounding rectangle used to render the text. The current value is **0**.|
+| actualBoundingBoxLeft    | number | Distance parallel to the baseline from the alignment point determined by the **CanvasRenderingContext2D.textAlign** attribute to the left side of the bounding rectangle of the text. The current value is **0**.|
+| actualBoundingBoxRight   | number | Distance parallel to the baseline from the alignment point determined by the **CanvasRenderingContext2D.textAlign** attribute to the right side of the bounding rectangle of the text. The current value is **0**.|
+| alphabeticBaseline       | number | Distance from the horizontal line specified by the **CanvasRenderingContext2D.textBaseline** attribute to the alphabetic baseline of the line box. The current value is **0**.|
+| emHeightAscent           | number | Distance from the horizontal line specified by the **CanvasRenderingContext2D.textBaseline** attribute to the top of the em square in the line box. The current value is **0**.|
+| emHeightDescent          | number | Distance from the horizontal line specified by the **CanvasRenderingContext2D.textBaseline** attribute to the bottom of the em square in the line box. The current value is **0**.|
+| fontBoundingBoxAscent    | number | Distance from the horizontal line specified by the **CanvasRenderingContext2D.textBaseline** attribute to the top of the highest bounding rectangle of all the fonts used to render the text. The current value is **0**.|
+| fontBoundingBoxDescent   | number | Distance from the horizontal line specified by the **CanvasRenderingContext2D.textBaseline** attribute to the bottom of the bounding rectangle of all the fonts used to render the text. The current value is **0**.|
+| hangingBaseline          | number | Distance from the horizontal line specified by the **CanvasRenderingContext2D.textBaseline** attribute to the hanging baseline of the line box. The current value is **0**.|
+| ideographicBaseline      | number | Distance from the horizontal line indicated by the **CanvasRenderingContext2D.textBaseline** attribute to the ideographic baseline of the line box. The current value is **0**.|
+
+ **Example**
 
   ```ts
   // xxx.ets
@@ -999,12 +1007,13 @@ stroke(path?: Path2D): void
 
 Strokes a path.
 
-- Parameters
-    | Name | Type                                     | Mandatory | Default Value | Description                |
-    | ---- | ---------------------------------------- | --------- | ------------- | -------------------------- |
-    | path | [Path2D](ts-components-canvas-path2d.md) | No        | null          | A **Path2D** path to draw. |
+ **Parameters**
+
+| Name  | Type                                      | Mandatory  | Default Value | Description          |
+| ---- | ---------------------------------------- | ---- | ---- | ------------ |
+| path | [Path2D](ts-components-canvas-path2d.md) | No   | null | A **Path2D** path to draw.|
 
-- Example
+ **Example**
 
   ```ts
   // xxx.ets
@@ -1044,7 +1053,7 @@ beginPath(): void
 
 Creates a drawing path.
 
-- Example
+ **Example**
 
   ```ts
   // xxx.ets
@@ -1086,13 +1095,14 @@ moveTo(x: number, y: number): void
 
 Moves a drawing path to a target position on the canvas.
 
-- Parameters
-    | Name | Type   | Mandatory | Default Value | Description                          |
-    | ---- | ------ | --------- | ------------- | ------------------------------------ |
-    | x    | number | Yes       | 0             | X-coordinate of the target position. |
-    | y    | number | Yes       | 0             | Y-coordinate of the target position. |
+ **Parameters**
 
-- Example
+| Name  | Type    | Mandatory  | Default Value | Description       |
+| ---- | ------ | ---- | ---- | --------- |
+| x    | number | Yes   | 0    | X-coordinate of the target position.|
+| y    | number | Yes   | 0    | Y-coordinate of the target position.|
+
+ **Example**
 
   ```ts
   // xxx.ets
@@ -1132,13 +1142,14 @@ lineTo(x: number, y: number): void
 
 Connects the current point to a target position using a straight line.
 
-- Parameters
-    | Name | Type   | Mandatory | Default Value | Description                          |
-    | ---- | ------ | --------- | ------------- | ------------------------------------ |
-    | x    | number | Yes       | 0             | X-coordinate of the target position. |
-    | y    | number | Yes       | 0             | Y-coordinate of the target position. |
+ **Parameters**
+
+| Name  | Type    | Mandatory  | Default Value | Description       |
+| ---- | ------ | ---- | ---- | --------- |
+| x    | number | Yes   | 0    | X-coordinate of the target position.|
+| y    | number | Yes   | 0    | Y-coordinate of the target position.|
 
-- Example
+ **Example**
 
   ```ts
   // xxx.ets
@@ -1178,7 +1189,7 @@ closePath(): void
 
 Draws a closed path.
 
-- Example
+ **Example**
 
   ```ts
   // xxx.ets
@@ -1216,17 +1227,24 @@ Draws a closed path.
 
 ### createPattern
 
-createPattern(image: ImageBitmap, repetition: string): CanvasPattern
+createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | null
 
 Creates a pattern for image filling based on a specified source image and repetition mode.
 
-- Parameters
-    | Name       | Type                                     | Mandatory | Default Value | Description                              |
-    | ---------- | ---------------------------------------- | --------- | ------------- | ---------------------------------------- |
-    | image      | [ImageBitmap](ts-components-canvas-imagebitmap.md) | Yes       | null          | Source image. For details, see ImageBitmap. |
-    | repetition | string                                   | Yes       | ""            | Repetition mode. The value can be **'repeat'**, **'repeat-x'**, **'repeat-y'**, or **'no-repeat'**. |
+**Parameters**
 
-- Example
+| Name        | Type                                      | Mandatory  | Default Value | Description                                      |
+| ---------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
+| image      | [ImageBitmap](ts-components-canvas-imagebitmap.md) | Yes   | null | Source image. For details, see **ImageBitmap**.                 |
+| repetition | string                                   | Yes   | ""  | Repetition mode. The value can be **"repeat"**, **"repeat-x"**, **"repeat-y"**, or **"no-repeat"**.|
+
+**Return value**
+
+| Type        | Description                                      |
+| ---------- | ---------------------------------------- |
+|  [CanvasPattern](#canvaspattern)     | Created pattern for image filling based on a specified source image and repetition mode.|
+
+ **Example**
 
   ```ts
   // xxx.ets
@@ -1266,17 +1284,18 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
 
 Draws a cubic bezier curve on the canvas.
 
-- Name
-    | Name | Type   | Mandatory | Default Value | Description                              |
-    | ---- | ------ | --------- | ------------- | ---------------------------------------- |
-    | cp1x | number | Yes       | 0             | X-coordinate of the first parameter of the bezier curve. |
-    | cp1y | number | Yes       | 0             | Y-coordinate of the first parameter of the bezier curve. |
-    | cp2x | number | Yes       | 0             | X-coordinate of the second parameter of the bezier curve. |
-    | cp2y | number | Yes       | 0             | Y-coordinate of the second parameter of the bezier curve. |
-    | x    | number | Yes       | 0             | X-coordinate of the end point on the bezier curve. |
-    | y    | number | Yes       | 0             | Y-coordinate of the end point on the bezier curve. |
+ **Parameters**
+
+| Name  | Type    | Mandatory  | Default Value | Description            |
+| ---- | ------ | ---- | ---- | -------------- |
+| cp1x | number | Yes   | 0    | X-coordinate of the first parameter of the bezier curve.|
+| cp1y | number | Yes   | 0    | Y-coordinate of the first parameter of the bezier curve.|
+| cp2x | number | Yes   | 0    | X-coordinate of the second parameter of the bezier curve.|
+| cp2y | number | Yes   | 0    | Y-coordinate of the second parameter of the bezier curve.|
+| x    | number | Yes   | 0    | X-coordinate of the end point on the bezier curve.   |
+| y    | number | Yes   | 0    | Y-coordinate of the end point on the bezier curve.   |
 
-- Example
+ **Example**
 
   ```ts
   // xxx.ets
@@ -1316,15 +1335,16 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
 
 Draws a quadratic curve on the canvas.
 
-- Parameters
-    | Name | Type   | Mandatory | Default Value | Description                              |
-    | ---- | ------ | --------- | ------------- | ---------------------------------------- |
-    | cpx  | number | Yes       | 0             | X-coordinate of the bezier curve parameter. |
-    | cpy  | number | Yes       | 0             | Y-coordinate of the bezier curve parameter. |
-    | x    | number | Yes       | 0             | X-coordinate of the end point on the bezier curve. |
-    | y    | number | Yes       | 0             | Y-coordinate of the end point on the bezier curve. |
+ **Parameters**
 
-- Example
+| Name  | Type    | Mandatory  | Default Value | Description         |
+| ---- | ------ | ---- | ---- | ----------- |
+| cpx  | number | Yes   | 0    | X-coordinate of the bezier curve parameter.|
+| cpy  | number | Yes   | 0    | Y-coordinate of the bezier curve parameter.|
+| x    | number | Yes   | 0    | X-coordinate of the end point on the bezier curve.|
+| y    | number | Yes   | 0    | Y-coordinate of the end point on the bezier curve.|
+
+ **Example**
 
   ```ts
   // xxx.ets
@@ -1360,21 +1380,22 @@ Draws a quadratic curve on the canvas.
 
 ### arc
 
-arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void
+arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void
 
 Draws an arc on the canvas.
 
-- Parameters
-    | Name          | Type    | Mandatory | Default Value | Description                              |
-    | ------------- | ------- | --------- | ------------- | ---------------------------------------- |
-    | x             | number  | Yes       | 0             | X-coordinate of the center point of the arc. |
-    | y             | number  | Yes       | 0             | Y-coordinate of the center point of the arc. |
-    | radius        | number  | Yes       | 0             | Radius of the arc.                       |
-    | startAngle    | number  | Yes       | 0             | Start radian of the arc.                 |
-    | endAngle      | number  | Yes       | 0             | End radian of the arc.                   |
-    | anticlockwise | boolean | No        | false         | Whether to draw the arc counterclockwise. |
+ **Parameters**
+
+| Name           | Type     | Mandatory  | Default Value  | Description        |
+| ------------- | ------- | ---- | ----- | ---------- |
+| x             | number  | Yes   | 0     | X-coordinate of the center point of the arc.|
+| y             | number  | Yes   | 0     | Y-coordinate of the center point of the arc.|
+| radius        | number  | Yes   | 0     | Radius of the arc.   |
+| startAngle    | number  | Yes   | 0     | Start radian of the arc.  |
+| endAngle      | number  | Yes   | 0     | End radian of the arc.  |
+| counterclockwise | boolean | No   | false | Whether to draw the arc counterclockwise.|
 
-- Example
+ **Example**
 
   ```ts
   // xxx.ets
@@ -1413,16 +1434,17 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
 
 Draws an arc based on the radius and points on the arc.
 
-- Parameters
-    | Name   | Type   | Mandatory | Default Value | Description                              |
-    | ------ | ------ | --------- | ------------- | ---------------------------------------- |
-    | x1     | number | Yes       | 0             | X-coordinate of the first point on the arc. |
-    | y1     | number | Yes       | 0             | Y-coordinate of the first point on the arc. |
-    | x2     | number | Yes       | 0             | X-coordinate of the second point on the arc. |
-    | y2     | number | Yes       | 0             | Y-coordinate of the second point on the arc. |
-    | radius | number | Yes       | 0             | Radius of the arc.                       |
+ **Parameters**
+
+| Name    | Type    | Mandatory  | Default Value | Description             |
+| ------ | ------ | ---- | ---- | --------------- |
+| x1     | number | Yes   | 0    | X-coordinate of the first point on the arc.|
+| y1     | number | Yes   | 0    | Y-coordinate of the first point on the arc.|
+| x2     | number | Yes   | 0    | X-coordinate of the second point on the arc.|
+| y2     | number | Yes   | 0    | Y-coordinate of the second point on the arc.|
+| radius | number | Yes   | 0    | Radius of the arc.       |
 
-- Example
+ **Example**
 
   ```ts
   // xxx.ets
@@ -1457,24 +1479,24 @@ Draws an arc based on the radius and points on the arc.
 
 ### ellipse
 
-ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void
+ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void
 
-Draws an ellipse in the specified rectangular region.
+Draws an ellipse in the specified rectangular region on the canvas.
 
-- Parameters
-    | Name          | Type    | Mandatory | Default Value | Description                              |
-    | ------------- | ------- | --------- | ------------- | ---------------------------------------- |
-    | x             | number  | Yes       | 0             | X-coordinate of the ellipse center.      |
-    | y             | number  | Yes       | 0             | Y-coordinate of the ellipse center.      |
-    | radiusX       | number  | Yes       | 0             | Ellipse radius on the x-axis.            |
-    | radiusY       | number  | Yes       | 0             | Ellipse radius on the y-axis.            |
-    | rotation      | number  | Yes       | 0             | Rotation angle of the ellipse, in radians. |
-    | startAngle    | number  | Yes       | 0             | Angle of the start point for drawing the ellipse, in radians. |
-    | endAngle      | number  | Yes       | 0             | Angle of the end point for drawing the ellipse, in radians. |
-    | anticlockwise | boolean | No        | false         | Whether to draw the ellipse in the counterclockwise direction. |
+ **Parameters**
 
-- Example
+| Name           | Type     | Mandatory  | Default Value  | Description               |
+| ------------- | ------- | ---- | ----- | ----------------- |
+| x             | number  | Yes   | 0     | X-coordinate of the ellipse center.       |
+| y             | number  | Yes   | 0     | Y-coordinate of the ellipse center.       |
+| radiusX       | number  | Yes   | 0     | Ellipse radius on the x-axis.       |
+| radiusY       | number  | Yes   | 0     | Ellipse radius on the y-axis.       |
+| rotation      | number  | Yes   | 0     | Rotation angle of the ellipse. The unit is radian.   |
+| startAngle    | number  | Yes   | 0     | Angle of the start point for drawing the ellipse. The unit is radian.|
+| endAngle      | number  | Yes   | 0     | Angle of the end point for drawing the ellipse. The unit is radian.|
+| counterclockwise | boolean | No   | false | Whether to draw the ellipse in the counterclockwise direction.    |
 
+ **Example**
 
   ```ts
   // xxx.ets
@@ -1509,19 +1531,20 @@ Draws an ellipse in the specified rectangular region.
 
 ### rect
 
-rect(x: number, y: number, width: number, height: number): void
+rect(x: number, y: number, w: number, h: number): void
 
-Creates a rectangle.
+Creates a rectangle on the canvas.
 
-- Parameters
-    | Name   | Type   | Mandatory | Default Value | Description                              |
-    | ------ | ------ | --------- | ------------- | ---------------------------------------- |
-    | x      | number | Yes       | 0             | X-coordinate of the upper left corner of the rectangle. |
-    | y      | number | Yes       | 0             | Y-coordinate of the upper left corner of the rectangle. |
-    | width  | number | Yes       | 0             | Width of the rectangle.                  |
-    | height | number | Yes       | 0             | Height of the rectangle.                 |
+ **Parameters**
 
-- Example
+| Name    | Type    | Mandatory  | Default Value | Description           |
+| ------ | ------ | ---- | ---- | ------------- |
+| x      | number | Yes   | 0    | X-coordinate of the upper left corner of the rectangle.|
+| y      | number | Yes   | 0    | Y-coordinate of the upper left corner of the rectangle.|
+| w  | number | Yes   | 0    | Width of the rectangle.     |
+| h | number | Yes   | 0    | Height of the rectangle.     |
+
+ **Example**
 
   ```ts
   // xxx.ets
@@ -1557,9 +1580,9 @@ Creates a rectangle.
 
 fill(): void
 
-Fills the area inside a closed path.
+Fills the area inside a closed path on the canvas.
 
-- Example
+ **Example**
 
   ```ts
   // xxx.ets
@@ -1597,7 +1620,7 @@ clip(): void
 
 Sets the current path to a clipping path.
 
-- Example
+ **Example**
 
   ```ts
   // xxx.ets
@@ -1634,16 +1657,17 @@ Sets the current path to a clipping path.
 
 ### rotate
 
-rotate(rotate: number): void
+rotate(angle: number): void
 
 Rotates a canvas clockwise around its coordinate axes.
 
-- Parameters
-    | Name   | Type   | Mandatory | Default Value | Description                              |
-    | ------ | ------ | --------- | ------------- | ---------------------------------------- |
-    | rotate | number | Yes       | 0             | Clockwise rotation angle. You can use **Math.PI / 180** to convert the angle to a radian. |
+ **Parameters**
+
+| Name    | Type    | Mandatory  | Default Value | Description                                      |
+| ------ | ------ | ---- | ---- | ---------------------------------------- |
+| angle | number | Yes   | 0    | Clockwise rotation angle. You can use **Math.PI / 180** to convert the angle to a radian.|
 
-- Example
+ **Example**
 
   ```ts
   // xxx.ets
@@ -1679,15 +1703,16 @@ Rotates a canvas clockwise around its coordinate axes.
 
 scale(x: number, y: number): void
 
-Scales a canvas based on scale factors.
+Scales the canvas based on scale factors.
 
-- Parameters
-    | Name | Type   | Mandatory | Default Value | Description              |
-    | ---- | ------ | --------- | ------------- | ------------------------ |
-    | x    | number | Yes       | 0             | Horizontal scale factor. |
-    | y    | number | Yes       | 0             | Vertical scale factor.   |
+ **Parameters**
 
-- Example
+| Name  | Type    | Mandatory  | Default Value | Description         |
+| ---- | ------ | ---- | ---- | ----------- |
+| x    | number | Yes   | 0    | Horizontal scale factor.|
+| y    | number | Yes   | 0    | Vertical scale factor.|
+
+ **Example**
 
   ```ts
   // xxx.ets
@@ -1722,28 +1747,30 @@ Scales a canvas based on scale factors.
 
 ### transform
 
-transform(scaleX: number, skewX: number, skewY: number, scaleY: number, translateX: number, translateY: number): void
+transform(a: number, b: number, c: number, d: number, e: number, f: number): void
 
 Defines a transformation matrix. To transform a graph, you only need to set parameters of the matrix. The coordinates of the graph are multiplied by the matrix values to obtain new coordinates of the transformed graph. You can use the matrix to implement multiple transform effects.
 
 > **NOTE**
+>
 > The following formulas calculate coordinates of the transformed graph. **x** and **y** represent coordinates before transformation, and **x'** and **y'** represent coordinates after transformation.
 >
 > - x' = scaleX \* x + skewY \* y + translateX
 >
 > - y' = skewX \* x + scaleY \* y + translateY
 
-- Parameters
-    | Name       | Type   | Mandatory | Default Value | Description         |
-    | ---------- | ------ | --------- | ------------- | ------------------- |
-    | scaleX     | number | Yes       | 0             | X-axis scale.       |
-    | skewX      | number | Yes       | 0             | X-axis skew.        |
-    | skewY      | number | Yes       | 0             | Y-axis skew.        |
-    | scaleY     | number | Yes       | 0             | Y-axis scale.       |
-    | translateX | number | Yes       | 0             | X-axis translation. |
-    | translateY | number | Yes       | 0             | Y-axis translation. |
+**Parameters**
 
-- Example
+| Name        | Type    | Mandatory  | Default Value | Description      |
+| ---------- | ------ | ---- | ---- | -------- |
+| a      | number | Yes   | 0    |X-axis scale.|
+| b      | number | Yes   | 0    |X-axis skew.|
+| c      | number | Yes   | 0    |Y-axis skew.|
+| d      | number | Yes   | 0    |Y-axis scale.|
+| e      | number | Yes   | 0    |X-axis translation.|
+| f      | number | Yes   | 0    |Y-axis translation.|
+
+ **Example**
 
   ```ts
   // xxx.ets
@@ -1783,21 +1810,22 @@ Defines a transformation matrix. To transform a graph, you only need to set para
 
 ### setTransform
 
-setTransform(scaleX: number, skewX: number, skewY: number, scale: number, translateX: number, translateY: number): void
+setTransform(a: number, b: number, c: number, d: number, e: number, f: number): void
 
 Resets the existing transformation matrix and creates a new transformation matrix by using the same parameters as the **transform()** function.
 
-- Parameters
-    | Name       | Type   | Mandatory | Default Value | Description         |
-    | ---------- | ------ | --------- | ------------- | ------------------- |
-    | scaleX     | number | Yes       | 0             | X-axis scale.       |
-    | skewX      | number | Yes       | 0             | X-axis skew.        |
-    | skewY      | number | Yes       | 0             | Y-axis skew.        |
-    | scaleY     | number | Yes       | 0             | Y-axis scale.       |
-    | translateX | number | Yes       | 0             | X-axis translation. |
-    | translateY | number | Yes       | 0             | Y-axis translation. |
+**Parameters**
+
+| Parameters        | Type    | Mandatory  | Default Value | Description      |
+| ---------- | ------ | ---- | ---- | -------- |
+| a      | number | Yes   | 0    |X-axis scale.|
+| b      | number | Yes   | 0    |X-axis skew.|
+| c      | number | Yes   | 0    |Y-axis skew.|
+| d      | number | Yes   | 0    |Y-axis scale.|
+| e      | number | Yes   | 0    |X-axis translation.|
+| f      | number | Yes   | 0    |Y-axis translation.|
 
-- Example
+ **Example**
 
   ```ts
   // xxx.ets
@@ -1829,7 +1857,7 @@ Resets the existing transformation matrix and creates a new transformation matri
   }
   ```
 
-  ![en-us_image_0000001211898518](figures/en-us_image_0000001211898518.png)
+  ![zh-cn_image_0000001193872526](figures/zh-cn_image_0000001193872526.png)
 
 
 ### translate
@@ -1838,13 +1866,14 @@ translate(x: number, y: number): void
 
 Moves the origin of the coordinate system.
 
-- Parameters
-    | Name | Type   | Mandatory | Default Value | Description         |
-    | ---- | ------ | --------- | ------------- | ------------------- |
-    | x    | number | Yes       | 0             | X-axis translation. |
-    | y    | number | Yes       | 0             | Y-axis translation. |
+ **Parameters**
+
+| Parameters  | Type    | Mandatory  | Default Value | Description      |
+| ---- | ------ | ---- | ---- | -------- |
+| x    | number | Yes   | 0    | X-axis translation.|
+| y    | number | Yes   | 0    | Y-axis translation.|
 
-- Example
+ **Example**
 
   ```ts
   // xxx.ets
@@ -1881,27 +1910,28 @@ Moves the origin of the coordinate system.
 
 drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number): void
 
-drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number, dWidth: number, dHeight: number): void
+drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number, dw: number, dh: number): void
 
-drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sWidth: number, sHeight: number, dx: number, dy: number, dWidth: number, dHeight: number):void
+drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number):void
 
-Draws an image.
+Draws an image on the canvas.
 
-- Parameters
-    | Name    | Type                                     | Mandatory | Default Value | Description                              |
-    | ------- | ---------------------------------------- | --------- | ------------- | ---------------------------------------- |
-    | image   | [ImageBitmap](ts-components-canvas-imagebitmap.md) or [PixelMap](../apis/js-apis-image.md#pixelmap7) | Yes       | null          | Image resource. For details, see ImageBitmap. |
-    | sx      | number                                   | No        | 0             | X-coordinate of the upper left corner of the rectangle used to crop the source image. |
-    | sy      | number                                   | No        | 0             | Y-coordinate of the upper left corner of the rectangle used to crop the source image. |
-    | sWidth  | number                                   | No        | 0             | Target width to crop the source image.   |
-    | sHeight | number                                   | No        | 0             | Target height to crop the source image.  |
-    | dx      | number                                   | Yes       | 0             | X-coordinate of the upper left corner of the drawing area on the canvas. |
-    | dy      | number                                   | Yes       | 0             | Y-coordinate of the upper left corner of the drawing area on the canvas. |
-    | dWidth  | number                                   | No        | 0             | Width of the drawing area.               |
-    | dHeight | number                                   | No        | 0             | Height of the drawing area.              |
+ **Parameters**
 
+| Name     | Type                                      | Mandatory  | Default Value | Description                  |
+| ------- | ---------------------------------------- | ---- | ---- | -------------------- |
+| image   | [ImageBitmap](ts-components-canvas-imagebitmap.md) or [PixelMap](../apis/js-apis-image.md#pixelmap7)| Yes   | null | Image resource. For details, see **ImageBitmap** or **PixelMap**.|
+| sx      | number                                   | No   | 0    | X-coordinate of the upper left corner of the rectangle used to crop the source image.|
+| sy      | number                                   | No   | 0    | Y-coordinate of the upper left corner of the rectangle used to crop the source image.|
+| sw      | number                                   | No   | 0    | Target width to crop the source image.      |
+| sh | number                                   | No   | 0    | Target height to crop the source image.      |
+| dx      | number                                   | Yes   | 0    | X-coordinate of the upper left corner of the drawing area on the canvas.      |
+| dy      | number                                   | Yes   | 0    | Y-coordinate of the upper left corner of the drawing area on the canvas.|
+| dw      | number                                   | No   | 0    | Width of the drawing area.            |
+| dh      | number                                   | No   | 0    | Height of the drawing area.            |
 
-- Example
+
+ **Example**
 
   ```ts
   // xxx.ets
@@ -1935,74 +1965,101 @@ Draws an image.
 
 ### createImageData
 
-createImageData(width: number, height: number): Object
+createImageData(sw: number, sh: number): ImageData
+
+Creates an **ImageData** object based on the width and height. For details, see [ImageData](ts-components-canvas-imagebitmap.md).
 
-Creates an **ImageData** object based on the specified width and height. For details, see [ImageData](ts-components-canvas-imagebitmap.md).
+ **Parameters**
 
-- Parameters
-    | Name   | Type   | Mandatory | Default Value | Description                         |
-    | ------ | ------ | --------- | ------------- | ----------------------------------- |
-    | width  | number | Yes       | 0             | Width of the **ImageData** object.  |
-    | height | number | Yes       | 0             | Height of the **ImageData** object. |
+| Name    | Type    | Mandatory  | Default Value  | Description           |
+| ------ | ------ | ---- | ---- | ------------- |
+| sw  | number | Yes   | 0    | Width of the **ImageData** object.|
+| sh  | number | Yes   | 0    | Height of the **ImageData** object.|
 
 
 ### createImageData
 
-createImageData(imageData: ImageData): Object
+createImageData(imageData: ImageData): ImageData
+
+Creates an **ImageData** object based on the given existing **ImageData** object. For details, see [ImageData](ts-components-canvas-imagebitmap.md).
+
+ **Parameters**
 
-Creates an **ImageData** object by copying an existing **ImageData** object. For details, see [ImageData](ts-components-canvas-imagebitmap.md).
+| Name       | Type                                      | Mandatory  | Default Value  | Description              |
+| --------- | ---------------------------------------- | ---- | ---- | ---------------- |
+| imagedata | [ImageData](ts-components-canvas-imagebitmap.md) | Yes   | null | **ImageData** object to copy.|
 
-- Parameters
-    | Name      | Type                                     | Mandatory | Default Value | Description                   |
-    | --------- | ---------------------------------------- | --------- | ------------- | ----------------------------- |
-    | imagedata | [ImageData](ts-components-canvas-imagebitmap.md) | Yes       | null          | **ImageData** object to copy. |
+ **Return value**
+
+| Type        | Description                                      |
+| ---------- | ---------------------------------------- |
+|  [ImageData](ts-components-canvas-imagebitmap.md)     | New **ImageData** object.|
 
 ### getPixelMap
 
 getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap
 
 Obtains the **[PixelMap](../apis/js-apis-image.md#pixelmap7)** object created with the pixels within the specified area on the canvas.
-- Parameters
-  | Name | Type | Mandatory | Default Value | Description |
-  | -------- | -------- | -------- | -------- | -------- |
-  | sx | number | Yes | 0 | X-coordinate of the upper left corner of the output area. |
-  | sy | number | Yes | 0 | Y-coordinate of the upper left corner of the output area. |
-  | sw | number | Yes | 0 | Width of the output area. |
-  | sh | number | Yes | 0 | Height of the output area. |
+
+ **Parameters**
+
+| Name| Type| Mandatory| Default Value| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| sx | number | Yes| 0 | X-coordinate of the upper left corner of the output area.|
+| sy | number | Yes| 0 | Y-coordinate of the upper left corner of the output area.|
+| sw | number | Yes| 0 | Width of the output area.|
+| sh | number | Yes| 0 | Height of the output area.|
+
+**Return value**
+
+| Type        | Description                                      |
+| ---------- | ---------------------------------------- |
+| [PixelMap](../apis/js-apis-image.md#pixelmap7)   | **PixelMap** object.|
+
 
 ### getImageData
 
-getImageData(sx: number, sy: number, sw: number, sh: number): Object
+getImageData(sx: number, sy: number, sw: number, sh: number): ImageData
 
 Obtains the **[ImageData](ts-components-canvas-imagebitmap.md)** object created with the pixels within the specified area on the canvas.
 
-- Parameters
-    | Name | Type   | Mandatory | Default Value | Description                              |
-    | ---- | ------ | --------- | ------------- | ---------------------------------------- |
-    | sx   | number | Yes       | 0             | X-coordinate of the upper left corner of the output area. |
-    | sy   | number | Yes       | 0             | Y-coordinate of the upper left corner of the output area. |
-    | sw   | number | Yes       | 0             | Width of the output area.                |
-    | sh   | number | Yes       | 0             | Height of the output area.               |
+ **Parameters**
+
+| Parameters  | Type    | Mandatory  | Default Value | Description             |
+| ---- | ------ | ---- | ---- | --------------- |
+| sx   | number | Yes   | 0    | X-coordinate of the upper left corner of the output area.|
+| sy   | number | Yes   | 0    | Y-coordinate of the upper left corner of the output area.|
+| sw   | number | Yes   | 0    | Width of the output area.    |
+| sh   | number | Yes   | 0    | Height of the output area.    |
+
+   **Return value**
+
+| Type        | Description                                      |
+| ---------- | ---------------------------------------- |
+|  [ImageData](ts-components-canvas-imagebitmap.md)     | New **ImageData** object.|
 
 
 ### putImageData
 
-putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY?: number, dirtyWidth?: number, dirtyHeight?: number): void
+putImageData(imageData: Object, dx: number, dy: number): void
+
+putImageData(imageData: Object, dx: number, dy: number, dirtyX: number, dirtyY: number, dirtyWidth?: number, dirtyHeight: number): void
 
 Puts the [ImageData](ts-components-canvas-imagebitmap.md) onto a rectangular area on the canvas.
 
-- Parameters
-    | Name        | Type   | Mandatory | Default Value                      | Description                              |
-    | ----------- | ------ | --------- | ---------------------------------- | ---------------------------------------- |
-    | imagedata   | Object | Yes       | null                               | **ImageData** object with pixels to put onto the canvas. |
-    | dx          | number | Yes       | 0                                  | X-axis offset of the rectangular area on the canvas. |
-    | dy          | number | Yes       | 0                                  | Y-axis offset of the rectangular area on the canvas. |
-    | dirtyX      | number | No        | 0                                  | X-axis offset of the upper left corner of the rectangular area relative to that of the source image. |
-    | dirtyY      | number | No        | 0                                  | Y-axis offset of the upper left corner of the rectangular area relative to that of the source image. |
-    | dirtyWidth  | number | No        | Width of the **ImageData** object  | Width of the rectangular area to crop the source image. |
-    | dirtyHeight | number | No        | Height of the **ImageData** object | Height of the rectangular area to crop the source image. |
+ **Parameters**
+
+| Parameters         | Type    | Mandatory  | Default Value         | Description                           |
+| ----------- | ------ | ---- | ------------ | ----------------------------- |
+| imagedata   | Object | Yes   | null         | **ImageData** object with pixels to put onto the canvas.           |
+| dx          | number | Yes   | 0            | X-axis offset of the rectangular area on the canvas.               |
+| dy          | number | Yes   | 0            | Y-axis offset of the rectangular area on the canvas.               |
+| dirtyX      | number | No   | 0            | X-axis offset of the upper left corner of the rectangular area relative to that of the source image.|
+| dirtyY      | number | No   | 0            | Y-axis offset of the upper left corner of the rectangular area relative to that of the source image.|
+| dirtyWidth  | number | No   | Width of the **ImageData** object| Width of the rectangular area to crop the source image.              |
+| dirtyHeight | number | No   | Height of the **ImageData** object| Height of the rectangular area to crop the source image.              |
 
-- Example
+ **Example**
 
   ```ts
   // xxx.ets
@@ -2039,6 +2096,225 @@ Puts the [ImageData](ts-components-canvas-imagebitmap.md) onto a rectangular are
 
   ![en-us_image_0000001212058496](figures/en-us_image_0000001212058496.png)
 
+### setLineDash
+
+setLineDash(segments: number[]): void
+
+Sets the dash line style.
+
+**Parameters**
+
+| Parameter      | Type   | Description                  |
+| -------- | ----- | -------------------- |
+| segments | number[] | An array of numbers that specify distances to alternately draw a line and a gap.|
+
+**Example**
+
+  ```ts
+@Entry
+@Component
+struct SetLineDash {
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+  
+  build() {
+    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+      Canvas(this.context)
+        .width('100%')
+        .height('100%')
+        .backgroundColor('#ffff00')
+        .onReady(() =>{
+          this.offContext.arc(100, 75, 50, 0, 6.28)
+          this.offContext.setLineDash([10,20])
+          this.offContext.stroke();
+          var image = this.offContext.transferToImageBitmap()
+          this.context.transferFromImageBitmap(image)
+      })
+    }
+    .width('100%')
+    .height('100%')
+  }
+}
+  ```
+  ![zh-cn_image_000000127777772](figures/zh-cn_image_000000127777772.png)
+
+
+### getLineDash
+
+getLineDash(): number[]
+
+Obtains the dash line style.
+
+**Return value**
+
+| Type   | Description                      |
+| ----- | ------------------------ |
+| number[] | An array describing the interval of alternate line segments and length of spacing.|
+
+**Example**
+
+  ```ts
+  // xxx.ets
+  @Entry
+  @Component
+  struct GetLineDash {
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            var grad = this.context.createLinearGradient(50,0, 300,100)
+            this.offContext.arc(100, 75, 50, 0, 6.28)
+            this.offContext.setLineDash([10,20])
+            this.offContext.stroke();
+            let res = this.offContext.getLineDash()
+            var image = this.offContext.transferToImageBitmap()
+            this.context.transferFromImageBitmap(image)
+          })
+      }
+      .width('100%')
+      .height('100%')
+    }
+  }
+  ```
+
+
+### transferFromImageBitmap
+
+transferFromImageBitmap(bitmap: ImageBitmap): void
+
+Displays the specified **ImageBitmap** object.
+
+**Parameters**
+
+| Parameters    | Type         | Description                |
+| ------ | ----------- | ------------------ |
+| bitmap | [ImageData](ts-components-canvas-imagebitmap.md) | **ImageBitmap** object to display.|
+
+**Example**
+
+  ```ts
+  // xxx.ets
+  @Entry
+  @Component
+  struct GetLineDash {
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.offContext.fillRect(0, 0, 200, 200)
+            var image = this.offContext.transferToImageBitmap()
+            this.context.transferFromImageBitmap(image)
+          })
+      }
+      .width('100%')
+      .height('100%')
+    }
+  }
+  ```
+  ![zh-cn_image_000000127777773](figures/zh-cn_image_000000127777773.png) 
+
+### toDataURL
+
+toDataURL(type?: string, quality?: number): string
+
+Generates a URL containing image display information.
+
+**Parameters**
+
+| Name    | Type  | Mandatory  | Description                                      |
+| ------- | ------ | ---- | ---------------------------------------- |
+| type    | string | No   | Image format. The default value is **image/png**.           |
+| quality | number | No   | Image quality, which ranges from 0 to 1, when the image format is **image/jpeg** or **image/webp**. If the set value is beyond the value range, the default value **0.92** is used.|
+
+**Return value**
+
+| Type    | Description       |
+| ------ | --------- |
+| string | Image URL.|
+
+**Example**
+
+  ```ts
+  // xxx.ets
+@Entry
+@Component
+struct ToDataURL {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+
+  build() {
+    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+      Canvas(this.context)
+        .width('100%')
+        .height('100%')
+        .backgroundColor('#ffff00')
+        .onReady(() =>{
+          var dataURL = this.offContext.toDataURL();
+        })
+    }
+    .width('100%')
+    .height('100%')
+  }
+}
+  ```
+
+
+### transferToImageBitmap
+
+transferToImageBitmap(): ImageBitmap
+
+Creates an **ImageBitmap** object on the most recently rendered image of the **OffscreenCanvas**.
+
+**Return value**
+
+| Type                                      | Description             |
+| ---------------------------------------- | --------------- |
+| [ImageData](ts-components-canvas-imagebitmap.md)| Pixel data rendered on the **OffscreenCanvas**.|
+
+
+ **Example**
+
+  ```ts
+  // xxx.ets
+  @Entry
+  @Component
+  struct CanvasExample {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.offContext.restore()
+            var image = this.offContext.transferToImageBitmap()
+            this.context.transferFromImageBitmap(image)
+          })
+      }
+      .width('100%')
+      .height('100%')
+    }
+  }
+  ```
 
 ### restore
 
@@ -2046,7 +2322,7 @@ restore(): void
 
 Restores the saved drawing context.
 
-- Example
+ **Example**
 
   ```ts
   // xxx.ets
@@ -2081,7 +2357,7 @@ save(): void
 
 Saves the current drawing context.
 
-- Example
+ **Example**
 
   ```ts
   // xxx.ets
@@ -2116,15 +2392,16 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void
 
 Creates a linear gradient.
 
-- Parameters
-    | Name | Type   | Mandatory | Default Value | Description                      |
-    | ---- | ------ | --------- | ------------- | -------------------------------- |
-    | x0   | number | Yes       | 0             | X-coordinate of the start point. |
-    | y0   | number | Yes       | 0             | Y-coordinate of the start point. |
-    | x1   | number | Yes       | 0             | X-coordinate of the end point.   |
-    | y1   | number | Yes       | 0             | Y-coordinate of the end point.   |
+ **Parameters**
+
+| Name  | Type    | Mandatory  | Default Value | Description      |
+| ---- | ------ | ---- | ---- | -------- |
+| x0   | number | Yes   | 0    | X-coordinate of the start point.|
+| y0   | number | Yes   | 0    | Y-coordinate of the start point.|
+| x1   | number | Yes   | 0    | X-coordinate of the end point.|
+| y1   | number | Yes   | 0    | Y-coordinate of the end point.|
 
-- Example
+ **Example**
 
   ```ts
   // xxx.ets
@@ -2167,17 +2444,18 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
 
 Creates a linear gradient.
 
-- Parameters
-    | Name | Type   | Mandatory | Default Value | Description                              |
-    | ---- | ------ | --------- | ------------- | ---------------------------------------- |
-    | x0   | number | Yes       | 0             | X-coordinate of the center of the start circle. |
-    | y0   | number | Yes       | 0             | Y-coordinate of the center of the start circle. |
-    | r0   | number | Yes       | 0             | Radius of the start circle, which must be a non-negative finite number. |
-    | x1   | number | Yes       | 0             | X-coordinate of the center of the end circle. |
-    | y1   | number | Yes       | 0             | Y-coordinate of the center of the end circle. |
-    | r1   | number | Yes       | 0             | Radius of the end circle, which must be a non-negative finite number. |
+  **Parameters**
+
+| Name  | Type    | Mandatory  | Default Value | Description               |
+| ---- | ------ | ---- | ---- | ----------------- |
+| x0   | number | Yes   | 0    | X-coordinate of the center of the start circle.        |
+| y0   | number | Yes   | 0    | Y-coordinate of the center of the start circle.        |
+| r0   | number | Yes   | 0    | Radius of the start circle, which must be a non-negative finite number.|
+| x1   | number | Yes   | 0    | X-coordinate of the center of the end circle.        |
+| y1   | number | Yes   | 0    | Y-coordinate of the center of the end circle.        |
+| r1   | number | Yes   | 0    | Radius of the end circle, which must be a non-negative finite number.|
 
-- Example
+  **Example** 
 
   ```ts
   // xxx.ets
@@ -2216,4 +2494,4 @@ Creates a linear gradient.
 
 ## CanvasPattern
 
-Defines an object created by using the [createPattern](#createpattern) method.
+Defines an object created using the **[createPattern](#createpattern)** API.

en/application-dev/reference/arkui-ts/ts-page-transition-animation.md

@@ -8,55 +8,44 @@ The page transition navigates users between pages. You can customize page transi
 
 
 | Name               | Parameter                                                        | Description                                                    |
-| ------------------- | ------ | ------------------------------- |
-| PageTransitionEnter | Object | Page entrance component, which is used to customize the entrance effect of the current page. For details, see animation parameters.|
-| PageTransitionExit  | Object | Page exit component, which is used to customize the exit effect of the current page. For details, see animation parameters.|
+| ------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
+| PageTransitionEnter | {<br>type: RouteType,<br>duration: number,<br>curve: Curve \| Curves,<br>delay: number<br>} | Page entrance animation.<br>- **type**:If this parameter is not set, the reverse playback effect as **pop** switches to **push** is used.<br>- **duration**: animation duration, in milliseconds.<br>- **curve**: animation curve. For details about the valid values, see [Curve](ts-animatorproperty.md).<br>Default value: **Curve.Linear**<br>- **delay**: animation delay, in milliseconds. By default, the animation is played without delay.|
+| PageTransitionExit  | {<br>type: RouteType,<br>duration: number,<br>curve: Curve \| Curves,<br>delay: number<br>} | Page exit animation.<br>- **type**:If this parameter is not set, the reverse playback effect as **pop** switches to **push** is used.<br>- **duration**: animation duration, in milliseconds.<br>- **curve**: animation curve. For details about the valid values, see [Curve](ts-animatorproperty.md).<br>Default value: **Curve.Linear**<br>- **delay**: animation delay, in milliseconds. By default, the animation is played without delay.|
 
+## RouteType enums
 
-- Animation parameters
-  | Name    | Type                     | Default Value   | Mandatory  | Description                                    |
-  | -------- | ------------------------- | ------ | ---- | ---------------------------------------- |
-  | type     | RouteType                 | -      | No   | Animation type. If this parameter is not set, the reverse playback effect as **pop** switches to **push** is used.                   |
-  | duration | number                    | 1000   | No   | Animation duration, in ms.                             |
-  | curve    | Curve \| Curves | Linear | No   | Animation curve. For details about the valid values, see [Curve](ts-animatorproperty.md).|
-  | delay    | number                    | 0      | No   | Animation delay, in ms. Delayed animation is disabled by default.                   |
-
-
-- RouteType enums
-  | Name| Description            |
-  | ---- | ---------------- |
-  | Pop  | Redirects to a specified page. When the user is redirected from page A to page B, page A is Exit+Push, and page B is Enter+Push.|
-  | Push | Redirects to the next page. When the user is redirected back from page B to page A, page A is Enter+Pop, and page B is Exit+Pop.|
+| Name| Description                                                        |
+| ---- | ------------------------------------------------------------ |
+| Pop  | Redirects to a specified page. When the user is redirected from page A to page B, page A is Exit+Push, and page B is Enter+Push.|
+| Push | Redirects to the next page. When the user is redirected back from page B to page A, page A is Enter+Pop, and page B is Exit+Pop.|
+| None | The page is not redirected.                                              |
 
 
 ## Attributes
 
-The **PageTransitionEnter** and **PageTransitionExit** parameters support the following attributes:
+| Name | Type                                                    | Mandatory| Description                                                    |
+| --------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
+| slide     | SlideEffect                                                  | No  | Slide effect during page transition.<br>Default value: **SlideEffect.Right**|
+| translate | {<br>x? : number \| string,<br>y? : number \| string,<br>z? : number \| string<br>} | No  | Translation effect during page transition, which is the value of the start point of entrance and the end point of exit. When this parameter is set together with **slide**, the latter takes effect by default.<br>- **x**: translation distance along the x-axis.<br>- **y**: translation distance along the y-axis.<br>- **z**: translation distance along the y-axis.|
+| scale     | {<br>x? : number,<br>y? : number,<br>z? : number,<br>centerX? : number \| string,<br>centerY? : number \| string<br>} | No  | Scaling effect during page transition, which is the value of the start point of entrance and the end point of exit.<br>- **x**: scale ratio along the x-axis.<br>- **y**: scale ratio along the y-axis.<br>- **z**: scale ratio along the z-axis.<br>- **centerX** and **centerY**: scale center point.<br>- If the center point is 0, it refers to the upper left corner of the component.<br>|
+| opacity   | number                                                       | No  | Opacity, which is the opacity value of the start point of entrance or the end point of exit.<br>Default value: **1**|
 
-| Name     | Type                                    | Default Value              | Mandatory  | Description                                    |
-| --------- | ---------------------------------------- | ----------------- | ---- | ---------------------------------------- |
-| slide     | SlideEffect                              | SlideEffect.Right | No   | Slide effect during page transition. For details about the valid values, see **SlideEffect** enums.         |
-| translate | {<br>x? : number \| string,<br>y? : number \| string,<br>z? : number \| string<br>} | -                 | No   | Translation effect during page transition, which is the value of the start point of entrance and the end point of exit. When this parameter is set together with **slide**, the latter takes effect by default.|
-| scale     | {<br>x? : number,<br>y? : number,<br>z? : number,<br>centerX? : number \| string,<br>centerY? : number \| string<br>} | -                 | No   | Scaling effect during page transition, which is the value of the start point of entrance and the end point of exit.            |
-| opacity   | number                                   | 1                 | No   | Opacity, which is the opacity value of the start point of entrance or the end point of exit.                 |
+## SlideEffect
 
-- SlideEffect enums
-  | Name    | Description                       |
-  | ------ | ------------------------- |
-  | Left   | When set to Enter, slides in from the left. When set to Exit, slides out to the left.|
-  | Right  | When set to Enter, slides in from the right. When set to Exit, slides out to the right.|
-  | Top    | When set to Enter, slides in from the top. When set to Exit, slides out to the top.|
-  | Bottom | When set to Enter, slides in from the bottom. When set to Exit, slides out to the bottom.|
+| Name    | Description                       |
+| ------ | ------------------------- |
+| Left   | When set to Enter, slides in from the left. When set to Exit, slides out to the left.|
+| Right  | When set to Enter, slides in from the right. When set to Exit, slides out to the right.|
+| Top    | When set to Enter, slides in from the top. When set to Exit, slides out to the top.|
+| Bottom | When set to Enter, slides in from the bottom. When set to Exit, slides out to the bottom.|
 
 
 ## Events
 
-The **PageTransitionEnter** and **PageTransitionExit** parameters support the following events:
-
 | Name                                                        | Description                                                    |
-| ---------------------------------------- | ----------------------------------- |
-| onEnter(type: RouteType, progress: number) =&gt; void | The callback input parameter is the normalized progress of the current entrance animation. The value range is 0–1.|
-| onExit(type: RouteType, progress: number) =&gt; void | The callback input parameter is the normalized progress of the current exit animation. The value range is 0–1.|
+| ------------------------------------------------------------ | ------------------------------------------------------------ |
+| onEnter(event: (type?: RouteType, progress?: number) =&gt; void) | The callback input parameter is the normalized progress of the current entrance animation. The value range is 0–1.<br>- **type**: route type.<br>- **progress**: current progress.|
+| onExit(event: (type?: RouteType, progress?: number) =&gt; void) | The callback input parameter is the normalized progress of the current exit animation. The value range is 0–1.<br>- **type**: route type.<br>- **progress**: current progress.|
 
 
 ## Example

en/application-dev/reference/arkui-ts/ts-transition-animation-component.md

 # Component Transition
 
-Configure the component transition animations for when a component is inserted or deleted. This feature takes effect only when **animateTo** is used. The animation duration, curve, and delay are the same as those configured in **animateTo**.
+Configure the component transition animations for when a component is inserted or deleted. This feature takes effect only when [animateTo](ts-explicit-animation.md) is used. The animation duration, curve, and delay are the same as those configured in **animateTo**.
 
 >  **NOTE**
 >
@@ -10,18 +10,19 @@ Configure the component transition animations for when a component is inserted o
 ## Attributes
 
 
-| Name| Type| Default Value| Description|
-| -------- | -------- | -------- | -------- |
-| transition | Object | - | All parameters are optional. For details, see **transition**.|
+| Name| Type| Description|
+| -------- | -------- | -------- |
+| transition | TransitionOptions | Transition parameters, which are all optional. For details, see **TransitionOptions**.|
+
+## TransitionOptions
 
-- transition
-  | Name| Type| Default Value| Mandatory| Description|
-  | -------- | -------- | -------- | -------- | -------- |
-  | type | [TransitionType](ts-appendix-enums.md#transitiontype)  | TransitionType.All | No| Transition type, which includes component addition and deletion by default.<br>**NOTE**<br>If **type** is not specified, insertion and deletion use the same transition type.|
-  | opacity | number | 1 | No| Opacity of the component during transition, which is the value of the start point of insertion and the end point of deletion.|
-  | translate | {<br>x? : number,<br>y? : number,<br>z? : number<br>} | - | No| Translation of the component during transition, which is the value of the start point of insertion and the end point of deletion.<br>-**x**: distance to translate along the x-axis.<br>-**y**: distance to translate along the y-axis.<br>-**z**: distance to translate along the z-axis.|
-  | scale | {<br>x? : number,<br>y? : number,<br>z? : number,<br>centerX? : number,<br>centerY? : number<br>} | - | No| Scaling of the component during transition, which is the value of the start point of insertion and the end point of deletion.<br>- **x**: scale factor along the x-axis.<br>- **y**: scale factor along the y-axis.<br>- **z**: scale factor along the z-axis.<br>- **centerX** and **centerY**: x coordinate and y coordinate of the scale center, respectively.<br>- If the center point is 0, it indicates the upper left corner of the component. |
-  | rotate | {<br>x?: number,<br>y?: number,<br>z?: number,<br>angle?: Angle,<br>centerX?: Length,<br>centerY?: Length<br>} | - | No| Rotation of the component during transition, which is the value of the start point of insertion and the end point of deletion.<br>- **x**: rotation vector along the x-axis.<br>- **y**: rotation vector along the y-axis.<br>- **z**: rotation vector along the z-axis.<br>- **centerX** and **centerY**: x coordinate and y coordinate of the rotation center, respectively.<br>- If the center point is (0, 0), it indicates the upper left corner of the component.|
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| type | [TransitionType](ts-appendix-enums.md#transitiontype)  | No| Transition type, which includes component addition and deletion by default.<br>Default value: **TransitionType.All**<br>**NOTE**<br>If **type** is not specified, insertion and deletion use the same transition type.|
+| opacity | number | No| Opacity of the component during transition, which is the value of the start point of insertion and the end point of deletion.<br>Default value: **1**|
+| translate | {<br>x? : number,<br>y? : number,<br>z? : number<br>} | No| Translation of the component during transition, which is the value of the start point of insertion and the end point of deletion.<br>-**x**: distance to translate along the x-axis.<br>-**y**: distance to translate along the y-axis.<br>-**z**: distance to translate along the z-axis.|
+| scale | {<br>x? : number,<br>y? : number,<br>z? : number,<br>centerX? : number,<br>centerY? : number<br>} | No| Scaling of the component during transition, which is the value of the start point of insertion and the end point of deletion.<br>- **x**: scale factor along the x-axis.<br>- **y**: scale factor along the y-axis.<br>- **z**: scale factor along the z-axis.<br>- **centerX** and **centerY**: x coordinate and y coordinate of the scale center, respectively.<br>- If the center point is 0, it indicates the upper left corner of the component.<br>|
+| rotate | {<br>x?: number,<br>y?: number,<br>z?: number,<br>angle?: Angle,<br>centerX?: Length,<br>centerY?: Length<br>} | No| Rotation of the component during transition, which is the value of the start point of insertion and the end point of deletion.<br>- **x**: rotation vector along the x-axis.<br>- **y**: rotation vector along the y-axis.<br>- **z**: rotation vector along the z-axis.<br>- **centerX** and **centerY**: x coordinate and y coordinate of the rotation center, respectively.<br>- If the center point is (0, 0), it indicates the upper left corner of the component.|
 
 
 ## Example

en/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md

@@ -4,27 +4,20 @@ Shared element transition can be used for transition between pages, for example,
 
 > **NOTE**
 >
-> This animationis supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
 ## Attributes
 
-| Name | Type | Default Value | Description |
-| -------- | -------- | -------- | -------- |
-| sharedTransition | id: string,<br/>options?: Object | - | If the same ID is configured for a component on the two pages, this shared component is transited. If this parameter is set to an empty string, no shared elements are transited. |
 
-- options parameters
-  | Name | Type | Default Value | Mandatory | Description |
-  | -------- | -------- | -------- | -------- | -------- |
-  | duration | number | 1000 | No | Animation duration, in ms. The default duration is 1000 ms. |
-  | curve | Curve \| Curves | Linear | No | The default curve is linear. For details about the valid values, see **Curve enums**. |
-  | delay | number | 0 | No | Delay of animation playback, in ms. By default, the playback is not delayed. |
+| Name            | Parameters                                                        | Description                                                    |
+| ---------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
+| sharedTransition | id: string,<br>{<br>duration?: number,<br>curve?: Curve \| string,<br>delay?: number,<br>motionPath?: <br>{<br>path: string,<br>form?: number,<br>to?: number,<br>rotatable?: boolean<br>},<br>zIndex?: number,<br>type?: [SharedTransitionEffectType](ts-appendix-enums.md#sharedtransitioneffecttype)<br>} | Transition of the shared element. If the same **id** value is configured for a component on the two pages, this component is considered as a shared element of the pages. If the **id** value is an empty string, no transition will be applied to the component.<br>- **id**: component ID.<br>- **duration**: Animation duration, in ms. The default duration is 1000 ms.<br>- **curve**: animation curve. The default curve is **Linear**. For details about the valid values, see [Curve](ts-animatorproperty.md).<br>- **delay**: Delay of animation playback, in ms. By default, the playback is not delayed.<br>- **motionPath**: motion path information.<br>- **path**: path.<br>- **from**: start value.<br>- **to**: end value.<br>- **rotatable**: whether to rotate.<br>- **zIndex**: z-axis.<br>- **type**: animation type.|
 
 
 ## Example
 
-The example shows the transition of a shared element from a page and page B.
-
+  The example implements the custom transition of a shared image during redirection from one page to another, which is triggered by a click on the image.
 
 ```ts
 // xxx.ets
@@ -58,6 +51,7 @@ struct SharedTransitionExample {
 @Entry
 @Component
 struct BExample {
+
   build() {
     Stack() {
       Image($r('app.media.ic_health_heart')).width(150).height(150).sharedTransition('sharedImage1')

en/application-dev/reference/arkui-ts/ts-types.md

+# Types
+
+## Resource
+
+The **Resource** type is used to reference resources for setting component attribute values.
+
+If a **Resource** object is created using `$r` or `$rawfile`, modifying attribute values of the object is prohibited.
+
+- `$r('belonging.type.name')`
+
+  **belonging**: system or application resource. The value can be **'sys'** or **'app'**.
+
+  **type**: resource type, which can be **'color'**, **'float'**, **'string'**, or **'media'**.
+
+  **name**: resource name, which is determined during resource definition.
+
+- `$rawfile('filename')`
+
+  **filename**: name of the file in **resources/rawfile** of the project.
+
+## Length
+
+The **Length** type is used to represent a size unit.
+
+| Type      | Description                                    |
+| -------- | -------------------------------------- |
+| string   | String type. Explicitly specify the length unit, for example, **'10px'**, or the length in percentage, for example, **'100%'**.|
+| number   | Number type. The default unit is vp.                               |
+| [Resource](#resource) | Size referenced from system or application resources.           |
+
+## ResourceStr
+
+The **ResourceStr** type is used to represent the types that can be used by input parameters of the string type.
+
+| Type      | Description                          |
+| -------- | ---------------------------- |
+| string   | String type.                      |
+| [Resource](#resource) | String referenced from system or application resources.|
+
+## Padding
+
+The **Padding** type is used to describe the padding areas in different directions of a component.
+
+| Name    | Type    | Mandatory  | Description             |
+| ------ | ------ | ---- | --------------- |
+| top    | [Length](#length) | No   | Height of the padding area on the top of the component. |
+| right  | [Length](#length) | No   | Width of the padding area on the right of the component.|
+| bottom | [Length](#length) | No   | Height of the padding area at the bottom of the component. |
+| left   | [Length](#length) | No   | Width of the padding area on the left of the component.|
+
+## Margin
+
+The **Margin** type is used to describe the margin areas in different directions of a component.
+
+| Name    | Type    | Mandatory  | Description             |
+| ------ | ------ | ---- | --------------- |
+| top    | [Length](#length) | No   | Height of the margin area above the component. |
+| right  | [Length](#length) | No   | Width of the margin area on the right of the component.|
+| bottom | [Length](#length) | No   | Height of the margin area below the component. |
+| left   | [Length](#length) | No   | Width of the margin area on the left of the component.|
+
+## EdgeWidths<sup>9+</sup>
+
+The **EdgeWidths** type is used to describe the edge widths in different directions of a component.
+
+| Name    | Type    | Mandatory  | Description      |
+| ------ | ------ | ---- | -------- |
+| top    | [Length](#length) | No   | Width of the top edge of the component.|
+| right  | [Length](#length) | No   | Width of the right edge of the component.|
+| bottom | [Length](#length) | No   | Width of the bottom edge of the component.|
+| left   | [Length](#length) | No   | Width of the left edge of the component.|
+
+## BorderRadiuses<sup>9+</sup>
+
+The **BorderRadiuses** type is used to describe the radius of the rounded corners of a component.
+
+| Name         | Type    | Mandatory  | Description        |
+| ----------- | ------ | ---- | ---------- |
+| topLeft     | [Length](#length) | No   | Radius of the top left rounded corner of the component.|
+| topRight    | [Length](#length) | No   | Radius of the top right rounded corner of the component.|
+| bottomLeft  | [Length](#length) | No   | Radius of the bottom left rounded corner of the component.|
+| bottomRight | [Length](#length) | No   | Radius of the bottom right rounded corner of the component.|
+
+## EdgeColors<sup>9+</sup>
+
+The **EdgeColors** type is used to describe the edge colors of a component.
+
+| Name    | Type           | Mandatory  | Description      |
+| ------ | ------------- | ---- | -------- |
+| top    | [ResourceColor](#resourcecolor) | No   | Color of the top edge of the component.|
+| right  | [ResourceColor](#resourcecolor) | No   | Color of the right edge of the component.|
+| bottom | [ResourceColor](#resourcecolor) | No   | Color of the bottom edge of the component.|
+| left   | [ResourceColor](#resourcecolor) | No   | Color of the left edge of the component.|
+
+## EdgeStyles<sup>9+</sup>
+
+The **EdgeStyles** type is used to describe the edge styles of a component.
+
+| Name    | Type         | Mandatory  | Description      |
+| ------ | ----------- | ---- | -------- |
+| top    | [BorderStyle](ts-appendix-enums.md#borderstyle) | No   | Style of the top edge of the component.|
+| right  | [BorderStyle](ts-appendix-enums.md#borderstyle) | No   | Style of the right edge of the component.|
+| bottom | [BorderStyle](ts-appendix-enums.md#borderstyle) | No   | Style of the bottom edge of the component.|
+| left   | [BorderStyle](ts-appendix-enums.md#borderstyle) | No   | Style of the left edge of the component.|
+
+
+## Offset
+
+The **Offset** type is used to describe the offset coordinates of a component in the layout.
+
+| Name  | Type    | Mandatory  | Description      |
+| ---- | ------ | ---- | -------- |
+| dx   | [Length](#length) | Yes   | Horizontal offset.|
+| dy   | [Length](#length) | Yes   | Vertical offset.|
+
+## ResourceColor
+
+The **ResourceColor** type is used to describe the color types of resources.
+
+| Type                                     | Description                                            |
+| ---------------------------------------- | ------------------------------------------------- |
+| [Color](ts-appendix-enums.md#color)      | Color enum.                                      |
+| number                                   | Color in the hexadecimal notation.                                     |
+| string                                   | Color in the RGB or RGBA notion.                             |
+| [Resource](#resource)                    | Color referenced from system or application resources.|
+
+## LengthConstrain
+
+The **LengthConstrain** type is used to limit the maximum and minimum lengths of a component.
+
+| Name       | Type    | Mandatory  | Description     |
+| --------- | ------ | ---- | ------- |
+| minLength | [Length](#length) | Yes   | Minimum length of the component.|
+| maxLength | [Length](#length) | Yes   | Maximum length of the component.|
+
+
+## Font
+
+The **Font** type is used to set the text style.
+
+| Name    | Type                                      | Mandatory  | Description                                      |
+| ------ | ---------------------------------------- | ---- | ---------------------------------------- |
+| size   | [Length](#length)                        | No   | Font size. If the value is of the number type, the unit fp is used.         |
+| weight | [FontWeight](ts-appendix-enums.md#fontweight) \| number \| string | No   | 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.|
+| family | string \| [Resource](#resource)          | No   | Font family of the text. Use commas (,) to separate multiple fonts. The priority of the fonts is the sequence in which they are placed. An example value is **'Arial, sans-serif'**.|
+| style  | [FontStyle](ts-appendix-enums.md#fontstyle) | No   | Font style.                              |
+
+## Area<sup>8+</sup>
+
+The **Area** type is used to describe the area information of the target element.
+
+| Name            | Type                    | Description                            |
+| -------------- | ---------------------- | ------------------------------ |
+| width          | [Length](#length)      | Width of the target element. The value is of the number type when being used as the return value and the unit is vp.|
+| height         | [Length](#length)      | Height of the target element. The value is of the number type when being used as the return value and the unit is vp.|
+| position       | [Position](#position8) | Position of the upper left corner of the target element relative to that of the parent element.           |
+| globalPosition | [Position](#position8) | Position of the upper left corner of the target element relative to that of the page.            |
+
+
+## Position<sup>8+</sup>
+
+The **Position** type is used to represent coordinates of a point.
+
+| Name  | Type    | Mandatory  | Description                         |
+| ---- | ------ | ---- | --------------------------- |
+| x    | [Length](#length) | No   | X coordinate. The value is of the number type when being used as the return value and the unit is vp.|
+| y    | [Length](#length) | No   | Y coordinate. The value is of the number type when being used as the return value and the unit is vp.|
+
+## ConstraintSizeOptions
+
+The **ConstraintSizeOptions** type is used to set the constraint size of a component, thereby limiting the size range during component layout.
+
+| Name       | Type    | Mandatory  | Description     |
+| --------- | ------ | ---- | ------- |
+| minWidth  | [Length](#length) | No   | Minimum width of the element.|
+| maxWidth  | [Length](#length) | No   | Maximum width of the element.|
+| minHeight | [Length](#length) | No   | Minimum height of the element.|
+| maxHeight | [Length](#length) | No   | Maximum height of the element.|
+
+## SizeOptions
+
+The **SizeOptions** type is used to set the width and height.
+
+| Name    | Type    | Mandatory  | Description   |
+| ------ | ------ | ---- | ----- |
+| width  | [Length](#length) | No   | Width of the element.|
+| height | [Length](#length) | No   | Height of the element.|
+
+
+## BorderOptions
+
+The **BorderOptions** type is used to provide border information.
+
+| Name    | Type                                      | Mandatory  | Description     |
+| ------ | ---------------------------------------- | ---- | ------- |
+| width  | [Length](#length)  \| [EdgeWidths](#edgewidths9)<sup>9+</sup>       | No   | Border width.  |
+| color  | [ResourceColor](#resourcecolor) \| [EdgeColors](#edgecolors9)<sup>9+</sup> | No   | Border color.  |
+| radius | [Length](#length) \| [BorderRadiuses](#borderradiuses9)<sup>9+</sup>    | No   | Radius of the rounded corner border.|
+| style  | [BorderStyle](ts-appendix-enums.md#borderstyle)  \| EdgeStyles<sup>9+</sup> | No   | Border style.  |
+
+## ColorFilter<sup>9+</sup>
+
+The **ColorFilter** type is used to create a color filter with a 4*5 matrix.
+
+| Name         | Type      | Mandatory  | Description                                      |
+| ----------- | -------- | ---- | ---------------------------------------- |
+| constructor | number[] | Yes   | Constructor for creating a color filter with a 4\*5 matrix. The input parameter is [m\*n], which is the matrix value in row m and column n. The matrix is row-first.|
+
+
+## CustomBuilder<sup>8+</sup>
+
+The **CustomBuilder** type is used to define custom UI descriptions in component attribute methods.
+
+| Name           | Type                  | Description                                      |
+| ------------- | ---------------------- | ---------------------------------------- |
+| CustomBuilder | ()&nbsp;=&gt;&nbsp;any | Must be decorated by **@Builder**. For details, see [@Builder](../../ui/ts-component-based-builder.md).|

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

@@ -4,24 +4,16 @@ You can set the background of a component.
 
 >  **NOTE**
 >
-> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-
-
-## Required Permissions
-
-None
-
+>  The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 ## Attributes
 
-
-| Name | Type | Default Value | Description |
-| -------- | -------- | -------- | -------- |
-| backgroundColor | [ResourceColor](../../ui/ts-types.md) | - | Background color of a component. |
-| backgroundImage | src: [ResourceStr](../../ui/ts-types.md),<br/>repeat?: [ImageRepeat](ts-appendix-enums.md#imagerepeat) | - | **src**: image address, which can be the address of an Internet or a local image. (SVG images are not supported.)<br/>**repeat**: whether the background image is repeatedly used. By default, the background image is not repeatedly used. |
-| backgroundImageSize | {<br/>width?: Length,<br/>height?: Length<br/>} \| [ImageSize](ts-appendix-enums.md#imagesize) | Auto | Width and height of the background image. When the input is a **{width: Length, height: Length}** object, if only one attribute is set, the other attribute is the set value multiplied by the original aspect ratio of the image. By default, the original image aspect ratio remains unchanged. |
-| backgroundImagePosition | {<br/>x?: Length,<br/>y?: Length<br/>} \| [Alignment](ts-appendix-enums.md#alignment) | {<br/>x: 0,<br/>y: 0<br/>} | Position of the background image in the component. |
-
+| Name| Type| Description|
+| -------- | -------- | -------- |
+| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | The table below describes the attributes used to set the background color of a component.|
+| backgroundImage | src: [ResourceStr](ts-types.md#resourcestr),<br>repeat?: [ImageRepeat](ts-appendix-enums.md#imagerepeat) | **src**: image address, which can be the address of an Internet or a local image. (SVG images are not supported.)<br>**repeat**: whether the background image is repeatedly used. By default, the background image is not repeatedly used.|
+| backgroundImageSize | {<br>width?: [Length](ts-types.md#length),<br>height?: [Length](ts-types.md#length)<br>} \| [ImageSize](ts-appendix-enums.md#imagesize) | Width and height of the background image. If the input is a **{width: Length, height: Length}** object and only one attribute is set, the other attribute is the set value multiplied by the original aspect ratio of the image. By default, the original image aspect ratio remains unchanged.<br>Default value: **ImageSize.Auto**|
+| backgroundImagePosition | [Position](ts-types.md#position8) \| [Alignment](ts-appendix-enums.md#alignment) | Position of the background image in the component.<br>Default value:<br>{<br>x: 0,<br>y: 0<br>} |
 
 ## Example
 

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

@@ -6,25 +6,19 @@ You can apply background blur effects to a component.
 > 
 >The APIs of this module are supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions
-
-None
-
 ## Attributes
 
-| Name        | Type     | Default Value                 | Description                    |
-| ------------ | ------------- | ----------------------- | ------------------------ |
-| backgroundBlurStyle       | [BlurStyle](#blurstyle) | - | Style of the blur between the background and content for the current component. The input parameter indicates a blur material.|
+| Name                 | Type                    | Description                    |
+| -------------------- | ----------------------- | ------------------------ |
+| backgroundBlurStyle  | [BlurStyle](#blurstyle) | Style of the blur between the background and content for the current component. The input parameter indicates a blur material.|
 
 ## BlurStyle
 
-| Name  | Description                                           |
-| ------ | ----------------------------------------------- |
-| Thin | Thin material.|
-| Regular | Regular material.                     |
-| Thick  | Thick material.                               |
-
-
+  | Name      | Description     |
+  | ------- | ---------- |
+  | Thin    | Thin material.    |
+  | Regular | Regular material. |
+  | Thick   | Thick material.      |
 
 ## Example
 
@@ -32,7 +26,6 @@ None
 // xxx.ets
 @Entry
 @Component
-
 struct Index {
   build() {
     Column() {
@@ -42,12 +35,13 @@ struct Index {
       .width(350)
       .height(300)
       .backgroundBlurStyle(BlurStyle.Thin)
-      .position({x: "15%", y: "30%"})
+      .position({ x: "15%", y: "30%" })
     }
     .height('100%')
     .width('100%')
     .backgroundImage($r('app.media.bg'))
     .backgroundImageSize(ImageSize.Cover)
   }
+}
 ```
 ![en-us_image_background_blur_style](figures/en-us_image_background_blur_style.png)

en/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md

@@ -6,39 +6,42 @@ You can draw an image around a component.
 >
 >  The APIs of this module are supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version.
 
-
 ## Attributes
 
+| Name        | Type                                    | Description                                     |
+| ---------- | ---------------------------------------- | --------------------------------------- |
+| borderImage     | BorderImageOption | Border image or border gradient.                           |
 
-| Name| Type| Description|
-| -------- | -------- | -------- |
-| source | string \| [Resource](../../ui/ts-types.md) \| [linearGradient](ts-universal-attributes-gradient-color.md) | Source or gradient color of the border image.|
-| slice | [Length](../../ui/ts-types.md#length)\| EdgeWidth | Slice width of the border image.<br>Default value: **0**|
-| width | [Length](../../ui/ts-types.md#length)\| EdgeWidth | Width of the border image.<br>Default value: **0**|
-| outset | [Length](../../ui/ts-types.md#length)\| EdgeWidth | Amount by which the border image is extended beyond the border box.<br>Default value: **0**|
-| RepeatMode  | RepeatMode | Repeat mode of the border image.<br>Default value: **RepeatMode.Stretch**|
-| fill | boolean | Whether to fill the center of the border image.<br>Default value: **false**|
-## EdgeWidth 
+## BorderImageOption
 
-At least one parameter must be passed to reference an **EdgeWidth** object.
+| Name        | Type                                    | Description                                     |
+| ---------- | ---------------------------------------- | --------------------------------------- |
+| source     | string \| [Resource](ts-types.md#resource) \| [linearGradient](ts-universal-attributes-gradient-color.md) | Source or gradient color of the border image.                           |
+| slice      | [Length](ts-types.md#length)\| EdgeWidths | Slice width of the border image.<br>Default value: **0**                  |
+| width      | [Length](ts-types.md#length)\| EdgeWidths | Width of the border image.<br>Default value: **0**                    |
+| outset     | [Length](ts-types.md#length)\| EdgeWidths | Amount by which the border image is extended beyond the border box.<br>Default value: **0**                |
+| RepeatMode | RepeatMode                               | Repeat mode of the border image.<br>Default value: **RepeatMode.Stretch**|
+| fill       | boolean                                  | Whether to fill the center of the border image.<br>Default value: **false**              |
 
+## EdgeWidths
 
+At least one parameter must be passed to reference an **EdgeWidth** object.
 
 | Name| Type| Mandatory|Description|
 | -------- | -------- |-------- |-------- |
-| left | [Length](../../ui/ts-types.md#length) | No| Distance on the left.|
-| right | [Length](../../ui/ts-types.md#length) | No| Distance on the right.|
-| top | [Length](../../ui/ts-types.md#length) | No| Distance at the top.|
-| bottom | [Length](../../ui/ts-types.md#length) | No| Distance on the bottom.|
+| left | [Length](ts-types.md#length) | No| Distance on the left.|
+| right | [Length](ts-types.md#length) | No| Distance on the right.|
+| top | [Length](ts-types.md#length) | No| Distance at the top.|
+| bottom | [Length](ts-types.md#length) | No| Distance on the bottom.|
 
 ## RepeatMode
 
-| Name| Description|
-| -------- | -------- |
-| Repeat | The source image's slices are tiled. Tiles beyond the border box will be clipped.|
-| Stretch | The source image's slices stretched to fill the border box.|
+| Name     | Description                                 |
+| ------- | ----------------------------------- |
+| Repeat  | The source image's slices are tiled. Tiles beyond the border box will be clipped.         |
+| Stretch | The source image's slices stretched to fill the border box.               |
 | Round   | The source image's slices are tiled to fill the border box. Tiles may be compressed when needed.|
-| Space | The source image's slices are tiled to fill the border box. Extra space will be filled in between tiles.|
+| Space   | The source image's slices are tiled to fill the border box. Extra space will be filled in between tiles.  |
 
 
 ## Example

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

@@ -11,54 +11,53 @@ The border attributes are used to set border styles for components.
 
 ## Attributes
 
-
 | Name        | Type                                                    | Description                                                        |
 | ------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
-| border       | {<br>width?: [Length](../../ui/ts-types.md#length) \| EdgeWidth<sup>9+</sup>,<br>color?:  [ResourceColor](../../ui/ts-types.md) \| EdgeColor<sup>9+</sup>,<br>radius?:  [Length](../../ui/ts-types.md#length) \| BorderRadiuses<sup>9+</sup>,<br>style?: [BorderStyle](ts-appendix-enums.md#borderstyle) \| EdgeStyle<sup>9+</sup><br>} | Unified border style.<br>- **width**: border width.<br>- **color**: border color.<br>- **radius**: radius of the rounded corner of the border.<br>- **style**: border style.|
-| borderStyle  | [BorderStyle](ts-appendix-enums.md#borderstyle) \| EdgeStyle<sup>9+</sup> | Border style of an element.<br>Default value: **BorderStyle.Solid**          |
-| borderWidth  | [Length](../../ui/ts-types.md) \| EdgeWidth<sup>9+</sup>     | Border width of an element.                                        |
-| borderColor  | [ResourceColor](../../ui/ts-types.md) \| EdgeColor<sup>9+</sup> | Border color of an element.                                        |
-| borderRadius | [Length](../../ui/ts-types.md) \| BorderRadiuses<sup>9+</sup> | Border radius of an element.                                    |
+| border       | {<br>width?: [Length](ts-types.md#length) \| EdgeWidths<sup>9+</sup>,<br>color?:  [ResourceColor](ts-types.md#resourcecolor) \| EdgeColors<sup>9+</sup>,<br>radius?:  [Length](ts-types.md#length) \| BorderRadiuses<sup>9+</sup>,<br>style?: [BorderStyle](ts-appendix-enums.md#borderstyle) \| EdgeStyles<sup>9+</sup><br>} | Unified border style.<br>- **width**: border width.<br>- **color**: border color.<br>- **radius**: radius of the rounded corner of the border.<br>- **style**: border style.|
+| borderStyle  | [BorderStyle](ts-appendix-enums.md#borderstyle) \| EdgeStyles<sup>9+</sup> | Border style of an element.<br>Default value: **BorderStyle.Solid**          |
+| borderWidth  | [Length](ts-types.md#length) \| EdgeWidths<sup>9+</sup>     | Border width. The percentage format is not supported.                                        |
+| borderColor  | [ResourceColor](ts-types.md#resourcecolor) \| EdgeColors<sup>9+</sup> | Border color of an element.                                        |
+| borderRadius | [Length](ts-types.md#length) \| BorderRadiuses<sup>9+</sup> | Border radius. The percentage format is not supported.                                    |
 
-## EdgeWidth<sup>9+</sup>
+## EdgeWidths<sup>9+</sup>
 
 To reference this object, at least one parameter must be passed.
 
-| Name  | Type                             | Mandatory| Description          |
-| ------ | ------------------------------------- | ---- | -------------- |
-| left   | [Length](../../ui/ts-types.md#length) | No  | Width of the left border.|
-| right  | [Length](../../ui/ts-types.md#length) | No  | Width of the right border.|
-| top    | [Length](../../ui/ts-types.md#length) | No  | Width of the top border.|
-| bottom | [Length](../../ui/ts-types.md#length) | No  | Width of the bottom border.|
+| Name    | Type                        | Mandatory  | Description     |
+| ------ | ---------------------------- | ---- | ------- |
+| left   | [Length](ts-types.md#length) | No   | Width of the left border.|
+| right  | [Length](ts-types.md#length) | No   | Width of the right border.|
+| top    | [Length](ts-types.md#length) | No   | Width of the top border.|
+| bottom | [Length](ts-types.md#length) | No   | Width of the bottom border.|
 
-## EdgeColor<sup>9+</sup>
+## EdgeColors<sup>9+</sup>
 
 To reference this object, at least one parameter must be passed.
 
-| Name  | Type                             | Mandatory| Description          |
-| ------ | ------------------------------------- | ---- | -------------- |
-| left   | [ResourceColor](../../ui/ts-types.md) | No  | Color of the left border.|
-| right  | [ResourceColor](../../ui/ts-types.md) | No  | Color of the right border.|
-| top    | [ResourceColor](../../ui/ts-types.md) | No  | Color of the top border.|
-| bottom | [ResourceColor](../../ui/ts-types.md) | No  | Color of the bottom border.|
+| Name    | Type                                    | Mandatory  | Description     |
+| ------ | ---------------------------------------- | ---- | ------- |
+| left   | [ResourceColor](ts-types.md#resourcecolor) | No   | Color of the left border.|
+| right  | [ResourceColor](ts-types.md#resourcecolor) | No   | Color of the right border.|
+| top    | [ResourceColor](ts-types.md#resourcecolor) | No   | Color of the top border.|
+| bottom | [ResourceColor](ts-types.md#resourcecolor) | No   | Color of the bottom border.|
 
 ## BorderRadiuses<sup>9+</sup>
 
 To reference this object, at least one parameter must be passed.
 
-| Name       | Type                             | Mandatory| Description            |
-| ----------- | ------------------------------------- | ---- | ---------------- |
-| topLeft     | [Length](../../ui/ts-types.md#length) | No  | Radius of the upper-left rounded corner.|
-| topRight    | [Length](../../ui/ts-types.md#length) | No  | Radius of the upper-right rounded corner.|
-| bottomLeft  | [Length](../../ui/ts-types.md#length) | No  | Radius of the lower-left rounded corner.|
-| bottomRight | [Length](../../ui/ts-types.md#length) | No  | Radius of the lower-right rounded corner.|
+| Name         | Type                        | Mandatory  | Description      |
+| ----------- | ---------------------------- | ---- | -------- |
+| topLeft     | [Length](ts-types.md#length) | No   | Radius of the upper-left rounded corner.|
+| topRight    | [Length](ts-types.md#length) | No   | Radius of the upper-right rounded corner.|
+| bottomLeft  | [Length](ts-types.md#length) | No   | Radius of the lower-left rounded corner.|
+| bottomRight | [Length](ts-types.md#length) | No   | Radius of the lower-right rounded corner.|
 
-## EdgeStyle<sup>9+</sup>
+## EdgeStyles<sup>9+</sup>
 
 To reference this object, at least one parameter must be passed.
 
-| Name  | Type                                       | Mandatory| Description          |
-| ------ | ----------------------------------------------- | ---- | -------------- |
+| Name    | Type                                    | Mandatory  | Description     |
+| ------ | ---------------------------------------- | ---- | ------- |
 | left   | [BorderStyle](ts-appendix-enums.md#borderstyle) | No   | Style of the left border.|
 | right  | [BorderStyle](ts-appendix-enums.md#borderstyle) | No   | Style of the right border.|
 | top    | [BorderStyle](ts-appendix-enums.md#borderstyle) | No   | Style of the top border.|

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

@@ -7,17 +7,12 @@ Click control attributes are used to set whether a component can respond to fing
 >  The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-## Required Permissions
-
-None
-
-
 ## Attributes
 
 
-| Name   | Type| Default Value| Description        |
-| --------- | -------- | ------- | -------------- |
-| touchable | boolean  | true    | Whether the component can respond to finger interactions such as click and touch events.|
+| Name     | Type| Description                   |
+| ----------- | -------- | ------------------------ |
+| touchable   | boolean  | Whether the component can respond to finger interactions such as click and touch events.<br>Default value: **true**|
 
 
 ## Example

en/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md

@@ -7,16 +7,11 @@
 > The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-## Required Permissions
-
-None
-
-
 ## Attributes
 
-| Name| Type| Default Value| Description|
-| -------- | -------- | -------- | -------- |
-| id | string | '' | Unique ID you assigned to the component.|
+| Name  | Type    | Description                        |
+| -----| -------- | ----------------------------- |
+| id   | string   | Unique ID you assigned to the component.<br>Default value: **''**|
 
 
 ## APIs
@@ -28,15 +23,17 @@ 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.|
+**Parameters**
+
+| Name  | Type     | Mandatory    | 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.|
+**Return value**
+
+| Type       | Description            |
+| -------| -------------- |
+| string | JSON string of the component attribute list.|
 
 ### getInspectorTree<sup>9+</sup>
 
@@ -44,11 +41,11 @@ getInspectorTree(): string
 
 Obtains the component tree and component attributes.
 
-- Return value
+**Return value**
 
-  | Type  | Description                              |
-  | ------ | ---------------------------------- |
-  | string | JSON string of the component tree and component attribute list.|
+| Type    | Description                           |
+| ------ | --------------------------- |
+| string | JSON string of the component tree and component attribute list.|
 
 ### sendEventByKey<sup>9+</sup>
 
@@ -56,17 +53,19 @@ 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 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 **""**.|
+**Parameters**
+
+| Name      | Type     | Mandatory      | 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**
 
-- Return value
-  | Type| Description|
-  | -------- | -------- |
-  | boolean | Returns **true** if the component with the specified ID is found; returns **false** otherwise.|
+| Type         | Description                        |
+| -------- | --------------------------|
+| boolean  | Returns **true** if the component with the specified ID is found; returns **false** otherwise.|
 
 ### sendTouchEvent<sup>9+</sup>
 
@@ -74,17 +73,17 @@ sendTouchEvent(event: TouchObject): boolean
 
 Sends a touch event.
 
-- Parameters
+**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).|
+| Name     | Type           | Mandatory | Description                                                        |
+| ----- | ----------- | ---- | ------------------------------------------------------------ |
+| event | TouchObject | Yes   | Location where a touch event is triggered. For details, see [TouchEvent](ts-universal-events-touch.md#touchevent).|
 
-- Return value
+**Return value**
 
-  | Type   | Description                                       |
-  | ------- | ------------------------------------------- |
-  | boolean | Returns **true** if the event is sent successfully; returns **false** otherwise.|
+| Type     | Description                        |
+| ------- | ---------------------------|
+| boolean | Returns **true** if the event is sent successfully; returns **false** otherwise.|
 
 ### sendKeyEvent<sup>9+</sup>
 
@@ -92,17 +91,17 @@ sendKeyEvent(event: KeyEvent): boolean
 
 Sends a key event.
 
-- Parameters
+**Parameters**
 
-  | Name | Type    | Mandatory| Default Value| Description                                                        |
-  | ----- | -------- | ---- | ------ | ------------------------------------------------------------ |
-  | event | KeyEvent | Yes  | -      | Key event. For details, see [KeyEvent](ts-universal-events-key.md#keyevent).|
+| Name   | Type    | Mandatory     | Description                                                        |
+| ----- | -------- | ----  | ------------------------------------------------------------ |
+| event | KeyEvent | Yes    | Key event. For details, see [KeyEvent](ts-universal-events-key.md#keyevent).|
 
-- Return value
+**Return value**
 
-  | Type   | Description                                         |
-  | ------- | --------------------------------------------- |
-  | boolean | Returns **true** if the event is sent successfully; returns **false** otherwise.|
+| Type     | Description                          |
+| ------- | ------------------------------|
+| boolean | Returns **true** if the event is sent successfully; returns **false** otherwise.|
 
 ### sendMouseEvent<sup>9+</sup>
 
@@ -110,17 +109,17 @@ sendMouseEvent(event: MouseEvent): boolean
 
 Sends a mouse event.
 
-- Parameters
+**Parameters**
 
-  | Name | Type      | Mandatory| Default Value| Description                                                        |
-  | ----- | ---------- | ---- | ------ | ------------------------------------------------------------ |
-  | event | MouseEvent | Yes  | -      | Mouse event. For details, see [MouseEvent](ts-universal-mouse-key.md#mouseevent).|
+| Name    | Type      | Mandatory      | Description                                    |
+| ----- | ---------- | ----  | --------------------------------------- |
+| event | MouseEvent | Yes   | Mouse event. For details, see [MouseEvent](ts-universal-mouse-key.md#mouseevent).|
 
-- Return value
+**Return value**
 
-  | Type   | Description                                         |
-  | ------- | --------------------------------------------- |
-  | boolean | Returns **true** if the event is sent successfully; returns **false** otherwise.|
+| Type     | Description                                |
+| ------- | ---------------------------------- |
+| boolean | Returns **true** if the event is sent successfully; returns **false** otherwise.|
 
 ## Example
 

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

@@ -12,7 +12,7 @@ The **enabled** attribute sets whether a component responds to user interactions
 
 | Name     | Type   | Description                                      |
 | ------- | ------- | ---------------------------------------- |
-| enabled | boolean | Whether the component responds to user interactions, including clicks and touches. The value **true** means that the component responds to user interactions, and **false** means the opposite.<br>Default value: **true** |
+| enabled | boolean | Whether the component responds to user interactions, including clicks and touches. The value **true** means that the component responds to user interactions,<br>and **false** means the opposite.<br>Default value: **true**|
 
 
 ## Example

en/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md

@@ -3,23 +3,17 @@
 >  **NOTE**
 >  - The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 >
-> - The flex layout attributes are valid only when the parent component is a **\<Flex>** component.
-
-
-## Required Permissions
-
-None
+>  - The flex layout is valid only when the parent component is a **\<Flex>**, **\<Column>**, or **\<Row>** component.
 
 
 ## Attributes
 
-
-| Name| Type| Default Value| Description|
-| -------- | -------- | -------- | -------- |
-| flexBasis | 'auto' \| Length | 'auto' | Base dimension of the component in the main axis of the flex layout.|
-| flexGrow | number | 0 | Percentage of the flex layout's remaining space that is allocated to the component.|
-| flexShrink | number | 1 | Percentage of the flex layout's shrink size that is allocated to the component.|
-| alignSelf | [ItemAlign](ts-appendix-enums.md#itemalign)| Auto | Alignment mode, which overwrites the default **alignItems** configuration in the flex layout.|
+| Name        | Type                                    | Description                                      |
+| ---------- | ---------------------------------------- | ---------------------------------------- |
+| flexBasis  | number \| string                         | Base size of a component in the main axis of the parent container.<br>Default value: **'auto'** (indicating that the base size of the component in the main axis is the original size of the component)|
+| flexGrow   | number                                   | Percentage of the parent container's remaining space that is allocated to the component.<br>Default value: **0**      |
+| flexShrink | number                                   | Percentage of the parent container's shrink size that is allocated to the component.<br>When the parent container is **\<Row>** or **\<Column>**, the default value is **0**.<br> When the parent container is **\<Flex>**, the default value is **1**.      |
+| alignSelf  | [ItemAlign](ts-appendix-enums.md#itemalign) | Alignment mode of the child components along the cross axis, which overwrites the default **alignItems** configuration in the parent container.<br>Default value: **ItemAlign.Auto**|
 
 
 ## Example
@@ -33,8 +27,8 @@ struct FlexExample {
   build() {
     Column({ space: 5 }) {
       Text('flexBasis').fontSize(9).fontColor(0xCCCCCC).width('90%')
-      // Base dimension in the main axis
-      // flexBasis() can be 'auto' (default value), which indicates the original component size. If the value is of the number type, it is similar to .width()/.height(). The value is based on the main axis.
+      // Base size in the main axis
+      // The value of flexBasis() can be 'auto' or a number, which is equivalent to .width()/.height().
       Flex() {
         Text('flexBasis(100)')
           .flexBasis('100').height(100).lineHeight(70)

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

 # Focus Control
 
->  **NOTE**
+Focus control attributes set whether a component is focusable, how it participates in sequential keyboard navigation, 
+
+>  **NOTE**<br>
 >
 >  The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-## Required Permissions
+## Attributes
 
-None
+| Name              | Type| Description                                  |
+| -------------------- | -------- | ---------------------------------------- |
+| focusable            | boolean  | Whether the current component is focusable.<br>**NOTE**<br>Components that have default interaction logic, such as **\<Button>** and **\<TextInput>**, are focusable by default. Other components, such as **\<Text>** and **\<Image>**, are not focusable by default.            |
+| tabIndex<sup>9+<sup> | number   | How the current component participates in sequential keyboard navigation.<br>- **tabIndex** >= 0: The component is focusable in sequential keyboard navigation, with its order defined by the value. A component with a larger value is focused after one with a smaller value. If multiple components share the same **tabIndex** value, their focus order follows their position in the component tree.<br>- **tabIndex** < 0 (usually **tabIndex** = -1): The component is focusable, but cannot be reached through sequential keyboard navigation.<br>Default value: **0**|
+| defaultFocus<sup>9+<sup> | boolean  | Whether to set the current component as the default focus of the page. This attribute takes effect only when the page is new and accessed for the first time.<br>Default value: **false**|
+| groupDefaultFocus<sup>9+<sup> | boolean  | Whether to set the current component as the default focus of the parent container. This attribute takes effect only when the container is new and has focus for the first time.<br>Default value: **false**<br>**NOTE**<br>This attribute must be used together with **tabIndex**. When **tabIndex** is set for a container and **groupDefaultFocus** is set for a component in the container, the focus is automatically shifted to that component when the container obtains the focus for the first time.<br>|
+| focusOnTouch<sup>9+<sup> | boolean | Whether the current component is focusable on touch.<br>Default value: **false**<br>**NOTE**<br>The component can obtain focus only when it is touchable or clickable.|
 
+## focusControl<sup>9+</sup>
 
-## Attributes
+### requestFocus<sup>9+</sup>
 
-| Name| Type| Default Value| Description|
-| -------- | -------- | -------- | -------- |
-| focusable | boolean | false | Whether the current component is focusable.|
-| tabIndex<sup>9+<sup> | number | 0 | How the current component participates in sequential keyboard navigation.<br>- **tabIndex** >= 0: The component is focusable in sequential keyboard navigation, with its order defined by the value. A component with a larger value is focused after one with a smaller value. If multiple components share the same **tabIndex** value, their focus order follows their position in the component tree.<br>- **tabIndex** < 0 (usually **tabIndex** = -1): The component is focusable, but cannot be reached through sequential keyboard navigation. |
+requestFocus(value: string): boolean
 
->  **NOTE**
->
->  The following components support focus control: **\<Button>**, **\<Text>**, **\<Image>**, **\<List>**, and **\<Grid>**.
+Requests the focus to move to the specified component. This API can be used in global method statements. 
+
+**Parameters**
+
+| Name| Type| Mandatory| Description|
+| ----- | ------ | ---- | ---- |
+| value | string | Yes  | String bound to the target component using the **key(value: string)**.|
+
+**Return value**
+
+| Type| Description|
+| ------- | ---- |
+| boolean | Returns whether the focus is successfully moved to the target component. Returns **true** if the specified component exists and the focus is successfully moved to the target component; returns **false** otherwise.|
+
+>  **NOTE**<br>
+>  The following components support focus control: **\<Button>**, **\<Text>**, **\<Image>**, **\<List>**, and **\<Grid>**. Currently, the running effect of the focus event can be displayed only on a real device.
 
 ## Example
 
-The effects of focus events can only be checked on real devices.
+### Example 1
+
+defaultFocus/groupDefaultFocus/focusOnTouch:
 
+**defaultFocus** sets the bound component as the initial focus of the page after the page is created. **groupDefaultFocus** sets the bound component as the initial focus of the **tabIndex** container after the container is created. **focusOnTouch** sets the bound component to obtain focus upon being clicked.
 ```ts
-// xxx.ets
+// focusTest.ets
 @Entry
 @Component
 struct FocusableExample {
-  @State text1: string = 'TabIndex=3'
-  @State text2: string = 'TabIndex=2'
-  @State text3: string = 'focusable=false'
-  @State text4: string = 'TabIndex=-1'
-  @State text5: string = 'TabIndex=1'
-  @State text6: string = 'TabIndex=1'
-  @State text7: string = 'focusable=true'
-  @State text8: string = 'focusable=true'
+  @State inputValue: string = ''
+
+  build() {
+    Scroll() {
+      Row({ space: 20 }) {
+        Column({ space: 20 }) {
+          Column({ space: 5 }) {
+            Button('Group1')
+              .width(165)
+              .height(40)
+              .fontColor(Color.White)
+              .focusOnTouch(true)           // The button is focusable on touch.
+            Row({ space: 5 }) {
+              Button()
+                .width(80)
+                .height(40)
+                .fontColor(Color.White)
+              Button()
+                .width(80)
+                .height(40)
+                .fontColor(Color.White)
+                .focusOnTouch(true)           // The button is focusable on touch.
+            }
+            Row({ space: 5 }) {
+              Button()
+                .width(80)
+                .height(40)
+                .fontColor(Color.White)
+              Button()
+                .width(80)
+                .height(40)
+                .fontColor(Color.White)
+            }
+          }.borderWidth(2).borderColor(Color.Red).borderStyle(BorderStyle.Dashed)
+          .tabIndex(1)                      // This column is the initial component to have focus in sequential keyboard navigation.
+          Column({ space: 5 }) {
+            Button('Group2')
+              .width(165)
+              .height(40)
+              .fontColor(Color.White)
+            Row({ space: 5 }) {
+              Button()
+                .width(80)
+                .height(40)
+                .fontColor(Color.White)
+              Button()
+                .width(80)
+                .height(40)
+                .fontColor(Color.White)
+                .groupDefaultFocus(true) // The button obtains focus when its upper-level column is in focus.
+            }
+            Row({ space: 5 }) {
+              Button()
+                .width(80)
+                .height(40)
+                .fontColor(Color.White)
+              Button()
+                .width(80)
+                .height(40)
+                .fontColor(Color.White)
+            }
+          }.borderWidth(2).borderColor(Color.Green).borderStyle(BorderStyle.Dashed)
+          .tabIndex(2)                      // This column is the second component to have focus in sequential keyboard navigation.
+        }
+        Column({ space: 5 }) {
+          TextInput({placeholder: 'input', text: this.inputValue})
+            .onChange((value: string) => {
+              this.inputValue = value
+            })
+            .defaultFocus(true)             // This <TextInput> component is the initial default focus of the page.
+          Button('Group3')
+            .width(165)
+            .height(40)
+            .fontColor(Color.White)
+          Row({ space: 5 }) {
+            Button()
+              .width(80)
+              .height(40)
+              .fontColor(Color.White)
+            Button()
+              .width(80)
+              .height(40)
+              .fontColor(Color.White)
+          }
+          Button()
+            .width(165)
+            .height(40)
+            .fontColor(Color.White)
+          Row({ space: 5 }) {
+            Button()
+              .width(80)
+              .height(40)
+              .fontColor(Color.White)
+            Button()
+              .width(80)
+              .height(40)
+              .fontColor(Color.White)
+          }
+          Button()
+            .width(165)
+            .height(40)
+            .fontColor(Color.White)
+          Row({ space: 5 }) {
+            Button()
+              .width(80)
+              .height(40)
+              .fontColor(Color.White)
+            Button()
+              .width(80)
+              .height(40)
+              .fontColor(Color.White)
+          }
+        }.borderWidth(2).borderColor(Color.Orange).borderStyle(BorderStyle.Dashed)
+        .tabIndex(3)                      // This column is the third component to have focus in sequential keyboard navigation.
+      }.alignItems(VerticalAlign.Top)
+    }
+  }
+}
+```
+Diagrams:
+
+When you press the Tab button for the first time, the focus switches to the component bound to **defaultFocus**.
+
+![defaultFocus](figures/defaultFocus.png)
+
+When you press Tab button for the second time, the focus switches to the container that matches **tabIndex(1)** and automatically moves to the component bound to **groupDefaultFocus**.
+
+![groupDefaultFocus1](figures/groupDefaultFocus1.png)
+
+When you press Tab button for the third time, the focus switches to the container that matches **tabIndex(2)** and automatically moves to the component bound to **groupDefaultFocus**.
+
+![groupDefaultFocus2](figures/groupDefaultFocus2.png)
+
+When you press Tab button for the fourth time, the focus switches to the container that matches **tabIndex(3)** and automatically moves to the component bound to **groupDefaultFocus**.
+
+![groupDefaultFocus3](figures/groupDefaultFocus3.png)
+
+Click the component bound to **focusOnTouch**. The component then obtains the focus.
+
+![focusOnTouch](figures/focusOnTouch.png)
+
+### Example 2
+
+Sample code for **focusControl.requestFocus**:
+
+Use the **focusContrl.requestFocus** API to enable a specified component to obtain the focus.
+```ts
+// requestFocus.ets
+import prompt from '@system.prompt';
+
+@Entry
+@Component
+struct RequestFocusExample {
+  @State idList: string[] = ['A', 'B', 'C', 'D', 'E', 'F', 'LastPageId']
+  @State selectId: string = 'LastPageId'
 
   build() {
     Column({ space:20 }){
-      Button(this.text1)  // This component is the fourth component that is focused when the Tab key is pressed.
-        .width(300).height(70).fontColor(Color.Black)
-        .tabIndex(3)
-      Button(this.text2)  // This component is the third component that is focused when the Tab key is pressed.
-        .width(300).height(70).fontColor(Color.Black)
-        .tabIndex(2)
-      Button(this.text3)  // This component is not focusable.
-        .width(300).height(70).fontColor(Color.Black)
+      Row({space: 5}) {
+        Button("id: " + this.idList[0] + " focusable(false)")
+          .width(200).height(70).fontColor(Color.White)
+          .key(this.idList[0])
           .focusable(false)
-      Button(this.text4) // This component is focusable, but cannot be reached through sequential keyboard navigation.
-        .width(300).height(70).fontColor(Color.Black)
-        .tabIndex(-1)
-      Button(this.text5)  // This component is the first component that is focused when the Tab key is pressed.
-        .width(300).height(70).fontColor(Color.Black)
-        .tabIndex(1)
-      Button(this.text6)  // This component is the second component that is focused when the Tab key is pressed.
-        .width(300).height(70).fontColor(Color.Black)
-        .tabIndex(1)
-      Button(this.text7)  // This component is the fifth component that is focused when the Tab key is pressed.
-        .width(300).height(70).fontColor(Color.Black)
-        .focusable(true)
-      Button(this.text8)  // This component is the sixth component that is focused when the Tab key is pressed.
-        .width(300).height(70).fontColor(Color.Black)
-        .focusable(true)
+        Button("id: " + this.idList[1])
+          .width(200).height(70).fontColor(Color.White)
+          .key(this.idList[1])
+      }
+      Row({space: 5}) {
+        Button("id: " + this.idList[2])
+          .width(200).height(70).fontColor(Color.White)
+          .key(this.idList[2])
+        Button("id: " + this.idList[3])
+          .width(200).height(70).fontColor(Color.White)
+          .key(this.idList[3])
+      }
+      Row({space: 5}) {
+        Button("id: " + this.idList[4])
+          .width(200).height(70).fontColor(Color.White)
+          .key(this.idList[4])
+        Button("id: " + this.idList[5])
+          .width(200).height(70).fontColor(Color.White)
+          .key(this.idList[5])
+      }
+      Row({space: 5}) {
+        Select([{value: this.idList[0]},
+                {value: this.idList[1]},
+                {value: this.idList[2]},
+                {value: this.idList[3]},
+                {value: this.idList[4]},
+                {value: this.idList[5]},
+                {value: this.idList[6]}])
+          .value(this.selectId)
+          .onSelect((index: number) => {
+            this.selectId = this.idList[index]
+          })
+        Button("RequestFocus")
+          .width(200).height(70).fontColor(Color.White)
+          .onClick(() => {
+            var res = focusControl.requestFocus(this.selectId)      // Enable the component selected by this.selectId to obtain the focus.
+            if (res) {
+              prompt.showToast({message: 'Request success'})
+            } else {
+              prompt.showToast({message: 'Request failed'})
+            }
+          })
+      }
     }.width('100%').margin({ top:20 })
   }
 }
 ```
 
-![focus](figures/focus.png)
+Diagrams:
\ No newline at end of file
+
+Press the Tab button to activate the focus state.
+Request focus for a component that does not exist.
+
+![requestFocus1](figures/requestFocus1.png)
+
+Request focus for a component that is not focusable.
+
+![requestFocus2](figures/requestFocus2.png)
+
+Request focus for a focusable component.
+
+![requestFocus3](figures/requestFocus3.png)

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

@@ -17,9 +17,9 @@ None
 
 | Name| Type| Default Value| Description|
 | -------- | -------- | -------- | -------- |
-| linearGradient | {<br>angle?: [Angle](../../ui/ts-types.md),<br>direction?: [GradientDirection](ts-appendix-enums.md#gradientdirection),<br>colors: Array&lt;[ColorStop](../../ui/ts-types.md)&gt;<br>repeating?: boolean<br>} | - | Linear gradient.<br>**angle**: angle of the linear gradient.<br>**direction**: direction of the linear gradient. It does not take effect when **angle** is set.<br>**colors**: description of the gradient colors.<br>**repeating**: whether the colors are repeated.|
-| sweepGradient | {<br>center: Point,<br>start?: angle,<br>end?: angle,<br>colors: Array&lt;[ColorStop](../../ui/ts-types.md)&gt;<br>repeating?: boolean<br>} | - | Angle gradient.<br>**center**: center point of the angle gradient.<br>**start**: start point of the angle gradient.<br>**end**: end point of the angle gradient.<br>**colors**: description of the gradient colors.<br>**repeating**: whether the colors are repeated.|
-| radialGradient | {<br>center: Point,<br>radius: Length,<br>colors: Array&lt;[ColorStop](../../ui/ts-types.md)&gt;<br>repeating: boolean<br>} | - | Radial gradient.<br>**center**: center point of the radial gradient.<br>**radius**: radius of the radial gradient.<br>**colors**: description of the gradient colors.<br>**repeating**: whether the colors are repeated.|
+| linearGradient | {<br>angle?: number \| string,<br>direction?: [GradientDirection](ts-appendix-enums.md#gradientdirection),<br>colors: Array&lt;[ColorStop](ts-basic-components-gauge.md#colorstop)&gt;,<br>repeating?: boolean<br>} | - | Linear gradient.<br>**angle**: angle of the linear gradient.<br>**direction**: direction of the linear gradient. It does not take effect when **angle** is set.<br>**colors**: description of the gradient colors.<br>**repeating**: whether the colors are repeated.|
+| sweepGradient | {<br>center: Point,<br>start?: number \| string,<br>end?: number \| string,<br>rotation?: number\|string,<br>colors: Array&lt;[ColorStop](ts-basic-components-gauge.md#colorstop)&gt;,<br>repeating?: boolean<br>} | - | Angle gradient.<br>**center**: center point of the angle gradient.<br>**start**: start point of the angle gradient.<br>**end**: end point of the angle gradient.<br>**rotation**: rotation angle of the angle gradient.<br>**colors**: description of the gradient colors.<br>**repeating**: whether the colors are repeated.|
+| radialGradient | {<br>center: Point,<br>radius: number \| string,<br>colors: Array&lt;[ColorStop](ts-basic-components-gauge.md#colorstop)&gt;,<br>repeating?: boolean<br>} | - | Radial gradient.<br>**center**: center point of the radial gradient.<br>**radius**: radius of the radial gradient.<br>**colors**: description of the gradient colors.<br>**repeating**: whether the colors are repeated.|
 
 
 ## Example

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

 # Grid
 
-
 >  **NOTE**
->
-> - This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+> - The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 > 
 > - The column width and column gap in the grid layout are determined by the nearest parent component **GridContainer**. The component tree that uses grid attributes must contain one **GridContainer** or more.
 
 
-## Required Permissions
-
-None
-
-
 ## Attributes
 
 
-| Name | Type | Default Value | Description |
-| -------- | -------- | -------- | -------- |
-| useSizeType | {<br/>xs?: number \| { span: number, offset: number },<br/>sm?: number \| { span: number, offset: number },<br/>md?: number \| { span: number, offset: number },<br/>lg?: number \| { span: number, offset: number }<br/>} | - | Number of occupied columns and offset columns for a specific device width type. **span** indicates the number of occupied columns, and **offset** indicates the number of offset columns.<br/>If the value is of the number type, only the number of columns can be set. If the value is in the format of {"span": 1, "offset": 0}, both the number of occupied columns and the number of offset columns need to be set.<br/>- **xs** indicates that the device width type is **SizeType.XS**.<br/>- **sm** indicates that the device width type is **SizeType.SM**.<br/>- **md** indicates that the device width type is **SizeType.MD**.<br/>- **lg** indicates that the device width type is **SizeType.LG**. |
-| gridSpan | number | 1 | Default number of occupied columns, that is, the number of occupied columns when **span** in **useSizeType** is not set.<br/>> **NOTE**<br/>> If the **span** attribute is set, the component width is determined by the grid layout. |
-| gridOffset | number | 0 | Default number of offset columns, that is, the number of offset columns in the start direction of the parent component (which is also the nth column that the component is in) when **offset** in **useSizeType** is not set.<br/>> **NOTE**<br/>> 1. After this attribute is set, the horizontal layout of the current component does not follow the original layout of the parent component. Instead, it offsets along the start direction of the parent component.<br/>> 2. Offset = (Column width + Gap) x Number of columns<br/>> 3. After this attribute is set, sibling components will be arranged relatively to this component, as in the relative layout. |
+| Name          | Type                             | Description                                            |
+| ----------- | --------------------------| ----------------------------------------------- |
+| useSizeType | {<br>xs?: number \| { span: number, offset: number },<br>sm?: number \| { span: number, offset: number },<br>md?: number \| { span: number, offset: number },<br>lg?: number \| { span: number, offset: number }<br>} | Number of occupied columns and offset columns for a specific device width type. **span** indicates the number of occupied columns, and **offset** indicates the number of offset columns.<br>If the value is of the number type, only the number of columns can be set. If the value is in the format of {"span": 1, "offset": 0}, both the number of occupied columns and the number of offset columns need to be set.<br>- **xs** indicates that the device width type is **SizeType.XS**.<br>- **sm** indicates that the device width type is **SizeType.SM**.<br>- **md** indicates that the device width type is **SizeType.MD**.<br>- **lg** indicates that the device width type is **SizeType.LG**.|
+| gridSpan    | number                    | Default number of occupied columns, that is, the number of occupied columns when **span** in **useSizeType** is not set.<br>**NOTE**<br>If the **span** attribute is set, the component width is determined by the grid layout.<br>Default value: **1**|
+| gridOffset  | number                    | Default number of offset columns, that is, the number of offset columns in the start direction of the parent component (which is also the nth column that the component is in) when **offset** in **useSizeType** is not set.<br>**NOTE**<br>- After this attribute is set, the horizontal layout of the current component does not follow the original layout of the parent component. Instead, it offsets along the start direction of the parent component.<br>- Offset = (Column width + Gap) \* Number of columns.<br>- After this attribute is set, sibling components will be arranged relatively to this component, as in the relative layout.<br>Default value: **0**|
 
 
 ## Example
 
-
 ```ts
 // xxx.ets
 @Entry
 @Component
 struct GridContainerExample1 {
+
   build(){
     GridContainer() {
       Row({}) {
@@ -70,14 +63,14 @@ struct GridContainerExample1 {
 }
 ```
 
-  **Figure 1** Device width type SM
+**Figure 1** Device width type SM
 
-  ![en-us_image_0000001256858405](figures/en-us_image_0000001256858405.png)
+![en-us_image_0000001256858405](figures/en-us_image_0000001256858405.png)
 
-  **Figure 2** Device width type MD
+**Figure 2** Device width type MD
 
-  ![en-us_image_0000001257058415](figures/en-us_image_0000001257058415.png)
+![en-us_image_0000001257058415](figures/en-us_image_0000001257058415.png)
 
-  **Figure 3** Device width type LG
+**Figure 3** Device width type LG
 
-  ![en-us_image_0000001212378416](figures/en-us_image_0000001212378416.png)
+![en-us_image_0000001212378416](figures/en-us_image_0000001212378416.png)

en/application-dev/reference/arkui-ts/ts-universal-attributes-hit-test-behavior.md

+# Hit Test Control
+
+Hit test control allows you to configure hit testing for components. When processing a touch event, ArkUI performs hit testing on the touch points and component area before the touch event is triggered, in order to determine the component that needs to respond to the touch event, and then distributes the touch event based on the hit test result. The **hitTestBehavior** attribute sets the behavior during hit testing. The settings will affect the hit test result of the component and thereby the subsequent touch event distribution. For details, see **HitTestMode**.
+
+>  **NOTE**
+>  - The APIs of this module are supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version.
+>  - When the touch areas of nodes, for example, two nodes, in the **\<Stack>** component overlap, hit testing is performed only on the node displayed at the top layer by default. To perform hit testing on the node at the lower layer, set **hitTestBehavior** to **HitTestMode.Transparent** for the upper-layer node.
+
+
+## Attributes
+
+| Name              | Type    | Description                                 |
+| -------------------- | -------- | ---------------------------------------- |
+| hitTestBehavior      | HitTestMode  | How the component behaves during hit testing.<br>Default value: **HitTestMode.Default**|
+
+## HitTestMode
+
+| Name         | Description                                      |
+| ------------| ----------------------------------------- |
+| Default     | Both the node and its child node respond to the hit test of a touch event, but its sibling node is blocked from the hit test.|
+| Block       | The node responds to the hit test of a touch event, but its child node and sibling node are blocked from the hit test.|
+| Transparent | Both the node and its child node respond to the hit test of a touch event, and its sibling node is also considered during the hit test.|
+| None        | The node does not respond to the hit test of a touch event, but its child node and sibling node are considered during the hit test.|
+
+
+## Example
+
+Set **hitTestBehavior** to **HitTestMode.Transparent** for the **\<Text>** component, which means that the inner-layer **\<Stack>** component is also considered during hit testing. Therefore, both the **\<Text>** and **\<Stack>** components respond to the **onTouch** event. 
+Set **hitTestBehavior** to **HitTestMode.Block** for the inner-layer **\<Stack>** component, which means that its child nodes and sibling node **\<Button>** are blocked from hit testing. Therefore, neither the inner-layer or out-layer **\<Button>** components respond to the **onTouch** event.
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct HitTestBehaviorExample {
+  build() {
+    // outer stack
+    Stack() {
+      Button('outer button')
+        .onTouch((event) => {
+          console.info('outer button touched type: ' + event.type)
+        })
+      // inner stack
+      Stack() {
+        Button('inner button')
+          .onTouch((event) => {
+            console.info('inner button touched type: ' + event.type)
+          })
+      }
+      .width("100%").height("100%")
+      .hitTestBehavior(HitTestMode.Block)
+      .onTouch((event) => {
+        console.info('stack touched type: ' + event.type)
+      })
+
+      Text('Transparent')
+        .hitTestBehavior(HitTestMode.Transparent)
+        .width("100%").height("100%")
+        .onTouch((event) => {
+          console.info('text touched type: ' + event.type)
+        })
+    }.width(300).height(300)
+  }
+}
+```

en/application-dev/reference/arkui-ts/ts-universal-attributes-hover-effect.md

@@ -7,16 +7,11 @@ The hover effect is applied to a component in hover state.
 > The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-## Required Permissions
-
-None
-
-
 ## Attributes
 
-| Name| Type| Default Value| Description|
-| -------- | -------- | -------- | -------- |
-| hoverEffect | [HoverEffect](ts-appendix-enums.md#hovereffect8) | HoverEffect.Auto | Hover effect of the component in hover state.|
+| Name         | Type                                              | Description                                               |
+| ----------- | --------------------------------------------------| ------------------------------------------------ |
+| hoverEffect | [HoverEffect](ts-appendix-enums.md#hovereffect8)  | Hover effect of the component in hover state.<br>Default value: **HoverEffect.Auto**|
 
 
 ## Example

en/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md

@@ -4,7 +4,7 @@ Image effects include background blur, content blur, grayscale, and much more.
 
 >  **NOTE**
 >
-> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+>  The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
 ## Required Permissions
@@ -15,20 +15,19 @@ None
 ## Attributes
 
 
-| Name | Type | Default Value | Description |
-| -------- | -------- | -------- | -------- |
-| blur | number | - | Adds the content blur effect to the current component. The input parameter is the blur radius. The larger the radius is, the more blurred the content is. If the value is **0**, the content is not blurred. |
-| backdropBlur | number | - | Adds the background blur effect to the current component. The input parameter is the blur radius. The larger the radius is, the more blurred the background is. If the value is **0**, the background is not blurred. |
-| shadow | {<br/>radius: number,<br/>color?: Color \| string \| [Resource](../../ui/ts-types.md#resource-type),<br/>offsetX?: number,<br/>offsetY?: number<br/>} | - | Adds the shadow effect to the current component. The input parameters are the fuzzy radius (mandatory), shadow color (optional; gray by default), X-axis offset (optional and 0 by default), and Y-axis offset (optional; 0 by default). The offset unit is px. |
-| grayscale | number | 0.0 | Converts the input image to grayscale. The value indicates the grayscale conversion ratio. If the input value is **1.0**, the image is converted into a grayscale image. If the input value is **0.0**, the image does not change. If the input value is between **0.0** and **1.0**, the effect changes in linear mode. The unit is percentage. The unit is percentage. |
-| brightness | number | 1.0 | Adds a brightness to the current component. The input parameter is a brightness ratio. The value **1** indicates no effects. The value **0** indicates the complete darkness. If the value is less than **1**, the brightness decreases. If the value is greater than **1**, the brightness increases. A larger value indicates a higher brightness. |
-| saturate | number | 1.0 | Adds the saturation effect to the current component. The saturation is the ratio of the chromatic component to the achromatic component (gray) in a color. When the input value is **1**, the source image is displayed. When the input value is greater than **1**, a higher percentage of the chromatic component indicates a higher saturation. When the input value is less than **1**, a higher percentage of the achromatic component indicates a lower saturation. The unit is percentage. |
-| contrast | number | 1.0 | Adds the contrast effect to the current component. The input parameter is a contrast value. If the value is **1**, the source image is displayed. If the value is greater than **1**, a larger value indicates a higher contrast and a clearer image. If the value is less than **1**, a smaller value indicates a lower contrast is. If the value is **0**, the image becomes all gray. The unit is percentage. |
-| invert | number | 0 | Inverts the input image. The input parameter is an image inversion ratio. The value **1** indicates complete inversion. The value **0** indicates that the image does not change. The unit is percentage. |
-| colorBlend<sup>8+</sup> | Color \| string \| [Resource](../../ui/ts-types.md#resource-type) | - | Adds the color blend effect to the current component. The input parameter is the blended color. |
-| sepia | number | 0 | Converts the image color to sepia. The input parameter is an image inversion ratio. The value **1** indicates the image is completely sepia. The value **0** indicates that the image does not change. The unit is percentage. |
-| hueRotate | number \| string | '0deg' | Adds the hue rotation effect to the current component. The input parameter is a rotation angle. If the input value is **0deg**, the image does not change (because the default rotation angle is **0deg**). The input parameter does not have the maximum value. If the value exceeds **360deg**, the image is rotated for one more circle. In other words, the value **370deg** has the same effect as **10deg**.|
-
+| Name                         | Type                                                    | Default Value| Description                                                        |
+| ----------------------------- | ------------------------------------------------------------ | ------ | ------------------------------------------------------------ |
+| blur                          | number                                                       | -      | Blur effect of the current component' content. The input parameter is the blur radius. The larger the radius is, the more blurred the content is. If the value is **0**, the content is not blurred.|
+| backdropBlur                  | number                                                       | -      | Blur effect of the current component' background. The input parameter is the blur radius. The larger the radius is, the more blurred the background is. If the value is **0**, the background is not blurred.|
+| shadow                        | {<br>radius: number \| [Resource](ts-types.md#resource),<br>color?: Color \| string \| Resource,<br>offsetX?: number \| Resource,<br>offsetY?: number \| Resource<br>} | -      | Adds the shadow effect to the current component. The input parameters are the fuzzy radius (mandatory), shadow color (optional; gray by default), x-axis offset (optional; 0 by default), and y-axis offset (optional; 0 by default). The offset unit is px.|
+| grayscale                     | number                                                       | 0.0    | Converts the input image to grayscale. The value indicates the grayscale conversion ratio. If the input value is **1.0**, the image is converted into a grayscale image. If the input value is **0.0**, the image does not change. If the input value is between **0.0** and **1.0**, the effect changes in linear mode. The unit is percentage.|
+| brightness                    | number                                                       | 1.0    | Adds a brightness to the current component. The input parameter is a brightness ratio. The value **1** indicates no effects. The value **0** indicates the complete darkness. If the value is less than **1**, the brightness decreases. If the value is greater than **1**, the brightness increases. A larger value indicates a higher brightness.|
+| saturate                      | number                                                       | 1.0    | Adds the saturation effect to the current component. The saturation is the ratio of the chromatic component to the achromatic component (gray) in a color. When the input value is **1**, the source image is displayed. When the input value is greater than **1**, a higher percentage of the chromatic component indicates a higher saturation. When the input value is less than **1**, a higher percentage of the achromatic component indicates a lower saturation. The unit is percentage.|
+| contrast                      | number                                                       | 1.0    | Adds the contrast effect to the current component. The input parameter is a contrast value. If the value is **1**, the source image is displayed. If the value is greater than **1**, a larger value indicates a higher contrast and a clearer image. If the value is less than **1**, a smaller value indicates a lower contrast is. If the value is **0**, the image becomes all gray. The unit is percentage.|
+| invert                        | number                                                       | 0      | Inverts the input image. The input parameter is an image inversion ratio. The value **1** indicates complete inversion. The value **0** indicates that the image does not change. The unit is percentage.|
+| colorBlend <sup>8+</sup> | Color \| string \| [Resource](ts-types.md#resource) | -      | Adds the color blend effect to the current component. The input parameter is the blended color.                                                           |
+| sepia                         | number                                                       | 0      | Converts the image color to sepia. The input parameter is an image inversion ratio. The value **1** indicates the image is completely sepia. The value **0** indicates that the image does not change. The unit is percentage.|
+| hueRotate                     | number\|string                                               | '0deg' | Adds the hue rotation effect to the current component. The input parameter is a rotation angle.                          |
 
 ## Example
 
@@ -39,6 +38,7 @@ You can preview how this component looks on a real device. The preview is not ye
 @Entry
 @Component
 struct ImageEffectsExample {
+
   build() {
     Column({space: 10}) {
       // Blur the font.
@@ -78,4 +78,4 @@ struct ImageEffectsExample {
 }
 ```
 
-
+<img src="figures/image-effect.png" alt="image-effect"  />

en/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md

 # Layout Constraints
 
+Layout constraints refer to constraints on the aspect ratio and display priority of components.
 
 >  **NOTE**
 >
-> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-
-
-## Required Permissions
-
-None
+>  The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
 ## Attributes
 
-
-| Name | Type | Default Value | Description |
-| -------- | -------- | -------- | -------- |
-| aspectRatio | number | - | Aspect ratio of the current component. |
-| displayPriority | number | - | Display priority of the current component in the container. When the space of the parent container is insufficient, the component with a lower priority is hidden.<br/>**NOTE**<br/>This attribute is valid only for the **\<Row>**, **\<Column>**, and **\<Flex>** (single-row) container components. |
+| Name             | Type  | Description                                      |
+| --------------- | ------ | ---------------------------------------- |
+| aspectRatio     | number | Aspect ratio of the component.                             |
+| displayPriority | number | Display priority for the component in the layout container. When the space of the parent container is insufficient, the component with a lower priority is hidden.<br>**NOTE**<br>This attribute is valid only for the **\<Row>**, **\<Column>**, and **\<Flex>** (single-row) container components.|
 
 
 ## Example
 
-
 ```ts
 // xxx.ets
 @Entry
@@ -72,11 +66,11 @@ struct AspectRatioExample {
 }
 ```
 
-  **Figure1** Portrait display
-  ![en-us_image_0000001256978379](figures/en-us_image_0000001256978379.gif)
+**Figure 1** Portrait display
+![en-us_image_0000001256978379](figures/en-us_image_0000001256978379.gif)
 
-  **Figure2** Landscape display
-  ![en-us_image_0000001212218476](figures/en-us_image_0000001212218476.gif)
+**Figure 2** Landscape display
+![en-us_image_0000001212218476](figures/en-us_image_0000001212218476.gif)
 
 ```ts
 class ContainerInfo {
@@ -131,4 +125,4 @@ struct DisplayPriorityExample {
 
 ```
 
-  ![en-us_image_0000001212058504](figures/en-us_image_0000001212058504.gif)
+![en-us_image_0000001212058504](figures/en-us_image_0000001212058504.gif)

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

@@ -7,21 +7,17 @@ The location attribute sets the alignment mode, layout direction, and position o
 >  This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-## Required Permissions
-
-None
-
-
 ## Attributes
 
 
-| Name| Type| Default Value| Description|
-| -------- | -------- | -------- | -------- |
-| align | [Alignment](ts-appendix-enums.md#alignment) | Center | Alignment of the component content. This attribute is valid only when the values of **width** and **height** are greater than the size of the component content.|
-| direction | [Direction](ts-appendix-enums.md#direction) | Auto | Horizontal layout of the component. For details about the options, see **Direction** enums.|
-| position | {<br>x: Length,<br>y: Length<br>} | - | Offset of the component anchor point relative to the top start edge of the parent component. The offset is expressed using absolute values. When laying out components, this attribute does not affect the layout of the parent component. It only adjusts the component position during drawing.|
-| markAnchor | {<br>x: Length,<br>y: Length<br>} | {<br>x: 0,<br>y: 0<br>} | Anchor point of the component for positioning. The top start edge of the component is used as the reference point for offset.|
-| offset | {<br>x: Length,<br>y: Length<br>} | {<br>x: 0,<br>y: 0<br>} | Coordinate offset of the relative layout. This attribute does not affect the layout of the parent component. It only adjusts the component position during drawing.|
+| Name| Type| Description|
+| -------- | -------- | -------- |
+| align | [Alignment](ts-appendix-enums.md#alignment) | Alignment of the component content. This attribute is valid only when the values of **width** and **height** are greater than the size of the component content.<br>Default value: **Alignment.Center**|
+| direction | [Direction](ts-appendix-enums.md#direction) | Horizontal layout of the component.<br>Default value: **Direction.Auto**|
+| position | [Position](ts-types.md#position8) | Offset of the component anchor point relative to the top start edge of the parent component. The offset is expressed using absolute values. When laying out components, this attribute does not affect the layout of the parent component. It only adjusts the component position during drawing.|
+| markAnchor | [Position](ts-types.md#position8) | Anchor point of the component for positioning. The top start edge of the component is used as the reference point for offset.<br>Default value:<br>{<br>x: 0,<br>y: 1<br>} |
+| offset | [Position](ts-types.md#position8) | Coordinate offset of the relative layout. This attribute does not affect the layout of the parent component. It only adjusts the component position during drawing.<br>Default value:<br>{<br>x: 0,<br>y: 1<br>} |
+| alignRules<sup>9+</sup> | {<br>left?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };<br>right?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };<br>middle?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };<br>top?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) };<br>bottom?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) };<br>center?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) }<br>} | Alignment rules relative to the container.<br>- **left**: left-aligned.<br>- **right**: right-aligned.<br>- **middle**: center-aligned.<br>- **top**: top-aligned.<br>- **bottom**: bottom-aligned.<br>- **center**: center-aligned.<br>**NOTE**<br>- **anchor**: ID of the component that functions as the anchor point.<br>- **align**: alignment mode relative to the anchor component.|
 
 
 ## Example

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

@@ -7,25 +7,20 @@ A menu – a vertical list of items – can be bound to a component and displaye
 >  The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-## Required Permissions
-
-None
-
-
 ## Attributes
 
 
-| Name                          | Type                                    | Default Value  | Description                                |
-| ---------------------------- | ---------------------------------------- | ---- | ---------------------------------- |
-| bindMenu                     | Array<MenuItem&gt; \| [CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | -    | Menu bound to the component, which is displayed when you click the component. Textual and custom menu items are supported.|
-| bindContextMenu<sup>8+</sup> | content: [CustomBuilder](../../ui/ts-types.md),<br>responseType: [ResponseType](ts-appendix-enums.md#responsetype8) | -    | Context menu bound to the component, which is displayed when you long-press or right-click the component. Only custom menu items are supported. |
+| Name                          | Type                                                       | Description                                                        |
+| ---------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
+| bindMenu                     | Array<MenuItem&gt; \| [CustomBuilder](ts-types.md#custombuilder8) | Menu bound to the component, which is displayed when you click the component. Textual and custom menu items are supported.|
+| bindContextMenu<sup>8+</sup> | content: [CustomBuilder](ts-types.md#custombuilder8),<br>responseType: [ResponseType](ts-appendix-enums.md#responsetype8) | Context menu bound to the component, which is displayed when you long-press or right-click the component. Only custom menu items are supported.|
 
+## MenuItem
 
-- MenuItem
-  | Name    | Type                     | Description         |
-  | ------ | ----------------------- | ----------- |
-  | value  | string                  | Menu item text.     |
-  | action | () =&gt; void | Action triggered when a menu item is clicked.|
+| Name    | Type                     | Description         |
+| ------ | ----------------------- | ----------- |
+| value  | string                  | Menu item text.     |
+| action | () =&gt; void | Action triggered when a menu item is clicked.|
 
 
 ## Example

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

 # Opacity
 
+You can set the opacity of a component.
 
 >  **NOTE**
 >
-> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-
-
-You can set the opacity of a component.
-
-
-## Required Permissions
-
-None
+>  The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
 ## Attributes
 
 
-| Name | Type | Default Value | Description |
-| -------- | -------- | -------- | -------- |
-| opacity | number \| [Resource](../../ui/ts-types.md) | 1 | Opacity of a component. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. |
+| Name     | Type                                    | Description                                      |
+| ------- | ---------------------------------------- | ---------------------------------------- |
+| opacity | number \| [Resource](ts-types.md#resource) | Opacity of a component. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent.<br>Default value: **1**|
 
 
 ## Example
 
-
 ```ts
 // xxx.ets
 @Entry

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

 # Overlay
 
+You can set overlay text for a component.
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
-> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-
-
-## Required Permissions
-
-None
-
+>  **NOTE**
+>
+> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 ## Attributes
 
-
-| Name | Type | Default Value | Description |
-| -------- | -------- | -------- | -------- |
-| overlay | title: string,<br/>options: {<br/>align?: [Alignment](ts-appendix-enums.md#alignment-enums),<br/>offset?: {x: number, y: number}<br/>} | {<br/>align: Alignment.Center,<br/>offset: {0, 0}<br/>} | Mask added to the component. The mask has the same layout as the component. |
+| Name      | Type                         | Description                      |
+| ------- | ----------------------------- | ------------------------- |
+| overlay | value: string,<br>options?: {<br>align?: [Alignment](ts-appendix-enums.md#alignment), <br>offset?: {<br>  x?: number,<br>  y?: number<br> }<br>} | Overlay added to the component. The overlay has the same layout as the component.<br>Default value:<br>{<br>align: Alignment.Center,<br>offset: {0, 0}<br>} |
 
 
 ## Example
 
-
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct OverlayExample {

en/application-dev/reference/arkui-ts/ts-universal-attributes-polymorphic-style.md

 # Polymorphic Style
 
-
-> ![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.
-
-
 You can set state-specific styles for components.
 
+>  **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.
 
-## Required Permissions
 
-None
+## Attributes
 
+| Style| Type| Description|
+| -------- | -------- | -------- |
+| stateStyles | StateStyles | Styles of the component for different states.|
 
-## Attributes
+## StateStyles
 
-| Name | Type | Default Value | Description |
+| Name| Type| Mandatory| Description|
 | -------- | -------- | -------- | -------- |
-| stateStyles | StateStyles | - | Styles of a component for different states. |
-
-- StateStyles<sup>8+</sup>
-    | Name | Type | Mandatory | Default Value | Description |
-  | -------- | -------- | -------- | -------- | -------- |
-  | normal | ()=&gt;void | No | - | Style of the component when stateless. |
-  | pressed | ()=&gt;void | No | - | Style of the component in the pressed state. |
-  | disabled | ()=&gt;void | No | - | Style of the component in disabled state. |
+| normal | ()=&gt;void | No| Style of the component when being stateless.|
+| pressed | ()=&gt;void | No| Style of the component in the pressed state.|
+| disabled | ()=&gt;void | No| Style of the component in disabled state.|
+| focused | ()=&gt;void | No| Style of the component in focused state.|
+| clicked | ()=&gt;void | No| Style of the component in clicked state.|
 
 
 ## Example
 
-
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct StyleExample {

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

@@ -7,40 +7,36 @@ The popup attribute defines the popup displayed when a component is clicked.
 >  This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-## Required Permissions
-
-None
-
-
-## Attributes
-
-
-| Name| Type| Default Value| Description|
-| -------- | -------- | -------- | -------- |
-| bindPopup | show: boolean,<br>popup: PopupOptions \| CustomPopupOptions | - | Settings of the popup bound to the component.<br>**show**: whether to display the popup on the creation page by default. The default value is **false**.<br>**popup**: parameters of the popup.|
-
-
-- PopupOptions
-  | Name| Type| Mandatory| Default Value| Description|
-  | -------- | -------- | -------- | -------- | -------- |
-  | message | string | Yes| - | Content of the popup message.|
-  | placementOnTop | boolean | No| false | Whether to display the popup above the component. The default value is **false**.|
-  | arrowOffset<sup>9+</sup> | Length | No| - | Offset of the popup arrow in the popup window. When above or below the popup, the arrow is offset to the left by default. When on the left or right side of the popup, the arrow is offset to the top by default.|
-  | primaryButton | {<br>value: string,<br>action: () =&gt; void<br>} | No| - | Primary button.<br>**value**: text of the primary button in the popup.<br>**action**: callback for clicking the primary button.|
-  | secondaryButton | {<br>value: string,<br>action: () =&gt; void<br>} | No| - | Secondary button.<br>**value**: text of the secondary button in the popup.<br>**action**: callback for clicking the secondary button.|
-  | onStateChange | (isVisible: boolean) =&gt; void | No| - | Callback for the popup status change event. The parameter **isVisible** indicates whether the popup is visible.|
-
-- CustomPopupOptions<sup>8+</sup>
-  | Name| Type| Mandatory| Default Value| Description|
-  | -------- | -------- | -------- | -------- | -------- |
-  | builder | () =&gt; any | Yes| - | Builder of the popup content.|
-  | placement | [Placement](ts-appendix-enums.md#placement8) | No| Placement.Bottom | Preferred position of the popup. If the set position is insufficient for holding the popup, it will be automatically adjusted.|
-  | arrowOffset<sup>9+</sup> | Length | No| - | Offset of the popup arrow in the popup window. When above or below the popup, the arrow is offset to the left by default. When on the left or right side of the popup, the arrow is offset to the top by default.|
-  | maskColor | [ResourceColor](../../ui/ts-types.md) | No| - | Color of the popup mask.|
-  | popupColor | [ResourceColor](../../ui/ts-types.md) | No| - | Color of the popup.|
-  | enableArrow | boolean | No| true | Whether to display an arrow.<br>Since API version 9, if the location set for the popup arrow is not large enough, the arrow will not be displayed. For example, if **placement** is set to **Left** and the popup height is less than the arrow width (32 vp), the arrow will not be displayed.|
-  | autoCancel | boolean | No| true | Whether to automatically close the popup when an operation is performed on the page.|
-  | onStateChange | (isVisible: boolean) =&gt; void | No| - | Callback for the popup status change event. The parameter **isVisible** indicates whether the popup is visible.|
+## APIs
+
+
+| Name          | Type                            | Description                                       |
+| ---------- | ------------------------------------- | --------------------------------------- |
+| bindPopup  | show: boolean,<br>popup: PopupOptions \| CustomPopupOptions<sup>8+</sup> | Settings of the popup bound to the component.<br>**show**: whether to display the popup on the creation page by default. The default value is **false**.<br>**popup**: parameters of the popup.|
+
+## PopupOptions
+
+| Name                     | Type                                               | Mandatory   | Description                                         |
+| -------------------------| ------------------------------------------------| -----| ----------------------------------------- |
+| message                  | string                                          | Yes   | Content of the popup message.                                    |
+| placementOnTop           | boolean                                         | No   | Whether to display the popup above the component. The default value is **false**.                 |
+| arrowOffset<sup>9+</sup> | [Length](ts-types.md#length)                    | No   | Offset of the popup arrow in the popup window. When residing above or below the popup, the arrow is offset to the left by default. When residing on the left or right side of the popup, the arrow is offset to the top by default.     |
+| primaryButton            | {<br>value: string,<br>action: () =&gt; void<br>} | No   | Primary button.<br>**value**: text of the primary button in the popup.<br>**action**: callback for clicking the primary button.|
+| secondaryButton          | {<br>value: string,<br>action: () =&gt; void<br>} | No   | Secondary button.<br>**value**: text of the secondary button in the popup.<br>**action**: callback for clicking the secondary button.|
+| onStateChange            | (event: { isVisible: boolean }) =&gt; void | No   | Callback for the popup status change event. The parameter **isVisible** indicates whether the popup is visible.     |
+
+## CustomPopupOptions<sup>8+</sup>
+
+| Name                      | Type                      | Mandatory    | Description                                                |
+| -------------------------| ------------------------- | ---- | ---------------------------------------------------- |
+| builder                  | [CustomBuilder](ts-types.md#custombuilder8)  | Yes  | Builder of the popup content.                                         |
+| placement                | [Placement](ts-appendix-enums.md#placement8) | No  | Preferred position of the popup. If the set position is insufficient for holding the popup, it will be automatically adjusted.<br>Default value: **Placement.Bottom**    |
+| arrowOffset<sup>9+</sup> | [Length](ts-types.md#length)                 | No  | Offset of the popup arrow in the popup window. When residing above or below the popup, the arrow is offset to the left by default. When residing on the left or right side of the popup, the arrow is offset to the top by default.         |
+| maskColor                | [ResourceColor](ts-types.md#resourcecolor)  | No  | Color of the popup mask.                                         |
+| popupColor               | [ResourceColor](ts-types.md#resourcecolor)  | No  | Color of the popup.                                              |
+| enableArrow              | boolean                                      | No  | Whether to display an arrow.<br>Since API version 9, if the location set for the popup arrow is not large enough, the arrow will not be displayed. For example, if **placement** is set to **Left** and the popup height is less than the arrow width (32 vp), the arrow will not be displayed.<br>Default value: **true**|
+| autoCancel               | boolean                                      | No  | Whether to automatically close the popup when an operation is performed on the page.<br>Default value: **true**                       |
+| onStateChange            | (event: { isVisible: boolean }) =&gt; void | No   | Callback for the popup status change event. The parameter **isVisible** indicates whether the popup is visible.|
 
 
 ## Example

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

+# restoreId
+
+The **restoreId** attribute identifies a component in distributed migration scenarios. It can be used to restore the component to a specific state on a remote device.
+
+>  **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.
+
+## Attributes
+
+| Name| Type| Description|
+| -------- | -------- | -------- |
+| restoreId | number | ID of the component used for matching during distributed migration. This ID must be unique within an application.|
+
+## Components with Distributed Migration Support
+
+| Name| Initial Version| Migration Status|
+| -------- | -------- | -------- |
+| List | 8 | The sequence number of the item displayed on the top of the current device will be migrated to the remote device. After the migration, the item is completely displayed on the top of the remote device.|
+| Grid | 9 | The sequence number of the item displayed on the top of the current device will be migrated to the remote device. After the migration, the item is completely displayed on the top of the remote device. The position of the scrollbar cannot be migrated.|
+| Scroll | 9 | The absolute distance with the top edge for scrolling will be migrated. Due to layout inconsistency resulting from differences in the display specifications between devices, the migration effect may be affected.|
+| TextArea | 9 | The text content and the position of the caret will be migrated.|
+| TextInput | 9 | The text content and the position of the caret will be migrated.|
+
+## Example
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct RestoreIdExample {
+  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+  build() {
+    Column() {
+      List({ space: 20 }) {
+        ForEach(this.arr, (item) => {
+          ListItem() {
+            Text('' + item)
+              .width('100%')
+              .height(100)
+              .fontSize(16)
+              .fontColor(0xFFFFFF)
+              .textAlign(TextAlign.Center)
+              .borderRadius(10)
+              .backgroundColor(Color.Pink)
+          }
+        }, item => item)
+      }
+      .restoreId(1)
+    }
+  }
+}
+```

en/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md

 # Shape Clipping
 
+Shape clipping changes the visible portion of a component through clipping or masking.
 
 >  **NOTE**
 >
-> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-
-
-## Required Permissions
-
-None
+> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
 ## Attributes
 
 
-| Name | Type | Default Value | Description |
-| -------- | -------- | -------- | -------- |
-| clip | Shape \| boolean | false | Clip mode. The value **Shape** indicates that the current component is cropped based on the specified shape. The value **boolean** specifies whether to clip the component based on the edge outline. |
-| mask | Shape | - | Mask of the specified shape for the current component. |
+| Name | Type                                    | Description                                 |
+| -----| ------------------------------------------ | ------------------------------------ |
+| clip | [Circle](ts-drawing-components-circle.md) \| [Ellipse](ts-drawing-components-ellipse.md) \| [Path](ts-drawing-components-path.md) \| [Rect](ts-drawing-components-rect.md) \| boolean | Specifies a clip mode. The value **Shape** indicates that the current component is cropped based on the specified shape. The value **boolean** specifies whether to clip the component based on the edge outline.<br>Default value: **false**|
+| mask | [Circle](ts-drawing-components-circle.md) \| [Ellipse](ts-drawing-components-ellipse.md) \| [Path](ts-drawing-components-path.md) \| [Rect](ts-drawing-components-rect.md) | Adds a mask of the specified shape to the current component.|
 
 
 ## Example
 
-
 ```ts
 // xxx.ets
 @Entry

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

@@ -7,23 +7,18 @@ The size attributes are used to set the width, height, padding, and margin of a
 >  The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-## Required Permissions
-
-None
-
-
 ## Attributes
 
 
-| Name| Type| Default Value| Description|
-| -------- | -------- | -------- | -------- |
-| width | Length | - | Width of the component. By default, the width required to fully hold the component content is used.|
-| height | Length | - | Height of the component. By default, the height required to fully hold the component content is used.|
-| size | {<br>width?: Length,<br>height?: Length<br>} | - | Size of the component.|
-| padding | {<br>top?: Length,<br>right?: Length,<br>bottom?: Length,<br>left?: Length<br>} \| Length | 0 | Padding of the component.<br>When the parameter is of the **Length** type, the four paddings take effect.|
-| margin | {<br>top?: Length,<br>right?: Length,<br>bottom?: Length,<br>left?: Length<br>}<br>\| Length | 0 | Margin of the component.<br>When the parameter is of the **Length** type, the four margins take effect.|
-| constraintSize | {<br>minWidth?: Length,<br>maxWidth?: Length,<br>minHeight?: Length,<br>maxHeight?: Length<br>} | {<br>minWidth: 0,<br>maxWidth: Infinity,<br>minHeight: 0,<br>maxHeight: Infinity<br>} | Constraint size of the component, which is used to limit the size range during component layout. **constraintSize** takes precedence over **width** and **height**.|
-| layoutWeight | number \| string | 0 | Weight of the component during layout. When the container size is determined, the layout of the component and sibling components is allocated based on the weight along the main axis. The component size setting is ignored.<br>> **NOTE**<br>> This attribute is valid only for the **Row**, **Column**, and **Flex** layouts.|
+| Name            | Type                                    | Description                                      |
+| -------------- | ---------------------------------------- | ---------------------------------------- |
+| width          | [Length](ts-types.md#length)             | Width of the component. By default, the width required to fully hold the component content is used. If the width of the component is greater than that of the parent container, the range of the parent container is drawn.             |
+| height         | [Length](ts-types.md#length)             | Height of the component. By default, the height required to fully hold the component content is used. If the height of the component is greater than that of the parent container, the range of the parent container is drawn.             |
+| size           | {<br>width?: [Length](ts-types.md#length),<br>height?: [Length](ts-types.md#length)<br>} | Size of the component.                                 |
+| padding        | [Padding](ts-types.md#padding) \| [Length](ts-types.md#length) | Padding of the component.<br>When the parameter is of the **Length** type, the four paddings take effect.<br>Default value: **0**<br>When **padding** is set to a percentage, the width of the parent container is used as the basic value.|
+| margin         | [Margin](ts-types.md#margin)) \| [Length](ts-types.md#length)  | Margin of the component.<br>When the parameter is of the **Length** type, the four margins take effect.<br>Default value: **0**<br>When **margin** is set to a percentage, the width of the parent container is used as the basic value.|
+| constraintSize | {<br>minWidth?: [Length](ts-types.md#length),<br>maxWidth?: [Length](ts-types.md#length),<br>minHeight?: [Length](ts-types.md#length),<br>maxHeight?: [Length](ts-types.md#length)<br>} | Constraint size of the component, which is used to limit the size range during component layout. **constraintSize** takes precedence over **width** and **height**.<br>Default value:<br>{<br>minWidth: 0,<br>maxWidth: Infinity,<br>minHeight: 0,<br>maxHeight: Infinity<br>} |
+| layoutWeight   | number \| string               | Weight of the component during layout. When the container size is determined, the layout of the component and sibling components is allocated based on the weight along the main axis. The component size setting is ignored.<br>**NOTE**<br>This attribute is valid only for the **\<Row>**, **\<Column>**, and **\<Flex>** layouts.<br>Default value: **0**|
 
 
 ## Example

en/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md

 # Text Style
 
-The text style attribute is used to set the style for text in a component.
+
+The text style attributes are used to set the style for text in a component.
 
 >  **NOTE**
 >
-> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-
-
-## Required Permissions
-
-None
+> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
 ## Attributes
 
 
-| Name | Type | Default Value | Description |
-| -------- | -------- | -------- | -------- |
-| fontColor | [ResourceColor](../../ui/ts-types.md) | - | Text color. |
-| fontSize | Length \| [Resource](../../ui/ts-types.md) | - | Text size. If the value is of the number type, the unit fp is used. |
-| fontStyle | [FontStyle](ts-appendix-enums.md#fontstyle) | FontStyle.Normal | Font style of the text. |
-| fontWeight | number&nbsp;\|&nbsp;[FontWeight](ts-appendix-enums.md#fontweight)&nbsp;\|&nbsp;string | FontWeight.FontWeightNormal | 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/>For common values of the **FontWeight** type, see **FontWeight** enums. |
-| fontFamily | string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource-type) | - | Font family of the text. Use commas (,) to separate multiple fonts. The priority the fonts is the sequence in which they are placed. An example value is **Arial, sans-serif**. |
+| Name        | Type                                     | Description                                   |
+| -----------| ---------------------------------------- | ------------------------------------ |
+| fontColor  | [ResourceColor](ts-types.md#resourcecolor)  | Font color.                                |
+| fontSize   | Length \| [Resource](ts-types.md#resource)  | Font size. If the value is of the number type, the unit fp is used.    |
+| fontStyle  | [FontStyle](ts-appendix-enums.md#fontstyle)  | Font style.<br>Default value: **FontStyle.Normal**        |
+| fontWeight | number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string  | 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. The string type supports only the string of the number type, for example, 400, "bold", "bolder", "lighter", "regular", and "medium", which correspond to the enumerated values in FontWeight.<br>Default value: **FontWeight.Normal** |
+| fontFamily | string \| [Resource](ts-types.md#resource)  | 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.|
 
 
 ## Example

en/application-dev/reference/arkui-ts/ts-universal-attributes-touch-target.md

@@ -2,7 +2,7 @@
 
 You can set the touch target for components that support universal click events, touch events, and gestures.
 
->  **NOTE**<br>
+>  **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.
 
@@ -10,20 +10,20 @@ You can set the touch target for components that support universal click events,
 ## Attributes
 
 
-| Name| Type| Description|
-| -------- | -------- | -------- |
+| Name            | Type                                         | Description                                     |
+| -------------- | --------------------------------------------- | ----------------------------------------- |
 | responseRegion | Array&lt;Rectangle&gt; \| Rectangle | One or more touch targets, including their location and size.<br>Default value:<br>{<br>x: 0,<br>y: 0,<br>width: '100%',<br>height: '100%'<br>} |
 
 
 ### Rectangle
-| Name| Type| Mandatory| Description|
-| -------- | -------- | -------- | -------- |
-| x | [Length](../../ui/ts-types.md) | No| X coordinate of the touch point relative to the left edge of the component.<br>Default value: **0vp**|
-| y | [Length](../../ui/ts-types.md) | No| Y coordinate of the touch point relative to the left edge of the component.<br>Default value: **0vp**|
-| width | [Length](../../ui/ts-types.md) | No| Width of the touch target.<br>Default value: **100%**|
-| height | [Length](../../ui/ts-types.md) | No| Height of the touch target.<br>Default value: **100%**|
-
-  >  **NOTE**
+| Name       | Type                      | Mandatory  | Description                            |
+| ------ | ----------------------------- | -----| -------------------------------- |
+| x      | [Length](ts-types.md#length)  | No  | X coordinate of the touch point relative to the left edge of the component.<br>Default value: **0vp**|
+| y      | [Length](ts-types.md#length)  | No  | Y coordinate of the touch point relative to the left edge of the component.<br>Default value: **0vp**|
+| width  | [Length](ts-types.md#length)  | No  | Width of the touch target.<br>Default value: **100%**|
+| height | [Length](ts-types.md#length) | No  | Height of the touch target.<br>Default value: **100%**|
+
+  >  **NOTE**<br>
   >
   >  **x** and **y** can be set to a positive or negative percentage value. For example, when **x** is set to **'100%'**, the touch target is the offset from the right edge of the component by the component's width. When **x** is set to **'-100%'**, the touch target is the offset from the left edge of the component by the component's width. When **y** is set to **'100%'**, the touch target is the offset from the bottom edge of the component by the component's height. When **y** is set to **'-100%'**, the touch target is the offset from the top edge of the component by the component's height.
   >

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

 # Transformation
 
+Transformation attributes allow you to rotate, translate, scale, or transform a component.
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
-> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-
-
-## Required Permissions
-
-None
-
+> **NOTE**
+>
+> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 ## Attributes
 
 
-  | Name | Type | Default Value | Description | 
-| -------- | -------- | -------- | -------- |
-| rotate | {<br/>x?: number,<br/>y?: number,<br/>z?: number,<br/>angle?: Angle,<br/>centerX?: Length,<br/>centerY?: Length<br/>} | {<br/>x: 0,<br/>y: 0,<br/>z: 0,<br/>angle: 0,<br/>centerX: '50%',<br/>centerY: '50%'<br/>} | The vector (x, y, z) specifies a rotation axis. A positive angle indicates a clockwise rotation, and a negative angle indicates a counterclockwise rotation. The default value is **0**. **centerX** and **centerY** are used to set the rotation center point. | 
-| translate | {<br/>x?: Length,<br/>y?: Length,<br/>z? : Length<br/>} | {<br/>x: 0,<br/>y: 0,<br/>z: 0<br/>} | Translation distance along the x-, y-, and z-axis. The translation direction is determined by the positive and negative values. The default value is **0**. | 
-| scale | {<br/>x?: number,<br/>y?: number,<br/>z?: number,<br/>centerX?: Length,<br/>centerY?: Length<br/>} | {<br/>x: 1,<br/>y: 1,<br/>z: 1,<br/>centerX:'50%',<br/>centerY:'50%'<br/>} | Scale ratio of the x-, y-, and z-axis. The default value is **1**. **centerX** and **centerY** are used to set the scale center point. | 
-| transform | matrix: Matrix4 | - | Transformation matrix of the component. | 
+| Name       | Type                                                          | Description                                      |
+| --------- | ------------------------------------------------------------------------ | ---------------------------------------- |
+| rotate    | {<br>x?: number,<br>y?: number,<br>z?: number,<br>angle?: Angle,<br>centerX?: number \| string,<br>centerY?: number \| string<br>} | Rotation axis. A positive angle indicates a clockwise rotation, and a negative angle indicates a counterclockwise rotation. The default value is **0**. **centerX** and **centerY** are used to set the rotation center point.<br>Default value:<br>{<br>x: 0,<br>y: 0,<br>z: 0,<br>angle: 0,<br>centerX: '50%',<br>centerY: '50%'<br>} |
+| translate | {<br>x?: number \| string,<br>y?: number \| string,<br>z? : number \| string<br>}  | Translation distance along the x-, y-, and z-axis. The translation direction is determined by the positive and negative values. The value cannot be a percentage.<br>Default value:<br>{<br>x: 0,<br>y: 0,<br>z: 0<br>}|
+| scale     | {<br>x?: number,<br>y?: number,<br>z?: number,<br>centerX?: number \| string,<br>centerY?: number \| string<br>} | Scale ratio of the x-, y-, and z-axis. The default value is **1**. **centerX** and **centerY** are used to set the scale center point.<br>Default value:<br>{<br>x: 1,<br>y: 1,<br>z: 1,<br>centerX:'50%',<br>centerY:'50%'<br>} |
+| transform | Matrix4Transit                                                 | Transformation matrix of the component.                            |
 
 
 ## Example
 
-  
-```
+```ts
+// xxx.ets
 import Matrix4 from '@ohos.matrix4'
 
 @Entry

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

@@ -6,18 +6,11 @@ The visibility attribute controls whether a component is visible.
 >
 > This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-
-## Required Permissions
-
-None
-
-
 ## Attributes
 
-
-| Name| Type| Default Value| Description|
-| -------- | -------- | -------- | -------- |
-| visibility | [Visibility](ts-appendix-enums.md#visibility) | Visibility.Visible | Whether the component is visible. Note that even if a component is hidden, it needs to be re-created when the page is refreshed. Therefore, you are advised to use [conditional rendering](../../ui/ts-rending-control-syntax-if-else.md) instead under scenarios where consistently high performance is required. |
+| Name        | Type                       | Description                                        |
+| ---------- | ---------------------------- | ------------------------------------------ |
+| visibility | [Visibility](ts-appendix-enums.md#visibility) | Whether the component is visible. Note that even if a component is hidden, it needs to be re-created when the page is refreshed. Therefore, you are advised to use [conditional rendering](../../ui/ts-rending-control-syntax-if-else.md) instead under scenarios where consistently high performance is required.<br>Default value: **Visibility.Visible**|
 
 
 ## Example

en/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md

@@ -3,25 +3,20 @@
 The **zIndex** attribute sets the z-order of a component in the stacking context.
 
 >  **NOTE**
-> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-
-
-## Required Permissions
-
-None
+>
+>  The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
 ## Attributes
 
 
-| Name | Type | Default Value | Description |
-| -------- | -------- | -------- | -------- |
-| zIndex | number | 0 | Hierarchy of sibling components in a container. A larger value indicates a higher display level. |
+| Name| Type| Description|
+| -------- | -------- | -------- |
+| zIndex | number | Hierarchy of sibling components in a container. A larger value indicates a higher display level.|
 
 
 ## Example
 
-
 ```ts
 // xxx.ets
 @Entry

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

@@ -4,24 +4,18 @@ The area change event is triggered when the component's size, position, or any o
 
 >  **NOTE**
 >
-> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
-
-
-## Required Permissions
-
-None
+>  The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
 
 ## Events
 
-| Name | Bubble Supported | Description |
-| -------- | -------- | -------- |
-| onAreaChange(event: (oldValue: Area, newValue: Area) => void) | No | Triggered when the component area changes. For details about the **Area** type, see **Area** attributes. |
+| Name                                      | Bubbling Supported| Description                                    |
+| ---------------------------------------- | ---- | ---------------------------------------- |
+| onAreaChange(event: (oldValue: Area, newValue: Area) => void) | No   | Triggered when the component area changes. For details about the **Area** type, see [Area](ts-types.md#area8).|
 
 
 ## Example
 
-
 ```ts
 // xxx.ets
 @Entry

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

@@ -6,15 +6,11 @@ The visible area change event of a component refers to the change in the visual
 >
 >  The APIs of this module are supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions
-
-None
-
 
 ## Events
 
-| Name| Description|
-| -------- | -------- |
+| Name                                      | Description                                    |
+| ---------------------------------------- | ---------------------------------------- |
 | onVisibleAreaChange(ratios: Array\<number>, event: (isVisible: boolean, currentRatio: number) => void) | Called when the visual area of the component changes.<br>- **ratios**: threshold array. Each threshold represents a ratio of the component's visible area (that is, the area of the component that is visible on screen) to the component's total area. This callback is invoked when the ratio of the component's visible area to its total area is greater than or less than the threshold. The value range of the threshold is [0.0, 1.0]. If the threshold set exceeds this range, the value **0.0** or **1.0** will be used.<br>- **isVisible**: indicates whether the ratio of the component's visible area to its total area is greater than the threshold. The value **true** means that the ratio is greater than the threshold, and **false** means that the ratio is less than the threshold.<br>- **currentRatio**: ratio of the component's visible area to its total area when this callback is invoked.|
 
 

en/application-dev/reference/arkui-ts/ts-universal-events-click.md

@@ -4,57 +4,35 @@ A click event is triggered when a component is clicked.
 
 >  **NOTE**
 >
-> This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-
-## Required Permissions
-
-None
+>  The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
 ## Events
 
-| Name | Bubbling Supported | Description |
-| -------- | -------- | -------- |
-| onClick(callback: (event?: ClickEvent) => void) | No | Called when a click event occurs. For details about the event parameters, see **ClickEvent**. |
-
+| Name                                      | Bubbling Supported| Description                             |
+| ---------------------------------------- | ---- | --------------------------------- |
+| onClick(event: (event?: ClickEvent) => void) | No   | Called when a click event occurs. For details about the event parameters, see **ClickEvent**.|
 
 ## ClickEvent
-
 | Name           | Type                                | Description                                                    |
-| -------- | -------- | -------- |
-| screenX | number | X coordinate of the click relative to the left edge of the screen. |
-| screenY | number | Y coordinate of the click relative to the upper edge of the screen. |
-| x | number | X coordinate of the click relative to the left edge of the component being clicked. |
-| y | number | Y coordinate of the click relative to the upper edge of the component being clicked. |
+| ------------------- | ------------------------------------ | -------------------------------------------------------- |
+| screenX             | number                               | X coordinate of the click relative to the upper left corner of the application window.                     |
+| screenY             | number                               | Y coordinate of the click relative to the upper left corner of the application window.                     |
+| x                   | number                               | X coordinate of the click relative to the upper left corner of the component being clicked.                   |
+| y                   | number                               | Y coordinate of the click relative to the upper left corner of the component being clicked.                   |
 | target<sup>8+</sup> | [EventTarget](#eventtarget8) | Target element that is clicked.                                        |
-| timestamp | number | Timestamp of the event. |
+| timestamp           | number                               | Timestamp of the event. It is interval between the time when the event is triggered and the time when the system starts, in nanoseconds.|
 
 ## EventTarget<sup>8+</sup>
 
 | Name  | Type                     | Description        |
-| -------- | -------- | -------- |
-| area | [Area](#area8) | Area information of the target element.|
-
-## Area<sup>8+</sup>
-
-| Name | Type | Description |
-| -------- | -------- | -------- |
-| width | number | Width of the target element, in vp. |
-| height | number | Height of the target element, in vp. |
-| position | Position | Position of the upper left corner of the target element relative to that of the parent element. |
-| globalPosition | Position | Position of the upper left corner of the target element relative to that of the page. |
+| ---- | ------------------------- | ---------- |
+| area | [Area](ts-types.md#area8) | Area information of the target element.|
 
-## Position<sup>8+</sup>
-
-| Name | Type | Description |
-| -------- | -------- | -------- |
-| x | number | X-coordinate, in vp. |
-| y | number | Y-coordinate, in vp. |
 
 
 ## Example
 
-
 ```ts
 // xxx.ets
 @Entry

en/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md

@@ -4,37 +4,44 @@ A drag event is triggered when a component is dragged.
 
 >  **NOTE**
 >
-> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
+>  The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
+## Events
 
-| Name | Bubbling Supported | Description |
-| -------- | -------- | -------- |
-| onDragStart(callback: (event: DragEvent, extraParams?: string) =&gt;\|[Custom Builder](../../ui/ts-types.md)) | No | Triggered when the component bound to the event is dragged for the first time.<br/>- **event**: information about the drag event, including the coordinates of the item that is being dragged.<br/>- **extraParams**: additional information about the drag event. For details, see **extraParam**.<br/>Return value: object being dragged, which is used for prompts displayed when the object is dragged.<br/>A drag event can be triggered by a 150 ms long press.<br/>If the duration of a long-press gesture is set to less than or equal to 150 ms, the callback for the long-press gesture takes precedence. Otherwise, the callback for the drag event takes precedence. |
-| onDragEnter(callback: (event: DragEvent, extraParams?: string) =&gt; void) | No | Triggered when the dragged item enters a valid drop target.<br/>- **event**: information about the drag event, including the coordinates of the item that is being dragged.<br/>- **extraParams**: additional information about the drag event. For details, see **extraParam**.<br/>This event is valid only when the **onDrop** event is listened to. |
-| onDragMove(callback: (event: DragEvent, extraParams?: string) =&gt; void) | No | Triggered when the dragged item moves in a valid drop target.<br/>- **event**: information about the drag event, including the coordinates of the item that is being dragged.<br/>- **extraParams**: additional information about the drag event. For details, see **extraParam**.<br/>This event is valid only when the **onDrop** event is listened to. |
-| onDragLeave(callback: (event: DragEvent, extraParams?: string) =&gt; void) | No | Triggered when the dragged item leaves a valid drop target.<br/>- **event**: information about the drag event, including the coordinates of the item that is being dragged.<br/>- **extraParams**: additional information about the drag event. For details, see **extraParam**.<br/>This event is valid only when the **onDrop** event is listened to. |
-| onDrop(callback: (event:DragEvent, extraParams?: string) =&gt; void) | No | Triggered when the dragged item is dropped on a valid drop target.<br/>- **event**: information about the drag event, including the coordinates of the item that is being dragged.<br/>- **extraParams**: additional information about the drag event. For details, see **extraParam**. |
+| Name                                      | Bubbling Supported| Description                                    |
+| ---------------------------------------- | ---- | ---------------------------------------- |
+| onDragStart(event: (event?: DragEvent, extraParams?: string) =&gt;  [CustomBuilder](ts-types.md#custombuilder8) \| DragItemInfo) | No   | Triggered when the component bound to the event is dragged for the first time.<br>- **event**: information about the drag event, including the coordinates of the item that is being dragged.<br>- **extraParams**: additional information about the drag event. For details, see extraParam.<br>Return value: object being dragged, which is used for prompts displayed when the object is dragged.<br>A drag event can be triggered by a 150 ms long press. If the duration of a long-press gesture is set to less than or equal to 150 ms, the callback for the long-press gesture takes precedence. Otherwise, the callback for the drag event takes precedence.|
+| onDragEnter(event: (event?: DragEvent, extraParams?: string) =&gt; void) | No   | Triggered when the dragged item enters a valid drop target.<br>- **event**: information about the drag event, including the coordinates of the item that is being dragged.<br>- **extraParams**: additional information about the drag event. For details, see extraParam.<br>This event is valid only when the **onDrop** event is listened to.|
+| onDragMove(event: (event?: DragEvent, extraParams?: string) =&gt; void) | No   | Triggered when the dragged item moves in a valid drop target.<br>- **event**: information about the drag event, including the coordinates of the item that is being dragged.<br>- **extraParams**: additional information about the drag event. For details, see extraParam.<br>This event is valid only when the **onDrop** event is listened to.|
+| onDragLeave(event: (event?: DragEvent, extraParams?: string) =&gt; void) | No   | Triggered when the dragged item leaves a valid drop target.<br>- **event**: information about the drag event, including the coordinates of the item that is being dragged.<br>- **extraParams**: additional information about the drag event. For details, see extraParam.<br>This event is valid only when the **onDrop** event is listened to.|
+| onDrop(event: (event?: DragEvent, extraParams?: string) =&gt; void) | No   | Triggered when the dragged item is dropped on a valid drop target.<br>- **event**: information about the drag event, including the coordinates of the item that is being dragged.<br>- **extraParams**: additional information about the drag event. For details, see extraParam.|
 
+## DragItemInfo
 
-- extraParam
+| Name     | Type                                    | Mandatory  | Description                               |
+| --------- | ---------------------------------------- | ---- | --------------------------------- |
+| pixelMap  | [PixelMap](../apis/js-apis-image.md#pixelmap7) | No   | Image to be displayed during dragging.                    |
+| builder   | [CustomBuilder](ts-types.md#custombuilder8) | No   | Custom building for drawing. If **pixelMap** is set, this attribute is ignored.|
+| extraInfo | string                                   | No   | Extra information of the dragged item.                          |
 
-  Returns additional information required for dragging an item.
 
-  **extraParam** is a string converted from a JSON object. You can obtain the following attributes using the JSON object converted from **Json.parse**.
+## extraParam
 
-  | Name | Type | Description |
-  | -------- | -------- | -------- |
-  | selectedIndex | number | Index of the dragged item in the parent container. The value of **selectedIndex** starts from **0**.<br/>This attribute is valid only in the **\<ListItem>** component. |
-  | insertIndex | number | Index of the element into which the dragged item is dropped in the **List** component. The value of **insertIndex** starts from **0**.<br/>This attribute is valid only in the drag event of the **\<List>** component. |
+  Provides additional information required for dragging an item.
 
+  **extraParam** is a string converted from a JSON object. You can obtain the following attributes using the JSON object converted from **Json.parse**.
 
-### DragEvent
+| Name         | Type  | Description                                      |
+| ------------- | ------ | ---------------------------------------- |
+| selectedIndex | number | Index of the dragged item in the parent container. The value of **selectedindex** starts from **0**.<br>This attribute is valid only in the **ListItem** component.|
+| insertIndex   | number | Index of the element into which the dragged item is dropped in the **List** component. The value of **insertIndex** starts from **0**.<br>This attribute is valid only in the drag event of the **List** component.|
 
-| Name | Return Value Type | Description |
-| -------- | -------- | -------- |
-| getX() | number | X-coordinate of the item that is being dragged, in vp. |
-| getY() | number | Y-coordinate of the item that is being dragged, in vp. |
+## DragEvent
 
+| Sample Code    | Return Value Type | Description            |
+| ------ | ------ | ---------------- |
+| getX() | number | X-coordinate of the item that is being dragged, in vp.|
+| getY() | number | Y-coordinate of the item that is being dragged, in vp.|
 
 ## Example
 

en/application-dev/reference/arkui-ts/ts-universal-events-key.md

@@ -4,40 +4,28 @@ A key event is triggered when a component interacts with a keyboard, remote cont
 
 >  **NOTE**
 >
-> This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-
-
-## Required Permissions
-
-None
+>  The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
 ## Events
 
-| Name | Bubbling Supported | Description |
-| -------- | -------- | -------- |
-| onKeyEvent(event: (event?: KeyEvent) => void) | Yes | Called when a key event occurs. For details about **event**, see [KeyEvent](#keyevent). |
+| Name                                      | Bubbling Supported| Description                                    |
+| ---------------------------------------- | ---- | ---------------------------------------- |
+| onKeyEvent(event: (event?: KeyEvent) => void) | Yes   | Triggered when a key event occurs. For details about **event**, see [KeyEvent](#keyevent).|
 
 
 ## KeyEvent
 
-- Attributes
-  | Name                                         | Type                   | Description                  |
-  | ------------------------------------- | --------------------------- | -------------------------- |
-  | type                                  | [KeyType](ts-appendix-enums.md#keytype)   | Type of a key.                 |
-  | [keyCode](../apis/js-apis-keycode.md) | number                      | Key code.                      |
-  | keyText                               | string                      | Key value.                     |
-  | keySource                             | [KeySource](ts-appendix-enums.md#keysource) | Type of the input device that triggers the key event. |
-  | deviceId                              | number                        | ID of the input device that triggers the key event. |
-  | metaKey                               | number                        | State of the metakey when the key is pressed. The value **1** means the pressed state, and **0** means the unpressed state. |
-  | timestamp                             | number                        | Timestamp when the key is pressed. |
-
-
-- APIs
-  | Name | Description |
-  | -------- | -------- |
-  | stopPropagation(): void | Stops the event from bubbling upwards or downwards. |
-
+| Name                                   | Type                                      | Description                        |
+| ------------------------------------- | ---------------------------------------- | -------------------------- |
+| type                                  | [KeyType](ts-appendix-enums.md#keytype)  | Key type.                    |
+| [keyCode](../apis/js-apis-keycode.md) | number                                   | Key code.                    |
+| keyText                               | string                                   | Key value.                    |
+| keySource                             | [KeySource](ts-appendix-enums.md#keysource) | Type of the input device that triggers the key event.            |
+| deviceId                              | number                                   | ID of the input device that triggers the key event.            |
+| metaKey                               | number                                   | State of the metakey when the key is pressed. The value **1** means the pressed state, and **0** means the unpressed state.|
+| timestamp                             | number                                   | Timestamp when the key is pressed.                |
+| stopPropagation                       | () => void                               | Stops the event from bubbling upwards or downwards.                 |
 
 
 ## Example

en/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md

 # Show/Hide Event
 
+The show/hide event is triggered when a component is mounted or unmounted from the component tree. A component appears when mounted to the component tree and disappears when unmounted from the component tree.
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
-> This method is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-
-
-## Required Permissions
-
-None
+> **NOTE**
+>
+> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
 ## Events
 
-  | Name | Bubble Supported | Description | 
-| -------- | -------- | -------- |
-| onAppear(callback: () => void) | No | Called when the component is displayed. | 
-| onDisappear(callback: () => void) | No | Called when the component disappears. | 
+| Name                                            | Bubbling Supported| Description                  |
+| ------------------------------------------------ | -------- | -------------------------- |
+| onAppear(event: () => void)    | No      | Triggered when the component is displayed.|
+| onDisappear(event: () => void) | No      | Triggered when the component disappears.|
 
 
 ## Example
 
-
-```
+```ts
+// xxx.ets
 import prompt from '@system.prompt'
 
 @Entry

en/application-dev/reference/arkui-ts/ts-universal-events-touch.md

@@ -7,45 +7,36 @@ A touch event is triggered when a finger is pressed, slides, or is lifted from a
 > This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-## Required Permissions
-
-None
-
-
 ## Events
 
 | Name                                                        | Bubbling Supported| Description                                                    |
-| ---------------------------------------- | ---- | ---------------------------------------- |
-| onTouch(callback: (event?: TouchEvent) => void) | Yes   | Invoked when a touch action is triggered. For details about **event**, see [TouchEvent](#touchevent).|
+| ------------------------------------------------------------ | -------- | ------------------------------------------------------------ |
+| onTouch(event: (event?: TouchEvent) => void) | Yes      | Invoked when a touch action is triggered. For details about **event**, see [TouchEvent](#touchevent).|
 
 
 ## TouchEvent
 
-- Attributes
-  | Name               | Type                                      | Description          |
-  | ------------------- | ---------------------------------------- | ------------ |
-  | type                | [TouchType](ts-appendix-enums.md#touchtype)                                | Type of the touch event.    |
-  | touches             | Array<[TouchObject](#touchobject)> | All finger information.     |
-  | changedTouches      | Array<[TouchObject](#touchobject)> | Finger information changed.|
-  | timestamp           | number                                   | Timestamp of the event.      |
-  | target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md#eventtarget8) | Target of the event.    |
-
-
-- APIs
-  | Name                  | Description   |
-  | ---------------------- | ------- |
-  | stopPropagation(): void| Stops the event from bubbling upwards or downwards.|
+| Name               | Type                                      | Description          |
+| ------------------- | ---------------------------------------- | ------------ |
+| type                | [TouchType](ts-appendix-enums.md#touchtype)      | Type of the touch event.    |
+| touches             | Array&lt;[TouchObject](#touchobject)&gt; | All finger information.     |
+| changedTouches      | Array&lt;[TouchObject](#touchobject)&gt; | Finger information changed.|
+| stopPropagation      | () => void | Stops the event from bubbling upwards or downwards.|
+| timestamp<sup>8+</sup> | number | Timestamp of the event. It is interval between the time when the event is triggered and the time when the system starts, in nanoseconds.|
+| target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md) | Display area of the element that triggers the gesture event.|
+| source<sup>8+</sup> | [SourceType](ts-gesture-settings.md) | Event input device.|
 
 
 ## TouchObject
+
 | Name   | Type                                       | Description                                 |
-| ------- | --------------------------- | ------------------- |
+| ------- | ------------------------------------------- | ------------------------------------- |
 | type    | [TouchType](ts-appendix-enums.md#touchtype) | Type of the touch event.                     |
 | id      | number                                      | Unique identifier of a finger.                     |
-| screenX | number                      | X-coordinate of the touch point relative to the left edge of the screen. |
-| screenY | number                      | Y-coordinate of the touch point relative to the upper edge of the device screen. |
-| x       | number                      | X-coordinate of the touch point relative to the left edge of the element being touched. |
-| y       | number                      | Y-coordinate of the touch point relative to the upper edge of the element being touched. |
+| screenX | number                                      | X coordinate of the touch point relative to the upper left corner of the application window.  |
+| screenY | number                                      | Y coordinate of the touch point relative to the upper left corner of the application window.  |
+| x       | number                                      | X coordinate of the touch point relative to the upper left corner of the component being touched.|
+| y       | number                                      | Y coordinate of the touch point relative to the upper left corner of the component being touched.|
 
 ## Example
 

en/application-dev/reference/arkui-ts/ts-universal-focus-event.md

 # Focus Event
 
+A focus event is triggered when the page focus moves between components. It can be used to change the content of a component.
 
-> ![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.
-
-
-## Required Permissions
-
-None
+>  **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.
+>  - Currently, only the Tab button and arrow buttons on the external keyboard can be used to trigger the focus event.
 
 
 ## Events
 
-  | **Name** | **Bubble Supported** | **Description** | 
-| -------- | -------- | -------- |
-| onFocus(callback: () => void) | No | Triggered when the current component obtains focus. | 
-| onBlur(callback:() => void) | No | Triggered when the current component loses focus. | 
+| Name                                  | Bubbling Supported| Description       |
+| ---------------------------------------- | -------- | --------------- |
+| onFocus(event: () => void) | No       | Triggered when the current component obtains focus.|
+| onBlur(event:() => void)    | No       | Triggered when the current component loses focus.|
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
-> The following components support focus events: **<Button>**, **<Text>**, **<Image>**, **<List>**, and **<Grid>**.
+>  **NOTE**
+>
+>  The following components support focus events: **\<Button>**, **\<Text>**, **\<Image>**, **\<List>**, and **\<Grid>**.
 
 
 ## Example
 
-  
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct FocusEventExample {

en/application-dev/reference/arkui-ts/ts-universal-mouse-key.md

@@ -4,33 +4,31 @@ If an action triggers multiple events, the order of these events is fixed. By de
 
 >  **NOTE**
 >
-> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
-
-
-## Required Permissions
-
-None
+>  The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
 
 ## Events
 
-| Name | Bubbling Supported | Description |
-| -------- | -------- | -------- |
-| onHover(callback: (isHover?: boolean) =&gt; void) | No | Triggered when the mouse cursor enters or leaves the component.<br/>**isHover**: whether the mouse cursor hovers over the component. The value **true** means that the mouse cursor enters the component, and the value **false** means that the mouse cursor leaves the component. |
-| onMouse(callback: (event?: MouseEvent) =&gt; void) | Yes | Triggered when the component is clicked by a mouse button or the mouse cursor moves on the component. The **event** parameter indicates the timestamp, mouse button, action, coordinates of the clicked point on the entire screen, and coordinates of the clicked point relative to the component when the event is triggered. |
+| Name                                                        | Bubbling Supported| Description                                                        |
+| ------------------------------------------------------------ | -------- | ------------------------------------------------------------ |
+| onHover(event: (isHover?: boolean) =&gt; void) | No      | Triggered when the mouse cursor enters or leaves the component.<br>**isHover**: whether the mouse cursor hovers over the component. The value **true** means that the mouse cursor enters the component, and the value **false** means that the mouse cursor leaves the component.|
+| onMouse(event: (event?: MouseEvent) =&gt; void) | Yes      | Triggered when the component is clicked by a mouse button or the mouse cursor moves on the component. The **event** parameter indicates the timestamp, mouse button, action, coordinates of the clicked point on the entire screen, and coordinates of the clicked point relative to the component when the event is triggered.|
 
 
 ## MouseEvent
 
 | Name     | Type                           | Description                  |
-| -------- | -------- | -------- |
-| timestamp | number | Timestamp when the event is triggered. |
-| screenX | number | X-coordinate of the clicked point relative to the upper left corner of the screen. |
-| screenY | number | Y-coordinate of the clicked point relative to the upper left corner of the screen. |
-| x | number | X-coordinate of the clicked point relative to the upper left corner of the component. |
-| y | number | Y-coordinate of the clicked point relative to the upper left corner of the component. |
+| --------- | ------------------------------- | -------------------- |
+| screenX   | number                          | X coordinate of the click point relative to the upper left corner of the application window.|
+| screenY   | number                          | Y coordinate of the click point relative to the upper left corner of the application window.|
+| x         | number                          | X coordinate of the click point relative to the upper left corner of the component being clicked.|
+| y         | number                          | Y coordinate of the click point relative to the upper left corner of the component being clicked.|
 | button    | [MouseButton](ts-appendix-enums.md#mousebutton) | Mouse button.               |
 | action    | [MouseAction](ts-appendix-enums.md#mouseaction) | Event action.               |
+| stopPropagation      | () => void | Stops the event from bubbling upwards or downwards.                        |
+| timestamp<sup>8+</sup> | number | Timestamp of the event. It is interval between the time when the event is triggered and the time when the system starts, in nanoseconds.         |
+| target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md) | Display area of the component that triggers the event.|
+| source<sup>8+</sup> | [SourceType](ts-gesture-settings.md) | Event input device.          |
 
 ## Example