Update docs (21313)

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

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

@@ -8,22 +8,22 @@ You can set the background for a component.
 
 ## Attributes
 
-| Name| Type| Description|
-| -------- | -------- | -------- |
-| background<sup>10+</sup> | builder: [CustomBuilder](ts-types.md#custombuilder8),<br>options?: {align?:[Alignment](ts-appendix-enums.md#alignment)} | Background color of the component.<br>**builder**: custom background.<br>**align**: alignment mode between the custom background and the component.<br>If **background**, **backgroundColor**, and **backgroundImage** are set at the same time, they will all take effect, with **background** at the top layer.|
-| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the component.<br>Since API version 9, this API is supported in ArkTS widgets.|
-| backgroundImage | src: [ResourceStr](ts-types.md#resourcestr),<br>repeat?: [ImageRepeat](ts-appendix-enums.md#imagerepeat) | **src**: image address, which can be the address of an Internet or a local image or a Base64 encoded image. SVG images are not supported.<br>**repeat**: whether the background image is repeated. By default, the background image is not repeated. If the set image has a transparent background and **backgroundColor** is set, the image is overlaid on the background color.<br>Since API version 9, this API is supported in ArkTS widgets.|
-| backgroundImageSize | {<br>width?: [Length](ts-types.md#length),<br>height?: [Length](ts-types.md#length)<br>} \| [ImageSize](ts-appendix-enums.md#imagesize) | Width and height of the background image. If the input is a **{width: Length, height: Length}** object and only one attribute is set, the other attribute is the set value multiplied by the original aspect ratio of the image. By default, the original image aspect ratio remains unchanged.<br>The value range of **width** and **height** is [0, +∞).<br>Default value: **ImageSize.Auto**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>A value less than 0 evaluates to the value **0**. If **height** is set but **width** is not, the image width is adjusted based on the original aspect ratio of the image.|
-| backgroundImagePosition | [Position](ts-types.md#position8) \| [Alignment](ts-appendix-enums.md#alignment) | Position of the background image in the component, that is, the coordinates relative to the upper left corner of the component.<br>Default value:<br>{<br>x: 0,<br>y: 0<br>} <br> When **x** and **y** are set in percentage, the offset is calculated based on the width and height of the component.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| Name                              | Type                                    | Description                                      |
+| -------------------------------- | ---------------------------------------- | ---------------------------------------- |
+| background<sup>10+</sup>         | builder: [CustomBuilder](ts-types.md#custombuilder8),<br>options?: {align?:[Alignment](ts-appendix-enums.md#alignment)} | Background color of the component.<br>**builder**: custom background.<br>**align**: alignment mode between the custom background and the component.<br>If **background**, **backgroundColor**, and **backgroundImage** are set at the same time, they will all take effect, with **background** at the top layer.<br>This attribute cannot be nested.|
+| backgroundColor                  | [ResourceColor](ts-types.md#resourcecolor) | Background color of the component.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| backgroundImage                  | src: [ResourceStr](ts-types.md#resourcestr),<br>repeat?: [ImageRepeat](ts-appendix-enums.md#imagerepeat) | **src**: image address, which can be the address of an Internet or a local image or a Base64 encoded image. SVG images are not supported.<br>**repeat**: whether the background image is repeated. By default, the background image is not repeated. If the set image has a transparent background and **backgroundColor** is set, the image is overlaid on the background color.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| backgroundImageSize              | {<br>width?: [Length](ts-types.md#length),<br>height?: [Length](ts-types.md#length)<br>} \| [ImageSize](ts-appendix-enums.md#imagesize) | Width and height of the background image. If the input is a **{width: Length, height: Length}** object and only one attribute is set, the other attribute is the set value multiplied by the original aspect ratio of the image. By default, the original image aspect ratio remains unchanged.<br>The value range of **width** and **height** is [0, +∞).<br>Default value: **ImageSize.Auto**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>A value less than 0 evaluates to the value **0**. If **height** is set but **width** is not, the image width is adjusted based on the original aspect ratio of the image.|
+| backgroundImagePosition          | [Position](ts-types.md#position8) \| [Alignment](ts-appendix-enums.md#alignment) | Position of the background image in the component, that is, the coordinates relative to the upper left corner of the component.<br>Default value:<br>{<br>x: 0,<br>y: 0<br>} <br> When **x** and **y** are set in percentage, the offset is calculated based on the width and height of the component.<br>Since API version 9, this API is supported in ArkTS widgets.|
 | backgroundBlurStyle<sup>9+</sup> | value:[BlurStyle](ts-appendix-enums.md#blurstyle9),<br>options<sup>10+</sup>?:[BackgroundBlurStyleOptions](#backgroundblurstyleoptions10) | Background blur style applied between the content and the background.<br>**value**: settings of the background blur style, including the blur radius, mask color, mask opacity, saturation, and brightness.<br>**options**: background blur options. Optional.<br>This API is supported in ArkTS widgets.|
 
 ## BackgroundBlurStyleOptions<sup>10+</sup>
 
-| Name                       | Type                                               | Mandatory| Description                                                        |
-| --------------------------- | ------------------------------------------------------- | ---- | ------------------------------------------------------------ |
-| colorMode<sup>10+</sup>     | [ThemeColorMode](ts-appendix-enums.md#themecolormode10) | No  | Color mode used for the background blur.<br>Default value: **ThemeColorMode.System**|
-| adaptiveColor<sup>10+</sup> | [AdaptiveColor](ts-appendix-enums.md#adaptivecolor10)   | No  | Adaptive color mode.<br>Default value: **AdaptiveColor.Default**|
-| scale<sup>10+</sup> | number   | No  | Blurredness of the background material. This API is a system API.<br>Default value: **1.0**<br>Value range: [0.0, 1.0]<br>|
+| Name           | Type                                    | Mandatory  | Description                                      |
+| ------------- | ---------------------------------------- | ---- | ---------------------------------------- |
+| colorMode     | [ThemeColorMode](ts-appendix-enums.md#themecolormode10) | No   | Color mode used for the background blur.<br>Default value: **ThemeColorMode.System**|
+| adaptiveColor | [AdaptiveColor](ts-appendix-enums.md#adaptivecolor10) | No   | Adaptive color mode.<br>Default value: **AdaptiveColor.Default**|
+| scale         | number                                   | No   | Blurredness of the background material. This API is a system API.<br>Default value: **1.0**<br>Value range: [0.0, 1.0]<br>|
 
 ## Example
 

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

@@ -8,22 +8,22 @@ You can draw an image around a component.
 
 ## Attributes
 
-| Name        | Type                                    | Description                                     |
-| ---------- | ---------------------------------------- | --------------------------------------- |
-| borderImage     | [BorderImageOption](#borderimageoption) | Border image or border gradient.<br>This API is supported in ArkTS widgets.|
+| Name         | Type                                    | Description                                    |
+| ----------- | ---------------------------------------- | -------------------------------------- |
+| borderImage | [BorderImageOption](#borderimageoption) | Border image or border gradient.<br>This API is supported in ArkTS widgets.|
 
 ## BorderImageOption
 
 This API is supported in ArkTS widgets.
 
-| 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.<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**                |
-| repeat | [RepeatMode](#repeatmode)                               | Repeat mode of the border image.<br>Default value: **RepeatMode.Stretch**|
-| fill       | boolean                                  | Whether to fill the center of the border image.<br>Default value: **false**              |
+| 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.<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**                 |
+| repeat | [RepeatMode](#repeatmode)            | Repeat mode of the border image.<br>Default value: **RepeatMode.Stretch** |
+| fill   | boolean                                  | Whether to fill the center of the border image.<br>Default value: **false**               |
 
 ## RepeatMode
 

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

@@ -8,13 +8,13 @@
 
 ## Attributes
 
-| Name      | Type                                   | Description                                                        |
-| ---------- | ------------------------------------------- | ------------------------------------------------------------ |
-| flexBasis  | number \| string                            | Base size of the component in the main axis of the parent container.<br>Default value: **'auto'** (indicating that the base size of the component in the main axis is the original size of the component)<br>This attribute cannot be set in percentage.<br>Since API version 9, this API is supported in ArkTS widgets.|
-| flexGrow   | number                                      | Percentage of the parent container's remaining space that is allocated to the component.<br>Default value: **0**<br>Since API version 9, this API is supported in ArkTS widgets.|
-| flexShrink | number                                      | Percentage of the parent container's shrink size that is allocated to the component.<br>When the parent container is **\<Row>** or **\<Column>**, the default value is **0**.<br> When the parent container is **\<Flex>**, the default value is **1**.<br>Since API version 9, this API is supported in ArkTS widgets.|
-| alignSelf  | [ItemAlign](ts-appendix-enums.md#itemalign) | Alignment mode of the child components along the cross axis of the parent container. The setting overwrites the **alignItems** setting of the parent container (**\<Flex>**, **\<Column>**, **\<Row>**, or **\<GridRow>**).<br>**\<GridCol>** can have the **alignsSelf** attribute bound to change its own layout along the cross axis.<br>Default value: **ItemAlign.Auto**<br>Since API version 9, this API is supported in ArkTS widgets.|
-| 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.|
+| Name          | Type                                    | Description                                      |
+| ------------ | ---------------------------------------- | ---------------------------------------- |
+| flexBasis    | number \| string                         | Base size of the component in the main axis of the parent container.<br>Default value: **'auto'** (indicating that the base size of the component in the main axis is the original size of the component)<br>This attribute cannot be set in percentage.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| flexGrow     | number                                   | Percentage of the parent container's remaining space that is allocated to the component.<br>Default value: **0**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| flexShrink   | number                                   | Percentage of the parent container's shrink size that is allocated to the component.<br>When the parent container is **\<Row>** or **\<Column>**, the default value is **0**.<br> When the parent container is **\<Flex>**, the default value is **1**.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| alignSelf    | [ItemAlign](ts-appendix-enums.md#itemalign) | Alignment mode of the child components along the cross axis of the parent container. The setting overwrites the **alignItems** setting of the parent container (**\<Flex>**, **\<Column>**, **\<Row>**, or **\<GridRow>**).<br>**\<GridCol>** can have the **alignsSelf** attribute bound to change its own layout along the cross axis.<br>Default value: **ItemAlign.Auto**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| 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.|
 
 
 ## Example

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

@@ -9,14 +9,15 @@ Layout constraints refer to constraints on the aspect ratio and display priority
 
 ## Attributes
 
-| Name           | Type| Description                                                        |
-| --------------- | -------- | ------------------------------------------------------------ |
-| aspectRatio     | number   | Aspect ratio of the component, which can be obtained using the following formula: Width/Height.<br>Since API version 9, this API is supported in ArkTS widgets.|
-| 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>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>** (single-row) container components.|
-
+| Name             | Type  | Description                                      |
+| --------------- | ------ | ---------------------------------------- |
+| aspectRatio     | number | Aspect ratio of the component, which can be obtained using the following formula: Width/Height.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| 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>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>** (single-row) container components.|
 
 ## Example
 
+### Example 1
+
 ```ts
 // xxx.ets
 @Entry
@@ -78,6 +79,8 @@ struct AspectRatioExample {
 
 ![en-us_image_0000001212218476](figures/en-us_image_0000001212218476.gif)
 
+### Example 2
+
 ```ts
 class ContainerInfo {
   label: string = '';

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

@@ -11,7 +11,14 @@ You can bind a full-screen modal to a component through the **bindContentCover**
 
 | Name              | Parameter                                      | Description                                    |
 | ---------------- | ---------------------------------------- | ---------------------------------------- |
-| bindContentCover | isShow: boolean,<br>builder: [CustomBuilder](ts-types.md#custombuilder8),<br>type?: [ModalTransition](ts-types.md#modaltransition10) | Binds a modal to the component, which can be displayed when the component is touched. The content of the modal is customizable. The transition type can be set to none, slide-up and slide-down animation, and opacity gradient animation.<br>**isShow**: whether to display the modal. Mandatory.<br>**builder**: content of the modal. Mandatory.<br>**type**: transition type of the modal. This parameter is optional. |
+| bindContentCover | isShow: boolean,<br>builder: [CustomBuilder](ts-types.md#custombuilder8),<br>options?: [ContentCoverOptions](#contentcoveroptions) | Binds a modal to the component, which can be displayed when the component is touched. The content of the modal is customizable. The transition type can be set to none, slide-up and slide-down animation, and opacity gradient animation.<br> **isShow**: whether to display the modal.<br>Since API version 10, this parameter supports two-way binding through [$$](../../quick-start/arkts-two-way-sync.md).<br>**builder**: content of the modal.<br> **options**: optional attributes of the modal.|
+## ContentCoverOptions
+| Name             | Type                                      | Mandatory  | Description           |
+| --------------- | ---------------------------------------- | ---- | ------------- |
+| modalTransition | [ModalTransition](ts-types.md#modaltransition10) | No   | Transition mode of the modal. |
+| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | No   | Background color of the modal. |
+| onAppear        | () => void                               | No   | Callback invoked when the modal appears.|
+| onDisappear     | () => void                               | No   | Callback invoked when the modal disappears.|
 
 ## Example
 
@@ -38,7 +45,6 @@ struct ModalTransitionExample {
     }
     .width('100%')
     .height('100%')
-    .backgroundColor(Color.Orange)
   }
 
   @Builder myBuilder() {
@@ -48,7 +54,7 @@ struct ModalTransitionExample {
         .fontSize(20)
         .onClick(()=>{
           this.isShow2 = true;
-        }).bindContentCover($$this.isShow2, this.myBuilder2(), ModalTransition.NONE)
+        }).bindContentCover($$this.isShow2, this.myBuilder2(), {modalTransition: ModalTransition.NONE, backgroundColor: Color.Orange, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})
 
       Button("close modal 1")
         .margin(10)
@@ -59,7 +65,6 @@ struct ModalTransitionExample {
     }
     .width('100%')
     .height('100%')
-    .backgroundColor(Color.Pink)
     .justifyContent(FlexAlign.Center)
   }
 
@@ -71,7 +76,7 @@ struct ModalTransitionExample {
         })
         .fontSize(20)
         .margin(10)
-        .bindContentCover($$this.isShow, this.myBuilder(), ModalTransition.NONE)
+        .bindContentCover($$this.isShow, this.myBuilder(), {modalTransition: ModalTransition.NONE, backgroundColor: Color.Pink, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})
     }
     .justifyContent(FlexAlign.Center)
     .backgroundColor("#ff49c8ab")
@@ -117,7 +122,6 @@ struct ModalTransitionExample {
     }
     .width('100%')
     .height('100%')
-    .backgroundColor(Color.Orange)
   }
 
 
@@ -128,7 +132,7 @@ struct ModalTransitionExample {
         .fontSize(20)
         .onClick(()=>{
           this.isShow2 = true;
-        }).bindContentCover($$this.isShow2, this.myBuilder2(), ModalTransition.NONE)
+        }).bindContentCover($$this.isShow2, this.myBuilder2(), {modalTransition: ModalTransition.NONE, backgroundColor: Color.Orange, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})
 
       Button("close modal 1")
         .margin(10)
@@ -139,7 +143,6 @@ struct ModalTransitionExample {
     }
     .width('100%')
     .height('100%')
-    .backgroundColor(Color.Pink)
     .justifyContent(FlexAlign.Center)
     .scale({x: this.isScale2, y: this.isScale2})
     .animation({curve:curves.springMotion()})
@@ -153,7 +156,7 @@ struct ModalTransitionExample {
         })
         .fontSize(20)
         .margin(10)
-        .bindContentCover($$this.isShow, this.myBuilder(), ModalTransition.NONE)
+        .bindContentCover($$this.isShow, this.myBuilder(), {modalTransition: ModalTransition.NONE, backgroundColor: Color.Pink, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})
     }
     .justifyContent(FlexAlign.Center)
     .backgroundColor("#ff49c8ab")
@@ -190,7 +193,6 @@ struct ModalTransitionExample {
     }
     .width('100%')
     .height('100%')
-    .backgroundColor(Color.Gray)
   }
 
   @Builder myBuilder() {
@@ -200,7 +202,7 @@ struct ModalTransitionExample {
         .fontSize(20)
         .onClick(()=>{
           this.isShow2 = true;
-        }).bindContentCover(this.isShow2, this.myBuilder2(), ModalTransition.DEFAULT)
+        }).bindContentCover(this.isShow2, this.myBuilder2(), {modalTransition: ModalTransition.DEFAULT, backgroundColor: Color.Gray, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})
 
       Button("close modal 1")
         .margin(10)
@@ -211,7 +213,6 @@ struct ModalTransitionExample {
     }
     .width('100%')
     .height('100%')
-    .backgroundColor(Color.Pink)
     .justifyContent(FlexAlign.Center)
   }
 
@@ -223,7 +224,7 @@ struct ModalTransitionExample {
         })
         .fontSize(20)
         .margin(10)
-        .bindContentCover($$this.isShow, this.myBuilder(), ModalTransition.DEFAULT)
+        .bindContentCover($$this.isShow, this.myBuilder(), {modalTransition: ModalTransition.DEFAULT, backgroundColor: Color.Pink, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})
     }
     .justifyContent(FlexAlign.Center)
     .backgroundColor(Color.White)
@@ -258,7 +259,6 @@ struct ModalTransitionExample {
     }
     .width('100%')
     .height('100%')
-    .backgroundColor(Color.Gray)
     .justifyContent(FlexAlign.Center)
   }
 
@@ -270,7 +270,7 @@ struct ModalTransitionExample {
         .fontSize(20)
         .onClick(()=>{
           this.isShow2 = true;
-        }).bindContentCover(this.isShow2, this.myBuilder2(), ModalTransition.ALPHA)
+        }).bindContentCover(this.isShow2, this.myBuilder2(), {modalTransition: ModalTransition.ALPHA, backgroundColor: Color.Gray, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})
 
       Button("close modal 1")
         .margin(10)
@@ -281,7 +281,6 @@ struct ModalTransitionExample {
     }
     .width('100%')
     .height('100%')
-    .backgroundColor(Color.Pink)
     .justifyContent(FlexAlign.Center)
   }
 
@@ -293,7 +292,7 @@ struct ModalTransitionExample {
         })
         .fontSize(20)
         .margin(10)
-        .bindContentCover($$this.isShow, this.myBuilder(), ModalTransition.ALPHA)
+        .bindContentCover($$this.isShow, this.myBuilder(), {modalTransition: ModalTransition.ALPHA, backgroundColor: Color.Pink, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})
     }
     .justifyContent(FlexAlign.Center)
     .backgroundColor(Color.White)

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

@@ -4,16 +4,18 @@ You can set overlay text for a component.
 
 >  **NOTE**
 >
-> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+>  The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 ## Attributes
 
-| Name| Type| Default Value| Description|
-| -------- | -------- | -------- | -------- |
-| overlay | value: string,<br>options?: {<br>align?: [Alignment](ts-appendix-enums.md#alignment), <br>offset?: {x?: number, y?: number}<br>} | {<br>align: Alignment.Center,<br>offset: {0, 0}<br>} | Overlay added to the component.<br> **value**: mask text.<br>**options**: text positioning. **align** indicates the location of the text relative to the component. **[offset](ts-universal-attributes-location.md)** indicates the offset of the text relative to the upper left corner of itself. By default, the text is in the upper left corner of the component.<br>If both **align** and **offset** are set, the text is first positioned relative to the component, and then offset relative to the upper left corner of itself.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| Name     | Type                                    | Default Value                                     | Description                                      |
+| ------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
+| overlay | value: string &#124; [CustomBuilder](../arkui-ts/ts-types.md#custombuilder8)<sup>10+</sup>,<br>options?: {<br>align?: [Alignment](ts-appendix-enums.md#alignment), <br>offset?: {x?: number, y?: number}<br>} | {<br>align: Alignment.Center,<br>offset: {0, 0}<br>} | Overlay of mask text or a custom component added to the component.<br> **value**: mask text content or custom component constructor.<br>**options**: position of the overlay. **align** indicates the position of the overlay relative to the component. [offset](ts-universal-attributes-location.md) indicates the offset of the overlay relative to the upper left corner of itself. By default, the overlay is in the upper left corner of the component.<br>If both **align** and **offset** are set, the overlay is first positioned relative to the component, and then offset relative to the upper left corner of itself.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>When the overlay is a custom component, it cannot obtain focus through sequential keyboard navigation.|
 
 ## Example
 
+### Example 1
+
 ```ts
 // xxx.ets
 @Entry
@@ -39,3 +41,29 @@ struct OverlayExample {
 ```
 
 ![en-us_image_0000001212058472](figures/en-us_image_0000001212058472.png)
+
+### Example 2
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct OverlayExample {
+  @Builder OverlayNode() {
+    Column() {
+      Image($r('app.media.img1'))
+      Text("This is overlayNode").fontSize(20).fontColor(Color.White)
+    }.width(180).height(180).alignItems(HorizontalAlign.Center)
+  }
+
+  build() {
+    Column() {
+      Image($r('app.media.img2'))
+        .overlay(this.OverlayNode(), { align: Alignment.Center })
+        .objectFit(ImageFit.Contain)
+    }.width('100%')
+    .border({ color: Color.Black, width: 2 }).padding(20)
+  }
+}
+```
+![en-us_image_0000001210111632](figures/en-us_image_0000001210111632.png)

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

@@ -4,23 +4,23 @@ The **restoreId** attribute identifies a component in distributed migration scen
 
 >  **NOTE**
 >
-> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
+>  The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
 ## Attributes
 
-| Name| Type| Description|
-| -------- | -------- | -------- |
+| Name       | Type  | Description                                      |
+| --------- | ------ | ---------------------------------------- |
 | restoreId | number | ID of the component used for device matching during distributed migration. This ID must be unique within an application.|
 
 ## Components with Distributed Migration Support
 
-| Name| Initial API Version| Migration Status|
-| -------- | -------- | -------- |
-| List      | 8 | The index of the list item displayed at the top of the list on the current device will be migrated to the remote device. After the migration, the list item that matches the index is displayed at the top of the list on the remote device.|
-| Grid      | 9 | The index of the grid item displayed at the top of the grid on the current device will be migrated to the remote device. After the migration, the grid item that matches the index is displayed at the top of the grid on the remote device. The position of the scrollbar cannot be migrated.|
-| Scroll    | 9 | The absolute distance with the top edge for scrolling will be migrated. Due to layout inconsistency resulting from differences in the display specifications between devices, the migration effect may be affected.|
-| TextArea  | 9 | The text content and the position of the caret will be migrated.|
-| TextInput | 9 | The text content and the position of the caret will be migrated.|
+| Name     | Initial API Version| Migration Status                                    |
+| --------- | ---- | ---------------------------------------- |
+| List      | 8    | The index of the list item displayed at the top of the list on the current device will be migrated to the remote device. After the migration, the list item that matches the index is displayed at the top of the list on the remote device.|
+| Grid      | 9    | The index of the grid item displayed at the top of the grid on the current device will be migrated to the remote device. After the migration, the grid item that matches the index is displayed at the top of the grid on the remote device. The position of the scrollbar cannot be migrated.|
+| Scroll    | 9    | The absolute distance with the top edge for scrolling will be migrated. Due to layout inconsistency resulting from differences in the display specifications between devices, the migration effect may be affected.|
+| TextArea  | 9    | The text content and the position of the caret will be migrated.                         |
+| TextInput | 9    | The text content and the position of the caret will be migrated.                         |
 
 ## Example
 

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

@@ -4,32 +4,36 @@ You can bind a sheet to a component through the **bindSheet** attribute. You can
 
 >  **NOTE**
 >
-> The APIs of this module are supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version.
+>  The APIs of this module are supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version.
 >
-> Switching between landscape and portrait modes is not supported.
+>  Switching between landscape and portrait modes is not supported.
 
 ## Attributes
 
-| Name| Parameter| Description|
-| ----- | ----- | ----- |
-| bindSheet | isShow: boolean,<br>builder: [CustomBuilder](ts-types.md#custombuilder8),<br>options?: [SheetOptions](#sheetoptions) | Binds a sheet to the component, which can be displayed when the component is touched.<br>**isShow**: whether to display the sheet. Mandatory.<br>**builder**: content of the sheet. Mandatory.<br> **options**: options of the sheet. Optional.|
-
+| Name       | Parameter                                      | Description                                    |
+| --------- | ---------------------------------------- | ---------------------------------------- |
+| bindSheet | isShow: boolean,<br>builder: [CustomBuilder](ts-types.md#custombuilder8),<br>options?: [SheetOptions](#sheetoptions) | Binds a sheet to the component, which can be displayed when the component is touched.<br>**isShow**: whether to display the sheet.<br>Since API version 10, this parameter supports two-way binding through [$$](../../quick-start/arkts-two-way-sync.md).<br>**builder**: content of the sheet.<br> **options**: optional attributes of the sheet.|
+> **NOTE**
+>
+> When no two-way binding is set up for the **isShow** parameter, closing the sheet by dragging does not change the parameter value.
+>
+> To synchronize the value of **isShow** with the actual state of the sheet, it is recommended that you use the [$$](../../quick-start/arkts-two-way-sync.md) to set up two-way binding for **isShow**.
 ## SheetOptions
 
-| Name| Type| Mandatory| Description|
-| ----- | ----- | ----- | ------ |
-| height | [SheetSize](#sheetsize) \| [Length](ts-types.md#length) | No| Height of the sheet.<br>Default value: **LARGE**|
-| dragBar | boolean | No| Whether to display the drag bar. By default, the drag bar is displayed .|
-| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | No| Background color of the sheet.|
-| onAppear | () => void | No| Callback invoked when the sheet is displayed.|
-| onDisappear | () => void | No| Callback invoked when the sheet is hidden.|
+| Name             | Type                                      | Mandatory  | Description             |
+| --------------- | ---------------------------------------- | ---- | --------------- |
+| height          | [SheetSize](#sheetsize) \| [Length](ts-types.md#length) | No   | Height of the sheet.<br>Default value: **LARGE**|
+| dragBar         | boolean                                  | No   | Whether to display the drag bar. By default, the drag bar is displayed .  |
+| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | No   | Background color of the sheet.    |
+| onAppear        | () => void                               | No   | Callback invoked when the sheet is displayed.   |
+| onDisappear     | () => void                               | No   | Callback invoked when the sheet is hidden.   |
 
 ## SheetSize
 
-| Name| Description|
-| -------- | -------- |
-| MEDIUM   | The sheet height is half of the screen height.|
-| LARGE    | The sheet height is almost the screen height.|
+| Name    | Description           |
+| ------ | --------------- |
+| MEDIUM | The sheet height is half of the screen height.|
+| LARGE  | The sheet height is almost the screen height.|
 
 ## Example
 

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

+
+
+
+
 # Mouse Event
 
 If an action triggers multiple events, the order of these events is fixed. By default, mouse events are transmitted transparently.
@@ -9,32 +13,32 @@ If an action triggers multiple events, the order of these events is fixed. By de
 
 ## Events
 
-| Name                                                        | Bubbling Supported| Description                                                        |
-| ------------------------------------------------------------ | -------- | ------------------------------------------------------------ |
-| onHover(event: (isHover?: boolean, event<sup>10+</sup>?: HoverEvent) =&gt; void) | Yes      | Triggered when the mouse cursor enters or leaves the component.<br>**isHover**: whether the mouse cursor hovers over the component. The value **true** means that the mouse cursor enters the component, and the value **false** means that the mouse cursor leaves the component.<br>**event**: bubbling blocking of the event.|
-| onMouse(event: (event?: MouseEvent) =&gt; void) | Yes      | Triggered when the component is clicked by a mouse button or the mouse cursor moves on the component. The **event** parameter indicates the timestamp, mouse button, action, coordinates of the clicked point on the entire screen, and coordinates of the clicked point relative to the component when the event is triggered.|
+| Name                                      | Bubbling Supported| Description                                      |
+| ---------------------------------------- | ---- | ---------------------------------------- |
+| onHover(event: (isHover?: boolean, event<sup>10+</sup>?: HoverEvent) =&gt; void) | Yes   | Triggered when the mouse cursor enters or leaves the component.<br>**isHover**: whether the mouse cursor hovers over the component. The value **true** means that the mouse cursor enters the component, and the value **false** means that the mouse cursor leaves the component.<br>**event**: bubbling blocking of the event.|
+| onMouse(event: (event?: MouseEvent) =&gt; void) | Yes   | Triggered when the component is clicked by a mouse button or the mouse cursor moves on the component. The **event** parameter indicates the timestamp, mouse button, action, coordinates of the clicked point on the entire screen, and coordinates of the clicked point relative to the component when the event is triggered.|
 
 
 ## MouseEvent
 
-| Name     | Type                           | Description                  |
-| --------- | ------------------------------- | -------------------- |
-| screenX   | number                          | X coordinate of the cursor position relative to the upper left corner of the application window.|
-| screenY   | number                          | Y coordinate of the cursor position relative to the upper left corner of the application window.|
-| x         | number                          | X coordinate of the cursor position relative to the upper left corner of the component being clicked.|
-| y         | number                          | Y coordinate of the mouse position relative to the upper left corner of the component being clicked.|
-| button    | [MouseButton](ts-appendix-enums.md#mousebutton) | Mouse button.               |
-| action    | [MouseAction](ts-appendix-enums.md#mouseaction) | Mouse action.               |
-| stopPropagation      | () => void | Stops the event from bubbling upwards or downwards.                        |
-| timestamp<sup>8+</sup> | number | Timestamp of the event. It is interval between the time when the event is triggered and the time when the system starts, in nanoseconds.|
-| target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md#eventtarget8) | Display area of the component that triggers the event.|
-| source<sup>8+</sup> | [SourceType](ts-gesture-settings.md#sourcetype)| Event input device.|
+| Name                    | Type                                    | Description                          |
+| ---------------------- | ---------------------------------------- | ---------------------------- |
+| screenX                | number                                   | X coordinate of the cursor position relative to the upper left corner of the application window.        |
+| screenY                | number                                   | Y coordinate of the cursor position relative to the upper left corner of the application window.        |
+| x                      | number                                   | X coordinate of the cursor position relative to the upper left corner of the component being clicked.        |
+| y                      | number                                   | Y coordinate of the mouse position relative to the upper left corner of the component being clicked.        |
+| button                 | [MouseButton](ts-appendix-enums.md#mousebutton) | Mouse button.                       |
+| action                 | [MouseAction](ts-appendix-enums.md#mouseaction) | Mouse action.                       |
+| stopPropagation        | () => void                               | Stops the event from bubbling upwards or downwards.                     |
+| timestamp<sup>8+</sup> | number                                   | Timestamp of the event. It is interval between the time when the event is triggered and the time when the system starts, in nanoseconds.|
+| target<sup>8+</sup>    | [EventTarget](ts-universal-events-click.md#eventtarget8) | Display area of the component that triggers the event.              |
+| source<sup>8+</sup>    | [SourceType](ts-gesture-settings.md#sourcetype)| Event input device.                     |
 
 ## HoverEvent<sup>10+</sup>
 
-| Name     | Type                           | Description                  |
-| --------- | ------------------------------- | -------------------- |
-| stopPropagation   | () => void                          | Stops the event from bubbling upwards or downwards.|
+| Name             | Type      | Description     |
+| --------------- | ---------- | ------- |
+| stopPropagation | () => void | Stops the event from bubbling upwards or downwards.|
 
 ## Example