Update docs (18204)

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

en/application-dev/reference/apis/js-apis-accessibility-config.md

@@ -247,7 +247,7 @@ Cancels the listener for changes in the list of enabled accessibility extension
 | Name| Type| Mandatory| Description|
 | -------- | -------- | -------- | -------- |
 | type |  string | Yes| Listening type. The value is fixed at **'enabledAccessibilityExtensionListChange'**, indicating listening for changes in the list of enabled accessibility extension abilities.|
-| callback | Callback<void> | No| Callback invoked when the list of enabled accessibility extension abilities changes.|
+| callback | Callback<void> | No| Callback for the event.|
 
 **Example**
 
@@ -425,7 +425,7 @@ Cancels the listener for attribute changes. This API uses an asynchronous callba
 
 | Name| Type| Mandatory| Description|
 | -------- | -------- | -------- | -------- |
-| callback | Callback<T> | No| Callback invoked when the list of enabled accessibility extension abilities changes.|
+| callback | Callback<T> | No| Callback for the event.|
 
 **Example**
 

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

@@ -433,7 +433,7 @@ try {
 
 getWindows(callback: AsyncCallback\<Array\<AccessibilityElement>>): void;
 
-Obtains the list of windows on a display. This API uses an asynchronous callback to return the result.
+Obtains the list of windows on this display. This API uses an asynchronous callback to return the result.
 
 **System capability**: SystemCapability.BarrierFree.Accessibility.Core
 
@@ -610,7 +610,7 @@ Defines the accessibilityelement. Before calling APIs of **AccessibilityElement*
 
 **System capability**: SystemCapability.BarrierFree.Accessibility.Core
 
-## attributeNames
+### attributeNames
 
 attributeNames\<T extends keyof ElementAttributeValues>(): Promise\<Array\<T>>;
 
@@ -636,7 +636,7 @@ rootElement.attributeNames().then((data) => {
     console.log('failed to get attribute names, because ${JSON.stringify(err)}');
 });
 ```
-## attributeNames
+### attributeNames
 
 attributeNames\<T extends keyof ElementAttributeValues>(callback: AsyncCallback\<Array\<T>>): void;
 
@@ -664,7 +664,7 @@ rootElement.attributeNames((err, data) => {
     console.info('get attribute names success');
 });
 ```
-## AccessibilityElement.attributeValue
+### attributeValue
 
 attributeValue\<T extends keyof ElementAttributeValues>(attributeName: T): Promise\<ElementAttributeValues[T]>;
 
@@ -709,7 +709,7 @@ try {
     console.error('failed to get attribute value, because ${JSON.stringify(exception)}');
 }
 ```
-## AccessibilityElement.attributeValue
+### attributeValue
 
 attributeValue\<T extends keyof ElementAttributeValues>(attributeName: T, 
     callback: AsyncCallback\<ElementAttributeValues[T]>): void;
@@ -752,7 +752,7 @@ try {
     console.error('failed to get attribute value, because ${JSON.stringify(exception)}');
 }
 ```
-## actionNames
+### actionNames
 
 actionNames(): Promise\<Array\<string>>;
 
@@ -778,7 +778,7 @@ rootElement.actionNames().then((data) => {
     console.error('failed to get action names because ${JSON.stringify(err)}');
 });
 ```
-## actionNames
+### actionNames
 
 actionNames(callback: AsyncCallback\<Array\<string>>): void;
 
@@ -806,7 +806,7 @@ rootElement.actionNames((err, data) => {
     console.info('get action names success');
 });
 ```
-## performAction
+### performAction
 
 performAction(actionName: string, parameters?: object): Promise\<void>;
 
@@ -818,8 +818,8 @@ Performs an action based on the specified action name. This API uses a promise t
 
 | Name        | Type                                    | Mandatory  | Description            |
 | ----------- | ---------------------------------------- | ---- | -------------- |
-| actionName | string | Yes   | Action name. For details, see [Action](./js-apis-accessibility.md#action). |
-| parameters | object | No   | Parameters required for performing the target action. Not supported currently.    |
+| actionName | string | Yes   | Action name. For details, see [Action](./js-apis-accessibility.md#action).
+| parameters | object | No   | Parameters required for performing the target action. Empty by default. Not supported currently.    |
 
 **Return value**
 
@@ -849,7 +849,7 @@ try {
     console.error('failed to perform action, because ${JSON.stringify(exception)}');
 }
 ```
-## performAction
+### performAction
 
 performAction(actionName: string, callback: AsyncCallback\<void>): void;
 
@@ -861,7 +861,7 @@ Performs an action based on the specified action name. This API uses an asynchro
 
 | Name        | Type                                    | Mandatory  | Description            |
 | ----------- | ---------------------------------------- | ---- | -------------- |
-| actionName | string | Yes   | Action name. For details, see [Action](./js-apis-accessibility.md#action). |
+| actionName | string | Yes   | Action name. For details, see [Action](./js-apis-accessibility.md#action).
 | callback | AsyncCallback&lt;void&gt; | Yes   | Callback used to return the result.|
 
 **Error codes**
@@ -888,7 +888,7 @@ try {
     console.error('failed to perform action, because ${JSON.stringify(exception)}');
 }
 ```
-## performAction
+### performAction
 
 performAction(actionName: string, parameters: object, callback: AsyncCallback\<void>): void;
 
@@ -901,7 +901,7 @@ Performs an action based on the specified action name. This API uses an asynchro
 | Name       | Type                       | Mandatory  | Description                                      |
 | ---------- | ------------------------- | ---- | ---------------------------------------- |
 | actionName | string                    | Yes   | Action name. For details, see [Action](./js-apis-accessibility.md#action).|
-| parameters | object                    | Yes   | Parameters required for performing the target action. Not supported currently.                 |
+| parameters | object                    | Yes   | Parameters required for performing the target action. Empty by default. Not supported currently.                 |
 | callback   | AsyncCallback&lt;void&gt; | Yes   | Callback used to return the result.                       |
 
 **Error codes**
@@ -932,7 +932,7 @@ try {
     console.error('failed to perform action, because ${JSON.stringify(exception)}');
 }
 ```
-## findElement('content')
+### findElement('content')
 
 findElement(type: 'content', condition: string): Promise\<Array\<AccessibilityElement>>;
 
@@ -971,7 +971,7 @@ try {
     console.error('failed to find element, because ${JSON.stringify(exception)}');
 }
 ```
-## findElement('content')
+### findElement('content')
 
 findElement(type: 'content', condition: string, callback: AsyncCallback\<Array\<AccessibilityElement>>): void;
 
@@ -1007,7 +1007,7 @@ try {
     console.error('failed to find element, because ${JSON.stringify(exception)}');
 }
 ```
-## findElement('focusType')
+### findElement('focusType')
 
 findElement(type: 'focusType', condition: FocusType): Promise\<AccessibilityElement>;
 
@@ -1046,7 +1046,7 @@ try {
     console.error('failed to find element, because ${JSON.stringify(exception)}');
 }
 ```
-## findElement('focusType')
+### findElement('focusType')
 
 findElement(type: 'focusType', condition: FocusType, callback: AsyncCallback\<AccessibilityElement>): void;
 
@@ -1082,7 +1082,7 @@ try {
     console.error('failed to find element, because ${JSON.stringify(exception)}');
 }
 ```
-## findElement('focusDirection')
+### findElement('focusDirection')
 
 findElement(type: 'focusDirection', condition: FocusDirection): Promise\<AccessibilityElement>;
 
@@ -1121,7 +1121,7 @@ try {
     console.error('failed to find element, because ${JSON.stringify(exception)}');
 }
 ```
-## findElement('focusDirection')
+### findElement('focusDirection')
 
 findElement(type: 'focusDirection', condition: FocusDirection, callback: AsyncCallback\<AccessibilityElement>): void;
 

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

 # Blank
 
-The **\<Blank>** component is able to automatically fill the empty spaces in the container along the main axis. It is valid only when the parent container is **\<Row>** or **\<Column>**.
+The **\<Blank>** component is able to automatically fill the empty spaces in the container along the main axis. It works only when the parent component is **\<Row>**, **\<Column>**, or **\<Flex>**.
 
 >  **NOTE**
 >
@@ -30,7 +30,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 
 | Name| Type| Description|
 | -------- | -------- | -------- |
-| color | [ResourceColor](ts-types.md#resourcecolor) | Color to fill the empty spaces.<br>Default value: **Color.Transparent**<br>Since API version 9, this API is supported in ArkTS widgets. |
+| color | [ResourceColor](ts-types.md#resourcecolor) | Color to fill the empty spaces.<br>Default value: **Color.Transparent**<br>Since API version 9, this API is supported in ArkTS widgets.|
 
 ## Events
 
@@ -50,7 +50,7 @@ struct BlankExample {
       Row() {
         Text('Bluetooth').fontSize(18)
         Blank()
-        Toggle({ type: ToggleType.Switch })
+        Toggle({ type: ToggleType.Switch }).margin({ top: 14, bottom: 14, left: 6, right: 6 })
       }.width('100%').backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 })
     }.backgroundColor(0xEFEFEF).padding(20)
   }
@@ -80,16 +80,16 @@ struct BlankExample {
       Row() {
         Text('Bluetooth').fontSize(18)
         Blank().color(Color.Yellow)
-        Toggle({ type: ToggleType.Switch })
+        Toggle({ type: ToggleType.Switch }).margin({ top: 14, bottom: 14, left: 6, right: 6 })
       }.backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 })
 
       Row() {
         Text('Bluetooth').fontSize(18)
         // Set the minimum width to 160.
         Blank('160').color(Color.Yellow)
-        Toggle({ type: ToggleType.Switch })
+        Toggle({ type: ToggleType.Switch }).margin({ top: 14, bottom: 14, left: 6, right: 6 })
       }.backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 })
-      
+
     }.backgroundColor(0xEFEFEF).padding(20).width('100%')
   }
 }

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

@@ -29,7 +29,7 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 | Name | Type                                    | Mandatory  | Description                                    |
 | ---- | ---------------------------------------- | ---- | ---------------------------------------- |
-| src  |  [PixelMap](../apis/js-apis-image.md#pixelmap7) \|ResourceStr\| [DrawableDescriptor](../apis/js-apis-arkui-drawableDescriptor.md#drawabledescriptor) | Yes   | Image source. Both local and online images are supported.<br>When using an image referenced using a relative path, for example, **Image("common/test.jpg")**, the **\<Image>** component cannot be called across bundles or modules. Therefore, you are advised to use **\$r** to reference image resources that need to be used globally.<br>- The following image formats are supported: PNG, JPG, BMP, SVG, GIF.<br>\- Base64 strings are supported. The value format is data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data], where [base64 data] is a Base64 string.<br/>\- Strings with the **datashare://** path prefix are supported, which are used to access the image path provided by a Data ability.<br/>\- Strings with the **file:///data/storage** prefix are supported, which are used to read image resources in the **files** folder in the installation directory of the application. Ensure that the application has the read permission to the files in the specified path.<br/>\- [DrawableDescriptor](../apis/js-apis-arkui-drawableDescriptor.md#drawabledescriptor) objects are supported.<br/>**NOTE**<br/>- ArkTS widgets support GIF images, but the images are played only once when they are displayed.<br/>- ArkTS widgets do not support the **http://**, **datashare://**, or **file://data/storage** path prefixes.<br>- ArkTS widgets do not support the [PixelMap](../apis/js-apis-image.md#pixelmap7) type.|
+| src  |  [PixelMap](../apis/js-apis-image.md#pixelmap7) \| ResourceStr\| [DrawableDescriptor](../apis/js-apis-arkui-drawableDescriptor.md#drawabledescriptor) | Yes   | Image source. Both local and online images are supported.<br>When using an image referenced using a relative path, for example, **Image("common/test.jpg")**, the **\<Image>** component cannot be called across bundles or modules. Therefore, you are advised to use **\$r** to reference image resources that need to be used globally.<br>- The following image formats are supported: PNG, JPG, BMP, SVG, GIF.<br>\- Base64 strings are supported. The value format is data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data], where [base64 data] is a Base64 string.<br/>\- Strings with the **datashare://** prefix are supported, which are used to access the image path provided by a Data ability.<br/>\- Strings with the **file:///data/storage** prefix are supported, which are used to read image resources in the **files** folder in the installation directory of the current application. Ensure that the application has the read permission to the files in the specified path.<br/>\- [DrawableDescriptor](../apis/js-apis-arkui-drawableDescriptor.md#drawabledescriptor) objects are supported.<br/>- For details, see [Displaying Images](../../ui/arkts-graphics-display.md).<br/>**NOTE**<br/>- ArkTS widgets support GIF animations, but the animations only play once on display.<br/>- ArkTS widgets do not support the strings with the **http://**, **datashare://**, or **file:///data/storage** prefix.<br>- ArkTS widgets do not support the [PixelMap](../apis/js-apis-image.md#pixelmap7) type.|
 
 ## Attributes
 
@@ -56,7 +56,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 >
 >  To use shortcut keys to copy the image, the image must be in focus. To enable the image to gain focus, set both the **focusable** and **focusOnTouch** attributes to **true**.
 >
->  For SVG images, only the following tags are included in the supported list: **svg**, **rect**, **circle**, **ellipse**, **path**, **line**, **polyline**, **polygon**, and **animate**.
+>  For SVG images, only the following tags are included in the supported list: **svg**, **rect**, **circle**, **ellipse**, **path**, **line**, **polyline**, and **polygon**.
 
 ### ImageInterpolation
 
@@ -94,6 +94,8 @@ In addition to the [universal events](ts-universal-events-click.md), the followi
 
 Load and display different types of images and set the scale mode of the images.
 
+The **overlay** attribute sets the mask text of an image. For details, see [Overlay](ts-universal-attributes-overlay.md).
+
 ```ts
 @Entry
 @Component
@@ -225,7 +227,7 @@ struct Index {
 ```
 
 > **NOTE**
-> 
+>
 > For details about the request mode, timeout, and additional request parameters for loading online images, see [request()](../../reference/apis/js-apis-http.md) in the HTTP module.
 
 ### Setting Attributes
@@ -416,4 +418,86 @@ struct LoadImageExample {
   }
 }
 ```
-<!--no_check-->
\ No newline at end of file
+
+### Applying a Filter to an Image
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct colorFilterExample {
+  @State colorFilterR: number = 0
+  @State colorFilterG: number = 0
+  @State colorFilterB: number = 0
+  @State colorFilterA: number = 0
+
+  build() {
+    Row() {
+      Column() {
+        Image($r('app.media.sky'))
+          .width(200)
+          .height(200)
+        Image($r('app.media.sky'))
+          .width(200)
+          .height(200)
+          .colorFilter([
+          this.colorFilterR, 0, this.colorFilterR, 0, 0,
+            0, this.colorFilterG, this.colorFilterG, 0, 0,
+          this.colorFilterB, 0, this.colorFilterB, 0, 0,
+            0, 0, this.colorFilterA, 0, 0
+          ])
+
+        Row() {
+          Text('R')
+          Slider({
+            min: 0,
+            max: 1,
+            step: 0.01
+          })
+            .onChange((valueR) => {
+              this.colorFilterR = valueR
+            })
+        }
+
+        Row() {
+          Text('G')
+          Slider({
+            min: 0,
+            max: 1,
+            step: 0.01
+          })
+            .onChange((valueG) => {
+              this.colorFilterG = valueG
+            })
+        }
+
+        Row() {
+          Text('B')
+          Slider({
+            min: 0,
+            max: 1,
+            step: 0.01
+          })
+            .onChange((valueB) => {
+              this.colorFilterB = valueB
+            })
+        }
+
+        Row() {
+          Text('A')
+          Slider({
+            min: 0,
+            max: 1,
+            step: 0.01
+          })
+            .onChange((valueA) => {
+              this.colorFilterA = valueA
+            })
+        }
+      }.width('90%').alignItems(HorizontalAlign.Center)
+    }.height('100%').width('100%').justifyContent(FlexAlign.Center)
+  }
+}
+```
+
+![colorFilter](figures/colorFilter.gif)

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

@@ -24,7 +24,7 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 | Name| Type| Mandatory| Description|
 | -------- | -------- | -------- | -------- |
-| value | string | Yes| Content of the QR code. A maximum of 256 characters are supported. If the number of characters exceeds 256, the first 256 characters are used.|
+| value | string | Yes| Content of the QR code. A maximum of 256 characters are supported. If the number of characters exceeds 256, the first 256 characters are used.<br>**NOTE**<br>The string cannot be **null**, **undefined**, or empty.|
 
 ## Attributes
 

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

@@ -10,17 +10,25 @@ The size attributes set the width, height, and margin of a component.
 ## Attributes
 
 
-| Name          | Type                                                    | Description                                                        |
-| -------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
-| width          | [Length](ts-types.md#length)                                 | Width of the component. By default, the width required to fully hold the component content is used. If the width of the component is greater than that of the parent container, the range of the parent container is drawn.<br>Since API version 9, this API is supported in ArkTS widgets.<br>Since API version 10, this API supports the calc calculation feature.|
-| height         | [Length](ts-types.md#length)                                 | Height of the component. By default, the height required to fully hold the component content is used. If the height of the component is greater than that of the parent container, the range of the parent container is drawn.<br>Since API version 9, this API is supported in ArkTS widgets.<br>Since API version 10, this API supports the calc calculation feature.|
+| Name            | Type                                    | Description                                      |
+| -------------- | ---------------------------------------- | ---------------------------------------- |
+| width          | [Length](ts-types.md#length)             | Width of the component. By default, the width required to fully hold the component content is used. If the width of the component is greater than that of the parent container, the range of the parent container is drawn.<br>Since API version 9, this API is supported in ArkTS widgets.<br>Since API version 10, this API supports the calc calculation feature.|
+| height         | [Length](ts-types.md#length)             | Height of the component. By default, the height required to fully hold the component content is used. If the height of the component is greater than that of the parent container, the range of the parent container is drawn.<br>Since API version 9, this API is supported in ArkTS widgets.<br>Since API version 10, this API supports the calc calculation feature.|
 | size           | {<br>width?: [Length](ts-types.md#length),<br>height?: [Length](ts-types.md#length)<br>} | Size of the component.<br>Since API version 9, this API is supported in ArkTS widgets.<br>Since API version 10, this API supports the calc calculation feature.|
 | padding        | [Padding](ts-types.md#padding) \| [Length](ts-types.md#length) | Padding of the component.<br>When the parameter is of the **Length** type, the four paddings take effect.<br>Default value: **0**<br>When **padding** is set to a percentage, the width of the parent container is used as the basic value.<br>Since API version 9, this API is supported in ArkTS widgets.<br>Since API version 10, this API supports the calc calculation feature.|
 | margin         | [Margin](ts-types.md#margin) \| [Length](ts-types.md#length) | Margin of the component.<br>When the parameter is of the **Length** type, the four margins take effect.<br>Default value: **0**<br>When **margin** is set to a percentage, the width of the parent container is used as the basic value.<br>Since API version 9, this API is supported in ArkTS widgets.<br>Since API version 10, this API supports the calc calculation feature.|
-| constraintSize | {<br>minWidth?: [Length](ts-types.md#length),<br>maxWidth?: [Length](ts-types.md#length),<br>minHeight?: [Length](ts-types.md#length),<br>maxHeight?: [Length](ts-types.md#length)<br>} | Constraint size of the component, which is used to limit the size range during component layout. **constraintSize** takes precedence over **width** and **height**. If the value of **minWidth** is greater than that of **maxWidth**, only the value of **minWidth** takes effect. The same rule applies to **minHeight** and **maxHeight**.<br>Default value:<br>{<br>minWidth: 0,<br>maxWidth: Infinity,<br>minHeight: 0,<br>maxHeight: Infinity<br>}<br>Since API version 9, this API is supported in ArkTS widgets.<br>Since API version 10, this API supports the calc calculation feature.|
-| layoutWeight   | number \| string                                   | Weight of the component during layout. When the container size is determined, the container space is allocated along the main axis among the component and sibling components based on the layout weight, and the component size setting is ignored.<br>Default value: **0**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>This attribute is valid only for the **\<Row>**, **\<Column>**, and **\<Flex>** layouts.<br>The value can be a number greater than or equal to 0 or a string that can be converted to a number.|
+| constraintSize | {<br>minWidth?: [Length](ts-types.md#length),<br>maxWidth?: [Length](ts-types.md#length),<br>minHeight?: [Length](ts-types.md#length),<br>maxHeight?: [Length](ts-types.md#length)<br>} | Constraint size of the component, which is used to limit the size range during component layout. **constraintSize** takes precedence over **width** and **height**. Learn [how the value of this attribute affects the width and height](#impact-of-constraintsize-on-widthheight).<br>Default value:<br>{<br>minWidth: 0,<br>maxWidth: Infinity,<br>minHeight: 0,<br>maxHeight: Infinity<br>}<br>Since API version 9, this API is supported in ArkTS widgets.<br>Since API version 10, this API supports the calc calculation feature.|
 
+## Impact of constraintSize on width/height
 
+| Size Arrangement                                    | Result                |
+| ---------------------------------------- | ------------------ |
+| minWidth/minHeight < width/height< maxWidth/maxHeight | width/height       |
+| minWidth/minHeight < maxWidth/maxHeight  < width/height | maxWidth/maxHeight |
+| maxWidth/maxHeight < minWidth/minHeight  < width/height | minWidth/minHeight |
+| maxWidth/maxHeight < width/height< minWidth/minHeight | minWidth/minHeight |
+| width/height      < maxWidth/maxHeight  < minWidth/minHeight | minWidth/minHeight |
+| width/height       < minWidth/minHeight  < maxWidth/maxHeight | minWidth/minHeight |
 ## Example
 
 ```ts