Update docs (17553)

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

en/application-dev/reference/apis/js-apis-arkui-componentSnapshot.md

+# @ohos.arkui.componentSnapshot (Component Snapshot)
+
+The **componentSnapshot** module provides APIs for obtaining component snapshots, including snapshots of components that have been loaded and snapshots of components that have not been loaded yet.
+
+> **NOTE**
+>
+> The initial APIs of this module are supported since API version 10. Newly added APIs 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.
+
+## Modules to Import
+
+```js
+import componentSnapshot from "@ohos.arkui.componentSnapshot";
+```
+
+## componentSnapshot.get
+
+get(id: string, callback: AsyncCallback<image.PixelMap>): void
+
+Obtains the snapshot of a component that has been loaded. This API uses an asynchronous callback to return the result.
+
+**System capability**: SystemCapability.ArkUI.ArkUI.Full
+
+**Parameters**
+
+| Name  | Type                               | Mandatory| Description                                                                          |
+| -------- | ----------------------------------- | ---- | ------------------------------------------------------------------------------ |
+| id       | string                              | Yes  | [ID](../arkui-ts/ts-universal-attributes-component-id.md) of the target component.|
+| callback | AsyncCallback&lt;image.PixelMap&gt; | Yes  | Callback used to return the result.                                                            |
+
+**Example**
+
+```js
+import componentSnapshot from '@ohos.arkui.componentSnapshot'
+import image from '@ohos.multimedia.image'
+
+@Entry
+@Component
+struct SnapshotExample {
+  @State pixmap: image.PixelMap = undefined
+
+  build() {
+    Column() {
+      Image(this.pixmap)
+        .width(300).height(300)
+      // ...Component
+      // ...Components
+      // ...Components
+      Button("click to generate UI snapshot")
+        .onClick(() => {
+          componentSnapshot.get("root", (error: Error, pixmap: image.PixelMap) => {
+                 this.pixmap = pixmap
+                 // save pixmap to file
+                 // ....
+             })
+        })
+    }
+    .width('80%')
+    .margin({ left: 10, top: 5, bottom: 5 })
+    .height(200)
+    .border({ color: '#880606', width: 2 })
+    .id("root")
+  }
+}
+```
+
+## componentSnapshot.get
+
+get(id: string): Promise<image.PixelMap>
+
+Obtains the snapshot of a component that has been loaded. This API uses a promise to return the result.
+
+**System capability**: SystemCapability.ArkUI.ArkUI.Full
+
+**Parameters**
+
+| Name | Type                                                   | Mandatory| Description                |
+| ------- | ------------------------------------------------------- | ---- | -------------------- |
+| id       | string                              | Yes  | [ID](../arkui-ts/ts-universal-attributes-component-id.md) of the target component.|
+
+**Return value**
+
+| Type                         | Description          |
+| ----------------------------- | -------------- |
+| Promise&lt;image.PixelMap&gt; | Promise used to return the result.|
+
+**Error codes**
+
+| ID| Error Message           |
+| -------- | ------------------- |
+| 100001   | if id is not valid. |
+
+**Example**
+
+```js
+import componentSnapshot from '@ohos.arkui.componentSnapshot'
+import image from '@ohos.multimedia.image'
+
+@Entry
+@Component
+struct SnapshotExample {
+  @State pixmap: image.PixelMap = undefined
+
+  build() {
+    Column() {
+      Image(this.pixmap)
+        .width(300).height(300)
+      // ...Component
+      // ...Components
+      // ...Components
+      Button("click to generate UI snapshot")
+        .onClick(() => {
+          componentSnapshot.get("root")
+            .then((pixmap: image.PixelMap) => {
+              this.pixmap = pixmap
+              // save pixmap to file
+              // ....
+            })
+        })
+    }
+    .width('80%')
+    .margin({ left: 10, top: 5, bottom: 5 })
+    .height(200)
+    .border({ color: '#880606', width: 2 })
+    .id("root")
+  }
+}
+```
+
+## componentSnapshot.createFromBuilder
+
+createFromBuilder(builder: CustomBuilder, callback: AsyncCallback<image.PixelMap>): void
+
+Renders a custom component in the application background and outputs its snapshot. This API uses an asynchronous callback to return the result.
+
+**System capability**: SystemCapability.ArkUI.ArkUI.Full
+
+**Parameters**
+
+| Name  | Type                                                   | Mandatory| Description                |
+| -------- | ------------------------------------------------------- | ---- | -------------------- |
+| builder  | [CustomBuilder](../arkui-ts/ts-types.md#custombuilder8) | Yes  | Builder of the custom component.|
+| callback | AsyncCallback&lt;image.PixelMap&gt;                     | Yes  | Callback used to return the result.  |
+
+**Example**
+
+```ts
+import componentSnapshot from '@ohos.arkui.componentSnapshot'
+import image from '@ohos.multimedia.image'
+
+@Entry
+@Component
+struct OffscreenSnapshotExample {
+  @State pixmap: image.PixelMap = undefined
+
+  @Builder
+  RandomBuilder() {
+    Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
+      Text('Test menu item 1')
+        .fontSize(20)
+        .width(100)
+        .height(50)
+        .textAlign(TextAlign.Center)
+      Divider().height(10)
+      Text('Test menu item 2')
+        .fontSize(20)
+        .width(100)
+        .height(50)
+        .textAlign(TextAlign.Center)
+    }.width(100)
+  }
+
+  build() {
+    Column() {
+      Button("click to generate offscreen UI snapshot")
+        .onClick(() => {
+          componentSnapshot.createFromBuilder(this.RandomBuilder.bind(this),
+            (error: Error, pixmap: image.PixelMap) => {
+              this.pixmap = pixmap
+              // save pixmap to file
+              // ....
+            })
+        })
+    }.width('80%').margin({ left: 10, top: 5, bottom: 5 }).height(200)
+    .border({ color: '#880606', width: 2 })
+  }
+}
+```
+
+## componentSnapshot.createFromBuilder
+
+createFromBuilder(builder: CustomBuilder): Promise<image.PixelMap>
+
+Renders a custom component in the application background and outputs its snapshot. This API uses a promise to return the result.
+
+**System capability**: SystemCapability.ArkUI.ArkUI.Full
+
+**Parameters**
+
+| Name | Type                                                   | Mandatory| Description                |
+| ------- | ------------------------------------------------------- | ---- | -------------------- |
+| builder | [CustomBuilder](../arkui-ts/ts-types.md#custombuilder8) | Yes  | Builder of the custom component.|
+
+**Return value**
+
+| Type                         | Description          |
+| ----------------------------- | -------------- |
+| Promise&lt;image.PixelMap&gt; | Promise used to return the result.|
+
+**Error codes**
+
+| ID| Error Message                                 |
+| -------- | ----------------------------------------- |
+| 100001   | if builder is not a valid build function. |
+
+**Example**
+
+```ts
+import componentSnapshot from '@ohos.arkui.componentSnapshot'
+import image from '@ohos.multimedia.image'
+
+@Entry
+@Component
+struct OffscreenSnapshotExample {
+  @State pixmap: image.PixelMap = undefined
+
+  @Builder
+  RandomBuilder() {
+    Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
+      Text('Test menu item 1')
+        .fontSize(20)
+        .width(100)
+        .height(50)
+        .textAlign(TextAlign.Center)
+      Divider().height(10)
+      Text('Test menu item 2')
+        .fontSize(20)
+        .width(100)
+        .height(50)
+        .textAlign(TextAlign.Center)
+    }.width(100)
+  }
+
+  build() {
+    Column() {
+      Button("click to generate offscreen UI snapshot")
+        .onClick(() => {
+          componentSnapshot.createFromBuilder(this.RandomBuilder.bind(this))
+            .then((pixmap: image.PixelMap) => {
+              this.pixmap = pixmap
+              // save pixmap to file
+              // ....
+            })
+        })
+    }.width('80%').margin({ left: 10, top: 5, bottom: 5 }).height(200)
+    .border({ color: '#880606', width: 2 })
+  }
+}
+```

en/application-dev/reference/apis/js-apis-arkui-drawableDescriptor.md

@@ -17,7 +17,7 @@ import { DrawableDescriptor, LayeredDrawableDescriptor } from '@ohos.arkui.drawa
 ## DrawableDescriptor.constructor
 constructor()
 
-Creates a **DrawableDescriptor** or **LayeredDrawableDescriptor** object. The globalization API [getDrawableDescriptor](js-apis-resource-manager.md##getdrawabledescriptor) or [getDrawableDescriptorByName](js-apis-resource-manager.md##getdrawabledescriptorbyname) is required for object construction.
+Creates a **DrawableDescriptor** or **LayeredDrawableDescriptor** object. The globalization API [getDrawableDescriptor](js-apis-resource-manager.md#getdrawabledescriptor10) or [getDrawableDescriptorByName](js-apis-resource-manager.md#getdrawabledescriptorbyname10) is required for object construction.
 
 **System API**: This is a system API.
 
@@ -32,16 +32,25 @@ Creates a **DrawableDescriptor** object when the passed resource ID or name belo
 Creates a **LayeredDrawableDescriptor** object when the passed resource ID or name belongs to a JSON file that contains foreground and background resources.
 
 **Example**
-```js
+```ts
+// xxx.ets
+import { DrawableDescriptor, LayeredDrawableDescriptor } from '@ohos.arkui.drawableDescriptor'
+
 @Entry
 @Component
 struct Index {
   private resManager = getContext().resourceManager
-  let drawable1 = resManager.getDrawableDescriptor($r('app.media.icon').id)
-  let drawable2 = resManager.getDrawableDescriptorByName(icon)
-  let layeredDrawable1 = resManager.getDrawableDescriptor($r('app.media.file').id)
-  let layeredDrawable1 = resManager.getDrawableDescriptor(file)
- }
+
+  build() {
+    Row() {
+      Column() {
+        Image((<LayeredDrawableDescriptor> (this.resManager.getDrawableDescriptor($r('app.media.icon').id))))
+        Image(((<LayeredDrawableDescriptor> (this.resManager.getDrawableDescriptor($r('app.media.icon')
+          .id))).getForeground()).getPixelMap())
+      }.height('50%')
+    }.width('50%')
+  }
+}
 ```
 
 ## DrawableDescriptor.getPixelMap
@@ -53,13 +62,13 @@ Obtains this **pixelMap** object.
 
 **Return value**
 
-| Type                             | Description             |
-| --------------------------------- | ---------------- |
+| Type                                      | Description      |
+| ---------------------------------------- | -------- |
 | [image.PixelMap](../apis/js-apis-image.md#pixelmap7) | **pixelMap** object.|
 
 **Example**
-  ```js
-  @State pixmap: PixelMap = drawable1.getPixelMap();
+  ```ts
+pixmap: PixelMap = drawable1.getPixelMap();
   ```
 
 ## LayeredDrawableDescriptor.getPixelMap
@@ -71,13 +80,13 @@ Obtains the **pixelMap** object where the foreground, background, and mask are b
 
 **Return value**
 
-| Type                             | Description             |
-| --------------------------------- | ---------------- |
+| Type                                      | Description      |
+| ---------------------------------------- | -------- |
 | [image.PixelMap](../apis/js-apis-image.md#pixelmap7) | **pixelMap** object.|
 
 **Example**
-  ```js
-  @State pixmap: PixelMap = layeredDrawable1.getPixelMap();
+  ```ts
+pixmap: PixelMap = layeredDrawable1.getPixelMap();
   ```
 
 ## LayeredDrawableDescriptor.getForeground
@@ -89,13 +98,13 @@ Obtains the **DrawableDescriptor** object of the foreground.
 
 **Return value**
 
-| Type                             | Description             |
-| --------------------------------- | ---------------- |
+| Type                                      | Description                  |
+| ---------------------------------------- | -------------------- |
 | [DrawableDescriptor](#drawabledescriptor) | **DrawableDescriptor** object.|
 
 **Example**
-  ```js
-  @State drawable: DrawableDescriptor = layeredDrawable1.getForeground();
+  ```ts
+drawable: DrawableDescriptor = layeredDrawable1.getForeground();
   ```
 
 ## LayeredDrawableDescriptor.getBackground
@@ -107,13 +116,13 @@ Obtains the **DrawableDescriptor** object of the background.
 
 **Return value**
 
-| Type                             | Description             |
-| --------------------------------- | ---------------- |
+| Type                                      | Description                  |
+| ---------------------------------------- | -------------------- |
 | [DrawableDescriptor](#drawabledescriptor) | **DrawableDescriptor** object.|
 
 **Example**
-  ```js
-  @State drawable: DrawableDescriptor = layeredDrawable1.getBackground();
+  ```ts
+drawable: DrawableDescriptor = layeredDrawable1.getBackground();
   ```
 
 ## LayeredDrawableDescriptor.getMask
@@ -125,12 +134,11 @@ Obtains the **DrawableDescriptor** object of the mask.
 
 **Return value**
 
-| Type                             | Description             |
-| --------------------------------- | ---------------- |
+| Type                                      | Description                  |
+| ---------------------------------------- | -------------------- |
 | [DrawableDescriptor](#drawabledescriptor) | **DrawableDescriptor** object.|
 
 **Example**
-  ```js
-  @State drawable: DrawableDescriptor = layeredDrawable1.getMask();
+  ```ts
+drawable: DrawableDescriptor = layeredDrawable1.getMask();
   ```
-<!--no_check-->
\ No newline at end of file

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

@@ -112,9 +112,9 @@ Provides attributes of the measured text.
 
 | Name          | Type                                                                                               | Mandatory| Description                     |
 | -------------- | -------------------------------------------------------------------------------------------------- | ---- | ----------------------------------------------- |
-| textContent    | string                                                                                             | Yes  | Content of the measured text.                                 |
+| textContent<sup>10+</sup> | string                                                                                             | Yes  | Content of the measured text.                                 |
 | constraintWidth<sup>10+</sup> | number \| string \| [Resource](../arkui-ts/ts-types.md#resource)   | No  | Layout width of the measured text.<br>The default unit is vp.                              |
-| fontSize       | number \| string \| [Resource](../arkui-ts/ts-types.md#resource)               | No  | Font size of the measured text. If the value is of the number type, the unit fp is used.<br>Default value: **16fp**<br>**NOTE**<br>The value cannot be a percent string.   |
+| fontSize       | number \| string \| [Resource](../arkui-ts/ts-types.md#resource)               | No  | Font size of the measured text. If the value is of the number type, the unit fp is used.<br>Default value: **16fp**<br>**NOTE**<br>The value cannot be a percentage.   |
 | fontStyle      | number \| [FontStyle](../arkui-ts/ts-appendix-enums.md#fontstyle)                        | No  | Font style of the measured text.<br>Default value: **FontStyle.Normal**           |
 | fontWeight     | number \| string \| [FontWeight](../arkui-ts/ts-appendix-enums.md#fontweight)  | No  | Font width of the measured text. 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 heavier 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](../arkui-ts/ts-types.md#resource)                                   | No  | Font family of the measured text. Default value: **'HarmonyOS Sans'**<br>Only the default font is supported.|

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

@@ -155,11 +155,11 @@ Registers the listener for the push event.
 
 ```js
 function onPushListener(source, template, data, extraData) {
-    console.log("onPushListener template.source=" + template.source)
-    console.log("onPushListener source=" + JSON.stringify(source))
-    console.log("onPushListener template=" + JSON.stringify(template))
-    console.log("onPushListener data=" + JSON.stringify(data))
-    console.log("onPushListener extraData=" + JSON.stringify(extraData))
+  console.log("onPushListener template.source=" + template.source)
+  console.log("onPushListener source=" + JSON.stringify(source))
+  console.log("onPushListener template=" + JSON.stringify(template))
+  console.log("onPushListener data=" + JSON.stringify(data))
+  console.log("onPushListener extraData=" + JSON.stringify(extraData))
 }
 ```
 
@@ -181,14 +181,13 @@ Registers the listener for the request event.
 **Example**
 
 ```js
-function onRequestListener(source, name, data)
-{
-    console.error("onRequestListener");
-    console.log("onRequestListener source=" + JSON.stringify(source));
-    console.log("onRequestListener name=" + name);
-    console.log("onRequestListener data=" + JSON.stringify(data));
+function onRequestListener(source, name, data) {
+  console.error("onRequestListener");
+  console.log("onRequestListener source=" + JSON.stringify(source));
+  console.log("onRequestListener name=" + name);
+  console.log("onRequestListener data=" + JSON.stringify(data));
 
-    return {template:"ets/pages/plugin.js", data:data};
+  return { template: "ets/pages/plugin.js", data: data };
 }
 ```
 
@@ -210,24 +209,24 @@ Pushes the component and data to the component user.
 
 ```js
 pluginComponentManager.push(
-{
+  {
     want: {
-        bundleName: "com.example.provider",
-        abilityName: "com.example.provider.MainAbility",
+      bundleName: "com.example.provider",
+      abilityName: "com.example.provider.MainAbility",
     },
     name: "plugintemplate",
     data: {
-        "key_1": "plugin component test",
-        "key_2": 34234
+      "key_1": "plugin component test",
+      "key_2": 34234
     },
     extraData: {
-        "extra_str": "this is push event"
+      "extra_str": "this is push event"
     },
     jsonPath: "",
-    },
-    (err, data) => {
-        console.log("push_callback: push ok!");
-    }
+  },
+  (err, data) => {
+    console.log("push_callback: push ok!");
+  }
 )
 ```
 
@@ -251,30 +250,30 @@ Pushes the component and data to the component user.
 
 ```js
 pluginComponentManager.push(
-    {
-        owner:{
-            bundleName:"com.example.provider",
-            abilityName:"com.example.provider.MainAbility"
-        },
-        target: {
-            bundleName: "com.example.provider",
-            abilityName: "com.example.provider.MainAbility",
-        },
-        name: "ets/pages/plugin2.js",
-        data: {
-            "js": "ets/pages/plugin.js",
-            "key_1": 1111, ,
-        },
-        extraData: {
-            "extra_str": "this is push event"
-        },
-        jsonPath: "",
+  {
+    owner: {
+      bundleName: "com.example.provider",
+      abilityName: "com.example.provider.MainAbility"
+    },
+    target: {
+      bundleName: "com.example.provider",
+      abilityName: "com.example.provider.MainAbility",
+    },
+    name: "ets/pages/plugin2.js",
+    data: {
+      "js": "ets/pages/plugin.js",
+      "key_1": 1111, ,
+    },
+    extraData: {
+      "extra_str": "this is push event"
     },
-    (err, data) => {
-        console.log("push_callback:err: " ,JSON.stringify(err));
-        console.log("push_callback:data: " , JSON.stringify(data));
-        console.log("push_callback: push ok!");
-    }
+    jsonPath: "",
+  },
+  (err, data) => {
+    console.log("push_callback:err: ", JSON.stringify(err));
+    console.log("push_callback:data: ", JSON.stringify(data));
+    console.log("push_callback: push ok!");
+  }
 )
 ```
 
@@ -299,24 +298,24 @@ Requests the component from the component provider.
 
 ```js
 pluginComponentManager.request(
-    {
-        want: {
-            bundleName: "com.example.provider",
-            abilityName: "com.example.provider.MainAbility",
-        },
-        name: "plugintemplate",
-        data: {
-            "key_1": "plugin component test",
-            "key_2": 1111111
-        },
-        jsonPath: "",
+  {
+    want: {
+      bundleName: "com.example.provider",
+      abilityName: "com.example.provider.MainAbility",
     },
-    (err, data) => {
-        console.log("request_callback: componentTemplate.ability=" + data.componentTemplate.ability)
-        console.log("request_callback: componentTemplate.source=" + data.componentTemplate.source)
-        console.log("request_callback: data=" + JSON.stringify(data.data))
-        console.log("request_callback: extraData=" + JSON.stringify(data.extraData))
-    }
+    name: "plugintemplate",
+    data: {
+      "key_1": "plugin component test",
+      "key_2": 1111111
+    },
+    jsonPath: "",
+  },
+  (err, data) => {
+    console.log("request_callback: componentTemplate.ability=" + data.componentTemplate.ability)
+    console.log("request_callback: componentTemplate.source=" + data.componentTemplate.source)
+    console.log("request_callback: data=" + JSON.stringify(data.data))
+    console.log("request_callback: extraData=" + JSON.stringify(data.extraData))
+  }
 )
 ```
 
@@ -342,25 +341,25 @@ Requests the component from the component provider.
 
 ```js
 pluginComponentManager.request(
-    {
-        owner:{
-            bundleName:"com.example.provider",
-            abilityName:"com.example.provider.MainAbility"
-            },
-        target: {
-            bundleName: "com.example.provider",
-            abilityName: "ets/pages/plugin2.js",
-            },
-        name: "plugintemplate",
-        data: {
-                "key_1": " myapplication plugin component test",
-                },
-        jsonPath: "",
+  {
+    owner: {
+      bundleName: "com.example.provider",
+      abilityName: "com.example.provider.MainAbility"
+    },
+    target: {
+      bundleName: "com.example.provider",
+      abilityName: "ets/pages/plugin2.js",
     },
-    (err, data) => {
-        console.log("request_callback: componentTemplate.ability=" + data.componentTemplate.ability)
-        console.log("request_callback: componentTemplate.source=" + data.componentTemplate.source)
-    }
+    name: "plugintemplate",
+    data: {
+      "key_1": " myapplication plugin component test",
+    },
+    jsonPath: "",
+  },
+  (err, data) => {
+    console.log("request_callback: componentTemplate.ability=" + data.componentTemplate.ability)
+    console.log("request_callback: componentTemplate.source=" + data.componentTemplate.source)
+  }
 )
 ```
 
@@ -381,8 +380,8 @@ Listens for events of the request type and returns the requested data, or listen
 **Example**
 
 ```js
-    pluginComponentManager.on("push", onPushListener)
-    pluginComponentManager.on("request", onRequestListener)
+pluginComponentManager.on("push", onPushListener)
+pluginComponentManager.on("request", onRequestListener)
 ```
 
 ## About the external.json File
@@ -397,4 +396,4 @@ The **external.json** file is created by developers. It stores component names a
   "plugintemplate2": "ets/pages/plugintemplate2.js"
 }
 
-```
\ No newline at end of file
+```

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

@@ -320,7 +320,7 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc
 
 | ID  | Error Message|
 | --------- | ------- |
-| 100001    | if UI execution context not found, only throw in standard system. |
+| 100001    | if can not get the delegate, only throw in standard system. |
 | 200002    | if the uri is not exist. |
 
 **Example**
@@ -362,7 +362,7 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc
 
 | ID  | Error Message|
 | --------- | ------- |
-| 100001    | if can not get the delegate, only throw in standard system. |
+| 100001    | if UI execution context not found, only throw in standard system. |
 | 200002    | if the uri is not exist. |
 
 **Example**
@@ -661,8 +661,8 @@ struct Second {
   private content: string = "This is the second page."
   @State text: string = router.getParams()['text']
   @State data: object = router.getParams()['data']
-  @State secondData : string = ''
-  
+  @State secondData: string = ''
+
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
       Text(`${this.content}`)
@@ -670,14 +670,14 @@ struct Second {
         .fontWeight(FontWeight.Bold)
       Text(this.text)
         .fontSize(30)
-        .onClick(()=>{
+        .onClick(() => {
           this.secondData = (this.data.['array'][1]).toString()
         })
-      .margin({top:20})
+        .margin({ top: 20 })
       Text(`This is the data passed from the first page: ${this.secondData}`)
         .fontSize(20)
-        .margin({top:20})
-        .backgroundColor('red')      
+        .margin({ top: 20 })
+        .backgroundColor('red')
     }
     .width('100%')
     .height('100%')
@@ -762,9 +762,9 @@ This API is deprecated since API version 9. You are advised to use [showAlertBef
 **Example**
 
   ```js        
-  router.enableAlertBeforeBackPage({            
-    message: 'Message Info'        
-  });    
+router.enableAlertBeforeBackPage({            
+  message: 'Message Info'        
+});    
   ```
 
 ## router.disableAlertBeforeBackPage<sup>(deprecated)</sup>

en/application-dev/reference/apis/js-apis-system-router.md

@@ -343,8 +343,8 @@ Defines the page routing parameters.
 
 | Name  | Type| Mandatory| Description                                                        |
 | ------ | -------- | ---- | ------------------------------------------------------------ |
-| uri    | string   | Yes  | URI of the target page, in either of the following formats:<br>1. Absolute path, which is provided by the **pages** list in the **config.json** file. Example:<br>- pages/index/index<br> - pages/detail/detail<br>2. Specific path. If the URI is a slash (/), the home page is displayed.|
-| params | object   | No  | Data that needs to be passed to the target page during redirection. The target page can use **router.getParams()** to obtain the passed parameters, for example, **this.keyValue** (**keyValue** is the value of a key in **params**). In the web-like paradigm, these parameters can be directly used on the target page. If the field specified by **key** already exists on the target page, the passed value of the key will be displayed.|
+| uri<sup>7+</sup> | string   | Yes  | URI of the target page, in either of the following formats:<br>1. Absolute path, which is provided by the **pages** list in the **config.json** file. Example:<br>- pages/index/index<br> - pages/detail/detail<br>2. Specific path. If the URI is a slash (/), the home page is displayed.|
+| params<sup>7+</sup> | object   | No  | Data that needs to be passed to the target page during redirection. The target page can use **router.getParams()** to obtain the passed parameters, for example, **this.keyValue** (**keyValue** is the value of a key in **params**). In the web-like paradigm, these parameters can be directly used on the target page. If the field specified by **key** already exists on the target page, the passed value of the key will be displayed.|
 
 
 ## BackRouterOptions
@@ -355,8 +355,8 @@ Defines the parameters for routing back.
 
 | Name  | Type| Mandatory| Description                                                        |
 | ------ | -------- | ---- | ------------------------------------------------------------ |
-| uri    | string   | No  | URI of the page to return to. If the specified page does not exist in the page stack, the application does not respond. If this parameter is not set, the application returns to the previous page.<br>**System capability**: SystemCapability.ArkUI.ArkUI.Full|
-| params | object   | No  | Data that needs to be passed to the target page during redirection.<br>**System capability**: SystemCapability.ArkUI.ArkUI.Lite|
+| uri<sup>7+</sup> | string   | No  | URI of the page to return to. If the specified page does not exist in the page stack, the application does not respond. If this parameter is not set, the application returns to the previous page.<br>**System capability**: SystemCapability.ArkUI.ArkUI.Full|
+| params<sup>7+</sup> | object   | No  | Data that needs to be passed to the target page during redirection.<br>**System capability**: SystemCapability.ArkUI.ArkUI.Lite|
 
 ## RouterState
 

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

@@ -105,7 +105,7 @@ struct ClipAndMaskExample {
 ```ts
 @Entry
 @Component
-struct ProgressMask {
+struct ProgressMaskExample {
   @State progressflag1: boolean = true;
   @State color: Color = 0x01006CDE;
   @State value: number = 10.0;