Merge branch 'master' of gitee.com:openharmony/docs into master

Signed-off-by: zyjhandsome <zyjhandsome@126.com>

en/application-dev/application-models/extensionability-overview.md

@@ -25,7 +25,8 @@ An [ExtensionAbilityType](../reference/apis/js-apis-bundleManager.md#extensionab
 
 - [EnterpriseAdminExtensionAbility](../reference/apis/js-apis-EnterpriseAdminExtensionAbility.md): ExtensionAbility component of the enterprise_admin type, which provides APIs for processing enterprise management events, such as application installation events on devices and events indicating too many incorrect screen-lock password attempts.
 
-> **NOTE**<br>
+> **NOTE**
+>
 > 1. Third-party applications cannot implement ServiceExtensionAbility, DataShareExtensionAbility, StaticSubscriberExtensionAbility, or WindowExtensionAbility.
 >
 > 2. To implement transaction processing in the background for a third-party application, use background tasks rather than ServiceExtensionAbility. For details, see [Background Task](../task-management/background-task-overview.md).
@@ -45,7 +46,7 @@ The following uses [InputMethodExtensionAbility](../reference/apis/js-apis-input
 
 ## Implementing ExtensionAbility of the Specified Type
 
-The following uses [FormExtensionAbility](../reference/apis/js-apis-app-form-formExtensionAbility.md) as an example. The widget framework provides the base class [FormExtensionAbility](../reference/apis/js-apis-app-form-formExtensionAbility.md). You derive this base class to create your own class (such as **MyFormExtensionAbility**), implement the callbacks, such as **onCreate()** and **onUpdateForm()**, to provide specific widget functionalities. For details, see [FormExtensionAbility](Widget-development-stage.md).
+The following uses [FormExtensionAbility](../reference/apis/js-apis-app-form-formExtensionAbility.md) as an example. The widget framework provides the base class [FormExtensionAbility](../reference/apis/js-apis-app-form-formExtensionAbility.md). You derive this base class to create your own class (such as **MyFormExtensionAbility**), implement the callbacks, such as **onCreate()** and **onUpdateForm()**, to provide specific widget functionalities. For details, see [FormExtensionAbility](service-widget-overview.md).
 
 You do not need to care when to add or delete a widget. The lifecycle of the FormExtensionAbility instance and the lifecycle of the ExtensionAbility process where the FormExtensionAbility instance is located are scheduled and managed by FormManagerService.
 
@@ -63,3 +64,5 @@ You do not need to care when to add or delete a widget. The lifecycle of the For
 > - The two FormExtensionAbility components run in an independent process.
 > 
 > - The two ImeExtensionAbility components run in an independent process.
+
+ <!--no_check--> 
\ No newline at end of file

en/application-dev/application-models/widget-development-fa.md

@@ -323,7 +323,7 @@ async function deleteFormInfo(formId: string) {
 // ...
 ```
 
-For details about how to implement persistent data storage, see [Lightweight Data Store Development](../database/database-preference-guidelines.md).
+For details about how to implement persistent data storage, see [Persisting Preferences Data](../database/data-persistence-by-preferences.md).
 
 The **Want** object passed in by the widget host to the widget provider contains a flag that specifies whether the requested widget is normal or temporary.
 

en/application-dev/application-models/widget-development-stage.md

@@ -332,7 +332,7 @@ export default class EntryFormAbility extends FormExtension {
 }
 ```
 
-For details about how to implement persistent data storage, see [Lightweight Data Store Development](../database/database-preference-guidelines.md).
+For details about how to implement persistent data storage, see [Persisting Preferences Data](../database/data-persistence-by-preferences.md).
 
 The **Want** object passed in by the widget host to the widget provider contains a flag that specifies whether the requested widget is normal or temporary.
 

en/application-dev/reference/apis/js-apis-app-ability-abilityDelegatorRegistry.md

@@ -53,10 +53,10 @@ let want = {
     abilityName: 'EntryAbility'
 };
 abilityDelegator.startAbility(want, (err) => {
-    if (!err || err.code === 0) {
-        console.log('Success start ability.');
-    } else {
+    if (err) {
         console.error('Failed start ability, error: ${JSON.stringify(err)}');
+    } else {
+        console.log('Success start ability.');
     }
 });
 ```

en/application-dev/reference/apis/js-apis-app-ability-appManager.md

@@ -40,7 +40,7 @@ For details about the error codes, see [Ability Error Codes](../errorcodes/error
 import appManager from '@ohos.app.ability.appManager';
 
 appManager.isRunningInStabilityTest((err, flag) => {
-    if (err && err.code !== 0) {
+    if (err) {
         console.error('isRunningInStabilityTest fail, err: ${JSON.stringify(err)}');
     } else {
         console.log('The result of isRunningInStabilityTest is: ${JSON.stringify(flag)}');
@@ -146,7 +146,7 @@ For details about the error codes, see [Ability Error Codes](../errorcodes/error
 import appManager from '@ohos.app.ability.appManager';
 
 appManager.isRamConstrainedDevice((err, data) => {
-    if (err && err.code !== 0) {
+    if (err) {
         console.error('isRamConstrainedDevice fail, err: ${JSON.stringify(err)}');
     } else {
         console.log('The result of isRamConstrainedDevice is: ${JSON.stringify(data)}');
@@ -216,7 +216,7 @@ For details about the error codes, see [Ability Error Codes](../errorcodes/error
 import appManager from '@ohos.app.ability.appManager';
 
 appManager.getAppMemorySize((err, data) => {
-    if (err && err.code !== 0) {
+    if (err) {
         console.error('getAppMemorySize fail, err: ${JSON.stringify(err)}');
     } else {
         console.log('The size of app memory is: ${JSON.stringify(data)}');
@@ -290,7 +290,7 @@ For details about the error codes, see [Ability Error Codes](../errorcodes/error
 import appManager from '@ohos.app.ability.appManager';
 
 appManager.getRunningProcessInformation((err, data) => {
-    if (err && err.code !== 0) {
+    if (err) {
         console.error('getRunningProcessInformation fail, err: ${JSON.stringify(err)}');
     } else {
         console.log('The process running information is: ${JSON.stringify(data)}');
@@ -489,7 +489,7 @@ try {
 
 // 2. Deregister the application state observer.
 function unregisterApplicationStateObserverCallback(err) {
-    if (err && err.code !== 0) {
+    if (err) {
         console.error('unregisterApplicationStateObserverCallback fail, err: ${JSON.stringify(err)}');
     } else {
         console.log('unregisterApplicationStateObserverCallback success.');
@@ -612,7 +612,7 @@ For details about the error codes, see [Ability Error Codes](../errorcodes/error
 import appManager from '@ohos.app.ability.appManager';
 
 function getForegroundApplicationsCallback(err, data) {
-    if (err && err.code !== 0) {
+    if (err) {
         console.error('getForegroundApplicationsCallback fail, err: ${JSON.stringify(err)}');
     } else {
         console.log('getForegroundApplicationsCallback success, data: ${JSON.stringify(data)}');
@@ -745,7 +745,7 @@ import appManager from '@ohos.app.ability.appManager';
 let bundleName = 'bundleName';
 let accountId = 0;
 function killProcessWithAccountCallback(err, data) {
-    if (err && err.code !== 0) {
+    if (err) {
         console.error('killProcessWithAccountCallback fail, err: ${JSON.stringify(err)}');
     } else {
         console.log('killProcessWithAccountCallback success.');
@@ -788,7 +788,7 @@ import appManager from '@ohos.app.ability.appManager';
 
 let bundleName = 'bundleName';
 function killProcessesByBundleNameCallback(err, data) {
-    if (err && err.code !== 0) {
+    if (err) {
         console.error('killProcessesByBundleNameCallback fail, err: ${JSON.stringify(err)}');
     } else {
         console.log('killProcessesByBundleNameCallback success.');
@@ -884,7 +884,7 @@ import appManager from '@ohos.app.ability.appManager';
 
 let bundleName = 'bundleName';
 function clearUpApplicationDataCallback(err, data) {
-    if (err && err.code !== 0) {
+    if (err) {
         console.error('clearUpApplicationDataCallback fail, err: ${JSON.stringify(err)}');
     } else {
         console.log('clearUpApplicationDataCallback success.');

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

@@ -29,7 +29,7 @@ Creates a **Filter** instance based on the pixel map.
 
 | Name   | Type              | Mandatory| Description    |
 | ------- | ----------------- | ---- | -------- |
-| source  | [image.PixelMap](js-apis-image.md#pixelmap7) | Yes  | **PixelMap** instance created by the image module.  |
+| source  | [image.PixelMap](js-apis-image.md#pixelmap7) | Yes  | **PixelMap** instance created by the image module. An instance can be obtained by decoding an image or directly created. For details, see [Image Overview](../../media/image-overview.md).  |
 
 **Return value**
 
@@ -61,7 +61,7 @@ Creates a **ColorPicker** instance based on the pixel map. This API uses a promi
 
 | Name    | Type        | Mandatory| Description                      |
 | -------- | ----------- | ---- | -------------------------- |
-| source   | [image.PixelMap](js-apis-image.md#pixelmap7) | Yes  |  **PixelMap** instance created by the image module.|
+| source   | [image.PixelMap](js-apis-image.md#pixelmap7) | Yes  |  **PixelMap** instance created by the image module. An instance can be obtained by decoding an image or directly created. For details, see [Image Overview](../../media/image-overview.md).|
 
 **Return value**
 
@@ -95,7 +95,7 @@ Creates a **ColorPicker** instance based on the pixel map. This API uses an asyn
 
 | Name    | Type               | Mandatory| Description                      |
 | -------- | ------------------ | ---- | -------------------------- |
-| source   | [image.PixelMap](js-apis-image.md#pixelmap7) | Yes |**PixelMap** instance created by the image module. |
+| source   | [image.PixelMap](js-apis-image.md#pixelmap7) | Yes |**PixelMap** instance created by the image module. An instance can be obtained by decoding an image or directly created. For details, see [Image Overview](../../media/image-overview.md). |
 | callback | AsyncCallback\<[ColorPicker](#colorpicker)> | Yes | Callback used to return the **ColorPicker** instance created.|
 
 **Example**

en/application-dev/reference/apis/js-apis-enterprise-dateTimeManager.md

 # @ohos.enterprise.dateTimeManager (System Time Management)
 
-The **dateTimeManager** module provides APIs for system time management, which can only be called by device administrator applications.
+The **dateTimeManager** module provides APIs for system time management. Only the enterprise device administrator applications can call the APIs provided by this module.
 
 > **NOTE**
 > 
@@ -30,7 +30,7 @@ Sets the system time. This API uses an asynchronous callback to return the resul
 | ----- | ----------------------------------- | ---- | ------- |
 | admin | [Want](js-apis-app-ability-want.md) | Yes   | Device administrator application.|
 | time  | number | Yes| Timestamp (ms).|
-| callback | AsyncCallback\<void> | Yes| Callback used to return the result. If the setting is successful, **err** is **null**. Otherwise, **err** is an error object.|
+| callback | AsyncCallback\<void> | Yes| Callback used to return the result. If the operation is successful, **err** is **null**. Otherwise, **err** is an error object.|
 
 **Error codes**
 
@@ -101,3 +101,181 @@ dateTimeManager.setDateTime(wantTemp, 1526003846000).then(() => {
     console.log("error code:" + error.code + " error message:" + error.message);
 })
 ```
+
+## dateTimeManager.disallowModifyDateTime<sup>10+</sup>
+
+disallowModifyDateTime(admin: Want, disallow: boolean, callback: AsyncCallback\<void>): void
+
+Disables modification of the system time. This API uses an asynchronous callback to return the result.
+
+**Required permissions**: ohos.permission.ENTERPRISE_SET_DATETIME
+
+**System capability**: SystemCapability.Customization.EnterpriseDeviceManager
+
+**System API**: This is a system API.
+
+**Parameters**
+
+| Name  | Type                                 | Mandatory  | Description     |
+| ----- | ----------------------------------- | ---- | ------- |
+| admin | [Want](js-apis-app-ability-want.md) | Yes   | Device administrator application.|
+| disallow  | boolean | Yes| Whether to disable modification of the system time. The value **true** means to disable modification of the system time, and **false** means the opposite.|
+| callback | AsyncCallback\<void> | Yes| Callback used to return the result. If the operation is successful, **err** is **null**. Otherwise, **err** is an error object.|
+
+**Error codes**
+
+For details about the error codes, see [Enterprise Device Management Error Codes](../errorcodes/errorcode-enterpriseDeviceManager.md).
+
+| ID| Error Message                                                                     |
+| ------- | ---------------------------------------------------------------------------- |
+| 9200001 | the application is not an administrator of the device.                       |
+| 9200002 | the administrator application does not have permission to manage the device. |
+
+**Example**
+
+```js
+let wantTemp = {
+    bundleName: "bundleName",
+    abilityName: "abilityName",
+};
+dateTimeManager.disallowModifyDateTime(wantTemp, true, (error) => {
+    if (error) {
+        console.log("error code:" + error.code + " error message:" + error.message);
+    }
+})
+```
+
+## dateTimeManager.disallowModifyDateTime<sup>10+</sup>
+
+disallowModifyDateTime(admin: Want, disallow: boolean): Promise\<void>
+
+Disables modification of the system time. This API uses a promise to return the result.
+
+**Required permissions**: ohos.permission.ENTERPRISE_SET_DATETIME
+
+**System capability**: SystemCapability.Customization.EnterpriseDeviceManager
+
+**System API**: This is a system API.
+
+**Parameters**
+
+| Name  | Type                                 | Mandatory  | Description     |
+| ----- | ----------------------------------- | ---- | ------- |
+| admin | [Want](js-apis-app-ability-want.md) | Yes   | Device administrator application.|
+| disallow  | boolean | Yes| Whether to disable modification of the system time. The value **true** means to disable modification of the system time, and **false** means the opposite.|
+
+**Return value**
+
+| Type  | Description                                 |
+| ----- | ----------------------------------- |
+| Promise\<void> | that returns no value. If the operation fails, an error object is thrown.|
+
+**Error codes**
+
+For details about the error codes, see [Enterprise Device Management Error Codes](../errorcodes/errorcode-enterpriseDeviceManager.md).
+
+| ID| Error Message                                                                     |
+| ------- | ---------------------------------------------------------------------------- |
+| 9200001 | the application is not an administrator of the device.                        |
+| 9200002 | the administrator application does not have permission to manage the device. |
+
+**Example**
+
+```js
+let wantTemp = {
+    bundleName: "bundleName",
+    abilityName: "abilityName",
+};
+dateTimeManager.disallowModifyDateTime(wantTemp, true).then(() => {
+}).catch((error) => {
+    console.log("error code:" + error.code + " error message:" + error.message);
+})
+```
+
+## dateTimeManager.isModifyDateTimeDisallowed<sup>10+</sup>
+
+isModifyDateTimeDisallowed(admin: Want, callback: AsyncCallback\<boolean>): void
+
+Checks whether modification of the system time is disabled. This API uses an asynchronous callback to return the result.
+
+**Required permissions**: ohos.permission.ENTERPRISE_SET_DATETIME
+
+**System capability**: SystemCapability.Customization.EnterpriseDeviceManager
+
+**System API**: This is a system API.
+
+**Parameters**
+
+| Name  | Type                                 | Mandatory  | Description     |
+| ----- | ----------------------------------- | ---- | ------- |
+| admin | [Want](js-apis-app-ability-want.md) | Yes   | Device administrator application.|
+| callback | AsyncCallback\<boolean> | Yes| Callback used to return the result. The value **true** means that modification of the system time is disabled, and **false** means the opposite.|
+
+**Error codes**
+
+For details about the error codes, see [Enterprise Device Management Error Codes](../errorcodes/errorcode-enterpriseDeviceManager.md).
+
+| ID| Error Message                                                                     |
+| ------- | ---------------------------------------------------------------------------- |
+| 9200001 | the application is not an administrator of the device.                       |
+| 9200002 | the administrator application does not have permission to manage the device. |
+
+**Example**
+
+```js
+let wantTemp = {
+    bundleName: "bundleName",
+    abilityName: "abilityName",
+};
+dateTimeManager.isModifyDateTimeDisallowed(wantTemp, (error) => {
+    if (error) {
+        console.log("error code:" + error.code + " error message:" + error.message);
+    }
+})
+```
+
+## dateTimeManager.isModifyDateTimeDisallowed<sup>10+</sup>
+
+isModifyDateTimeDisallowed(admin: Want): Promise\<boolean>
+
+Checks whether modification of the system time is disabled. This API uses a promise to return the result.
+
+**Required permissions**: ohos.permission.ENTERPRISE_SET_DATETIME
+
+**System capability**: SystemCapability.Customization.EnterpriseDeviceManager
+
+**System API**: This is a system API.
+
+**Parameters**
+
+| Name  | Type                                 | Mandatory  | Description     |
+| ----- | ----------------------------------- | ---- | ------- |
+| admin | [Want](js-apis-app-ability-want.md) | Yes   | Device administrator application.|
+
+**Return value**
+
+| Type  | Description                                 |
+| ----- | ----------------------------------- |
+| Promise\<boolean> | Promise Promise used to return the result. The value **true** means that modification of the system time is disabled, and **false** means the opposite.|
+
+**Error codes**
+
+For details about the error codes, see [Enterprise Device Management Error Codes](../errorcodes/errorcode-enterpriseDeviceManager.md).
+
+| ID| Error Message                                                                     |
+| ------- | ---------------------------------------------------------------------------- |
+| 9200001 | the application is not an administrator of the device.                        |
+| 9200002 | the administrator application does not have permission to manage the device. |
+
+**Example**
+
+```js
+let wantTemp = {
+    bundleName: "bundleName",
+    abilityName: "abilityName",
+};
+dateTimeManager.disallowModifyDateTime(wantTemp).then(() => {
+}).catch((error) => {
+    console.log("error code:" + error.code + " error message:" + error.message);
+})
+```

en/application-dev/reference/apis/js-apis-inner-application-abilityMonitor.md

@@ -6,6 +6,12 @@ The **AbilityMonitor** module provides monitors for abilities that meet specifie
 > 
 > The initial APIs of this module are supported since API version 9. Newly added APIs will be marked with a superscript to indicate their earliest API version. 
 
+## Modules to Import
+
+```ts
+import AbilityDelegatorRegistry from '@ohos.app.ability.abilityDelegatorRegistry';
+```
+
 ## Usage
 
 **AbilityMonitor** can be used as an input parameter of [addAbilityMonitor](js-apis-inner-application-abilityDelegator.md#addabilitymonitor9) in **abilityDelegator** to listen for lifecycle changes of an ability.
@@ -43,9 +49,9 @@ let monitor = {
     onAbilityCreate: onAbilityCreateCallback
 };
 
-let abilityDelegator = AbilityDelegatorRegistry.getAbilityDelegator();
+let abilityDelegator: AbilityDelegatorRegistry.AbilityDelegator = AbilityDelegatorRegistry.getAbilityDelegator();
 abilityDelegator.addAbilityMonitor(monitor, (error : any) => {
-    if (error && error.code !== 0) {
+    if (error) {
         console.error('addAbilityMonitor fail, error: ${JSON.stringify(error)}');
     }
 });

en/application-dev/reference/apis/js-apis-inner-application-abilityRunningInfo.md

@@ -6,6 +6,12 @@ The **AbilityRunningInfo** module defines the running information and state of a
 > 
 > The initial APIs of this module are supported since API version 8. Newly added APIs will be marked with a superscript to indicate their earliest API version.
 
+## Modules to Import
+
+```ts
+import abilitymanager from '@ohos.app.ability.abilityManager';
+```
+
 ## Usage
 
 The ability running information is obtained by calling [getAbilityRunningInfos](js-apis-app-ability-abilityManager.md#getabilityrunninginfos) in **abilityManager**.
@@ -31,7 +37,7 @@ The ability running information is obtained by calling [getAbilityRunningInfos](
 import abilitymanager from '@ohos.app.ability.abilityManager';
 
 abilitymanager.getAbilityRunningInfos((error, data) => { 
-    if (error && error.code !== 0) {
+    if (error) {
         console.error('getAbilityRunningInfos fail, error: ${JSON.stringify(error)}');
     } else {
         console.log('getAbilityRunningInfos success, data: ${JSON.stringify(data)}');

en/application-dev/reference/apis/js-apis-inner-application-abilityStageMonitor.md

@@ -2,6 +2,7 @@
 
 The **AbilityStageMonitor** module provides conditions for matching **AbilityStage** instances. The most recently matched **AbilityStage** instance is saved in an **AbilityStageMonitor** instance.
 
+
 **System capability**: SystemCapability.Ability.AbilityRuntime.Core
 
 | Name                                                        | Type    | Readable| Writable| Description                                                        |
@@ -20,7 +21,7 @@ let monitor = {
 
 let abilityDelegator = AbilityDelegatorRegistry.getAbilityDelegator();
 abilityDelegator.waitAbilityStageMonitor(monitor, (error, data) => {
-    if (error && error.code !== 0) {
+    if (error) {
         console.error('waitAbilityStageMonitor fail, error: ${JSON.stringify(error)}');
     } else {
         console.log('waitAbilityStageMonitor success, data: ${JSON.stringify(data)}');

en/application-dev/reference/apis/js-apis-inner-application-processInformation.md

@@ -6,6 +6,12 @@ The **ProcessInformation** module defines the running information of a process.
 > 
 > The initial APIs of this module are supported since API version 9. Newly added APIs will be marked with a superscript to indicate their earliest API version.
 
+## Modules to Import
+
+```ts
+import appManager from '@ohos.app.ability.appManager';
+```
+
 ## How to Use
 
 The process information is obtained by calling [getRunningProcessInformation](js-apis-app-ability-appManager.md#appmanagergetrunningprocessinformation9) of the **appManager** module.
@@ -14,7 +20,7 @@ The process information is obtained by calling [getRunningProcessInformation](js
 import appManager from '@ohos.app.ability.appManager';
 
 appManager.getRunningProcessInformation((error, data) => { 
-    if (error && error.code !== 0) {
+    if (error) {
         console.error('getRunningProcessInformation fail, error: ${JSON.stringify(error)}');
     } else {
         console.log('getRunningProcessInformation success, data: ${JSON.stringify(data)}');

en/application-dev/reference/apis/js-apis-inner-application-shellCmdResult.md

@@ -6,6 +6,12 @@ The **ShellCmdResult** module provides the shell command execution result.
 > 
 > The initial APIs of this module are supported since API version 8. Newly added APIs will be marked with a superscript to indicate their earliest API version.
 
+## Modules to Import
+
+```ts
+import AbilityDelegatorRegistry from '@ohos.app.ability.abilityDelegatorRegistry';
+```
+
 **System capability**: SystemCapability.Ability.AbilityRuntime.Core
 
 | Name     | Type  | Readable| Writable| Description                                                        |
@@ -20,12 +26,12 @@ The result is obtained by calling [executeShellCommand](js-apis-inner-applicatio
 **Example**
 ```ts
 import AbilityDelegatorRegistry from '@ohos.app.ability.abilityDelegatorRegistry';
-let abilityDelegator;
+let abilityDelegator: AbilityDelegatorRegistry.AbilityDelegator;
 let cmd = 'cmd';
 
 abilityDelegator = AbilityDelegatorRegistry.getAbilityDelegator();
 abilityDelegator.executeShellCommand(cmd, (error: any, data: any) => {
-    if (error && error.code !== 0) {
+    if (error) {
         console.error('executeShellCommand fail, error: ${JSON.stringify(error)}');
     } else {
         console.log('executeShellCommand success, data: ${JSON.stringify(data)}');

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

@@ -47,7 +47,7 @@ struct Page45 {
           grad.addColorStop(0.5, '#ffffff')
           grad.addColorStop(1.0, '#00ff00')
           this.context.fillStyle = grad
-          this.context.fillRect(0, 0, 500, 500)
+          this.context.fillRect(0, 0, 400, 400)
         })
     }
     .width('100%')

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

@@ -24,12 +24,12 @@ An **ImageData** object stores pixel data rendered on a canvas.
 
   ```ts
   // xxx.ets
-@Entry
-@Component
-struct Translate {
+  @Entry
+  @Component
+  struct Translate {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-  private img:ImageBitmap = new ImageBitmap("/common/images/1234.png")
+    private img:ImageBitmap = new ImageBitmap("common/images/1234.png")
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -46,7 +46,7 @@ struct Translate {
       .width('100%')
       .height('100%')
     }
-}
+  }
   ```
 
   ![en-us_image_000000127777780](figures/en-us_image_000000127777780.png)

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

 # Path2D
 
-**Path2D** allows you to describe a path through an existing path. This path can be drawn through the **stroke** API of **Canvas**.
+**Path2D** allows you to describe a path through an existing path. This path can be drawn through the **stroke** or **fill** API of **Canvas**.
 
 >  **NOTE**
 > 
@@ -18,10 +18,10 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 **Parameters**
 
-| 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.|
+  | 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**
@@ -109,10 +109,10 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 **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.|
+  | 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**
 
@@ -158,10 +158,10 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 **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.|
+  | 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**
 
@@ -208,14 +208,14 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 **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.|
+  | 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**
 
@@ -259,12 +259,12 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 **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.|
+  | 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**
 
@@ -308,14 +308,14 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 **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.|
+  | 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**
 
@@ -358,13 +358,13 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 **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.|
+  | 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**
 
@@ -407,16 +407,16 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 **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. 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 counterclockwise.<br>**true**: Draw the ellipse counterclockwise.<br>**false**: Draw the ellipse clockwise.|
+  | 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 counterclockwise.<br>**true**: Draw the ellipse counterclockwise.<br>**false**: Draw the ellipse clockwise.| 
 
 **Example**
 
@@ -459,12 +459,12 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 **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.|
+  | 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**
 

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

@@ -9,7 +9,23 @@ The **\<Grid>** component consists of cells formed by rows and columns. You can
 
 ## Child Components
 
-This component contains the child component **[\<GridItem>](ts-container-griditem.md)**.
+The **\<Grid>** component accepts only **\<[GridItem](ts-container-griditem.md)>** as its child components.
+
+>  **NOTE**
+>
+>  Below are the rules for calculating the indexes of the child components of **\<Grid>**:
+>
+>  The index increases in ascending order of child components.
+>
+>  In the **if/else** statement, only the child components in the branch where the condition is met participate in the index calculation.
+>
+>  In the **ForEach** or **LazyForEach** statement, the indexes of all expanded subnodes are calculated.
+>
+>  If the values of [if/else](../../quick-start/arkts-rendering-control-ifelse.md), [ForEach](../../quick-start/arkts-rendering-control-foreach.md), and [LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md) change, the indexes of subnodes are updated.
+>
+>  Child components of **\<Grid>** whose **visibility** attribute is set to **Hidden** or **None** are included in the index calculation.
+>
+>  Child components of **\<Grid>** whose **visibility** attribute is set to **None** are not displayed, but still take up the corresponding cells.
 
 
 ## APIs
@@ -18,9 +34,9 @@ Grid(scroller?: Scroller)
 
 **Parameters**
 
-| Name      | Type                                    | Mandatory  | Description                   |
-| --------- | ---------------------------------------- | ---- | ----------------------- |
-| scroller  | [Scroller](ts-container-scroll.md#scroller) | No   | Scroller, which can be bound to scrollable components.|
+| Name  | Type                                   | Mandatory| Description                                                    |
+| -------- | ------------------------------------------- | ---- | ------------------------------------------------------------ |
+| scroller | [Scroller](ts-container-scroll.md#scroller) | No  | Controller, which can be bound to scrollable components.<br>**NOTE**<br>The scroller cannot be bound to other [scrollable components](ts-container-list.md).|
 
 ## Attributes
 
@@ -28,41 +44,57 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 
 | 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.|
-| 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.|
-| 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/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** |
+| 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.<br>**NOTE**<br>If this attribute is set to **'0fr'**, the column width is 0, and grid item in the column is not displayed. If this attribute is set to any other invalid value, the grid item is displayed as one column.|
+| 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.<br>**NOTE**<br>If this attribute is set to **'0fr'**, the row width is 0, and grid item in the row is not displayed. If this attribute is set to any other invalid value, the grid item is displayed as one row.|
+| columnsGap | [Length](ts-types.md#length) | Gap between columns.<br>Default value: **0**<br>**NOTE**<br>A value less than 0 evaluates to the default value.|
+| rowsGap | [Length](ts-types.md#length) | Gap between rows.<br>Default value: **0**<br>**NOTE**<br>A value less than 0 evaluates to the default value.|
+| scrollBar      | [BarState](ts-appendix-enums.md#barstate) | Scrollbar status.<br>Default value: **BarState.Off** |
+| scrollBarColor | string \| number \| [Color](ts-appendix-enums.md#color) | Color of the scrollbar.|
+| scrollBarWidth | string \| number    | Width of the scrollbar. After the width is set, the scrollbar is displayed with the set width in normal state and pressed state.<br>Default value: **4**<br>Unit: vp|
+| cachedCount | number                                   | Number of grid items to be preloaded (cached). It works only in [LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md). For details, see [Minimizing White Blocks During Swiping](../../ui/arkts-performance-improvement-recommendation.md#minimizing-white-blocks-during-swiping).<br>Default value: **1**<br>**NOTE**<br>The number of the grid items to be cached before and after the currently displayed one equals the value of **cachedCount** multiplied by the number of columns.<br>Grid items that exceed the display and cache range are released.<br>A value less than 0 evaluates to the default value.|
+| 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 columns that can be displayed.<br>When **layoutDirection** is **Column** or **ColumnReverse**: maximum number of rows that can be displayed.<br>Default value: **Infinity**|
-| minCount<sup>8+</sup> | number  | When **layoutDirection** is **Row** or **RowReverse**: minimum number of columns that can be displayed.<br>When **layoutDirection** is **Column** or **ColumnReverse**: maximum number of rows that can be displayed.<br>Default value: **1**|
+| maxCount<sup>8+</sup> | number  | When **layoutDirection** is **Row** or **RowReverse**: maximum number of columns that can be displayed.<br>When **layoutDirection** is **Column** or **ColumnReverse**: maximum number of rows that can be displayed.<br>Default value: **Infinity**<br>**NOTE**<br>If the value of **maxCount** is smaller than that of **minCount**, the default values of **maxCount** and **minCount** are used.<br>A value less than 0 evaluates to the default value.|
+| minCount<sup>8+</sup> | number  | When **layoutDirection** is **Row** or **RowReverse**: minimum number of columns that can be displayed.<br>When **layoutDirection** is **Column** or **ColumnReverse**: minimum number of rows that can be displayed.<br>Default value: **1**<br>**NOTE**<br>A value less than 0 evaluates to the default value.|
 | 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: size of the first element|
 | 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**|
+| supportAnimation<sup>8+</sup> | boolean | Whether to enable animation. Currently, the grid item drag animation is supported.<br>Default value: **false**|
 
 Depending on the settings of the **rowsTemplate** and **columnsTemplate** attributes, the **\<Grid>** component supports the following layout modes:
 
 1. **rowsTemplate** and **columnsTemplate** are both set
 
-   The **\<Grid>** displays only elements in a fixed number of rows and columns and cannot be scrolled. For example, if both **rowsTemplate** and **columnsTemplate** are set to **"1fr 1fr"**, only four elements (two rows and two columns) are displayed.
-
-   In this mode, the following attributes do not take effect: **layoutDirection**, **maxCount**, minCount, and **cellLength**.
+- The **\<Grid>** component displays only elements in a fixed number of rows and columns and cannot be scrolled.
+- In this mode, the following attributes do not take effect: **layoutDirection**, **maxCount**, **minCount**, and **cellLength**.
+- If the width and height of a grid are not set, the grid adapts to the size of its parent component by default.
+- The size of the grid rows and columns is the size of the grid content area minus the gap between rows and columns. It is allocated based on the proportion of each row and column.
+- By default, the grid items fill the entire grid.
+- In this mode, if a grid item has both **rowStart** and **columnStart** set, it is placed in the position based on the settings. If a grid item already exists in this position, overlapping occurs.
+- If a grid item has only **rowStart** or **columnStart** set, the system traverses the previous grid item layout to search for an idle position that meets the settings. If no idle position meets the requirements, the grid item is not laid out.
+- If a grid item has neither **rowStart** nor **columnStart** set, the system traverses the previous grid item layout to search for an idle position. If no idle position is available, the grid item is not laid out.
+- If a grid item has **rowEnd** set but not **rowStart**, **rowStart** is considered as set to the same value as **rowEnd**. If a grid item has **columnEnd** set but not **columnStart**, **columnStart** is considered as set to the same value as **columnEnd**.
 
 2. Either **rowsTemplate** or **columnsTemplate** is set
 
-   The **\<Grid>** arranges elements in the specified direction and allows for scrolling to display excess elements. For example, if the **\<Grid>** has 10 elements and **columnsTemplate** is set to **"1fr 1fr 1fr"**, it contains three columns. The elements are arranged in the same direction as the main axis runs down the columns. Elements outside the **\<Grid>** area can be viewed through scrolling.
-
-   In this mode, the following attributes do not take effect: **layoutDirection**, **maxCount**, **minCount**, and **cellLength**.
+- The **\<Grid>** component arranges elements in the specified direction and allows for scrolling to display excess elements.
+- If **columnsTemplate** is set, the component scrolls vertically, the main axis runs vertically, and the cross axis runs horizontally.
+- If **rowsTemplate** is set, the component scrolls horizontally, the main axis runs horizontally, and the cross axis runs vertically.
+- In this mode, the following attributes do not take effect: **layoutDirection**, **maxCount**, minCount, and **cellLength**.
+- The cross axis size of the grid is the cross axis size of the grid content area minus the gaps along the cross axis. It is allocated based on the proportion of each row and column.
+- The main axis size of the grid is the maximum height of all grid items in the cross axis direction of the current grid.
+- In this mode, if a grid item has both **rowStart** and **columnStart** set, it is placed in the position based on the settings. If a grid item already exists in this position, overlapping occurs.
+- If a grid item has only **rowStart** or **columnStart** set, the system traverses the previous grid item layout to search for an idle position that meets the settings.
+- If a grid item has neither **rowStart** nor **columnStart** set, the system traverses the previous grid item layout to search for an idle position.
+- If a grid item has **rowEnd** set but not **rowStart**, **rowStart** is considered as set to the same value as **rowEnd**. If a grid item has **columnEnd** set but not **columnStart**, **columnStart** is considered as set to the same value as **columnEnd**.
 
 3. Neither **rowsTemplate** nor **columnsTemplate** is set
 
-   The **\<Grid>** arranges elements in the direction specified by **layoutDirection **. The number of columns is jointly determined by the grid width, width of the first element, **minCount**, **maxCount**, and **columnsGap**. The number of rows is jointly determined by the grid height, height of the first element, **cellLength**, and **rowsGap**. Elements outside the determined range of rows and columns are not displayed and cannot be viewed through scrolling.
-
-   In this mode, only the following attributes take effect: **layoutDirection**, **maxCount**, **minCount**, **cellLength**, **editMode**, **columnsGap**, and **rowsGap**.
+- The **\<Grid>** component arranges elements in the direction specified by **layoutDirection**. The number of columns is jointly determined by the grid width, width of the first element, **minCount**, **maxCount**, and **columnsGap**.
+- The number of rows is jointly determined by the grid height, height of the first element, **cellLength**, and **rowsGap**. Elements outside the determined range of rows and columns are not displayed and cannot be viewed through scrolling.
+- In this mode, only the following attributes take effect: **layoutDirection**, **maxCount**, **minCount**, **cellLength**, **editMode**, **columnsGap**, and **rowsGap**.
+- When **layoutDirection** is set to **Row**, elements are arranged from left to right. When a row is full, a new row will be added. If the remaining height is insufficient, no more elements will be laid out, and the top of the content is centered.
+- When **layoutDirection** is set to **Column**, elements are arranged from top to bottom. When a column is full, a new column will be added. If the remaining height is insufficient, no more elements will be laid out, and the top of the content is centered.
+- In this mode, **rowStart** and **columnStart** of the grid item do not take effect.
 
 ## GridDirection<sup>8+</sup>
 
@@ -73,14 +105,18 @@ Depending on the settings of the **rowsTemplate** and **columnsTemplate** attrib
 | 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.|
 
+> **NOTE**
+>
+> The default value of the universal attribute [clip](ts-universal-attributes-sharp-clipping.md) is **true** for the **\<Grid>** component.
+
 ## Events
 
 In addition to the [universal events](ts-universal-events-click.md), the following events are supported.
 
 | Name| Description|
 | -------- | -------- |
-| 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.|
+| onScrollIndex(event: (first: number) => void) | Triggered when the start item of the grid changes. It is triggered once when the grid is initialized.<br>- **first**: index of the start item of the grid.<br>If it changes, this event will be triggered.|
+| 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.<br>**NOTE**<br>If **void** is returned, the drag operation cannot be performed.<br>This event is triggered when the user long presses a grid item.|
 | 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.|
@@ -90,8 +126,8 @@ In addition to the [universal events](ts-universal-events-click.md), the followi
 
 | Name        | Type        |   Description        |
 | ---------- | ---------- | ---------- |
-| x | number |  X-coordinate of the dragged item.   |
-| y   | number |  Y-coordinate of the dragged item.   |
+| x | number |  X coordinate of the dragged item.   |
+| y   | number |  Y coordinate of the dragged item.   |
 
 ## Example
 

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

@@ -39,7 +39,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 | strokeDashArray | Array&lt;Length&gt; | [] | Stroke dashes.<br>Since API version 9, this API is supported in ArkTS widgets.|
 | strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.<br>Since API version 9, this API is supported in ArkTS widgets.|
 | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.<br>Since API version 9, this API is supported in ArkTS widgets.|
-| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>This attribute does not work for the **\<Line>** component, which does not have corners. |
+| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>This attribute does not work for the **\<Line>** component, which does not have corners.|
 | strokeMiterLimit | number \| string | 4 | Limit value when the sharp angle is drawn as a miter.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>This attribute does not take effect because the **\<Line>** component cannot be used to draw a shape with a sharp angle.|
 | strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.|
 | strokeWidth | Length | 1 | Stroke width.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>The value cannot be a percentage.|

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

@@ -21,7 +21,7 @@ The following child components are supported: **[\<Rect>](ts-drawing-components-
 
 Shape(value?: PixelMap)
 
-Since API version 9, this API is supported in ArkTS widgets.
+Since API version 9, this API is supported in ArkTS widgets, except that **PixelMap** objects are not supported.
 
 **Parameters**
 
@@ -52,8 +52,6 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 
 ## Example
 
-### Example 1
-
 ```ts
 // xxx.ets
 @Entry

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

@@ -12,12 +12,12 @@ The size attributes set the width, height, and margin of a component.
 
 | 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.<br>Since API version 9, this API is supported in ArkTS widgets.|
-| 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.<br>Since API version 9, this API is supported in ArkTS widgets.|
-| size           | {<br>width?: [Length](ts-types.md#length),<br>height?: [Length](ts-types.md#length)<br>} | Size of the component.<br>Since API version 9, this API is supported in ArkTS widgets.|
-| 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.<br>Since API version 9, this API is supported in ArkTS widgets.|
-| 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.<br>Since API version 9, this API is supported in ArkTS widgets.|
-| 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**. If the value of **minWidth** is greater than that of **maxWidth**, only the value of **minWidth** takes effect. The same rule applies to **minHeight** and **maxHeight**.<br>Default value:<br>{<br>minWidth: 0,<br>maxWidth: Infinity,<br>minHeight: 0,<br>maxHeight: Infinity<br>}<br>Since API version 9, this API is supported in ArkTS widgets.|
+| 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.<br>Since API version 9, this API is supported in ArkTS widgets.<br>Since API version 10, this API supports the calc calculation feature.|
+| 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.<br>Since API version 9, this API is supported in ArkTS widgets.<br>Since API version 10, this API supports the calc calculation feature.|
+| size           | {<br>width?: [Length](ts-types.md#length),<br>height?: [Length](ts-types.md#length)<br>} | Size of the component.<br>Since API version 9, this API is supported in ArkTS widgets.<br>Since API version 10, this API supports the calc calculation feature.|
+| 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.<br>Since API version 9, this API is supported in ArkTS widgets.<br>Since API version 10, this API supports the calc calculation feature.|
+| 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.<br>Since API version 9, this API is supported in ArkTS widgets.<br>Since API version 10, this API supports the calc calculation feature.|
+| 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**. If the value of **minWidth** is greater than that of **maxWidth**, only the value of **minWidth** takes effect. The same rule applies to **minHeight** and **maxHeight**.<br>Default value:<br>{<br>minWidth: 0,<br>maxWidth: Infinity,<br>minHeight: 0,<br>maxHeight: Infinity<br>}<br>Since API version 9, this API is supported in ArkTS widgets.<br>Since API version 10, this API supports the calc calculation feature.|
 | layoutWeight   | number \| string                                   | Weight of the component during layout. When the container size is determined, the container space is allocated along the main axis among the component and sibling components based on the layout weight, and the component size setting is ignored.<br>Default value: **0**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>This attribute is valid only for the **\<Row>**, **\<Column>**, and **\<Flex>** layouts.<br>The value can be a number greater than or equal to 0 or a string that can be converted to a number.|
 
 

en/device-dev/porting/porting-bes2600w-on-minisystem-display-demo.md

 # Mini-System Devices with Screens – Bestechnic SoC Porting Case
 
-This document exemplifies the porting procedure for a development board on a mini-system device with a screen – an intelligent switch panel. It uses the BES multi-modal V200Z-R development board powered by the Bestechnic BES2600W SoC as an example. Components such as `ace_engine_lite`, `graphic_ui`, `aafwk_lite`, `appexecfwk_lite`, and `HDF` are adapted based on the OpenHarmony LiteOS-M kernel. This example uses the board-SoC separation solution as the porting architecture, the Newlib C or Musl C library as the toolchain, and GN and Kconfig graphical configuration for LiteOS-M kernel compilation.
+This document exemplifies the porting procedure for a development board on a mini-system device with a screen – an intelligent switch panel. It uses the BES multi-modal V200Z-R development board powered by the Bestechnic BES2600W SoC as an example. Components such as `ace_engine_lite`, `arkui_ui_lite`, `aafwk_lite`, `appexecfwk_lite`, and `HDF` are adapted based on the OpenHarmony LiteOS-M kernel. This example uses the board-SoC separation solution as the porting architecture, the Newlib C or Musl C library as the toolchain, and GN and Kconfig graphical configuration for LiteOS-M kernel compilation.
 
 ## Compilation and Building
 
@@ -1311,7 +1311,7 @@ aafwk_lite + appexecfwk_lite    (AAFWK + APPEXECFWK)
       |
 ace_engine_lite + jerryscript + i18n_lite + resmgr_lite + utils/native/lite/... (ACE and JS engines and their dependencies)
       |
-graphic_ui + graphic_utils      (Graphic framework)
+arkui_lite + graphic_graphic_utils_lite      (Graphic framework)
       |
 giflib + libjpeg + libpng + qrcodegen + freetype... (Third-party graphics library)
 ```

en/device-dev/porting/porting-stm32mp15xx-on-smallsystem.md

 # Small System STM32MP1 SoC Porting Case
 
-This document describes how to port small development boards with screens based on the [BearPi-HM Micro development board](https://gitee.com/openharmony/device_board_bearpi) of the `STM32MP157` SoC from STMicroelectronics, so as to adapt components such as `ace_engine_lite`, `graphic_ui`, `aafwk_lite`, `appexecfwk_lite`, and `HDF` to the `OpenHarmony LiteOS-A` kernel. The porting architecture uses the solution where `Board` and `SoC` are separated.
+This document describes how to port small development boards with screens based on the [BearPi-HM Micro development board](https://gitee.com/openharmony/device_board_bearpi) of the `STM32MP157` SoC from STMicroelectronics, so as to adapt components such as `ace_engine_lite`, `arkui_ui_lite`, `aafwk_lite`, `appexecfwk_lite`, and `HDF` to the `OpenHarmony LiteOS-A` kernel. The porting architecture uses the solution where `Board` and `SoC` are separated.
 
 ## Compilation and Building