update docs (14536)

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

en/application-dev/reference/arkui-js/js-components-common-events.md

@@ -99,6 +99,8 @@ Different from private events, universal events can be bound to most components.
 
 When a component triggers an event, the event callback receives an event object by default. You can obtain the corresponding information through the event object.
 
+
+
 | Attribute                  | Type    | Description                                      |
 | -------------------- | ------ | ---------------------------------------- |
 | dataSet<sup>6+</sup> | Object | Custom attribute set defined through [data-*](../arkui-js/js-components-common-attributes.md).|
@@ -241,32 +243,38 @@ Sets a custom drag image.
 **Example**
 
 ```js
-createPixelMap() {
-	let color = new ArrayBuffer(4*96*96);
-	var buffer = new Uint8Array(color);
-	for (var i = 0; i < buffer.length; i++) {
-		buffer[i] = (i + 1) % 255;
-	}
-	let opts = {
-		alphaType:0,
-		editable:true,
-		pixelFormat:4,
-		scaleMode:1,
-		size:{height:96,width:96}
-	}
-	const promise = image.createPixelMap(color,opts);
-	promise.then((data)=> {
-		console.error('-create pixmap has info message:' + JSON.stringify(data));
-		this.pixelMap = data;
-		this.pixelMapReader = data;
-	})
-},
+import image from '@ohos.multimedia.image';
 
-onInit() {
-	this.createPixelMap
-},
-
-dragStart(e) {
-	e.dataTransfer.setDragImage(this.pixelMapReader, 50, 50);
+export default {
+    createPixelMap() {
+        let color = new ArrayBuffer(4 * 96 * 96);
+        var buffer = new Uint8Array(color);
+        for (var i = 0; i < buffer.length; i++) {
+            buffer[i] = (i + 1) % 255;
+        }
+        let opts = {
+            alphaType: 0,
+            editable: true,
+            pixelFormat: 4,
+            scaleMode: 1,
+            size: {
+                height: 96, width: 96
+            }
+        }
+        const promise = image.createPixelMap(color, opts);
+        promise.then((data) => {
+            console.error('-create pixmap has info message:' + JSON.stringify(data));
+            this.pixelMap = data;
+            this.pixelMapReader = data;
+        })
+    },
+
+    onInit() {
+        this.createPixelMap
+    },
+
+    dragStart(e) {
+        e.dataTransfer.setDragImage(this.pixelMapReader, 50, 50);
+    }
 }
 ```

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

@@ -41,4 +41,4 @@ struct LoadingProgressExample {
 }
 ```
 
-![en-us_image_000000111864201](figures/en-us_image_000000111864201.gif)
+![loadProgress](figures/loadProgress.jpeg)

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

@@ -17,6 +17,63 @@ NavRouter()
 
 ## Events
 
-| Name                                                    | Description                                                  |
-| ------------------------------------------------------- | ------------------------------------------------------------ |
-| onStateChange(callback: (isActivated: boolean) => void) | Invoked when the component activation status changes. The value **true** means that component is activated, and **false** means the opposite.<br>**NOTE**<br>After the user clicks **NavRouter**, if the **\<NavRouter>** component is activated and the corresponding **\<NavDestination>** child component loaded, **onStateChange(true)** is called. If the corresponding **\<NavDestination>** child component is no longer displayed, **onStateChange(false)** is called. |
+| Name                                      | Description                                    |
+| ---------------------------------------- | ---------------------------------------- |
+| onStateChange(callback: (isActivated: boolean) => void) | Invoked when the component activation status changes. The value **true** means that component is activated, and **false** means the opposite.<br> **NOTE**<br>After the user clicks **NavRouter**, if the **\<NavRouter>** component is activated and the corresponding **\<NavDestination>** child component loaded, **onStateChange(true)** is called. If the corresponding **\<NavDestination>** child component is no longer displayed, **onStateChange(false)** is called. |
+
+## Example
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct NavRouterExample {
+  private arr: number[] = [0, 1, 2, 3]
+  @State isActive: boolean = false
+  @State dex: number = 0
+
+  build() {
+    Column() {
+      Navigation() {
+        List({ space: 12, initialIndex: 0 }) {
+          ForEach(this.arr, (item: number, index: number) => {
+            ListItem() {
+              NavRouter() {
+                Row() {
+                  Image($r('app.media.icon')).width(30).height(30).borderRadius(30).margin({ left: 3, right: 10 })
+                  Text(`NavRouter${item + 1}`)
+                    .fontSize(22)
+                    .fontWeight(500)
+                    .textAlign(TextAlign.Center)
+                }
+                .width(180)
+                .height(72)
+                .backgroundColor(this.dex === index ? '#ccc' : '#fff')
+                .borderRadius(24)
+
+                NavDestination() {
+                  Text (`I am NavDestination page ${item + 1}`).fontSize (50)
+                  Flex({ direction: FlexDirection.Row }) {
+                    Row() {
+                      Image($r('app.media.icon')).width(40).height(40).borderRadius(40).margin({ right: 15 })
+                      Text('7 classes today').fontSize(30)
+                    }.padding({ left: 15 })
+                  }
+                }.backgroundColor('#ccc')
+                .title(`NavDestination${item + 1}`)
+              }.onStateChange((isActivated: boolean) => {
+                this.dex = index
+              })
+            }
+          }, item => item)
+        }
+        .height('100%')
+        .margin({ top: 12, left: 12 })
+      }
+      .mode(NavigationMode.Split)
+      .hideTitleBar(true)
+      .hideToolBar(true)
+    }.height('100%')
+  }
+}
+```

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

@@ -3,15 +3,11 @@
 The **\<Flex>** component allows for flexible layout of child components.
 
 > **NOTE**
+> 
 > - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 > - The **\<Flex>** component adapts the layout of flex items during rendering. This may affect the performance. Therefore, you are advised to use **[\<Column>](ts-container-column.md)** or **[\<Row>](ts-container-row.md)** instead under scenarios where consistently high performance is required.
 
 
-## Required Permissions
-
-None
-
-
 ## Child Components
 
 Supported
@@ -23,14 +19,15 @@ Flex(value?: { direction?: FlexDirection, wrap?: FlexWrap,  justifyContent?: Fle
 
 Creates a standard **\<Flex>** component.
 
-- Parameters
-  | Name           | Type                                    | Mandatory  | Default Value              | Description                                    |
-  | -------------- | ---------------------------------------- | ---- | ----------------- | ---------------------------------------- |
-  | direction      | [FlexDirection](ts-appendix-enums.md#flexdirection) | No   | FlexDirection.Row | Direction in which child components are arranged in the **\<Flex>** component, that is, the direction of the main axis.                |
-  | wrap           | [FlexWrap](ts-appendix-enums.md#flexwrap)  | No   | FlexWrap.NoWrap   | Whether the **\<Flex>** component has a single line or multiple lines.                    |
-  | justifyContent | [FlexAlign](ts-appendix-enums.md#flexalign) | No   | FlexAlign.Start   | Alignment mode of the child components in the **\<Flex>** component along the main axis.                     |
-  | alignItems     | [ItemAlign](ts-appendix-enums.md#itemalign) | No   | ItemAlign.Start | Alignment mode of the child components in the **\<Flex>** component along the cross axis.                    |
-  | alignContent   | [FlexAlign](ts-appendix-enums.md#flexalign) | No   | FlexAlign.Start   | Alignment mode of the child components in a multi-line **\<Flex>** component along the cross axis. This parameter is valid only when **wrap** is set to **Wrap** or **WrapReverse**. |
+**Parameters**
+
+| Name           | Type                                    | Mandatory  | Default Value              | Description                                    |
+| -------------- | ---------------------------------------- | ---- | ----------------- | ---------------------------------------- |
+| direction      | [FlexDirection](ts-appendix-enums.md#flexdirection) | No   | FlexDirection.Row | Direction in which child components are arranged in the **\<Flex>** component, that is, the direction of the main axis.                |
+| wrap           | [FlexWrap](ts-appendix-enums.md#flexwrap)  | No   | FlexWrap.NoWrap   | Whether the **\<Flex>** component has a single line or multiple lines.                    |
+| justifyContent | [FlexAlign](ts-appendix-enums.md#flexalign) | No   | FlexAlign.Start   | Alignment mode of the child components in the **\<Flex>** component along the main axis.                     |
+| alignItems     | [ItemAlign](ts-appendix-enums.md#itemalign) | No   | ItemAlign.Start | Alignment mode of the child components in the **\<Flex>** component along the cross axis.                    |
+| alignContent   | [FlexAlign](ts-appendix-enums.md#flexalign) | No   | FlexAlign.Start   | Alignment mode of the child components in a multi-line **\<Flex>** component along the cross axis. This parameter is valid only when **wrap** is set to **Wrap** or **WrapReverse**. |
 
 
 ## Example
@@ -96,7 +93,7 @@ struct FlexExample1 {
 }
 ```
 
-![en-us_image_0000001256978365](figures/en-us_image_0000001256978365.gif)
+![en-us_image_0000001219744189](figures/en-us_image_0000001219744189.PNG)
 
 ```ts
 // xxx.ets
@@ -142,7 +139,7 @@ struct FlexExample2 {
 }
 ```
 
-![en-us_image_0000001211898500](figures/en-us_image_0000001211898500.png)
+![en-us_image_0000001174264366](figures/en-us_image_0000001174264366.png)
 
 ```ts
 // xxx.ets
@@ -191,7 +188,7 @@ struct FlexExample3 {
 }
 ```
 
-![en-us_image_0000001212218462](figures/en-us_image_0000001212218462.gif)
+![en-us_image_0000001174582854](figures/en-us_image_0000001174582854.PNG)
 
 ```ts
 // xxx.ets
@@ -289,4 +286,4 @@ struct FlexExample5 {
 }
 ```
 
-![en-us_image_0000001256858413](figures/en-us_image_0000001256858413.gif)
+![en-us_image_0000001174422906](figures/en-us_image_0000001174422906.PNG)

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

@@ -74,9 +74,8 @@ struct PathExample {
         .width('90%')
       // Draw a straight line whose length is 900 px and width is 3 vp.
       Path()
-        .width(300)
         .height(10)
-        .commands('M0 0 L900 0')
+        .commands('M0 0 L600 0')
         .stroke(Color.Black)
         .strokeWidth(3)
 
@@ -85,55 +84,43 @@ struct PathExample {
         .fontColor(0xCCCCCC)
         .width('90%')
       // Draw a straight line.
-      Row({ space: 20 }) {
+      Flex({ justifyContent: FlexAlign.SpaceBetween }) {
         Path()
-          .width(100)
-          .height(100)
-          .commands('M150 0 L300 300 L0 300 Z')
+          .commands('M100 0 L200 240 L0 240 Z')
           .fillOpacity(0)
           .stroke(Color.Black)
           .strokeWidth(3)
         Path()
-          .width(100)
-          .height(100)
-          .commands('M0 0 H300 V300 H0 Z')
+          .commands('M0 0 H200 V200 H0 Z')
           .fillOpacity(0)
           .stroke(Color.Black)
           .strokeWidth(3)
         Path()
-          .width(100)
-          .height(100)
-          .commands('M150 0 L0 150 L60 300 L240 300 L300 150 Z')
+          .commands('M100 0 L0 100 L50 200 L150 200 L200 100 Z')
           .fillOpacity(0)
           .stroke(Color.Black)
           .strokeWidth(3)
-      }.width('100%')
+      }.width('95%')
 
       Text('Curve graphics').fontSize(11).fontColor(0xCCCCCC).width('90%')
       // Draw an arc.
-      Row({ space: 20 }) {
+      Flex({ justifyContent: FlexAlign.SpaceBetween }) {
         Path()
-          .width(100)
-          .height(100)
-          .commands("M0 300 S150 0 300 300 Z")
+          .commands("M0 300 S100 0 240 300 Z")
           .fillOpacity(0)
           .stroke(Color.Black)
           .strokeWidth(3)
         Path()
-          .width(100)
-          .height(100)
-          .commands('M0 150 C0 150 150 0 300 150 L150 300 Z')
+          .commands('M0 150 C0 100 140 0 200 150 L100 300 Z')
           .fillOpacity(0)
           .stroke(Color.Black)
           .strokeWidth(3)
         Path()
-          .width(100)
-          .height(100)
-          .commands('M0 200 A30 20 20 0 0 250 200 Z')
+          .commands('M0 100 A30 20 20 0 0 200 100 Z')
           .fillOpacity(0)
           .stroke(Color.Black)
           .strokeWidth(3)
-      }
+      }.width('95%')
     }.width('100%')
     .margin({ top: 5 })
   }

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

@@ -48,7 +48,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 | muted     | boolean                                  | Whether to mute the video.<br>Default value: **false**         |
 | autoPlay  | boolean                                  | Whether to enable auto play.<br>Default value: **false**       |
 | controls  | boolean                                  | Whether to display the video playback control bar.<br>Default value: **true**|
-| objectFit | [ImageFit](ts-basic-components-image.md) | Video scale type.<br>Default value: **Cover**     |
+| objectFit | [ImageFit](ts-appendix-enums.md#imagefit) | Video scale type.<br>Default value: **Cover**     |
 | loop      | boolean                                  | Whether to repeat the video.<br>Default value: **false**   |
 
 ## Events
@@ -243,5 +243,3 @@ struct VideoCreateComponent {
   }
 }
 ```
-
-<!--no_check-->
\ No newline at end of file

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

@@ -23,7 +23,7 @@ Defines and shows the action sheet.
 | autoCancel | boolean                           | No    | Whether to close the dialog box when the overlay is clicked.<br>Default value: **true**|
 | confirm    | {<br>value: [ResourceStr](ts-types.md#resourcestr),<br>action: () =&gt; void<br>} | No | Text content of the confirm button and callback upon button clicking.<br>Default value:<br>**value**: button text.<br>**action**: callback upon button clicking.|
 | cancel     | () =&gt; void           | No    | Callback invoked when the dialog box is closed after the overlay is clicked.  |
-| alignment  | [DialogAlignment](ts-methods-custom-dialog-box.md#dialogalignment) | No    |  Alignment mode of the dialog box in the vertical direction.<br>Default value: **DialogAlignment.Bottom**|
+| alignment  | [DialogAlignment](ts-methods-alert-dialog-box.md#dialogalignment) | No    |  Alignment mode of the dialog box in the vertical direction.<br>Default value: **DialogAlignment.Bottom**|
 | offset     | {<br>dx: Length,<br>dy: Length<br>} | No     | Offset of the dialog box relative to the alignment position.<br>Default value: {<br>dx: 0,<br>dy: 0<br>} |
 | sheets     | Array&lt;SheetInfo&gt; | Yes      | Options in the dialog box. Each option supports the image, text, and callback.|
 

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

@@ -24,9 +24,9 @@ struct Index {
   @Builder MenuBuilder() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
       Button('Test ContextMenu1')
-      Divider().strokeWidth(2).margin(5)
+      Divider().strokeWidth(2).margin(5).color(Color.Black)
       Button('Test ContextMenu2')
-      Divider().strokeWidth(2).margin(5)
+      Divider().strokeWidth(2).margin(5).color(Color.Black)
       Button('Test ContextMenu3')
     }
     .width(200)

en/application-dev/reference/arkui-ts/ts-state-management.md

 # State Management with Application-level Variables
 
-The state management module provides APIs for data storage, persistent data management, Ability data storage, and environment status required by applications. The APIs for Ability data storage are supported since API version 9.
+The state management module provides APIs for data storage, persistent data management, **Ability** data storage, and environment status required by applications. The APIs for **Ability** data storage are supported since API version 9.
 
 > **NOTE**
 >
@@ -77,7 +77,7 @@ let simple = AppStorage.Prop('simpleProp')
 
 ### SetAndProp
 
-SetAndProp\<S>(propName: string, defaultValue: S): SubscribedAbstractProperty\<S>;
+SetAndProp\<S>(propName: string, defaultValue: S): SubscribedAbstractProperty\<S>
 
 Works in a way similar to the **Prop** API. If the current key is stored in the **AppStorage**, the value corresponding to the key is returned. If the key has not been created, a **Prop** instance corresponding to the default value is created and returned.
 
@@ -162,7 +162,7 @@ Replaces the value of a saved key.
 | boolean | Returns **true** and the value if the key exists; returns **false** otherwise.|
 
 ```ts
-let simple = AppStorage.Set('simpleProp', 121);
+let simple = AppStorage.Set('simpleProp', 121)
 ```
 
 ### SetOrCreate
@@ -313,7 +313,7 @@ Creates and initializes a **LocalStorage** object.
 | initializingProperties | Object | No   | All object attributes and their values returned by **object.keys(obj)**.|
 
 ```ts
-this.storage = new LocalStorage()
+let storage = new LocalStorage()
 ```
 
 ### GetShared<sup>9+</sup>
@@ -353,8 +353,8 @@ Checks whether the **LocalStorage** contains the specified attribute.
 | boolean | Returns whether the attribute exists.|
 
 ```ts
-this.storage = new LocalStorage()
-this.storage.has('storageSimpleProp')
+let storage = new LocalStorage()
+storage.has('storageSimpleProp')
 ```
 
 ### get<sup>9+</sup>
@@ -376,8 +376,8 @@ Obtains the value of the specified key.
 | T \| undefined | Returns the value of the specified key if it exists; returns **undefined** otherwise.|
 
 ```ts
-this.storage = new LocalStorage()
-let simpleValue = this.storage.get('storageSimpleProp')
+let storage = new LocalStorage()
+let simpleValue = storage.get('storageSimpleProp')
 ```
 
 ### set<sup>9+</sup>
@@ -400,8 +400,8 @@ Sets a new value for the specified key.
 | boolean | Returns **true** and the value if the key exists; returns **false** otherwise.|
 
 ```ts
-this.storage = new LocalStorage()
-this.storage.set('storageSimpleProp', 121)
+let storage = new LocalStorage()
+storage.set('storageSimpleProp', 121)
 ```
 
 ### setOrCreate<sup>9+</sup>
@@ -424,8 +424,8 @@ Creates or updates the value of the specified key.
 | boolean | Updates the value of the attribute and returns **true** if an attribute that has the same name as the specified key exists; creates an attribute with the specified value as its default value and returns false otherwise. **undefined** and **null** are not allowed.|
 
 ```ts
-this.storage = new LocalStorage()
-this.storage.setOrCreate('storageSimpleProp', 121)
+let storage = new LocalStorage()
+storage.setOrCreate('storageSimpleProp', 121)
 ```
 
 ### link<sup>9+</sup>
@@ -447,8 +447,8 @@ Establishes two-way data binding between an attribute and this **LocalStorage**
 | T    | Returns two-way binding to this attribute if there is data with a given key. This means that attribute changes made by a variable or component will be synchronized to the **LocalStorage**, and attribute changes made through the **LocalStorage** will be synchronized to the variable or component. returns **undefined** if the attribute with the given key does not exist.|
 
 ```ts
-this.storage = new LocalStorage()
-let localStorage = this.storage.link('storageSimpleProp')
+let storage = new LocalStorage()
+let localStorage = storage.link('storageSimpleProp')
 ```
 
 ### setAndLink<sup>9+</sup>
@@ -471,8 +471,8 @@ Works in a way similar to the **Link** API.
 | @Link | Returns the value corresponding to the key if the current key is stored in the **LocalStorage**; creates and returns a **Link** instance corresponding to the default value if the key has not been created.|
 
 ```ts
-this.storage = new LocalStorage()
-let localStorage = this.storage.setAndLink('storageSimpleProp', 121)
+let storage = new LocalStorage()
+let localStorage = storage.setAndLink('storageSimpleProp', 121)
 ```
 
 ### prop<sup>9+</sup>
@@ -494,8 +494,8 @@ Establishes one-way data binding with an attribute to update its status.
 | @Prop | Returns one-way binding to an attribute with a given key if the attribute exists; returns **undefined** otherwise. One-way binding means that attribute changes made through the **LocalStorage** will be synchronized to the variable or component, but attribute changes made by the variable or component will not be synchronized to the **LocalStorage**. This API returns immutable variables and is applicable to mutable and immutable state variables alike. |
 
 ```ts
-this.storage = new LocalStorage()
-let localStorage = this.storage.prop('storageSimpleProp')
+let storage = new LocalStorage()
+let localStorage = storage.prop('storageSimpleProp')
 ```
 
 ### setAndProp<sup>9+</sup>
@@ -518,8 +518,8 @@ Works in a way similar to the **Prop** API.
 | @Prop | Returns the value corresponding to the given key if the key is stored in the **LocalStorage**; creates and returns a **Prop** instance corresponding to the default value if the key has not been created.|
 
 ```ts
-this.storage = new LocalStorage()
-let localStorage = this.storage.setAndProp('storageSimpleProp', 121)
+let storage = new LocalStorage()
+let localStorage = storage.setAndProp('storageSimpleProp', 121)
 ```
 
 ### delete<sup>9+</sup>
@@ -538,11 +538,11 @@ Deletes the key-value pair that matches the specified key.
 
 | Type     | Description                                      |
 | ------- | ---------------------------------------- |
-| boolean | Returns **true** if the key-value pair exists and is successfully deleted; returns **false** if the key-value pair does not exist, fails to be deleted, or is being referenced by a state variable.|
+| boolean | Returns **true** if the key-value pair exists and is successfully deleted; returns **false** otherwise.|
 
 ```ts
-this.storage = new LocalStorage()
-this.storage.delete('storageSimpleProp')
+let storage = new LocalStorage()
+storage.delete('storageSimpleProp')
 ```
 
 ### keys<sup>9+</sup>
@@ -558,8 +558,8 @@ Searches for all keys.
 | array\<string> | Returns an array of strings containing all keys that are not serializable.|
 
 ```ts
-this.storage = new LocalStorage()
-let simple = this.storage.keys()
+let storage = new LocalStorage()
+let simple = storage.keys()
 ```
 
 ### size<sup>9+</sup>
@@ -575,8 +575,8 @@ Obtains the number of existing key-value pairs.
 | number | Returns the number of key-value pairs.|
 
 ```ts
-this.storage = new LocalStorage()
-let simple = this.storage.size()
+let storage = new LocalStorage()
+let simple = storage.size()
 ```
 
 ### Clear<sup>9+</sup>
@@ -592,8 +592,8 @@ Deletes all attributes.
 | boolean | Returns **true** if all attributes are deleted; returns **false** if any of the attributes is being referenced by a state variable.|
 
 ```ts
-this.storage = new LocalStorage()
-let simple = this.storage.clear()
+let storage = new LocalStorage()
+let simple = storage.clear()
 ```
 
 ## PersistentStorage
@@ -612,7 +612,7 @@ Creates a **persistentstorage** object.
 | storage    | Storage    | Yes   | **Storage** object.    |
 
 ```ts
-this.persistentstorage = new PersistentStorage(AppStorage,Storage)
+let persistentstorage = new PersistentStorage(AppStorage,Storage)
 ```
 
 ### PersistProp
@@ -650,7 +650,7 @@ PersistentStorage.DeleteProp('highScore')
 
 ### PersistProps
 
-PersistProps(properties: {key: string, defaultValue: any}[]): void;
+PersistProps(properties: {key: string, defaultValue: any}[]): void
 
 Changes the attributes that match the specified keys to persistent data in the **AppStorage**.
 

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

@@ -16,7 +16,7 @@ You can draw an image around a component.
 
 | Name        | Type                                    | Description                                     |
 | ---------- | ---------------------------------------- | --------------------------------------- |
-| source     | string \| [Resource](ts-types.md#resource) \| [linearGradient](ts-universal-attributes-gradient-color.md) | Source or gradient color of the border image.                           |
+| source     | string \| [Resource](ts-types.md#resource) \| [linearGradient](ts-universal-attributes-gradient-color.md) | Source or gradient color of the border image.<br>**NOTE**<br>The border image source applies only to container components, such as **\<Row>**, **\<Column>**, and **\<Flex>**.|
 | slice      | [Length](ts-types.md#length) \| [EdgeWidths](ts-types.md#edgewidths9) | Slice width of the border image.<br>Default value: **0**                  |
 | width      | [Length](ts-types.md#length) \| [EdgeWidths](ts-types.md#edgewidths9) | Width of the border image.<br>Default value: **0**                    |
 | outset     | [Length](ts-types.md#length) \| [EdgeWidths](ts-types.md#edgewidths9) | Amount by which the border image is extended beyond the border box.<br>Default value: **0**                |
@@ -33,39 +33,31 @@ You can draw an image around a component.
 | Round   | The source image's slices are tiled to fill the border box. Tiles may be compressed when needed.|
 | Space   | The source image's slices are tiled to fill the border box. Extra space will be filled in between tiles.  |
 
-
 ## Example
 
+### Example 1
+
+
 ```ts
 // xxx.ets
 @Entry
 @Component
 struct Index {
-  @State outSetValue: number = 40
-
   build() {
     Row() {
       Column() {
-        Text('This is borderImage.').textAlign(TextAlign.Center).fontSize(50)
+        Text('This is gradient color.').textAlign(TextAlign.Center).height(50).width(200)
           .borderImage({
-            source: $r('app.media.heart'),
-            slice: `${this.outSetValue}%`,
-            width: `${this.outSetValue}px`,
-            outset: '5px',
-            repeat: RepeatMode.Repeat,
+            source: {
+              angle: 90,
+              direction: GradientDirection.Left,
+              colors: [[0xAEE1E1, 0.0], [0xD3E0DC, 0.3], [0xFCD1D1, 1.0]]
+            },
+            slice: { top: 10, bottom: 10, left: 10, right: 10 },
+            width: { top: "10px", bottom: "10px", left: "10px", right: "10px" },
+            repeat: RepeatMode.Stretch,
             fill: false
           })
-        Slider({
-          value: this.outSetValue,
-          min: 0,
-          max: 100,
-          style: SliderStyle.OutSet
-        })
-          .margin({ top: 30 })
-          .onChange((value: number, mode: SliderChangeMode) => {
-            this.outSetValue = value
-            console.info('value:' + value + 'mode:' + mode.toString())
-          })
       }
       .width('100%')
     }
@@ -74,28 +66,42 @@ struct Index {
 }
 ```
 
-![en-us_image_borderImage](figures/borderImage.gif)
+![en-us_image_borderImageGradient](figures/borderImageGradient.png)
 
+### Example 2
 
 ```ts
 // xxx.ets
 @Entry
 @Component
 struct Index {
+  @State outSetValue: number = 40
+
   build() {
     Row() {
       Column() {
-        Text('This is gradient color.').textAlign(TextAlign.Center).width(68)
-          .borderImage({
-            source: {
-              angle: 90,
-              direction: GradientDirection.Left,
-              colors: [[0xAEE1E1, 0.0], [0xD3E0DC, 0.3], [0xFCD1D1, 1.0]]
-            },
-            slice: { top: 10, bottom: 10, left: 10, right: 10 },
-            width: { top: "10px", bottom: "10px", left: "10px", right: "10px" },
-            repeat: RepeatMode.Stretch,
-            fill: false
+        Row() {
+          Text('This is borderImage.').textAlign(TextAlign.Center).fontSize(50)
+        }
+        .borderImage({
+          source: $r('app.media.icon'),
+          slice: `${this.outSetValue}%`,
+          width: `${this.outSetValue}px`,
+          outset: '5px',
+          repeat: RepeatMode.Repeat,
+          fill: false
+        })
+
+        Slider({
+          value: this.outSetValue,
+          min: 0,
+          max: 100,
+          style: SliderStyle.OutSet
+        })
+          .margin({ top: 30 })
+          .onChange((value: number, mode: SliderChangeMode) => {
+            this.outSetValue = value
+            console.info('value:' + value + 'mode:' + mode.toString())
           })
       }
       .width('100%')
@@ -105,4 +111,4 @@ struct Index {
 }
 ```
 
-![en-us_image_borderImageGradient](figures/borderImageGradient.png)
+![zh-cn_image_borderImage](figures/borderImage.gif)

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

@@ -12,7 +12,7 @@ Layout constraints refer to constraints on the aspect ratio and display priority
 | Name             | Type  | Description                                      |
 | --------------- | ------ | ---------------------------------------- |
 | aspectRatio     | number | Aspect ratio of the component, which can be obtained using the following formula: Width/Height.                             |
-| displayPriority | number | Display priority for the component in the layout container. When the space of the parent container is insufficient, the component with a lower priority is hidden.<br>The digits after the decimal point are not counted in determining the display priority. That is, numbers in the [x, x + 1) range are considered to represent the same priority. For example, **1.0** and **1.9** represent the same priority.<br>**NOTE**<br>This attribute is valid only for the **\<Row>**, **\<Column>**, and **\<Flex>** (single-row) container components. |
+| displayPriority | number | Display priority for the component in the layout container. When the space of the parent container is insufficient, the component with a lower priority is hidden.<br>The digits after the decimal point are not counted in determining the display priority. That is, numbers in the [x, x + 1) range are considered to represent the same priority. For example, **1.0** and **1.9** represent the same priority.<br>**NOTE**<br>This attribute is valid only for the **\<Row>**, **\<Column>**, and **\<Flex>** (single-row) container components.|
 
 
 ## Example
@@ -55,6 +55,7 @@ struct AspectRatioExample {
             Text(item)
               .backgroundColor(0xbbb2cb)
               .fontSize(40)
+              .height(160)
               .aspectRatio(1.5)
           }
         }, item => item)
@@ -69,12 +70,10 @@ struct AspectRatioExample {
 }
 ```
 
-**Figure 1** Portrait display
-
+**Figure 1** Portrait display<br>
 ![en-us_image_0000001256978379](figures/en-us_image_0000001256978379.gif)
 
-**Figure 2** Landscape display
-
+**Figure 2** Landscape display<br>
 ![en-us_image_0000001212218476](figures/en-us_image_0000001212218476.gif)
 
 ```ts

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

@@ -14,7 +14,7 @@ Transformation attributes allow you to rotate, translate, scale, or transform a
 | rotate    | {<br>x?: number,<br>y?: number,<br>z?: number,<br>angle?: number \| string,<br>centerX?: number \| string,<br>centerY?: number \| string<br>} | Rotation axis. A positive angle indicates a clockwise rotation, and a negative angle indicates a counterclockwise rotation. The default value is **0**. **centerX** and **centerY** are used to set the rotation center point.<br>Default value:<br>{<br>x: 0,<br>y: 0,<br>z: 0,<br>angle: 0,<br>centerX: '50%',<br>centerY: '50%'<br>} |
 | translate | {<br>x?: number \| string,<br>y?: number \| string,<br>z? : number \| string<br>} | Translation distance along the x-, y-, and z-axis. The translation direction is determined by the positive and negative values. The value cannot be a percentage.<br>Default value:<br>{<br>x: 0,<br>y: 0,<br>z: 0<br>} |
 | scale     | {<br>x?: number,<br>y?: number,<br>z?: number,<br>centerX?: number \| string,<br>centerY?: number \| string<br>} | Scale ratio along the x-, y-, and z-axis. The default value is **1**. **centerX** and **centerY** are used to set the scale center point.<br>Default value:<br>{<br>x: 1,<br>y: 1,<br>z: 1,<br>centerX:'50%',<br>centerY:'50%'<br>} |
-| transform | Matrix4Transit                 | Transformation matrix of the component.                                    |
+| transform | [Matrix4Transit](../apis/js-apis-matrix4.md)                 | Transformation matrix of the component.                                    |
 
 
 ## Example
@@ -31,13 +31,13 @@ struct TransformExample {
       Text('rotate').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(14)
       Row()
         .rotate({
-          x: 1,
-          y: 1,
+          x: 0,
+          y: 0,
           z: 1,
           centerX: '50%',
           centerY: '50%',
           angle: 300
-        }) // The component rotates around the center point of the rotation axis (1,1,1) clockwise by 300 degrees.
+        }) // The component rotates around the center point of the rotation axis (0,0,1) clockwise by 300 degrees.
         .width(100).height(100).backgroundColor(0xAFEEEE)
 
       Text('translate').width('90%').fontColor(0xCCCCCC).padding(10).fontSize(14)

en/application-dev/ui/ui-js-animate-background-position-style.md

@@ -27,6 +27,7 @@ By changing the **background-position** attribute (where the first value is the
 .content{
   width: 400px;
   height: 400px;
+  /* The aspect ratio 1:1 is not recommended. */
   background-image: url('common/images/bg-tv.jpg');
   background-size: 100%;
   background-repeat: no-repeat;

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

@@ -228,6 +228,8 @@ Globally define the canvas (**el**) and brush (**ctx**), and create a rectangle
 ```css
 /* xxx.css */
 .container{
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -251,7 +253,6 @@ select{
 
 ```js
 // xxx.js
-import prompt from '@system.prompt';
 export default {
   data:{
     el: null,
@@ -596,7 +597,6 @@ After creating an image object, use the **drawImage** attribute to draw the imag
 /* xxx.css */
 .container{
   width: 100%;
-  height: 100%;
   flex-direction: column;
   background-color: #F1F3F5;
   align-items: center;

en/application-dev/ui/ui-ts-animation-feature.md

@@ -99,7 +99,7 @@ The splash screen animation refers to the fade-in and fade-out of the logo. Afte
       .opacity(this.opacityValue)
       .onAppear(() => {
         animateTo({
-         duration: 2000, 
+         duration: 1000, 
          curve: this.curve1, 
          delay: 100, 
         }, () => {
@@ -111,7 +111,7 @@ The splash screen animation refers to the fade-in and fade-out of the logo. Afte
    }
    ```
 
-5. After the splash screen animation plays for 1 second, the **FoodCategoryList** page is displayed. Set the **onFinish** callback of **animateTo**. Invoke the **setTimeout** API of the timer. After a delay of 1s, call **router.replaceUrl** to display the **FoodCategoryList** page.
+5. After the splash screen animation plays for 1 second, the **FoodCategoryList** page is displayed. Set the **onFinish** callback of **animateTo**. Invoke the **setTimeout** API of the timer. After a delay of 1s, call **router.replace** to display the **FoodCategoryList** page.
 
    ```ts
    import router from '@ohos.router'
@@ -170,9 +170,11 @@ The splash screen animation refers to the fade-in and fade-out of the logo. Afte
            Path()
              .commands('M162 128.7 a222 222 0 0 1 100.8 374.4 H198 a36 36 0 0 3 -36 -36')
              .fill(Color.White)
+             .stroke(Color.Transparent)
            Path()
              .commands(this.pathCommands1)
              .fill('none')
+             .stroke(Color.Transparent)
              .linearGradient(
              {
                angle: 30,
@@ -183,6 +185,7 @@ The splash screen animation refers to the fade-in and fade-out of the logo. Afte
            Path()
              .commands(this.pathCommands2)
              .fill('none')
+             .stroke(Color.Transparent)
              .linearGradient(
              {
                angle: 50,
@@ -227,10 +230,10 @@ The splash screen animation refers to the fade-in and fade-out of the logo. Afte
            angle: 180,
            colors: [['#BDE895', 0.1], ["#95DE7F", 0.6], ["#7AB967", 1]]
          })
-     }
+    }
    }
    ```
-
+   
    ![animation-feature](figures/animation-feature.gif)
 
 ## Page Transition Animation

en/application-dev/ui/ui-ts-drawing-feature.md

@@ -92,7 +92,7 @@ In the food component table on the **FoodDetail** page, each food group is label
 
 In addition to drawing basic geometric shapes, you can also use the **\<Path>** component to draw a custom path. The following describes how to draw an application logo.
 
-1. Create a page **Logo.ets** in the **pages** folder.
+1. Create the page **Logo.ets** in the **pages** folder.
 
    ![drawing-feature1](figures/drawing-feature1.png)
 
@@ -217,10 +217,11 @@ In addition to drawing basic geometric shapes, you can also use the **\<Path>**
 
    ![drawing-feature4](figures/drawing-feature4.png)
 
-   In the sample code, the fill color is white.
+   In the sample code, the fill color is white and the stroke is transparent.
 
    ```ts
    .fill(Color.White)
+   .stroke(Color.Transparent)
    ```
 
    ```ts
@@ -233,6 +234,7 @@ In addition to drawing basic geometric shapes, you can also use the **\<Path>**
            Path()
              .commands('M162 128.7 a222 222 0 0 1 100.8 374.4 H198 a36 36 0 0 3 -36 -36')
              .fill(Color.White)
+             .stroke(Color.Transparent)
          }
          .height('630px')
          .width('630px')
@@ -256,6 +258,7 @@ In addition to drawing basic geometric shapes, you can also use the **\<Path>**
    Path()
      .commands('M319.5 128.1 c103.5 0 187.5 84 187.5 187.5 v15 a172.5 172.5 0 0 3 -172.5 172.5 H198 a36 36 0 0 3 -13.8 -1 207 207 0 0 0 87 -372 h48.3 z')
      .fill('none')
+     .stroke(Corlor.Transparent)
      .linearGradient(
      {
        angle: 30,
@@ -276,6 +279,7 @@ In addition to drawing basic geometric shapes, you can also use the **\<Path>**
            Path()
              .commands(this.pathCommands1)
              .fill('none')
+             .stroke(Color.Transparent)
              .linearGradient(
              {
                angle: 30,
@@ -303,10 +307,12 @@ In addition to drawing basic geometric shapes, you can also use the **\<Path>**
            Path()
              .commands('M162 128.7 a222 222 0 0 1 100.8 374.4 H198 a36 36 0 0 3 -36 -36')
              .fill(Color.White)
+             .stroke(Color.Transparent)
    
            Path()
              .commands(this.pathCommands1)
              .fill('none')
+             .stroke(Color.Transparent)
              .linearGradient(
              {
                angle: 30,
@@ -317,6 +323,7 @@ In addition to drawing basic geometric shapes, you can also use the **\<Path>**
            Path()
              .commands(this.pathCommands2)
              .fill('none')
+             .stroke(Color.Transparent)
              .linearGradient(
              {
                angle: 50,
@@ -348,33 +355,37 @@ In addition to drawing basic geometric shapes, you can also use the **\<Path>**
    @Entry
    @Component
    struct Logo {
-     private pathCommands1:string = 'M319.5 128.1 c103.5 0 187.5 84 187.5 187.5 v15 a172.5 172.5 0 0 3 -172.5 172.5 H198 a36 36 0 0 3 -13.8 -1 207 207 0 0 0 87 -372 h48.3 z'
-     private pathCommands2:string = 'M270.6 128.1 h48.6 c51.6 0 98.4 21 132.3 54.6 a411 411 0 0 3 -45.6 123 c-25.2 45.6 -56.4 84 -87.6 110.4 a206.1 206.1 0 0 0 -47.7 -288 z'
+     private pathCommands1: string = 'M319.5 128.1 c103.5 0 187.5 84 187.5 187.5 v15 a172.5 172.5 0 0 3 -172.5 172.5 H198 a36 36 0 0 3 -13.8 -1 207 207 0 0 0 87 -372 h48.3 z'
+     private pathCommands2: string = 'M270.6 128.1 h48.6 c51.6 0 98.4 21 132.3 54.6 a411 411 0 0 3 -45.6 123 c-25.2 45.6 -56.4 84 -87.6 110.4 a206.1 206.1 0 0 0 -47.7 -288 z'
+   
      build() {
        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
          Shape() {
            Path()
              .commands('M162 128.7 a222 222 0 0 1 100.8 374.4 H198 a36 36 0 0 3 -36 -36')
              .fill(Color.White)
+             .stroke(Color.Transparent)
    
            Path()
              .commands(this.pathCommands1)
              .fill('none')
+             .stroke(Color.Transparent)
              .linearGradient(
-             {
-               angle: 30,
-               colors: [["#C4FFA0", 0],  ["#ffffff", 1]]
-             })
+               {
+                 angle: 30,
+                 colors: [["#C4FFA0", 0], ["#ffffff", 1]]
+               })
              .clip(new Path().commands(this.pathCommands1))
    
            Path()
              .commands(this.pathCommands2)
              .fill('none')
+             .stroke(Color.Transparent)
              .linearGradient(
-             {
-               angle: 50,
-               colors: [['#8CC36A', 0.1], ["#B3EB90", 0.4],  ["#ffffff", 0.7]]
-             })
+               {
+                 angle: 50,
+                 colors: [['#8CC36A', 0.1], ["#B3EB90", 0.4], ["#ffffff", 0.7]]
+               })
              .clip(new Path().commands(this.pathCommands2))
          }
          .height('630px')
@@ -383,22 +394,22 @@ In addition to drawing basic geometric shapes, you can also use the **\<Path>**
          Text('Healthy Diet')
            .fontSize(26)
            .fontColor(Color.White)
-           .margin({ top:300 })
+           .margin({ top: 300 })
    
          Text('Healthy life comes from a balanced diet')
            .fontSize(17)
            .fontColor(Color.White)
-           .margin({ top:4 })
+           .margin({ top: 4 })
        }
        .width('100%')
        .height('100%')
        .linearGradient(
          {
            angle: 180,
-           colors: [['#BDE895', 0.1], ["#95DE7F", 0.6],  ["#7AB967", 1]]
-         })
+           colors: [['#BDE895', 0.1], ["#95DE7F", 0.6], ["#7AB967", 1]]
+        })
      }
    }
    ```
-
+   
    ![drawing-feature8](figures/drawing-feature8.png)

en/application-dev/ui/ui-ts-layout-flex.md

@@ -356,7 +356,7 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { // The it
 }.width('90%').height(220).backgroundColor(0xAFEEEE)
 ```
 
-![](figures/alignself.png)
+![alignself](figures/alignself.png)
 
 In the preceding example, both **alignItems** of the **\<Flex>** component and the **alignSelf** attribute of the child component are set. In this case, the **alignSelf** settings take effect.
 
@@ -452,7 +452,7 @@ Use the **alignContent** parameter to set how space is distributed between and a
 - **FlexAlign.SpaceEvenly**: The items are evenly distributed in the container along the cross axis. The spacing between each two adjacent items, the spacing between the start edge and the first item, and the spacing between the end edge and the last item, are the same.
 
     ```ts
-    Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceAround }) {
+    Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceEvenly }) {
       Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)
       Text('2').width('60%').height(20).backgroundColor(0xD2B48C)
       Text('3').width('40%').height(20).backgroundColor(0xD2B48C)
@@ -496,7 +496,7 @@ When the size of the container in the flex layout is not large enough, the follo
   }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
   ```
   
-  ![](figures/flexbasis.png)
+  ![flexbasis](figures/flexbasis.png)
 
 - **flexGrow**: percentage of the flex layout's remaining space that is allocated to the child component. In other words, it is the grow factor of the child component.
 
@@ -508,7 +508,7 @@ When the size of the container in the flex layout is not large enough, the follo
       .height(100)
       .backgroundColor(0xF5DEB3)
     
-    Text('flexGrow(3)')
+    Text('flexGrow(2)')
       .flexGrow(2)
       .width(100)
       .height(100)
@@ -521,7 +521,7 @@ When the size of the container in the flex layout is not large enough, the follo
   }.width(400).height(120).padding(10).backgroundColor(0xAFEEEE)
   ```
   
-  ![](figures/flexgrow.png)
+  ![flexgrow](figures/flexgrow.png)
 
 In the preceding figure, the width of the parent container is 400 vp, the original width of the three child components is 100 vp, which adds up to the total width of 300 vp. The remaining space 100 vp is allocated to the child components based on their **flexGrow** settings. Child components that do not have **flexGrow** set are not involved in the allocation of remaining space.
 The first child component and the second child component receive their share of remaining space at the 2:3 ratio. The width of the first child component is 100 vp + 100 vp x 2/5 = 140 vp, and the width of the second child component is 100 vp + 100 vp x 3/5 = 160 vp.
@@ -549,7 +549,7 @@ The first child component and the second child component receive their share of
   }.width(400).height(120).padding(10).backgroundColor(0xAFEEEE) 
   ```
   
-  ![](figures/flexshrink.png)
+  ![flexshrink](figures/flexshrink.png)
 
 ## Example Scenario