Update docs (22139)

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

en/application-dev/quick-start/arkts-create-custom-components.md

@@ -70,8 +70,6 @@ To fully understand the preceding example, a knowledge of the following concepts
 
 - [Universal Style of a Custom Component](#universal-style-of-a-custom-component)
 
-- [Custom Attribute Methods](#custom-attribute-methods)
-
 
 ## Basic Structure of a Custom Component
 
@@ -106,6 +104,8 @@ To fully understand the preceding example, a knowledge of the following concepts
   > **NOTE**
   >
   > Since API version 9, this decorator is supported in ArkTS widgets.
+  >
+  > Since API version 10, the \@Entry decorator accepts an optional parameter of type [LocalStorage](arkts-localstorage.md) or type [EntryOptions](#entryoptions10).
 
   ```ts
   @Entry
@@ -114,6 +114,23 @@ To fully understand the preceding example, a knowledge of the following concepts
   }
   ```
 
+  ### EntryOptions<sup>10+</sup>
+
+  Describes the named route options.
+
+  | Name  | Type  | Mandatory| Description                                                        |
+  | ------ | ------ | ---- | ------------------------------------------------------------ |
+  | routeName | string | No| Name of the target named route.|
+  | storage | [LocalStorage](arkts-localstorage.md) | No| Storage of page-level UI state.|
+
+  ```ts
+  @Entry({ routeName : 'myPage' })
+  @Component
+  struct MyComponent {
+  }
+  ```
+
+
 - \@Recycle: A custom component decorated with \@Recycle can be reused.
 
   > **NOTE**
@@ -328,68 +345,4 @@ struct MyComponent {
 >
 > When ArkUI sets styles for custom components, an invisible container component is set for **MyComponent2**. These styles are set on the container component instead of the **\<Button>** component of **MyComponent2**. As seen from the rendering result, the red background color is not directly applied to the button. Instead, it is applied to the container component that is invisible to users where the button is located.
 
-
-## Custom Attribute Methods
-
-Custom components do not support custom attribute methods. You can use the Controller capability to implement custom APIs.
-
-
-```ts
-// Custom controller
-export class MyComponentController {
-  item: MyComponent = null;
-
-  setItem(item: MyComponent) {
-    this.item = item;
-  }
-
-  changeText(value: string) {
-    this.item.value = value;
-  }
-}
-
-// Custom component
-@Component
-export default struct MyComponent {
-  public controller: MyComponentController = null;
-  @State value: string = 'Hello World';
-
-  build() {
-    Column() {
-      Text(this.value)
-        .fontSize(50)
-    }
-  }
-
-  aboutToAppear() {
-    if (this.controller)
-      this.controller.setItem (this); // Link to the controller.
-  }
-}
-
-// Processing logic
-@Entry
-@Component
-struct StyleExample {
-  controller = new MyComponentController();
-
-  build() {
-    Column() {
-      MyComponent({ controller: this.controller })
-    }
-    .onClick(() => {
-      this.controller.changeText('Text');
-    })
-  }
-}
-```
-
-In the preceding example:
-
-1. The **aboutToAppear** method of the **MyComponent** child component passes the current **this** pointer to the **item** member variable of **MyComponentController**.
-
-2. The **StyleExample** parent component holds a **Controller** instance and with which calls the **changeText** API of **Controller**. That is, the value of the state variable **value** of **MyComponent** is changed through the **this** pointer of the **MyComponent** child component held by the controller.
-
-Through the encapsulation of the controller, **MyComponent** exposes the **changeText** API. All instances that hold the controller can call the **changeText** API to change the value of the **MyComponent** state variable **value**.
-
 <!--no_check-->

en/application-dev/quick-start/arkts-persiststorage.md

@@ -92,7 +92,7 @@ struct Index {
   1. The state variable **\@StorageLink('aProp') aProp** is updated, triggering the **\<Text>** component to be re-rendered.
   2. The two-way synchronization between the \@StorageLink decorated variable and AppStorage results in the change of the **\@StorageLink('aProp') aProp** being synchronized back to AppStorage.
   3. The change of the **aProp** attribute in AppStorage triggers any other one-way or two-way bound variables to be updated. (In this example, there are no such other variables.)
-  4. Because the attribute corresponding to **aProp** has been persisted, the change of the **aProp** attribute in AppStorage triggers PersistentStorage to write the attribute and its changed value to the device disk.
+  4. Because the attribute corresponding to **aProp** has been persisted, the change of the **aProp** attribute in AppStorage triggers PersistentStorage to write the attribute and its new value to the device disk.
 
 - Subsequent application running:
   1. **PersistentStorage.PersistProp('aProp', 47)** is called. A search for the **aProp** attribute on the PersistentStorage disk succeeds.

en/application-dev/quick-start/arkts-state.md

@@ -25,21 +25,21 @@ An @State decorated variable, like all other decorated variables in the declarat
 
 ## Rules of Use
 
-| \@State Decorator| Description                                      |
-| ------------ | ---------------------------------------- |
-| Decorator parameters       | None.                                       |
-| Synchronization type        | Does not synchronize with any type of variable in the parent component.                        |
-| Allowed variable types   | Object, class, string, number, Boolean, enum, and array of these types. For details about the scenarios of nested types, see [Observed Changes](#observed-changes).<br>The type must be specified.<br>**any** is not supported. A combination of simple and complex types is not supported. The **undefined** and **null** values are not allowed.<br>**NOTE**<br>Avoid using this decorator to decorate the Date type, as doing so may lead to unexpected behavior of the application.<br>The Length, ResourceStr, and ResourceColor types are a combination of simple and complex types and therefore not supported.|
-| Initial value for the decorated variable   | Mandatory.                                   |
+| \@State Decorator | Description                                                        |
+| ------------------ | ------------------------------------------------------------ |
+| Decorator parameters        | None.                                                          |
+| Synchronization type          | Does not synchronize with any type of variable in the parent component.                            |
+| Allowed variable types| Object, class, string, number, Boolean, enum, and array of these types.<br>Date type.<br>For details about the scenarios of supported types, see [Observed Changes](#observed-changes).<br>The type must be specified.<br>**any** is not supported. A combination of simple and complex types is not supported. The **undefined** and **null** values are not allowed.<br>**NOTE**<br>The Length, ResourceStr, and ResourceColor types are a combination of simple and complex types and therefore not supported.|
+| Initial value for the decorated variable| Local initialization is required.                                              |
 
 
 ## Variable Transfer/Access Rules
 
-| Transfer/Access    | Description                                      |
-| --------- | ---------------------------------------- |
-| Initialization from the parent component  | Optional. Initialization from the parent component or local initialization can be used.<br>An \@State decorated variable can be initialized from a regular variable or an \@State, \@Link, \@Prop, \@Provide, \@Consume, \@ObjectLink, \@StorageLink, \@StorageProp, \@LocalStorageLink, or \@LocalStorageProp decorated variable in its parent component.|
-| Subnode initialization | Supported. An \@State decorated variable can be used to initialize a regular variable or \@State, \@Link, \@Prop, or \@Provide decorated variable in the child component.|
-| Access| Private, accessible only within the component.                           |
+| Transfer/Access         | Description                                                        |
+| ------------------ | ------------------------------------------------------------ |
+| Initialization from the parent component    | Optional. Initialization from the parent component or local initialization can be used. The initial value specified in the parent component will overwrite the one defined locally.<br>An \@State decorated variable can be initialized from a regular variable or an \@State, \@Link, \@Prop, \@Provide, \@Consume, \@ObjectLink, \@StorageLink, \@StorageProp, \@LocalStorageLink, or \@LocalStorageProp decorated variable in its parent component.|
+| Subnode initialization  | Supported. An \@State decorated variable can be used to initialize a regular variable or \@State, \@Link, \@Prop, or \@Provide decorated variable in the child component.|
+| Access| Private, accessible only within the component.                                  |
 
   **Figure 1** Initialization rule 
 
@@ -153,6 +153,45 @@ Not all changes to state variables cause UI updates. Only changes that can be ob
   this.title.push(new Model(12))
   ```
 
+- When the decorated variable is of the Date type, the overall value assignment of the Date object can be observed, and the following APIs can be called to update Date attributes: **setFullYear**, **setMonth**, **setDate**, **setHours**, **setMinutes**, **setSeconds**, **setMilliseconds**, **setTime**, **setUTCFullYear**, **setUTCMonth**, **setUTCDate**, **setUTCHours**, **setUTCMinutes**, **setUTCSeconds**, and **setUTCMilliseconds**.
+
+  ```ts
+  @Entry
+  @Component
+  struct DatePickerExample {
+    @State selectedDate: Date = new Date('2021-08-08')
+  
+    build() {
+      Column() {
+        Button('set selectedDate to 2023-07-08')
+          .margin(10)
+          .onClick(() => {
+            this.selectedDate = new Date('2023-07-08')
+          })
+        Button('increase the year by 1')
+          .margin(10)
+          .onClick(() => {
+            this.selectedDate.setFullYear(this.selectedDate.getFullYear() + 1)
+          })
+        Button('increase the month by 1')
+          .margin(10)
+          .onClick(() => {
+            this.selectedDate.setMonth(this.selectedDate.getMonth() + 1)
+          })
+        Button('increase the day by 1')
+          .margin(10)
+          .onClick(() => {
+            this.selectedDate.setDate(this.selectedDate.getDate() + 1)
+          })
+        DatePicker({
+          start: new Date('1970-1-1'),
+          end: new Date('2100-1-1'),
+          selected: this.selectedDate
+        })
+      }.width('100%')
+    }
+  }
+  ```
 
 ### Framework Behavior
 
@@ -168,9 +207,9 @@ Not all changes to state variables cause UI updates. Only changes that can be ob
 
 ### Decorating Variables of Simple Types
 
-In this example, \@State is used to decorate the **count** variable of the simple type and turns it into a state variable. The change of **count** causes the update of the **\<Button>** component.
+In this example, \@State is used to decorate the **count** variable of the simple type, turning it into a state variable. The change of **count** causes the update of the **\<Button>** component.
 
-- When the state variable **count** changes, the framework searches for components that depend on this state variable, which include only the **\<Button>** component in this example.
+- When **count** changes, the framework searches for components bound to it, which include only the **\<Button>** component in this example.
 
 - The framework executes the update method of the **\<Button>** component to implement on-demand update.
 

en/application-dev/quick-start/har-package.md

@@ -2,7 +2,17 @@
 A Harmony Archive (HAR) is a static shared package that can contain code, C++ libraries, resources, and configuration files. It enables modules and projects to share code related to ArkUI components, resources, and more. Unlike a Harmony Ability Package (HAP), a HAR cannot be independently installed on a device. Instead, it can be referenced only as the dependency of an application module.
 
 ## Creating a HAR Module
-You can [create a HAR module in DevEco Studio](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/creating_har_api9-0000001518082393-V3#section143510369612). To better protect your source code, enable obfuscation for the HAR module so that DevEco Studio compiles, obfuscates, and compresses code during HAR building. To enable obfuscation, open the **build-profile.json5** file of the HAR module and set **artifactType** to **obfuscation** as follows:
+You can [create a HAR module in DevEco Studio](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/creating_har_api9-0000001518082393-V3#section143510369612).
+
+To better protect your source code, enable obfuscation for the HAR module so that DevEco Studio compiles, obfuscates, and compresses code during HAR building.
+
+> **NOTE**
+>
+> Obfuscation is only available for ArkTS projects in the stage model.
+
+### Obfuscation in API Version 9
+
+In API version 9, obfuscation is disabled by default, and can be enabled by setting **artifactType** to **obfuscation** in the **build-profile.json5** file of the HAR module. The configuration is as follows:
 
 ```json
 {
@@ -16,9 +26,43 @@ The value options of **artifactType** are as follows, with the default value bei
 - **original**: Code is not obfuscated.
 - **obfuscation**: Code is obfuscated using Uglify.
 
-> **NOTE**
->
-> Obfuscation is available only in the stage model. Therefore, if **artifactType** is set to **obfuscation**, **apiType** must be set to **stageMode**.
+### Obfuscation in API Version 10
+
+In API version 10, obfuscation is enabled by default, and can be set through the **enable** field under **ruleOptions** in the **build-profile.json5** file of the HAR module. The configuration is as follows:
+
+```json
+{
+  "apiType": "stageMode",
+  "buildOption": {
+  },
+  "buildOptionSet": [
+    {
+      "name": "release",
+      "arkOptions": {
+        "obfuscation": {
+          "ruleOptions": {
+            "enable": true,
+            "files": [
+              "./obfuscation-rules.txt"
+            ]
+          },
+          "consumerFiles": [
+            "./consumer-rules.txt"
+          ]
+        }
+      }
+    },
+  ],
+  "targets": [
+    {
+      "name": "default"
+    }
+  ]
+}
+```
+### Adaptation Guide
+
+The **artifactType** field is forward compatible, and the original function is not affected. Yet, it is deprecated since API version 10, and you are advised to use the substitute as soon as possible.
 
 ## Precautions for HAR Development
 - The HAR does not support the declaration of **abilities** and **extensionAbilities** in its configuration file.
@@ -95,7 +139,7 @@ To start with, [configure dependency](https://developer.harmonyos.com/cn/docs/do
 
 ### Reference ArkUI Components in the HAR
 
-After configuring the dependency on the HAR, you can reference ArkUI components exported from the HAR by using **import**. The sample code is as follows:
+After configuring the dependency on the HAR, you can reference ArkUI components exported from the HAR by using **import**. The code snippet is as follows:
 ```js
 // entry/src/main/ets/pages/index.ets
 import { MainPage } from "@ohos/library"

en/application-dev/reference/arkui-js-lite/Readme-EN.md

 # JavaScript-compatible Web-like Development Paradigm (ArkUI.Lite)
 
 - Framework Overview
-    - [File Organization](js-framework-file.md)
-    - ["js" Tag](js-framework-js-tag.md)
-    - [app.js](js-framework-js-file.md)
-    - Syntax
-        - [HML](js-framework-syntax-hml.md)
-        - [CSS](js-framework-syntax-css.md)
-        - [JavaScript](js-framework-syntax-js.md)
+  - [File Organization](js-framework-file.md)
+  - ["js" Tag](js-framework-js-tag.md)
+  - [app.js](js-framework-js-file.md)
+
+  - Syntax
+    - [HML](js-framework-syntax-hml.md)
+    - [CSS](js-framework-syntax-css.md)
+    - [JavaScript](js-framework-syntax-js.md)
 - Universal Component Information
-    - [Universal Events](js-common-events.md)
-    - [Universal Attributes](js-common-attributes.md)
-    - [Universal Styles](js-common-styles.md)
-    - [Animation Styles](js-components-common-animation.md)
-    - [Media Query](js-components-common-mediaquery.md)
+  - [Universal Events](js-common-events.md)
+  - [Universal Attributes](js-common-attributes.md)
+  - [Universal Styles](js-common-styles.md)
+  - [Animation Styles](js-components-common-animation.md)
+  - [Media Query](js-components-common-mediaquery.md)
 - Container Components
-    - [div](js-components-container-div.md)
-    - [list](js-components-container-list.md)
-    - [list-item](js-components-container-list-item.md)
-    - [stack](js-components-container-stack.md)
-    - [swiper](js-components-container-swiper.md)
+  - [div](js-components-container-div.md)
+  - [list](js-components-container-list.md)
+  - [list-item](js-components-container-list-item.md)
+  - [stack](js-components-container-stack.md)
+  - [swiper](js-components-container-swiper.md)
 - Basic Components
-    - [chart](js-components-basic-chart.md)
-    - [image](js-components-basic-image.md)
-    - [image-animator](js-components-basic-image-animator.md)
-    - [input](js-components-basic-input.md)
-    - [marquee](js-components-basic-marquee.md)
-    - [picker-view](js-components-basic-picker-view.md)
-    - [progress](js-components-basic-progress.md)
-    - [qrcode](js-components-basic-qrcode.md)
-    - [slider](js-components-basic-slider.md)
-    - [switch](js-components-basic-switch.md)
-    - [text](js-components-basic-text.md)
+  - [chart](js-components-basic-chart.md)
+  - [image](js-components-basic-image.md)
+  - [image-animator](js-components-basic-image-animator.md)
+  - [input](js-components-basic-input.md)
+  - [marquee](js-components-basic-marquee.md)
+  - [picker-view](js-components-basic-picker-view.md)
+  - [progress](js-components-basic-progress.md)
+  - [qrcode](js-components-basic-qrcode.md)
+  - [slider](js-components-basic-slider.md)
+  - [switch](js-components-basic-switch.md)
+  - [text](js-components-basic-text.md)
 - Canvas Components
-    - [canvas](js-components-canvas-canvas.md)
-    - [CanvasRenderingContext2D](js-components-canvas-canvasrenderingcontext2d.md)
+  - [canvas](js-components-canvas-canvas.md)
+  - [CanvasRenderingContext2D](js-components-canvas-canvasrenderingcontext2d.md)
\ No newline at end of file

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

@@ -25,7 +25,7 @@ In addition to the [backgroundColor](ts-universal-attributes-background.md) attr
 
 | Name        | Type                                                    | Description                                                        |
 | ------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
-| title        | string \| [CustomBuilder](ts-types.md#custombuilder8) \| [NavigationCommonTitle](ts-basic-components-navigation.md#navigationcommontitle) \| [NavigationCustomTitle](ts-basic-components-navigation.md##navigationcustomtitle) | Page title.<br>**NOTE**<br>When the NavigationCustomTitle type is used to set the height, the **titleMode** attribute does not take effect.<br>When the title string is too long: (1) If no subtitle is set, the string is scaled down, wrapped in two lines, and then clipped with an ellipsis (...); (2) If a subtitle is set, the subtitle is scaled down and then clipped with an ellipsis (...).|
+| title        | string \| [CustomBuilder](ts-types.md#custombuilder8) \| [NavigationCommonTitle](ts-basic-components-navigation.md#navigationcommontitle) \| [NavigationCustomTitle](ts-basic-components-navigation.md##navigationcustomtitle) | Page title.<br>**NOTE**<br>When the NavigationCustomTitle type is used to set the height, the **titleMode** attribute does not take effect.<br>When the title string is too long:<br>(1) If no subtitle is set, the string is scaled down, wrapped in two lines, and then clipped with an ellipsis (...).<br/>(2) If a subtitle is set, the subtitle is scaled down and then clipped with an ellipsis (...). |
 | hideTitleBar | boolean                                                      | Whether to hide the title bar.<br>Default value: **false**<br>**true**: Hide the title bar.<br>**false**: Display the title bar.|
 
 ## Events
@@ -33,8 +33,8 @@ In addition to the [backgroundColor](ts-universal-attributes-background.md) attr
 In addition to the [universal events](ts-universal-events-click.md), the following events are supported.
 
 
-| Name                                      | Description                                    |
-| ---------------------------------------- | ---------------------------------------- |
-| onShown(callback: (param: unknown) =&gt; void)<sup>10+</sup> | Called when the navigation destination page is displayed. **param**: parameter information of the navigation destination page.<br>**NOTE**<br>The **onShown** API will be changed to **onShown(callback: () =&gt; void)**.|
-| onHidden(callback: () =&gt; void)<sup>10+</sup> | Called when the navigation destination page is hidden.|
-| onBackPressed(callback: () =&gt; boolean)<sup>10+</sup> | Called when the back button is pressed.<br>The value **true** means that the back button logic is overridden, and **false** means that the previous page is displayed.<br>|
+| Name                                                    | Description                                                  |
+| ------------------------------------------------------- | ------------------------------------------------------------ |
+| onShown(callback: () =&gt; void)<sup>10+</sup>          | Called when the navigation destination page is displayed.    |
+| onHidden(callback: () =&gt; void)<sup>10+</sup>         | Called when the navigation destination page is hidden.       |
+| onBackPressed(callback: () =&gt; boolean)<sup>10+</sup> | Called when the back button is pressed.<br>The value **true** means that the back button logic is overridden, and **false** means that the previous page is displayed. |

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

@@ -27,6 +27,9 @@ RichEditor(value: RichEditorOptions)
 
 The [universal attributes](ts-universal-attributes-size.md) are supported.
 
+>  **NOTE**
+>
+> The default value of the **clip** attribute is **true**.
 ## Events
 
 In addition to the [universal events](ts-universal-events-click.md), the following events are supported.
@@ -209,7 +212,7 @@ Adds an image span.
 
 updateSpanStyle(value: RichEditorUpdateTextSpanStyleOptions | RichEditorUpdateImageSpanStyleOptions): void
 
-Updates the text or image span style.
+Updates the text or image span style.<br>If only part of a span is updated, the span is split into multiple spans based on the updated part and the unupdated part.
 
 **Parameters**
 
@@ -299,7 +302,7 @@ Provides the text style information.
 | fontColor | [ResourceColor](ts-types.md#resourcecolor) | No| Font color.<br> Default value: **Color.Black**|
 | fontSize | [Length](ts-types.md#length) \| number   | No| Font size.<br>Default value: **16fp**|
 | fontStyle | [FontStyle](ts-appendix-enums.md#fontstyle) | No| Font style.<br>Default value: **FontStyle.Normal**|
-| fontWeight | [FontWeight](ts-appendix-enums.md#fontweight) \| number \| string | No| Font weight.<br>Default value: **FontWeight.Normal**|
+| fontWeight | [FontWeight](ts-appendix-enums.md#fontweight) \| number \| string | No| Font weight.<br>For the number type, the value ranges from 100 to 900, at an interval of 100. A larger value indicates a heavier font weight. The default value is **400**.<br>For the string type, only strings of the number type are supported, for example, **"400"**, **"bold"**, **"bolder"**, **"lighter"**, **"regular"**, and **"medium"**, which correspond to the enumerated values in **FontWeight**.<br>Default value: **FontWeight.Normal**|
 | fontFamily  | [ResourceStr](ts-types.md#resourcestr) \| number \| string | No| Font family. Default value: **'HarmonyOS Sans'**.<br>Currently, only the default font is supported.<br>Default font: **'HarmonyOS Sans'**|
 | decoration  | {<br>type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype),<br>color?: [ResourceColor](ts-types.md#resourcecolor)<br>} | No| Style and color of the text decorative line.<br>Default value: {<br>type: TextDecorationType.None,<br>color: Color.Black<br>}|
 

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

@@ -12,7 +12,7 @@ Not supported
 
 ## APIs
 
-Search(options?: { value?: string; placeholder?: ResourceStr; icon?: string; controller?: SearchController })
+Search(options?: { value?: string, placeholder?: ResourceStr, icon?: string, controller?: SearchController })
 
 **Parameters**
 
@@ -20,7 +20,7 @@ Search(options?: { value?: string; placeholder?: ResourceStr; icon?: string; con
 | ----------- | ---------------------------------------------------- | ---- | ------------------------------------------------------------ |
 | value       | string                                               | No  | Text input in the search text box.<br>Since API version 10, this parameter supports two-way binding through [$$](../../quick-start/arkts-two-way-sync.md).|
 | placeholder | [ResourceStr](ts-types.md#resourcestr)<sup>10+</sup> | No  | Text displayed when there is no input.                                    |
-| icon        | string                                               | No  | Path to the search icon. By default, the system search icon is used.<br>**NOTE**<br>The icon data source can be a local or online image.<br>- The supported formats include PNG, JPG, BMP, SVG, GIF, and pixelmap.<br>- The Base64 string is supported in the following format: data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data], where [base64 data] is a Base64 string.|
+| icon        | string                                               | No  | Path to the search icon. By default, the system search icon is used.<br>**NOTE**<br>The icon data source can be a local or online image.<br>- The supported formats include PNG, JPG, BMP, SVG, GIF, and pixelmap.<br>- The Base64 string is supported in the following format: data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data], where [base64 data] is a Base64 string.<br>If this attribute and the **searchIcon** attribute are both set, the **searchIcon** attribute takes precedence.|
 | controller  | SearchController                                     | No  | Controller of the **\<Search>** component.                                      |
 
 ## Attributes

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

@@ -40,7 +40,7 @@ Among the [universal attributes](ts-universal-attributes-size.md) and [universal
 | 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>Default value: **CopyOptions.LocalDevice**<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 password icon at the end of the password text box.<br>Default value: **true**|
-| style<sup>9+</sup> | [TextInputStyle](#textinputstyle9) \| [TextContentStyle](ts-appendix-enums.md#textcontentstyle10) | Text input style.<br>Default value: **TextInputStyle.Default**|
+| style<sup>9+</sup> | [TextInputStyle](#textinputstyle9) \| [TextContentStyle](ts-appendix-enums.md#textcontentstyle10) | Text input style.<br>Default value: **TextInputStyle.Default**<br>In the case of **TextInputStyle.Inline**, setting the text alignment mode is not available.|
 | textAlign<sup>9+</sup>   | [TextAlign](ts-appendix-enums.md#textalign) | Horizontal alignment of the text.<br>Default value: **TextAlign.Start**<br>**NOTE**<br>Available options are **TextAlign.Start**, **TextAlign.Center**, and **TextAlign.End**.<br>To set vertical alignment for the text, use the [align](ts-universal-attributes-location.md) attribute. The **align** attribute alone does not control the horizontal position of the text. In other words, **Alignment.TopStart**, **Alignment.Top**, and **Alignment.TopEnd** produce the same effect, top-aligning the text; **Alignment.Start**, **Alignment.Center**, and **Alignment.End** produce the same effect, centered-aligning the text vertically; **Alignment.BottomStart**, **Alignment.Bottom**, and **Alignment.BottomEnd** produce the same effect, bottom-aligning the text. |
 | selectedBackgroundColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | Background color of the selected text.<br>If the opacity is not set, the color is opaque. For example, **0x80000000** indicates black with 50% opacity.|
 | caretStyle<sup>10+</sup> | {<br>width: [Length](ts-types.md#length)<br>} | Caret style.                                       |
@@ -51,6 +51,8 @@ Among the [universal attributes](ts-universal-attributes-size.md) and [universal
 | passwordIcon<sup>10+</sup> | [PasswordIcon](#passwordicon10) | Password icon to display at the end of the password text box.<br>By default, the system-provided icon is used.|
 | enableKeyboardOnFocus<sup>10+</sup> | boolean | Whether to enable the input method when the component obtains focus.<br>Default value: **true**  |
 | selectionMenuHidden<sup>10+</sup> | boolean | Whether to display the text selection menu when the text box is long-pressed or right-clicked.<br>Default value: **false**|
+| barState<sup>10+</sup> | [BarState](ts-appendix-enums.md#BarState) | Scrollbar state when the inline input style is used.<br>Default value: **BarState.Auto**|
+| maxLines<sup>10+</sup> | number | Maximum number of lines that can be displayed when the inline input style is used.<br>Default value: **3**|
 
 >  **NOTE**
 >
@@ -71,7 +73,7 @@ Among the [universal attributes](ts-universal-attributes-size.md) and [universal
 | Name                | Description           |
 | ------------------ | ------------- |
 | Normal   | Normal input mode.<br>The value can contain digits, letters, underscores (_), spaces, and special characters.|
-| Password | Password input mode. The value can contain digits, letters, underscores (_), spaces, and special characters. An eye icon is used to show or hide the password, and the password is hidden behind dots by default.|
+| Password | Password input mode. The value can contain digits, letters, underscores (_), spaces, and special characters. An eye icon is used to show or hide the password, and the password is hidden behind dots by default. The password input mode does not support underlines.|
 | Email    | Email address input mode. The value can contain digits, letters, underscores (_), and at signs (@). Only one at sign (@) is allowed.|
 | Number   | Digit input mode.     |
 | PhoneNumber<sup>9+</sup> | Phone number input mode.<br>The value can contain digits, plus signs (+), hyphens (-), asterisks (*), and number signs (#). The length is not limited.|
@@ -81,7 +83,7 @@ Among the [universal attributes](ts-universal-attributes-size.md) and [universal
 | Name                | Description           |
 | ------------------ | ------------- |
 | Default   | Default style. The caret width is fixed at 1.5 vp, and the caret height is subject to the background height and font size of the selected text.  |
-| Inline    | Inline input style. The background height of the selected text is the same as the height of the text box.     |
+| Inline    | Inline input style. The background height of the selected text is the same as the height of the text box.<br>This style is used in scenarios where editing and non-editing states are obvious, for example, renaming in the file list view.|
 
 ## PasswordIcon<sup>10+</sup>
 
@@ -241,7 +243,7 @@ struct TextInputExample {
 }
 ```
 
-![textInput](figures/textInput.gif)
+![TextInput](figures/TextInput.png)
 
 ### Example 2
 

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

@@ -76,6 +76,9 @@ struct TimePickerExample {
           this.selectedTime.setHours(value.hour, value.minute)
           console.info('select current date is: ' + JSON.stringify(value))
         })
+        .disappearTextStyle({color: Color.Red, font: {size: 15, weight: FontWeight.Lighter}})
+        .textStyle({color: Color.Black, font: {size: 20, weight: FontWeight.Normal}})
+        .selectedTextStyle({color: Color.Blue, font: {size: 30, weight: FontWeight.Bolder}})
     }.width('100%')
   }
 }

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

@@ -63,6 +63,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 | edgeEffect<sup>10+</sup> | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | Scroll effect. The spring effect and shadow effect are supported.<br>Default value: **EdgeEffect.None**<br>|
 | enableScrollInteraction<sup>10+</sup>  |  boolean  |   Whether to support scroll gestures. When this attribute is set to **false**, scrolling by finger or mouse is not supported, but the scrolling controller API is not affected.<br>Default value: **true**     |
 | nestedScroll<sup>10+</sup>                 | [NestedScrollOptions](ts-container-scroll.md#nestedscrolloptions10)         | Nested scrolling options. You can set the nested scrolling mode in the forward and backward directions to implement scrolling linkage with the parent component.|
+| friction<sup>10+</sup> | number \| [Resource](ts-types.md#resource)    | Friction coefficient. It applies only to gestures in the scrolling area, and it affects only indirectly the scroll chaining during the inertial scrolling process.<br>Default value: **0.9** for wearable devices and **0.6** for non-wearable devices<br>**NOTE**<br>A value less than or equal to 0 evaluates to the default value.|
 
 Depending on the settings of the **rowsTemplate** and **columnsTemplate** attributes, the **\<Grid>** component supports the following layout modes:
 
@@ -186,6 +187,7 @@ struct GridExample {
       .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
       .columnsGap(10)
       .rowsGap(10)
+      .friction(0.6)
       .edgeEffect(EdgeEffect.Spring)
       .scrollBar(BarState.On)
       .onScrollIndex((first: number) => {
@@ -220,7 +222,7 @@ struct GridExample {
 @Entry
 @Component
 struct GridExample {
-  @State numbers: String[] = []
+  @State numbers: string[] = []
   scroller: Scroller = new Scroller()
   @State text: string = 'drag'
 
@@ -256,11 +258,6 @@ struct GridExample {
               .width(80)
               .height(80)
               .textAlign(TextAlign.Center)
-              .onTouch((event: TouchEvent) => {
-                if (event.type === TouchType.Up) {
-                  this.text = day
-                }
-              })
           }
         })
       }
@@ -275,6 +272,7 @@ struct GridExample {
       .height(300)
       .editMode(true) // Enable the grid to enter editing mode, where the user can drag the grid items.
       .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { // Triggered when a grid item starts to be dragged.
+        this.text = this.numbers[itemIndex]
         return this.pixelMapBuilder() // Set the image to be displayed during dragging.
       })
       .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { // Triggered when the dragged item is dropped on the drop target of the grid.

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

@@ -66,6 +66,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 | scrollSnapAlign<sup>10+</sup>       | [ScrollSnapAlign](#scrollsnapalign10) | Alignment mode of list items when scrolling ends.<br>Default value: **ScrollSnapAlign.NONE**<br>**NOTE**<br>This attribute is available only when the heights of list items are the same.|
 | enableScrollInteraction<sup>10+</sup>  |  boolean  |   Whether to support scroll gestures. When this attribute is set to **false**, scrolling by finger or mouse is not supported, but the scrolling controller API is not affected.<br>Default value: **true**     |
 | nestedScroll<sup>10+</sup>                 | [NestedScrollOptions](ts-container-scroll.md#nestedscrolloptions10)         | Nested scrolling options. You can set the nested scrolling mode in the forward and backward directions to implement scrolling linkage with the parent component.|
+| friction<sup>10+</sup> | number \| [Resource](ts-types.md#resource)    | Friction coefficient. It applies only to gestures in the scrolling area, and it affects only indirectly the scroll chaining during the inertial scrolling process.<br>Default value: **0.9** for wearable devices and **0.6** for non-wearable devices<br>**NOTE**<br>A value less than or equal to 0 evaluates to the default value.|
 
 ## ListItemAlign<sup>9+</sup>
 
@@ -163,7 +164,7 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 The table below lists the changes in the **ScrollState** enums.
 
-| Scenario    | API version 9 and earlier                        |API version 10 and later                          |
+| Scenario    | API Version 9 and Earlier                        |API Version 10 and Later                          |
 | ------ | ------------------------------ |------------------------------ |
 | Finger dragging  | Scroll | Scroll |
 | Inertial scrolling  | Fling | Fling |
@@ -213,6 +214,7 @@ struct ListExample {
       }
       .listDirection(Axis.Vertical) // Arrangement direction
       .scrollBar(BarState.Off)
+      .friction(0.6)
       .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // Divider
       .edgeEffect(EdgeEffect.Spring) // Set the edge scrolling effect to Spring.
       .onScrollIndex((firstIndex: number, lastIndex: number, centerIndex: number) => {
@@ -264,6 +266,7 @@ struct ListLanesExample {
       }
       .height(300)
       .width("90%")
+      .friction(0.6)
       .border({ width: 3, color: Color.Red })
       .lanes({ minLength: 40, maxLength: 40 })
       .alignListItem(this.alignListItem)
@@ -327,6 +330,7 @@ struct ListExample{
           }, item => item)
         }.width('90%')
         .scrollBar(BarState.Off)
+        .friction(0.6)
       }.width('100%')
 
       Button('edit list')

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

@@ -37,6 +37,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 | edgeEffect     | [EdgeEffect](ts-appendix-enums.md#edgeeffect)            | Scroll effect. For details, see **EdgeEffect**.<br>Default value: **EdgeEffect.None**|
 | enableScrollInteraction<sup>10+</sup>  |  boolean  |   Whether to support scroll gestures. When this attribute is set to **false**, scrolling by finger or mouse is not supported, but the scrolling controller API is not affected.<br>Default value: **true**     |
 | nestedScroll<sup>10+</sup>                 | [NestedScrollOptions](#nestedscrolloptions10)         | Nested scrolling options. You can set the nested scrolling mode in the forward and backward directions to implement scrolling linkage with the parent component.|
+| friction<sup>10+</sup> | number \| [Resource](ts-types.md#resource)    | Friction coefficient. It applies only to gestures in the scrolling area, and it affects only indirectly the scroll chaining during the inertial scrolling process.<br>Default value: **0.9** for wearable devices and **0.6** for non-wearable devices<br>**NOTE**<br>A value less than or equal to 0 evaluates to the default value.|
 
 ## ScrollDirection
 | Name      | Description                    |
@@ -84,8 +85,8 @@ Scrolls to the specified position.
 
 | Name   | Type                                                    | Mandatory| Description                                                    |
 | --------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
-| xOffset   | number \| string                                   | Yes  | Horizontal scrolling offset.<br>**NOTE**<br>This parameter cannot be set in percentage.<br>This parameter is valid only when the scroll axis is the x-axis.|
-| yOffset   | number \| string                                   | Yes  | Vertical scrolling offset.<br>**NOTE**<br>This parameter cannot be set in percentage.<br>This parameter is valid only when the scroll axis is the y-axis.|
+| xOffset   | number \| string                                   | Yes  | Horizontal scrolling offset.<br>**NOTE**<br>This parameter cannot be set in percentage.<br>If the value is less than 0, no operation is performed. That is, this parameter does not take effect.<br>This parameter is valid only when the scroll axis is the x-axis.|
+| yOffset   | number \| string                                   | Yes  | Vertical scrolling offset.<br>**NOTE**<br>This parameter cannot be set in percentage.<br>If the value is less than 0, no operation is performed. That is, this parameter does not take effect.<br>This parameter is valid only when the scroll axis is the y-axis.|
 | animation | {duration?: number, curve?: [Curve](ts-appendix-enums.md#curve) \| [ICurve](../apis/js-apis-curve.md#icurve)<sup>10+ </sup>} \| boolean<sup>10+ </sup> | No  | Animation configuration, which includes the following:<br>- **duration**: scrolling duration.<br>- **curve**: scrolling curve.<br>- **boolean**: whether to enable the default spring animation.<br>Default value:<br>{<br>duration: 1000,<br>curve: Curve.Ease<br>}<br>boolean: false<br>**NOTE**<br>A value less than 0 evaluates to the default value.<br>Currently, the **\<List>**, **\<Scroll>**, **\<Grid>**, and **\<WaterFlow>** support the **Boolean** type and **ICurve**.|
 
 
@@ -243,6 +244,7 @@ struct ScrollExample {
       .scrollBar(BarState.On)  // The scrollbar is always displayed.
       .scrollBarColor(Color.Gray)  // Color of the scrollbar.
       .scrollBarWidth(10) // The scrollbar width is 10.
+      .friction(0.6)
       .edgeEffect(EdgeEffect.None)
       .onScroll((xOffset: number, yOffset: number) => {
         console.info(xOffset + ' ' + yOffset)
@@ -325,6 +327,7 @@ struct NestedScroll {
           .width("100%")
           .height("50%")
           .edgeEffect(EdgeEffect.None)
+          .friction(0.6)
           .onReachStart(() => {
             this.listPosition = 0
           })
@@ -399,6 +402,7 @@ struct StickyNestedScroll {
       }.width("100%")
     }
     .edgeEffect(EdgeEffect.Spring)
+    .friction(0.6)
     .backgroundColor('#DCDCDC')
     .scrollBar(BarState.Off)
     .width('100%')

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

@@ -134,11 +134,11 @@ Describes the left and right arrow attributes.
 
 | Name             | Type                                    | Mandatory. | Description                                    |
 | ---------------- | ---------------------------------------- | ---- | ---------------------------------------- |
-| isShowBackground | boolean                                  | No   | Whether to show the background for the arrow.<br>Default value: **false**               |
+| showBackground   | boolean                                  | No   | Whether to show the background for the arrow.<br>Default value: **false**               |
 | isSidebarMiddle  | boolean                                  | No   | Whether the arrow is shown on either side of the navigation point indicator.<br>Default value: **false** (the arrow is shown on either side of the navigation point indicator)|
 | backgroundSize   | [Length](ts-types.md#length)             | No   | Size of the background.<br>On both sides of the navigation point indicator:<br>Default value: **24vp**<br>On both sides of the component:<br>Default value: **32vp**<br>This parameter cannot be set in percentage.|
 | backgroundColor  | [ResourceColor](ts-types.md#resourcecolor) | No   | Color of the background.<br>On both sides of the navigation point indicator:<br>Default value: **'\#19182431'**<br>On both sides of the component:<br>Default value: **'\#00000000'**|
-| arrowSize        | [Length](ts-types.md#length)             | No   | Size of the arrow.<br>On both sides of the navigation point indicator:<br>Default value: **18vp**<br>On both sides of the component:<br>Default value: **24vp**<br>**NOTE**<br>If **isShowBackground** is set to **true**, the value of **arrowSize** is 3/4 of the value of **backgroundSize**.<br>This parameter cannot be set in percentage.|
+| arrowSize        | [Length](ts-types.md#length)             | No   | Size of the arrow.<br>On both sides of the navigation point indicator:<br>Default value: **18vp**<br>On both sides of the component:<br>Default value: **24vp**<br>**NOTE**<br>If **showBackground** is set to **true**, the value of **arrowSize** is 3/4 of the value of **backgroundSize**.<br>This parameter cannot be set in percentage.|
 | arrowColor       | [ResourceColor](ts-types.md#resourcecolor) | No   | Color of the arrow.<br>Default value: **\#182431**                |
 
 ## SwiperAutoFill<sup>10+</sup>
@@ -219,7 +219,7 @@ struct SwiperExample {
       .duration(1000)
       .itemSpace(0)
       .displayArrow({
-        isShowBackground:true,
+        showBackground:true,
         isSidebarMiddle:true,
         backgroundSize:24,
         backgroundColor:Color.White,

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

@@ -46,6 +46,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 | layoutDirection | [FlexDirection](ts-appendix-enums.md#flexdirection) |Main axis direction of the layout.<br>Default value: **FlexDirection.Column**|
 | enableScrollInteraction<sup>10+</sup>  |  boolean  |   Whether to support scroll gestures. When this attribute is set to **false**, scrolling by finger or mouse is not supported, but the scrolling controller API is not affected.<br>Default value: **true**     |
 | nestedScroll<sup>10+</sup>                 | [NestedScrollOptions](ts-container-scroll.md#nestedscrolloptions10)         | Nested scrolling options. You can set the nested scrolling mode in the forward and backward directions to implement scrolling linkage with the parent component.|
+| friction<sup>10+</sup> | number \| [Resource](ts-types.md#resource)    | Friction coefficient. It applies only to gestures in the scrolling area, and it affects only indirectly the scroll chaining during the inertial scrolling process.<br>Default value: **0.9** for wearable devices and **0.6** for non-wearable devices<br>**NOTE**<br>A value less than or equal to 0 evaluates to the default value.|
 
 The priority of **layoutDirection** is higher than that of **rowsTemplate** and **columnsTemplate**. Depending on the **layoutDirection** settings, there are three layout modes:
 
@@ -278,6 +279,7 @@ struct WaterflowDemo {
         minHeight: 0,
         maxHeight: '100%'
       })
+      .friction(0.6)
       .columnsGap(10)
       .rowsGap(5)
       .onReachStart(() => {

en/application-dev/reference/arkui-ts/ts-gesture-settings.md

@@ -52,10 +52,10 @@ The component binds gesture objects of different **GestureType**s through gestur
 | repeat | boolean | Whether the event is triggered repeatedly. This attribute is used for the **LongPressGesture** event.|
 | offsetX | number | Offset of the gesture event on the x-axis, in vp. This attribute is used for the **PanGesture** event. A positive value means to pan from left to right, and a negative value means the opposite.|
 | offsetY | number | Offset of the gesture event on the y-axis, in vp. This attribute is used for the **PanGesture** event. A positive value means to pan from top to bottom, and a negative value means the opposite.|
-| angle | number | Rotation angle for the **RotationGesture** event;<br>angle of the swipe gesture for the **SwipeGesture** event, that is, the change in the included angle between the line segment created by the two fingers and the horizontal direction.<br>**NOTE**<br>Angle calculation method: After a swipe gesture is recognized, a line connecting the two fingers is identified as the initial line. As the fingers swipe, the line between the fingers rotates. Based on the coordinates of the initial line's and current line's end points, an arc tangent function is used to calculate the respective included angle of the points relative to the horizontal direction by using the following formula: Rotation angle = arctan2(cy2-cy1,cx2-cx1) – arctan2(y2-y1,x2-x1) The initial line is used as the coordinate system. The clockwise rotation is 0 to 180 degrees, and the counter-clockwise rotation is –180 to 0 degrees.|
+| angle | number | Rotation angle for the **RotationGesture** event;<br>angle of the swipe gesture for the **SwipeGesture** event, that is, the change in the included angle between the line segment created by the two fingers and the horizontal direction.<br>**NOTE**<br>Angle calculation method: After a swipe gesture is recognized, a line connecting the two fingers is identified as the initial line. As the fingers swipe, the line between the fingers rotates. Based on the coordinates of the initial line's and current line's end points, an arc tangent function is used to calculate the respective included angle of the points relative to the horizontal direction by using the following formula: Rotation angle = arctan2(cy2-cy1,cx2-cx1) - arctan2(y2-y1,x2-x1) The initial line is used as the coordinate system. The clockwise rotation is 0 to 180 degrees, and the counter-clockwise rotation is –180 to 0 degrees.|
 | scale | number | Scale ratio. This attribute is used for the **PinchGesture** event.|
-| pinchCenterX | number | X-coordinate of the center of the pinch gesture, in vp, relative to the upper left corner of the current component. This attribute is used for the **PinchGesture** event.|
-| pinchCenterY | number | Y-coordinate of the center of the pinch gesture, in vp, relative to the upper left corner of the current component. This attribute is used for the **PinchGesture** event.|
+| pinchCenterX | number | X coordinate of the center of the pinch gesture, in vp, relative to the upper left corner of the current component. This attribute is used for the **PinchGesture** event.|
+| pinchCenterY | number | Y coordinate of the center of the pinch gesture, in vp, relative to the upper left corner of the current component. This attribute is used for the **PinchGesture** event.|
 | speed<sup>8+</sup> | number | Swipe gesture speed, that is, the average swipe speed of all fingers. The unit is vp/s. This attribute is used for the **SwipeGesture** event.|
 | fingerList<sup>8+</sup> | [FingerInfo](#fingerinfo)[] | Information about all fingers that trigger the event. This attribute is used for the **LongPressGesture** and **TapGesture** events.|
 | timestamp<sup>8+</sup> | number | Timestamp of the event.|
@@ -82,8 +82,8 @@ The component binds gesture objects of different **GestureType**s through gestur
 | id | number | Index of a finger.|
 | globalX | number | X-coordinate relative to the upper left corner of the application window.|
 | globalY | number | Y-coordinate relative to the upper left corner of the application window.|
-| localX | number | X-coordinate relative to the upper left corner of the current component.|
-| localY | number | Y-coordinate relative to the upper left corner of the current component.|
+| localX | number | X coordinate relative to the upper left corner of the current component.|
+| localY | number | Y coordinate relative to the upper left corner of the current component.|
 
 ## SourceTool
 | Name| Description|

en/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md

@@ -46,6 +46,9 @@ struct TimePickerDialogExample {
         .onClick(() => {
           TimePickerDialog.show({
             selected: this.selectTime,
+            disappearTextStyle: {color: Color.Red, font: {size: 15, weight: FontWeight.Lighter}},
+            textStyle: {color: Color.Black, font: {size: 20, weight: FontWeight.Normal}},
+            selectedTextStyle: {color: Color.Blue, font: {size: 30, weight: FontWeight.Bolder}},
             onAccept: (value: TimePickerResult) => {
               // Set selectTime to the time when the OK button is clicked. In this way, when the dialog box is displayed again, the selected time is the time when the operation was confirmed last time.
               this.selectTime.setHours(value.hour, value.minute)
@@ -65,6 +68,9 @@ struct TimePickerDialogExample {
           TimePickerDialog.show({
             selected: this.selectTime,
             useMilitaryTime: true,
+            disappearTextStyle: {color: Color.Red, font: {size: 15, weight: FontWeight.Lighter}},
+            textStyle: {color: Color.Black, font: {size: 20, weight: FontWeight.Normal}},
+            selectedTextStyle: {color: Color.Blue, font: {size: 30, weight: FontWeight.Bolder}},
             onAccept: (value: TimePickerResult) => {
               this.selectTime.setHours(value.hour, value.minute)
               console.info("TimePickerDialog:onAccept()" + JSON.stringify(value))

en/application-dev/reference/arkui-ts/ts-pixel-units.md

@@ -2,17 +2,17 @@
 
 ArkUI provides four pixel units, with vp as the reference data unit.
 
->**Notes:**
+>**NOTE**
 >
 >The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version.
 
 
-| Name  | Description                                      |
-| ---- | ---------------------------------------- |
-| px   | Physical pixel unit of the screen.                               |
+| Name| Description                                                        |
+| ---- | ------------------------------------------------------------ |
+| px   | Physical pixel unit of the screen.                                          |
 | vp   | Pixel unit specific to the screen density. Pixels in this unit are converted into physical pixels of the screen based on the screen pixel density. This unit is used for values whose unit is not specified. On a screen with an actual width of 1440 physical pixels, 1 vp is approximately equal to 3 px.|
-| fp   | Font pixel, which is similar to vp and varies according to the system font size.         |
-| lpx  | Logical pixel unit of the window. It is the ratio of the actual screen width to the logical width (configured by **designWidth**). For example, if **designWidth** is set to **720** (default value), then 1 lpx is equal to 2 px for a screen with an actual width of 1440 physical pixels.|
+| fp   | Font pixel, which is similar to vp and varies according to the system font size.|
+| lpx  | Logical pixel unit of the window. It is the ratio of the actual screen width to the logical width (configured by [designWidth](../../quick-start/module-configuration-file.md#pages)). For example, if **designWidth** is set to **720** (default value), then 1 lpx is equal to 2 px for a screen with an actual width of 1440 physical pixels.|
 
 
 ## Pixel Unit Conversion

en/application-dev/ui/arkts-common-components-text-input.md

@@ -125,8 +125,6 @@ TextInput()
 
 In this example, the text box is used to submit forms on the user login or registration page.
 
-
-
 ```ts
 @Entry
 @Component
@@ -148,4 +146,4 @@ struct TextInputSample {
 ```
 
 
-![en-us_image_0000001563060653](figures/en-us_image_0000001563060653.png)
+![TextInputGIF](figures/TextInputGIF.gif)