Update docs (16193)

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

en/application-dev/quick-start/arkts-rendering-control.md

@@ -256,7 +256,7 @@ struct MyComponent {
           this.data.pushData('/path/image' + this.data.totalCount() + '.png')
         })
       }, item => item)
-    }
+    }.height('100%').width('100%')
   }
 }
 ```

en/application-dev/reference/arkui-ts/Readme-EN.md

@@ -28,7 +28,6 @@
     - [Transformation](ts-universal-attributes-transformation.md)
     - [Image Effect Configuration](ts-universal-attributes-image-effect.md)
     - [Shape Clipping](ts-universal-attributes-sharp-clipping.md)
-    - [Text Style](ts-universal-attributes-text-style.md)
     - [Grid](ts-universal-attributes-grid.md)
     - [Gradient Color](ts-universal-attributes-gradient-color.md)
     - [Popup Control](ts-universal-attributes-popup.md)
@@ -43,7 +42,8 @@
     - [Background Blur](ts-universal-attributes-backgroundBlurStyle.md)
     - [restoreId](ts-universal-attributes-restoreId.md)
     - [Foreground Color](ts-universal-attributes-foreground-color.md)
-  - Gesture Processing
+  - [Universal Text Attributes](ts-universal-attributes-text-style.md)
+  - Gesture Handling
     - [Gesture Binding Methods](ts-gesture-settings.md)
     - Basic Gestures
       - [TapGesture](ts-basic-gestures-tapgesture.md)

en/application-dev/reference/arkui-ts/ts-animatorproperty.md

@@ -37,11 +37,11 @@ struct AttrAnimationExample {
 
   build() {
     Column() {
-      Button('change width and height')
+      Button('change size')
         .onClick(() => {
           if (this.flag) {
-            this.widthSize = 100
-            this.heightSize = 50
+            this.widthSize = 150
+            this.heightSize = 60
           } else {
             this.widthSize = 250
             this.heightSize = 100
@@ -67,8 +67,8 @@ struct AttrAnimationExample {
           duration: 1200,
           curve: Curve.Friction,
           delay: 500,
-          iterations: -1,   // The value -1 indicates that the animation is played for an unlimited number of times.
-          playMode: PlayMode.AlternateReverse
+          iterations: -1, // The value -1 indicates that the animation is played for an unlimited number of times.
+          playMode: PlayMode.Alternate
         })
     }.width('100%').margin({ top: 20 })
   }

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

@@ -25,10 +25,9 @@ Since API version 9, this API is supported in ArkTS widgets.
 | type        | ButtonType | No   | Button type.<br>Default value: **ButtonType.Capsule**                          |
 | stateEffect | boolean    | No   |  Whether to enable the pressed effect on the click of the button. The value **false** means to disable the pressed effect.<br>Default value: **true**|
 
-
 **API 2:** Button(label?: ResourceStr, options?: { type?: ButtonType, stateEffect?: boolean })
 
-  Creates a button component based on text content. In this case, the component cannot contain child components.
+Creates a button component based on text content. In this case, the component cannot contain child components.
 
 Since API version 9, this API is supported in ArkTS widgets.
 
@@ -46,6 +45,7 @@ Since API version 9, this API is supported in ArkTS widgets.
 | ----------- | ----------- | --------------------------------- |
 | type        | ButtonType  | Button type.<br>Default value: **ButtonType.Capsule**<br>Since API version 9, this API is supported in ArkTS widgets.|
 | stateEffect | boolean     | Whether to enable the pressed effect on the click of the button. The value **false** means to disable the pressed effect.<br>Default value: **true**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| labelStyle<sup>10+</sup> | [LabelStyle](#labelstyle10) | Label style of the button.|
 
 ## ButtonType enums
 
@@ -58,11 +58,22 @@ Since API version 9, this API is supported in ArkTS widgets.
 | Normal  | Normal button (without rounded corners by default).     |
 
 >  **NOTE**
->  - The rounded corner of a button is set by using [borderRadius](ts-universal-attributes-border.md), rather than by using the **border** API. Only a button-wide rounded corner setting is supported.
->  - For a button of the **Capsule** type, the **borderRadius** settings do not take effect, and its rounded corner is always half of the button height.
+>  - The rounded corner of a button is set by using [borderRadius](ts-universal-attributes-border.md), rather than by using the **border** API. Only a rounded corner whose parameter is [Length](ts-types.md#length) is supported.
+>  - For a button of the **Capsule** type, the **borderRadius** settings do not take effect, and the radius of its rounded corner is always half of the button height or width, whichever is smaller.
 >  - For a button of the **Circle** type, its radius is the value of **borderRadius** (if set) or the width or height (whichever is smaller).
 >  - The button text is set using the [text style attributes](ts-universal-attributes-text-style.md).
-
+>  - Before setting the [gradient color](ts-universal-attributes-gradient-color.md), you need to set [backgroundColor](ts-universal-attributes-background.md) to transparent.
+
+## LabelStyle<sup>10+</sup>
+
+| Name                | Type                                                    | Mandatory| Description                                                        |
+| -------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
+| overflow             | [TextOverflow](ts-appendix-enums.md#textoverflow)            | No  | Display mode when the label text is too long. Text is clipped at the transition between words. To clip text in the middle of a word, add **\u200B** between characters.|
+| maxLines             | number                                                       | No  | Maximum number of lines in the label text. By default, text is automatically folded. If this attribute is specified, the text will not exceed the specified number of lines. If there is extra text, you can use **textOverflow** to specify how it is displayed.|
+| minFontSize          | number \| [ResourceStr](ts-types.md#resourcestr)             | No  | Minimum font size of the label text. For the setting to take effect, this attribute must be used together with **maxFontSize**, **maxLines**, or layout constraint settings.|
+| maxFontSize          | number \| [ResourceStr](ts-types.md#resourcestr)             | No  | Maximum font size of the label text. For the setting to take effect, this attribute must be used together with **minFontSize**, **maxLines**, or layout constraint settings.|
+| heightAdaptivePolicy | [TextHeightAdaptivePolicy](ts-appendix-enums.md#textheightadaptivepolicy10) | No  | How the adaptive height is determined for the label text.                             |
+| font                 | [Font](ts-types.md#Font)                                     | No  | Font of the label text.                                     |
 
 ## Example
 

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

@@ -28,6 +28,16 @@ Since API version 9, this API is supported in ArkTS widgets.
 | max               | number     | No   |   - When set to a value greater than 0, this parameter indicates the maximum value in the **values** list.<br>- When set to a value equal to or smaller than 0, this parameter indicates the sum of values in the **values** list. The values are displayed in proportion.<br>Default value: **100**|
 | type<sup>8+</sup> | [DataPanelType](#datapaneltype) | No| Type of the data panel (dynamic modification is not supported).<br>Default value: **DataPanelType.Circle**|
 
+## Attributes
+
+In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
+
+| Name       | Type   | Description                                        |
+| ----------- | ------- | -------------------------------------------- |
+| closeEffect | boolean | Whether to disable the rotation effect for the component.<br>Default value: **false**|
+
+
+
 ## DataPanelType
 
 Since API version 9, this API is supported in ArkTS widgets.

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

@@ -26,15 +26,10 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 | ----------- | ---------- | ------------------ |
 | vertical    | boolean | Whether a vertical divider is used. **false**: A horizontal divider is used.<br>**true**: A vertical divider is used.<br>Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.|
 | color       | [ResourceColor](ts-types.md#resourcecolor) | Color of the divider.<br>Since API version 9, this API is supported in ArkTS widgets.|
-| strokeWidth | number \| string | Width of the divider.<br>Default value: **1**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| strokeWidth | number \| string | Width of the divider.<br>Default value: **1**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>This attribute cannot be set to a percentage.|
 | lineCap     | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | Cap style of the divider.<br>Default value: **LineCapStyle.Butt**<br>Since API version 9, this API is supported in ArkTS widgets.|
 
 
-## Events
-
-The universal events are not supported.
-
-
 ## Example
 
 ```ts

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

@@ -81,11 +81,11 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 In addition to the [universal events](ts-universal-events-click.md), the following events are supported.
 
-| Name                                                        | Description                                                    |
+| Name                                                         | Description                                                  |
 | ------------------------------------------------------------ | ------------------------------------------------------------ |
-| onComplete(callback: (event?: { width: number, height: number, componentWidth: number,<br> componentHeight: number, loadingStatus: number }) =&gt; void) | Triggered when an image is successfully loaded. The size of the loaded image is returned.<br>- **width**: width of the image, in pixels.<br>- **height**: height of the image, in pixels.<br>- **componentWidth**: width of the container component, in pixels.<br>- **componentHeight**: height of the container component, in pixels.<br>- **loadingStatus**: image loading status.<br>Since API version 9, this API is supported in ArkTS widgets.|
-| onError(callback: (event?: { componentWidth: number, componentHeight: number , message<sup>9+</sup>: string }) =&gt; void) | Triggered when an exception occurs during image loading.<br>- **componentWidth**: width of the container component, in pixels.<br>- **componentHeight**: height of the container component, in pixels.<br>Since API version 9, this API is supported in ArkTS widgets.|
-| onFinish(event: () =&gt; void)                | Triggered when the animation playback in the loaded SVG image is complete. If the animation is an infinite loop, this callback is not triggered.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| onComplete(callback: (event?: { width: number, height: number, componentWidth: number,<br> componentHeight: number, loadingStatus: number }) =&gt; void) | Triggered when an image is successfully loaded. The size of the loaded image is returned.<br>- **width**: width of the image, in pixels.<br>- **height**: height of the image, in pixels.<br>- **componentWidth**: width of the container component, in pixels.<br>- **componentHeight**: height of the container component, in pixels.<br>- **loadingStatus**: image loading status. The value **1** means that the image is successfully loaded, and **0** means the opposite.<br>Since API version 9, this API is supported in ArkTS widgets. |
+| onError(callback: (event?: { componentWidth: number, componentHeight: number , message<sup>9+</sup>: string }) =&gt; void) | Triggered when an exception occurs during image loading.<br>- **componentWidth**: width of the container component, in pixels.<br>- **componentHeight**: height of the container component, in pixels.<br>Since API version 9, this API is supported in ArkTS widgets. |
+| onFinish(event: () =&gt; void)                               | Triggered when the animation playback in the loaded SVG image is complete. If the animation is an infinite loop, this callback is not triggered.<br>Since API version 9, this API is supported in ArkTS widgets. |
 
 ## Example
 

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

@@ -36,7 +36,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 
 ## Events
 
-Among all the universal events, only the [click event](ts-universal-events-click.md) is supported.
+Among the universal events, the [click event](ts-universal-events-click.md), [touch event](ts-universal-events-touch.md), and [show/hide event](ts-universal-events-show-hide.md) are supported.
 
 
 ## Example

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

@@ -32,7 +32,7 @@ Since API version 9, this API is supported in ArkTS widgets.
 | -------- | -------- | -------- |
 | stars | number | Total number of stars.<br>Default value: **5**<br>Since API version 9, this API is supported in ArkTS widgets.|
 | stepSize | number | Step of an operation.<br>Default value: **0.5**<br>Since API version 9, this API is supported in ArkTS widgets.|
-| starStyle | {<br>backgroundUri: string,<br>foregroundUri: string,<br>secondaryUri?: string<br>} | **backgroundUri**: image link of the unselected star. You can use the default image or a custom local image.<br>**foregroundUri**: image path of the selected star. You can use the default image or a custom local image.<br>**secondaryUir**: image path of the partially selected star. You can use the default image or a custom local image.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| starStyle | {<br>backgroundUri: string,<br>foregroundUri: string,<br>secondaryUri?: string<br>} | Star style.<br>**backgroundUri**: image path for the unselected star. You can use the default system image or a custom image.<br>**foregroundUri**: image path for the selected star. You can use the default system image or a custom image.<br>**secondaryUir**: image path for the partially selected star. You can use the default system image or a custom image.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>For details about the image types supported by the **startStyle** attribute, see [Image](ts-basic-components-image.md).<br>Local and online images are supported, but not **PixelMap** and **Resource** objects.<br>By default, the image is loaded in asynchronous mode. Synchronous loading is not supported.|
 
 
 ## Events

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

@@ -50,9 +50,35 @@ Except touch target attributes, the universal attributes are supported.
 | trackColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the slider.<br>Since API version 9, this API is supported in ArkTS widgets.|
 | selectedColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the selected part of the slider track.<br>Since API version 9, this API is supported in ArkTS widgets.|
 | showSteps | boolean | Whether to display the current step.<br>Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.|
-| showTips | boolean | Whether to display a bubble to indicate the percentage when the user drags the slider.<br>Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| showTips | boolean | Whether to display a bubble to indicate the percentage when the user drags the slider.<br>Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>When **direction** is set to **Axis.Horizontal**, the bubble is displayed right above the slider. When **direction** is set to **Axis.Vertical**, the bubble is displayed on the left of the slider.<br>The drawing area of the bubble is the overlay of the slider.<br>If no margin is set for the slider or the margin is not large enough, the bubble will be clipped.|
 | trackThickness      | [Length](ts-types.md#length) | Track thickness of the slider.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| blockBorderColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | Border color of the slider in the block direction.|
+| blockBorderWidth<sup>10+</sup> | [Length](ts-types.md#length) | Border width of the slider in the block direction.|
+| stepColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | Step color.|
+| trackBorderRadius<sup>10+</sup> | [Length](ts-types.md#length) | Radius of the rounded corner of the slider track.|
+| blockSize<sup>10+</sup> | [SizeOptions](ts-types.md#sizeoptions) | Size of the slider in the block direction.|
+| blockStyle<sup>10+</sup> | [SliderBlockStyle](#sliderblockstyle10) | Style of the slider in the block direction.|
+| stepSize<sup>10+</sup> | [Length](ts-types.md#length) | Step size (diameter).|
 
+## SliderBlockStyle<sup>10+</sup>
+
+Desribes the style of the slider in the block direction.
+
+| Name | Type                                                        | Mandatory| Description                                                        |
+| ----- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
+| type  | [SliderBlockType](#sliderblocktype10)                        | Yes  | Type of the slider in the block direction.<br>Default value: **SliderBlockType.DEFAULT**, indicating the round slider.|
+| image | [ResourceStr](ts-types.md#resourcestr)                       | No  | Image resource of the slider.<br>The area size for displaying the image is subject to the **blockSize** attribute. Be mindful of the image size when selecting an image.|
+| shape | [Circle](ts-drawing-components-circle.md) \| [Ellipse](ts-drawing-components-ellipse.md) \| [Path](ts-drawing-components-path.md) \| [Rect](ts-drawing-components-rect.md)  | No  | Custom shape of the slider.                                             |
+
+## SliderBlockType<sup>10+</sup>
+
+Enumerates the types of the slider in the block direction.
+
+| Name   | Description                  |
+| ------- | ---------------------- |
+| DEFAULT | Round slider.  |
+| IMAGE   | Slider with an image background.  |
+| SHAPE   | Slider in a custom shape.|
 
 ## Events
 
@@ -60,7 +86,7 @@ In addition to the **OnAppear** and **OnDisAppear** universal events, the follow
 
 | Name| Description|
 | -------- | -------- |
-| onChange(callback: (value: number, mode: SliderChangeMode) =&gt; void) | Invoked when the slider slides.<br>**value**: current slider value. If the return value contains decimals, you can use **Math.toFixed()** to process the data to the desired precision.<br>**mode**: dragging state.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| onChange(callback: (value: number, mode: SliderChangeMode) =&gt; void) | Invoked when the slider is dragged or clicked.<br>**value**: current slider value. If the return value contains decimals, you can use **Math.toFixed()** to process the data to the desired precision.<br>**mode**: state triggered by the event.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>The **Begin** and **End** states are triggered when the slider is clicked with a gesture. The **Moving** and **Click** states are triggered when the value of **value** changes.<br>If the coherent action is a drag action, the **Click** state will not be triggered.<br>The value range of **value** is the **steps** value array.|
 
 ## SliderChangeMode
 
@@ -68,9 +94,9 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 | Name| Value| Description|
 | -------- | -------- | -------- |
-| Begin | 0 | The user starts to drag the slider.|
+| Begin | 0 | The user touches or presses the slider with a gesture or mouse.|
 | Moving | 1 | The user is dragging the slider.|
-| End | 2 | The user stops dragging the slider.|
+| End | 2 | The user stops dragging the slider by lifting their finger or releasing the mouse.|
 | Click    | 3    | The user moves the slider by touching the slider track.|
 
 

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

@@ -38,6 +38,10 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 | inputFilter<sup>8+</sup> | {<br>value: [ResourceStr](ts-types.md#resourcestr),<br>error?: (value: string) => void<br>} | Regular expression for input filtering. Only inputs that comply with the regular expression can be displayed. Other inputs are filtered out. The specified regular expression can match single characters, but not strings.<br>- **value**: regular expression to set.<br>- **error**: filtered-out content to return when regular expression matching fails.|
 | copyOption<sup>9+</sup>  | [CopyOptions](ts-appendix-enums.md#copyoptions9) | Whether copy and paste is allowed.<br>If this attribute is set to **CopyOptions.None**, the paste operation is allowed, but not the copy or cut operation.|
 
+>  **NOTE**
+>
+>  The default value of the universal attribute [padding](ts-universal-attributes-size.md) is as follows: { top: 8 vp, right: 16 vp, bottom: 16 vp, left: 8 vp }
+
 
 ## Events
 
@@ -72,6 +76,18 @@ Sets the position of the caret.
 | ------ | -------- | ---- | -------------------------------------- |
 | value  | number   | Yes  | Length from the start of the string to the position where the caret is located.|
 
+### setTextSelection<sup>10+</sup>
+
+setTextSelection(selectionStart: number, selectionEnd: number): void
+
+Sets the text selection range.
+
+**Parameters**
+
+| Name        | Type| Mandatory| Description          |
+| -------------- | -------- | ---- | ------------------ |
+| selectionStart | number   | Yes  | Start of the selection range.|
+| selectionEnd   | number   | Yes  | End of the selection range.|
 
 ## Example
 

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

@@ -34,14 +34,21 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 | type                     | [InputType](#inputtype)     | Input box type.<br>Default value: **InputType.Normal**       |
 | placeholderColor         | [ResourceColor](ts-types.md#resourcecolor)     | Placeholder text color.|
 | placeholderFont          | [Font](ts-types.md#font) | Placeholder text font.|
-| enterKeyType             | [EnterKeyType](#enterkeytype) | Type of the Enter key. Currently, only the default value is supported.<br>Default value: **EnterKeyType.Done**|
+| enterKeyType             | [EnterKeyType](#enterkeytype) | Type of the Enter key. Only the default value is supported.<br>Default value: **EnterKeyType.Done**|
 | caretColor               | [ResourceColor](ts-types.md#resourcecolor)    | Color of the caret in the text box.                              |
 | maxLength                | number                                   | Maximum number of characters in the text input.                           |
-| inputFilter<sup>8+</sup> | {<br>value: [ResourceStr](ts-types.md#resourcestr),<br>error?: (value: string) =&gt; void<br>} | Regular expression for input filtering. Only inputs that comply with the regular expression can be displayed. Other inputs are filtered out. The specified regular expression can match single characters, but not strings.<br>- **value**: regular expression to set.<br>- **error**: filtered-out content to return when regular expression matching fails.|
+| inputFilter<sup>8+</sup> | {<br>value: [ResourceStr](ts-types.md#resourcestr),<br>error?: (value: string) =&gt; void<br>} | Regular expression for input filtering. Only inputs that comply with the regular expression can be displayed. Other inputs are filtered out. The regular expression can match single characters, but not strings.<br>- **value**: regular expression to set.<br>- **error**: filtered-out content to return when regular expression matching fails.|
 | copyOption<sup>9+</sup>  | [CopyOptions](ts-appendix-enums.md#copyoptions9) | Whether copy and paste is allowed.<br>If this attribute is set to **CopyOptions.None**, the paste operation is allowed, but not the copy or cut operation.|
 | showPasswordIcon<sup>9+</sup> | boolean | Whether to display the show password icon at the end of the password text box.<br>Default value: **true**|
 | style<sup>9+</sup> | [TextInputStyle](#textinputstyle9) | Text input style.<br>Default value: **TextInputStyle.Default**|
 | textAlign<sup>9+</sup>   | [TextAlign](ts-appendix-enums.md#textalign) | Alignment mode of the text in the text box.<br>Default value: **TextAlign.Start** |
+| selectedBackgroundColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | Background color of the selected text.|
+| caretStyle<sup>10+</sup> | {<br>caretWidth: [Length](ts-types.md#length)<br>} | Caret style.                                       |
+| caretPosition<sup>10+</sup> | number | Caret position.|
+
+>  **NOTE**
+>
+>  The default value of the universal attribute [padding](ts-universal-attributes-size.md) is as follows: <br>{<br> top: 8 vp,<br> right: 16 vp,<br> bottom: 16 vp,<br> left: 8 vp<br> }
 
 ## EnterKeyType
 
@@ -103,7 +110,18 @@ Sets the position of the caret.
 | Name| Type| Mandatory| Description                              |
 | ------ | -------- | ---- | -------------------------------------- |
 | value  | number   | Yes  | Length from the start of the string to the position where the caret is located.|
+### setTextSelection<sup>10+</sup>
+
+setTextSelection(selectionStart: number, selectionStart: number): void
+
+Sets the text selection area, which will be highlighted.
+
+**Parameters**
 
+| Name        | Type| Mandatory| Description              |
+| -------------- | -------- | ---- | ---------------------- |
+| selectionStart | number   | Yes  | Start position of the text selection area. The start position of the text in the text box is 0.|
+| selectionEnd   | number   | Yes  | End position of the text selection area.|
 
 ## Example
 

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

@@ -35,9 +35,9 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 | Name      | Description                |
 | -------- | ---------------- |
-| Checkbox | Check box type.<br>**NOTE**<br>The default value of the universal attribute [padding](ts-universal-attributes-size.md) is as follows:<br>{<br> top: 14 vp,<br> right: 6 vp,<br> bottom: 14 vp,<br> left: 6 vp<br> } |
+| Checkbox | Check box type.<br>**NOTE**<br>The default value of the universal attribute [margin](ts-universal-attributes-size.md) is as follows:<br>{<br> top: 12 vp,<br> right: 12 vp,<br> bottom: 12 vp,<br> left: 12 vp<br> } |
 | Button   | Button type. The set string, if any, will be displayed inside the button.      |
-| Switch   | Switch type.<br>**NOTE**<br>The default value of the universal attribute [padding](ts-universal-attributes-size.md) is as follows:<br>{<br> top: 12 vp,<br> right: 12 vp,<br> bottom: 12 vp,<br> left: 12 vp<br> } |
+| Switch   | Switch type.<br>**NOTE**<br>The default value of the universal attribute [margin](ts-universal-attributes-size.md) is as follows:<br>{<br> top: 14 vp,<br> right:6 vp,<br> bottom: 6 vp,<br> left: 14 vp<br> } |
 
 
 ## Attributes

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

@@ -5,7 +5,8 @@ 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.
+> - 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.
+> - If the main axis of the **\<Flex>** component is not set, it follows the size of the parent container. On the contrary, if the main axis of the [\<Column>](ts-container-column.md) or [\<Row>](ts-container-row.md) component is not set, it follows the size of their child component.
 
 
 ## Child Components

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

@@ -76,7 +76,7 @@ This API is supported in ArkTS widgets.
 | onScrollIndex(event: (start: number, end: number) => void) | Triggered when scrolling starts.<br>When calculating the index value, the **\<ListItemGroup>** accounts for one index value as a whole, and the index values of the list items within are not calculated.<br>- **start**: index of the scroll start position.<br>- **end**: index of the scroll end position.<br>Since API version 9, this API is supported in ArkTS widgets.|
 | onReachStart(event: () => void) | Triggered when the list reaches the start position.<br>Since API version 9, this API is supported in ArkTS widgets.|
 | onReachEnd(event: () => void) | Triggered when the list reaches the end position.<br>Since API version 9, this API is supported in ArkTS widgets.|
-| onScrollFrameBegin<sup>9+</sup>(event: (offset: number, state: ScrollState) => { offsetRemain }) | Triggered when the list starts to scroll. The input parameters indicate the amount by which the list will scroll. The event handler then works out the amount by which the list needs to scroll based on the real-world situation and returns the result.<br>\- **offset**: amount to scroll by.<br>\- **state**: current sliding status.<br>- **offsetRemain**: actual amount by which the list scrolls.<br>This API is supported in ArkTS widgets.|
+| onScrollFrameBegin<sup>9+</sup>(event: (offset: number, state: ScrollState) => { offsetRemain }) | Triggered when the list starts to scroll. The input parameters indicate the amount by which the list will scroll. The event handler then works out the amount by which the list needs to scroll based on the real-world situation and returns the result.<br>\- **offset**: amount to scroll by.<br>\- **state**: current sliding status.<br>- **offsetRemain**: actual amount by which the list scrolls.<br>This API is supported in ArkTS widgets.<br>**NOTE**<br>If **listDirection** is set to **Axis.Vertical**, the return value is the amount by which the list needs to scroll in the vertical direction. If **listDirection** is set to **Axis.Horizontal**, the return value is the amount by which the list needs to scroll in the horizontal direction.|
 | onScrollStart<sup>9+</sup>(event: () => void) | Triggered when the list starts scrolling initiated by the user's finger dragging the **\<Scroll>** component or its scrollbar. This event is also triggered when the animation contained in the scrolling triggered by [Scroller](ts-container-scroll.md#scroller) starts.<br>This API is supported in ArkTS widgets.|
 | onScrollStop(event: () => void) | Triggered when the list stops scrolling after the user's finger leaves the screen. This event is also triggered when the animation contained in the scrolling triggered by [Scroller](ts-container-scroll.md#scroller) stops.<br>Since API version 9, this API is supported in ArkTS widgets.|
 | onItemMove(event: (from: number, to: number) => boolean) | Triggered when a list item moves.<br>- **from**: index of the item before moving.<br>- **to**: index of the item after moving.|

en/application-dev/reference/arkui-ts/ts-explicit-animation.md

@@ -42,7 +42,7 @@ struct AnimateToExample {
 
   build() {
     Column() {
-      Button('change width and height')
+      Button('change size')
         .width(this.widthSize)
         .height(this.heightSize)
         .margin(30)
@@ -57,8 +57,8 @@ struct AnimateToExample {
                 console.info('play end')
               }
             }, () => {
-              this.widthSize = 100
-              this.heightSize = 50
+              this.widthSize = 150
+              this.heightSize = 60
             })
           } else {
             animateTo({}, () => {
@@ -77,7 +77,7 @@ struct AnimateToExample {
             curve: Curve.Friction,
             delay: 500,
             iterations: -1, // The value -1 indicates that the animation is played for an unlimited number of times.
-            playMode: PlayMode.AlternateReverse,
+            playMode: PlayMode.Alternate,
             onFinish: () => {
               console.info('play end')
             }
@@ -90,10 +90,4 @@ struct AnimateToExample {
 }
 ```
 
-The figure below shows two buttons in their initial state.
-
-![animation](figures/animation.PNG)
-
-Clicking the first button plays the animation of resizing the button, and clicking the second button plays the animation of rotating the button clockwise by 90 degrees. The figure below shows the two buttons when the animations have finished.
-
-![animation1](figures/animation1.PNG)
+![animation1](figures/animation1.gif)

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

@@ -118,9 +118,9 @@ Requests full-screen mode.
 
 **Parameters**
 
-| Name  | Type   | Mandatory  | Description                 |
-| ----- | ------- | ---- | --------------------- |
-| value | boolean | Yes   | Whether the playback is in full-screen mode.<br>Default value: **false**|
+| Name| Type| Mandatory| Description                                          |
+| ------ | -------- | ---- | -------------------------------------------------- |
+| value  | boolean  | Yes  | Whether to play the video in full screen mode within the application window.<br>Default value: **false**|
 
 ### exitFullscreen
 
@@ -173,7 +173,7 @@ struct VideoCreateComponent {
         previewUri: this.previewUri,
         currentProgressRate: this.curRate,
         controller: this.controller
-      }).width(800).height(600)
+      }).width('100%').height(600)
         .autoPlay(this.isAutoPlay)
         .controls(this.showControls)
         .onStart(() => {
@@ -186,7 +186,7 @@ struct VideoCreateComponent {
           console.info('onFinish')
         })
         .onError(() => {
-          console.info('onFinish')
+          console.info('onError')
         })
         .onPrepared((e) => {
           console.info('onPrepared is ' + e.duration)

en/application-dev/reference/arkui-ts/ts-motion-path-animation.md

@@ -11,7 +11,7 @@ The motion path animation is used to animate a component along a custom path.
 
 | Name| Type| Default Value| Description|
 | -------- | -------- | -------- | -------- |
-| motionPath | {<br>path: string,<br>from?: number,<br>to?: number,<br>rotatable?: boolean<br>}<br>**NOTE**<br>In a path, **start** and **end** can be used to replace the start point and end point. Example:<br>'Mstart.x start.y L50 50 Lend.x end.y Z'<br>For more information, see [Path Drawing](../../ui/ui-js-components-svg-path.md).| {<br>'',<br>0.0,<br>1.0,<br>false<br>} | Motion path of the component.<br>- **path**: motion path of the translation animation. The value is an SVG path string.<br>- **from**: start point of the motion path. The default value is **0.0**.<br>- **to**: end point of the motion path. The default value is **1.0**.<br>- **rotatable**: whether to rotate along the path. |
+| motionPath | {<br>path: string,<br>from?: number,<br>to?: number,<br>rotatable?: boolean<br>}<br>**NOTE**<br>In a path, **start** and **end** can be used to replace the start point and end point. Example:<br>'Mstart.x start.y L50 50 Lend.x end.y Z'<br>For more information, see [Path Drawing](../../ui/ui-js-components-svg-path.md).| {<br>'',<br>0.0,<br>1.0,<br>false<br>} | Motion path of the component.<br>- **path**: motion path of the translation animation. The value is an SVG path string.<br>- **from**: start point of the motion path. The default value is **0.0**.<br>- **to**: end point of the motion path. The default value is **1.0**.<br>- **rotatable**: whether to rotate along the path.|
 
 
 ## Example
@@ -25,7 +25,7 @@ struct MotionPathExample {
 
   build() {
     Column() {
-      Button('click me')
+      Button('click me').margin(50)
         // Execute the animation: Move from the start point to (300,200), then to (300,500), and finally to the end point.
         .motionPath({ path: 'Mstart.x start.y L300 200 L300 500 Lend.x end.y', from: 0.0, to: 1.0, rotatable: true })
         .onClick(() => {
@@ -38,4 +38,4 @@ struct MotionPathExample {
 }
 ```
 
-![en-us_image_0000001212378420](figures/en-us_image_0000001212378420.gif)
+![en-us_image_0000001174104400](figures/en-us_image_0000001174104400.gif)

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

@@ -32,19 +32,15 @@ struct PositionExample1 {
       Column({ space: 10 }) {
         // When the component content is within the area specified by the component width and height, set the alignment mode of the content in the component.
         Text('align').fontSize(9).fontColor(0xCCCCCC).width('90%')
-        Text('top start')
-          .align(Alignment.TopStart)
-          .height(50)
-          .width('90%')
-          .fontSize(16)
-          .backgroundColor(0xFFE4C4)
-
-        Text('Bottom end')
-          .align(Alignment.BottomEnd)
-          .height(50)
-          .width('90%')
-          .fontSize(16)
-          .backgroundColor(0xFFE4C4)
+        Stack() {
+          Text('First show in bottom end').height('65%').backgroundColor(0xD2B48C)
+          Text('Second show in bottom end').backgroundColor(0xF5DEB3).opacity(0.9)
+        }.width('90%').height(50).margin({ top: 5 }).backgroundColor(0xFFE4C4)
+        .align(Alignment.BottomEnd)
+        Stack() {
+          Text('top start')
+        }.width('90%').height(50).margin({ top: 5 }).backgroundColor(0xFFE4C4)
+        .align(Alignment.TopStart)
 
         // To arrange the child components from left to right, set direction of the parent container to Direction.Ltr.
         Text('direction').fontSize(9).fontColor(0xCCCCCC).width('90%')
@@ -86,6 +82,7 @@ struct PositionExample2 {
       Text('position').fontSize(12).fontColor(0xCCCCCC).width('90%')
       Row() {
         Text('1').size({ width: '30%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16)
+          .textAlign(TextAlign.Center)
         Text('2 position(30, 10)')
           .size({ width: '60%', height: '30' })
           .backgroundColor(0xbbb2cb)
@@ -94,6 +91,7 @@ struct PositionExample2 {
           .align(Alignment.Start)
           .position({ x: 30, y: 10 })
         Text('3').size({ width: '45%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16)
+          .textAlign(TextAlign.Center)
         Text('4 position(50%, 70%)')
           .size({ width: '50%', height: '50' })
           .backgroundColor(0xbbb2cb)
@@ -110,14 +108,20 @@ struct PositionExample2 {
           .size({ width: '100', height: '100' })
           .backgroundColor(0xdeb887)
         Text('text')
+          .fontSize('30px')
+          .textAlign(TextAlign.Center)
           .size({ width: 25, height: 25 })
           .backgroundColor(Color.Green)
           .markAnchor({ x: 25, y: 25 })
         Text('text')
+          .fontSize('30px')
+          .textAlign(TextAlign.Center)
           .size({ width: 25, height: 25 })
           .backgroundColor(Color.Green)
           .markAnchor({ x: -100, y: -25 })
         Text('text')
+          .fontSize('30px')
+          .textAlign(TextAlign.Center)
           .size({ width: 25, height: 25 })
           .backgroundColor(Color.Green)
           .markAnchor({ x: 25, y: -25 })
@@ -127,6 +131,7 @@ struct PositionExample2 {
       Text('offset').fontSize(12).fontColor(0xCCCCCC).width('90%')
       Row() {
         Text('1').size({ width: '15%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16)
+          .textAlign(TextAlign.Center)
         Text('2  offset(15, 30)')
           .size({ width: 120, height: '50' })
           .backgroundColor(0xbbb2cb)
@@ -135,6 +140,7 @@ struct PositionExample2 {
           .align(Alignment.Start)
           .offset({ x: 15, y: 30 })
         Text('3').size({ width: '15%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16)
+          .textAlign(TextAlign.Center)
         Text('4 offset(-10%, 20%)')
           .size({ width: 100, height: '50' })
           .backgroundColor(0xbbb2cb)

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

-# Text Style
+# Universal Text Attributes
 
-The text style attributes set the style for text in a component.
+Universal text attributes include text style attributes applicable to text containers.
 
 >  **NOTE**
 >
@@ -18,6 +18,8 @@ The text style attributes set the style for text in a component.
 | fontStyle  | [FontStyle](ts-appendix-enums.md#fontstyle)  | Font style.<br>Default value: **FontStyle.Normal**        |
 | fontWeight | number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string  | Font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is **400**. A larger value indicates a larger font weight. The string type supports only the string of the number type, for example, **400**, **"bold"**, **"bolder"**, **"lighter"**, **"regular"**, and **"medium"**, which correspond to the enumerated values in **FontWeight**.<br>Default value: **FontWeight.Normal** |
 | fontFamily | string \| [Resource](ts-types.md#resource)  | Font family.<br>Default value: **'HarmonyOS Sans'**<br>Currently, only the default font is supported. |
+| lineHeight | string \| number \| [Resource](ts-types.md#resource) | Text line height. If the value is less than or equal to **0**, the line height is not limited and the font size is adaptive. If the value of the number type, the unit fp is used.|
+| decoration | {<br>type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype),<br>color?: [ResourceColor](ts-types.md#resourcecolor)<br>} | Style and color of the text decorative line.<br>Default value: {<br>type: TextDecorationType.None,<br>color: Color.Black<br>} |
 
 
 ## Example

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

@@ -132,7 +132,7 @@ The splash screen animation refers to the fade-in and fade-out of the logo. Afte
       .onAppear(() => {
    
         animateTo({
-         duration: 2000,
+         duration: 1000,
           curve: this.curve1, 
           delay: 100, 
           onFinish: () => {
@@ -199,7 +199,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,
              onFinish: () => {

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

@@ -10,32 +10,32 @@
 
 ## Usage
 
-Invoke the **mediaquery** API to set the media query condition and the callback, and change the page layout or implement service logic in the callback corresponding to the condition.
+Invoke the **mediaquery** API to set the media query condition and the callback, and change the page layout or implement service logic in the callback corresponding to the condition. The procedure is as follows:
 
-First, import the **mediaquery** module, as shown below:
+1. Import the **mediaquery** module, as shown below:
 
-```ts
-import mediaquery from '@ohos.mediaquery'
-```
+   ```ts
+   import mediaquery from '@ohos.mediaquery'
+   ```
 
-Then, use the **matchMediaSync** API to set the media query condition and save the returned listener, as shown below:
+2. Use the **matchMediaSync** API to set the media query condition and save the returned listener, as shown below:
 
-```ts
-listener = mediaquery.matchMediaSync('(orientation: landscape)')
-```
+   ```ts
+   listener = mediaquery.matchMediaSync('(orientation: landscape)')
+   ```
 
-Finally, register the **onPortrait** callback using the saved listener, and change the page layout or implement service logic in the callback. When the media query condition is matched, the callback is triggered. The sample code is as follows:
+3. Register the **onPortrait** callback using the saved listener, and change the page layout or implement service logic in the callback. When the media query condition is matched, the callback is triggered. The sample code is as follows:
 
-```ts
-onPortrait(mediaQueryResult) {
-    if (mediaQueryResult.matches) {
-        // do something here
-    } else {
-        // do something here
-    }
-}
-listener.on('change', onPortrait)
-```
+   ```ts
+   onPortrait(mediaQueryResult) {
+       if (mediaQueryResult.matches) {
+           // do something here
+       } else {
+           // do something here
+       }
+   }
+   listener.on('change', onPortrait)
+   ```
 
 ## Media Query Conditions
 
@@ -95,10 +95,10 @@ At MediaQuery Level 4, range query is imported so that you can use the operators
 | height            | Height of the display area on the application page.                                    |
 | min-height        | Minimum height of the display area on the application page.                                |
 | max-height        | Maximum height of the display area on the application page.                                |
-| width             | Width of the display area on the app page.                                    |
+| width             | Width of the display area on the application page.                                    |
 | min-width         | Minimum width of the display area on the application page.                                |
 | max-width         | Maximum width of the display area on the application page.                                |
-| resolution        | Resolution of the device. The unit can be dpi, dppx, or dpcm.<br>- **dpi** indicates the number of physical pixels per inch. 1 dpi ≈ 0.39 dpcm.<br>- **dpcm** indicates the number of physical pixels per centimeter. 1 dpcm ≈ 2.54 dpi.<br>- **dppx** indicates the number of physical pixels in each pixel. (This unit is calculated based on this formula: 96 px = 1 inch, which is different from the calculation method of the px unit on the page.) 1 dppx = 96 dpi.|
+| resolution        | Resolution of the device. The unit can be dpi, dppx, or dpcm.  <br>- **dpi** indicates the number of physical pixels per inch. 1 dpi ≈ 0.39 dpcm.<br>- **dpcm** indicates the number of physical pixels per centimeter. 1 dpcm ≈ 2.54 dpi.<br>- **dppx** indicates the number of physical pixels in each pixel. (This unit is calculated based on this formula: 96 px = 1 inch, which is different from the calculation method of the px unit on the page.) 1 dppx = 96 dpi.|
 | min-resolution    | Minimum device resolution.                                          |
 | max-resolution    | Maximum device resolution.                                          |
 | orientation       | Screen orientation.<br>Options are as follows:<br>- orientation: portrait<br>- orientation: landscape|
@@ -106,7 +106,7 @@ At MediaQuery Level 4, range query is imported so that you can use the operators
 | min-device-height | Minimum height of the device.                                            |
 | max-device-height | Maximum height of the device.                                            |
 | device-width      | Width of the device.                                                |
-| device-type       | Type of the device.<br>Value range: **default**                |
+| device-type       | Type of the device.<br>Options: **default** and tablet                    |
 | min-device-width  | Minimum width of the device.                                            |
 | max-device-width  | Maximum width of the device.                                            |
 | round-screen      | Screen type. The value **true** means that the screen is round, and **false** means the opposite. |