update docs

Signed-off-by: Nge-yafang <geyafang@huawei.com>

en/application-dev/ui/Readme-EN.md → en/application-dev/device/ui/Readme-CN.md

 # UI
 
-- JavaScript-based Web-Like Development Paradigm
+- [ArkUI Overview](arkui-overview.md)
+- JavaScript-based Web-like Development Paradigm
     - [Overview](ui-js-overview.md)
     - Framework
         - [File Organization](js-framework-file.md)
@@ -26,21 +27,22 @@
         - [Defining Events](ui-js-building-ui-event.md)
         - [Defining Page Routes](ui-js-building-ui-routes.md)
     - Common Component Development Guidelines
-        - [Text](ui-js-components-text.md)
-        - [Input](ui-js-components-input.md)
-        - [Button](ui-js-components-button.md)
-        - [List](ui-js-components-list.md)
-        - [Picker](ui-js-components-picker.md)
-        - [Dialog](ui-js-components-dialog.md)
-        - [Form](ui-js-components-form.md)
-        - [Stepper](ui-js-components-stepper.md)
-        - [Tabs](ui-js-component-tabs.md)
-        - [Image](ui-js-components-images.md)
+        - [<text> Development](ui-js-components-text.md)
+        -   [<input> Development](ui-js-components-input.md)
+        -   [<button> Development](ui-js-components-button.md)
+        -   [<list> Development](ui-js-components-list.md)
+        -   [<picker> Development](ui-js-components-picker.md)
+        -   [<dialog> Development](ui-js-components-dialog.md)
+        -   [<form> Development](ui-js-components-form.md)
+        -   [<stepper> Development](ui-js-components-stepper.md)
+        -   [<tabs> Development](ui-js-component-tabs.md)
+        -   [<image> Development](ui-js-components-images.md)
     - Animation Development Guidelines
         - CSS Animation
             - [Defining Attribute Style Animations](ui-js-animate-attribute-style.md)
             - [Defining Animations with the transform Attribute](ui-js-animate-transform.md)
             - [Defining Animations with the background-position Attribute](ui-js-animate-background-position-style.md)
+            - [Defining Animations for SVG Components](ui-js-animate-svg.md)
         - JS Animation
             - [Component Animation](ui-js-animate-component.md)
             - Interpolator Animation
@@ -65,9 +67,9 @@
         - General UI Description Specifications
             - [Basic Concepts](ts-general-ui-concepts.md)
             - Declarative UI Description Specifications
-                - [Parameterless Configuration](ts-parameterless-configuration.md)
+                - [Configuration Without Parameters](ts-parameterless-configuration.md)
                 - [Configuration with Mandatory Parameters](ts-configuration-with-mandatory-parameters.md)
-                - [Attribution Configuration](ts-attribution-configuration.md)
+                - [Attribute Configuration](ts-attribution-configuration.md)
                 - [Event Configuration](ts-event-configuration.md)
                 - [Child Component Configuration](ts-child-component-configuration.md)
             - Componentization
@@ -77,6 +79,7 @@
                 - [@Builder](ts-component-based-builder.md)
                 - [@Extend](ts-component-based-extend.md)
                 - [@CustomDialog](ts-component-based-customdialog.md)
+                - [@Styles](ts-component-based-styles.md)
         - About UI State Management
             - [Basic Concepts](ts-ui-state-mgmt-concepts.md)
             - Managing Component States
@@ -88,7 +91,7 @@
                 - [PersistentStorage](ts-application-states-apis-persistentstorage.md)
                 - [Environment](ts-application-states-apis-environment.md)
             - Managing Other States
-                - [@observed and @objectLink](ts-other-states-observed-objectlink.md)
+                - [@Observed and @ObjectLink](ts-other-states-observed-objectlink.md)
                 - [@Consume and @Provide](ts-other-states-consume-provide.md)
                 - [@Watch](ts-other-states-watch.md)
             - About Rendering Control Syntax
@@ -97,10 +100,12 @@
                 - [LazyForEach](ts-rending-control-syntax-lazyforeach.md)
         - About @Component
             - [build Function](ts-function-build.md)
-            - [Custom Component Initialization](ts-custom-component-initialization.md)
+            - [Initialization of Custom Components' Member Variables](ts-custom-component-initialization.md)
             - [Custom Component Lifecycle Callbacks](ts-custom-component-lifecycle-callbacks.md)
-            - [Example: Component Creation and Re-Initialization](ts-component-creation-re-initialization.md)
-        - [Syntactic Sugar](ts-syntactic-sugar.md)
+            - [Component Creation and Re-initialization](ts-component-creation-re-initialization.md)
+        - [About Syntactic Sugar](ts-syntactic-sugar.md)
+    - Common Component Development Guidelines
+        - [<web> Development](ui-ts-components-web.md)
     - Experiencing the Declarative UI
         - [Creating a Declarative UI Project](ui-ts-creating-project.md)
         - [Getting to Know Components](ui-ts-components.md)
@@ -110,4 +115,3 @@
         - [Building a Food Category List Layout](ui-ts-building-category-list-layout.md)
         - [Building a Food Category Grid Layout](ui-ts-building-category-grid-layout.md)
         - [Implementing Page Redirection and Data Transmission](ui-ts-page-redirection-data-transmission.md)
-

en/application-dev/device/ui/arkui-overview.md

+# ArkUI Overview
+
+
+## Introduction
+
+ArkUI is a UI development framework that provides what you'll need to develop application UIs.
+
+
+## Basic Concepts
+
+- Component: the smallest unit for UI building and display. You build a UI that meets your needs through flexible combinations of components.
+
+- Page: the smallest unit for ArkUI application scheduling. You can design multiple pages for your application, manage their files on a per-page basis, and schedule page redirection through routing APIs, so as to implement decoupling of application functions.
+
+
+## Key Capabilities
+
+- Diverse components: In addition to a wide range of basic components, such as components for text display, image display, and keypress interaction, ArkUI provides media components that support video playback. Better yet, it also provides polymorphic components, which can adapt to styles of different devices.
+
+- Flexible layouts: Creating a responsive UI in ArkUI is easy, with our carefully-designed layout approaches: Besides the classic flexible layout capability, you also have access to the list, grid, and atomic layouts that auto-adapt to screen resolutions.
+
+- Animation: Apart from animations embedded in components, ArkUI offers additional animation features: attribute animation, transition animation, and custom animation.
+
+- UI interaction: ArkUI allows users to interact with your application UI properly, regardless of the system platform and input device. By default, the UI accepts input from touch gestures, remote controls, and mouse devices, with support for the event notification capability.
+
+- Drawing: ArkUI offers advanced drawing capabilities that allow you to draw custom shapes with a range of editors, from images to fill colors and texts.
+
+- Platform API channel: ArkUI provides an API extension mechanism through which platform capabilities are encapsulated to produce JavaScript APIs in a unified style.
+
+
+## Development Paradigms
+
+ArkUI comes with two development paradigms: JavaScript-based web-like development paradigm (web-like development paradigm for short) and TypeScript-based declarative development paradigm (declarative development paradigm for short). You can choose whichever development paradigm that aligns with your practice.
+
+
+### Web-like Development Paradigm
+
+The web-like development paradigm uses the classical three-stage programming model, in which OpenHarmony Markup Language (HML) is used for building layouts, CSS for defining styles, and JavaScript for adding processing logic. UI components are associated with data through one-way data-binding. This means that when data changes, the UI automatically updates with the new data. This development paradigm has a low learning curve for frontend web developers, allowing them to quickly transform existing web applications into ArkUI applications. It could be helpful if you are developing small- and medium-sized applications with simple UIs.
+
+
+### Declarative Development Paradigm
+
+The declarative development paradigm uses the TypeScript programming language and extends the declarative UI syntax, providing UI drawing capabilities from three dimensions: component, animation, and state management. The programming mode used is closer to natural semantics. You can intuitively describe the UI without caring about how the framework implements UI drawing and rendering, leading to simplified and efficient development. With type annotations in TypeScript, you can enforce type checking at compile time. If you are developing large applications, the declarative development paradigm is more applicable.
+
+
+### Web-like Development Paradigm vs. Declarative Development Paradigm
+
+  | Development Paradigm | Language | UI Update Mode | Applicable To | Intended Audience | 
+| -------- | -------- | -------- | -------- | -------- |
+| Web-like development paradigm | JavaScript | Data-driven | Applets and service widgets with simple UIs | Frontend web developers | 
+| Declarative development paradigm | Extended TypeScript (eTS) | Data-driven | Applications involving technological sophistication and teamwork | Mobile application and system application developers | 
+
+
+### Framework Structure
+
+![en-us_image_0000001267647869](figures/en-us_image_0000001267647869.png)
+
+As shown above, the two development paradigms share the UI backend engine and language runtime. The UI backend engine implements the six basic capabilities of the ArkUI framework. The declarative development paradigm does not require the JS Framework for managing the page DOM. As such, it has more streamlined rendering and update links and less memory usage. This makes the declarative development paradigm a better choice for building application UIs.

en/application-dev/device/ui/js-framework-file.md

+# File Organization
+
+## Directory Structure
+
+The following figure shows the typical directory structure of the JavaScript module \(entry/src/main/js/module\) for an application with feature abilities \(FA\) using JavaScript APIs.
+
+**Figure1**  Directory structure
+
+![](figures/unnaming-(1).png)
+
+**Figure2**  Directory structure for resource sharing  <sup>5+</sup>  
+
+![](figures/directory-structure-for-resource-sharing-5+.png "directory-structure-for-resource-sharing-5+")
+
+Functions of the files are as follows:
+
+-   .hml  files describe the page layout.
+-   .css  files describe the page style.
+-   .js  files process the interactions between pages and users.
+
+Functions of the folders are as follows:
+
+-   The  app.js  file manages global JavaScript logics and application lifecycle. For details, see  [app.js](js-framework-js-file.md).
+-   The  pages  directory stores all component pages.
+-   The  common  directory stores public resource files, such as media resources, custom components,  and  .js  files.
+-   The  resources  directory stores resource configuration files, for example, for multi-resolution loading. For details, see  [Resource Limitations and Access](js-framework-resource-restriction.md).
+-   The  share  directory<sup>5+</sup>  is used to configure resources shared by multiple instances. For example, images and JSON files in this directory can be shared by  default1  and  default2  instances.
+
+>![](public_sys-resources/icon-note.gif) **NOTE**: 
+>-   Reserved folders \(i18n  and  resources\) cannot be renamed.
+>-   If the same resource name and directory are used under the  share  directory and the instance \(default\) directory, the resource in the instance directory will be used when you reference the directory.
+>-   The  share  directory does not support  i18n.
+>-   You should create the optional folders \(shown in the directory structure\) as needed after you create the project in DevEco Studio.
+
+## File Access Rules
+
+Application resources can be accessed via an absolute or relative path. In the JS UI framework, an absolute path starts with a slash \(/\), and a relative path starts with  ./  or  ../. The rules are as follows:
+
+-   To reference a code file, use a relative path, for example,  ../common/utils.js.
+-   To reference a resource file, use an absolute path, for example,  /common/xxx.png.
+-   Store code files and resource files in the  common  directory and access the files in a required fashion.
+-   In a  .css  file, use the  url\(\)  function to create a URL, for example,  url\(/common/xxx.png\).
+
+>![](public_sys-resources/icon-note.gif) **NOTE**: 
+>When code file A needs to reference code file B:
+>
+>-   If code files A and B are in the same directory, you can use either a relative or absolute path in code file B to reference resource files.
+>-   If code files A and B are in different directories, you must use an absolute path in code file B to reference resource files because the directory of code file B changes during Webpack packaging.
+>-   Use an absolute path if you want to dynamically change the resource file path through data binding in a  .js  file.
+
+## Media File Formats
+
+Table1  Supported image formats
+
+| Image Format | File Format |
+| ------------ | ----------- |
+| BMP          | .bmp        |
+| GIF          | .gif        |
+| JPEG         | .jpg        |
+| PNG          | .png        |
+| WebP         | .webp       |
+
+Table2  Supported video formats
+
+| Video Formats                   | File Format |
+| ------------------------------- | ----------- |
+| H.264 AVC Baseline Profile (BP) | .3gp .mp4   |
+

en/application-dev/device/ui/js-framework-js-file.md

+# app.js
+
+
+## Application Lifecycle
+
+  You can customize the [lifecycle](js-framework-lifecycle.md) implementation logic on an application-by-application basis in app.js. The following example only prints the corresponding logs in the lifecycle function:
+
+```
+// app.js
+export default {
+    onCreate() {
+        console.info('Application onCreate');
+    },
+
+    onDestroy() {
+        console.info('Application onDestroy');
+    },
+}
+```
+
+## Application Object<sup>6+</sup>
+
+  | Attribute | Data Type | Description | 
+| -------- | -------- | -------- |
+| getApp | Function | Obtains the object exposed in the app.js file from the custom .js file. | 
+
+The following is a sample code snippet:
+
+
+```
+// app.js
+export default {
+    data: {
+        test: "by getAPP"
+    },
+    onCreate() {
+        console.info('AceApplication onCreate');
+    },
+    onDestroy() {
+        console.info('AceApplication onDestroy');
+    },
+};
+```
+
+
+```
+// test.js Customize the logic code.
+export var appData = getApp().data;
+```

en/application-dev/device/ui/js-framework-js-tag.md

+# "js" Tag
+
+
+The "js" tag contains the instance name, window style, and page route information.
+
+
+  | Tag | Data Type | Default Value | Mandatory | Description | 
+| -------- | -------- | -------- | -------- | -------- |
+| name | string | default | Yes | Name of the JavaScript instance. | 
+| pages | Array | - | Yes | Route information. For details, see ["pages"](#pages). |
+| window | Object | - | No | Window information. For details, see ["window"](#window). | 
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> The "name", "window", and "pages" tags are configured in the "js" tag of the config.json file.
+
+
+## "pages"
+
+The "pages" defines the route information of each page. Each page consists of the page path and page name. The following is an example:
+
+
+```
+{
+    ...
+    "pages": [
+        "pages/index/index",
+        "pages/detail/detail"
+    ]
+    ...
+}
+```
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> 
+> - The first page in the pages list is the home page, also referred to as the entry, of the application.
+>
+> 
+> - The page name should not be a component name, for example, text.hml or button.hml.
+
+## window
+
+The "window" defines window-related configurations. To solve the screen adaptation problem, you can use either of the following methods:
+
+- Specify designWidth, which is the logical screen width. All size styles, such as width and font-size, are scaled at the ratio of designWidth to the physical screen width. For example, when designWidth is 720 px and if you set width to 100 px, the actual display width is scaled to 200 physical px on the screen whose physical width is 1440 px.
+
+- Set autoDesignWidth to true, the designWidth field will be ignored, and the component and layout will be scaled automatically based on the screen density. The logical screen width is automatically calculated based on the physical screen width and screen density. The logical screen width may vary depending on the device. Use the relative layout to adapt to different devices. For example, on a device with a resolution of 466x466 and 320 DPI (a screen density of 2x, with 160 DPI as the base), 1 px is equivalent to 2 physical px.
+  
+  > ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+  > 1. The default  <length> value in the current style is calculated based on the screen density. For example, if the screen density is x2 (with 160 DPI as the baseline) and the default  <length> value is 1 px, the actual length rendered on the device is 2 physical px.
+  > 
+  > 2. Values of autoDesignWidth and designWidth do not affect how the default  <length> value is calculated and the final effect.
+| Attribute | Type | Mandatory | Default Value | Description |
+| -------- | -------- | -------- | -------- | -------- |
+|  |  |  |  |  |
+| designWidth | number | No | 720<br/> | Logical screen width, which is a reference value for page design. The actual display width is scaled at the ratio of the value to the device width. |
+| autoDesignWidth | boolean | No | false | Whether to automatically calculate the baseline width. If autoDesignWidth is set to true, designWidth is ignored. The baseline width is calculated based on the physical screen width and screen density. |
+
+The following is a sample code snippet:
+
+```
+{
+    ...
+    "window": {
+        "designWidth": 720,
+        "autoDesignWidth": false
+    }
+    ...
+}
+```
+
+
+## Example
+
+
+```
+{
+  "app": {
+    "bundleName": "com.example.player",
+    "version": {
+        "code": 1,
+        "name": "1.0"
+    },
+    "vendor": "example"
+  }
+  "module": {
+      ...
+      "js": [
+      {
+          "name": "default",
+          "pages": [
+              "pages/index/index",
+              "pages/detail/detail"
+          ],          "window": {              "designWidth": 720,              "autoDesignWidth": false          }
+      }
+      ],
+      "abilities": [
+      {
+          ...
+      }
+    ]
+  }
+}
+```

en/application-dev/device/ui/js-framework-lifecycle.md

+# Lifecycle
+
+
+## Application Lifecycle
+
+You can define the following application lifecycle functions in the app.js file.
+
+  | Attribute | Type | Description | Called When | 
+| -------- | -------- | -------- | -------- |
+| onCreate | () => void | Listens for application creation. | The application is created. |
+| onShow<sup>6+</sup> | () => void | Listens for whether the application is running in the foreground. | The application is running in the foreground. | 
+| onHide<sup>6+</sup> | () => void | Listens for whether the application is running in the background. | The application is running in the background. | 
+| onDestroy | () => void | Listens for application uninstallation. | The application exits. | 
+
+## Page Lifecycle
+
+You can define the following page lifecycle functions in the .js file of the page.
+
+| Attribute | Type | Description | Called When |
+| -------- | -------- | -------- | -------- |
+| onInit | () => void | Listens for page initialization. | Page initialization is complete. This function is called only once in the page lifecycle. |
+| onReady | () => void | Listens for page creation. | A page is created. This function is called only once in the page lifecycle. |
+| onShow | () => void | Listens for page display. | The page is displayed. |
+| onHide | () => void | Listens for page disappearance. | The page disappears. |
+| onDestroy | () => void | Listens for page destruction. | The page is destroyed. |
+| onBackPress | () => boolean | Listens for the back button action. | The back button is touched.<br/>- true means that the page processes the return logic.<br/>- false means that the default return logic is used.<br/>- If no value is returned, the default return logic is used. |
+| onActive()<sup>5+</sup> | () => void | Listens for page activation. | The page is activated. |
+| onInactive()<sup>5+</sup> | () => void | Listens for page suspension. | The page is suspended. |
+| onNewRequest()<sup>5+</sup> | () => void | Listens for a new FA request. | The FA has been started and a new request is received. |
+
+ The lifecycle functions of page A are called in the following sequence:
+- Open page A: onInit() -> onReady() -> onShow()
+
+- Open page B on page A: onHide()
+
+- Go back to page A from page B: onShow()
+
+- Exit page A: onBackPress() -> onHide() -> onDestroy()
+
+- Hide page A: onInactive() -> onHide()
+
+- Show background page A on the foreground: onShow() -> onActive()
+
+![en-us_image_0000001267887881](figures/en-us_image_0000001267887881.png)
+

en/application-dev/device/ui/js-framework-multiple-languages.md

+# Multi-Language Capability
+
+
+Applications designed based on the JS UI framework apply to different countries and regions. With the multi-language capability, you do not need to develop application versions in different languages, and your users can switch between various locales. This also facilitates project maintenance.
+
+
+You only need to perform operations in [Resource Files](#resource-files) and [Resource Reference](#resource-reference) to use the multi-language capability of this framework. For details about how to obtain the current system language, see [Language Acquisition](#language-acquisition).
+
+
+## Resource Files
+
+Resource files store application content in multiple languages. This framework uses JSON files to store resource definitions. Place the resource file of each locale in the i18n directory described in [File Organization](js-framework-file.md). 
+
+Resource files should be named in _language-script-region_.json format. For example, the resource file for Hong Kong Chinese in the traditional script is named zh-Hant-HK. You can omit the region, for example, zh-CN for simplified Chinese, or omit both the script and region, for example, zh for Chinese.
+
+
+```
+language[-script-region].json
+```
+
+The following table describes the requirements for the qualifiers of resource file names.
+
+  Table1 Requirements for qualifier values
+
+| Qualifier Type | Description and Value Range | 
+| -------- | -------- |
+| Language | Indicates the language used by the device. The value consists of two or three lowercase letters, for example, zh indicates Chinese, en indicates English, and mai indicates Maithili.<br/>For details about the value range, refer to ISO 639 (codes for the representation of names of languages). | 
+| Script | Indicates the script type used by the device. The value starts with one uppercase letter followed by three lowercase letters, for example, Hans indicates simplified Chinese and Hant indicates traditional Chinese.<br/>For details about the value range, refer to ISO 15924 (codes for the representation of names of scripts). | 
+| Country/Region | Indicates the country or region where a user is located. The value consists of two or three uppercase letters or three digits, for example, CN indicates China and GB indicates the United Kingdom.<br/>For details about the value range, refer to ISO 3166-1 (codes for the representation of names of countries and their subdivisions). | 
+
+If there is no resource file of the locale that matches the system language, content in the en-US.json file will be used by default.
+
+The format of the resource file content is as follows:
+
+  en-US.json
+
+```
+{
+    "strings": {
+        "hello": "Hello world!",
+        "object": "Object parameter substitution-{name}",
+        "array": "Array type parameter substitution-{0}",
+        "symbol": "@#$%^&*()_+-={}[]\\|:;\"'<>,./?"
+    },
+
+    "files": {
+        "image": "image/en_picture.PNG"
+    }
+}
+```
+
+
+Different languages have different matching rules for singular and plural forms. In the resource file, zero, one, two, few, many, and other are used to define the string content in different singular and plural forms. For example, there is only the other scenario in Chinese since the language does not have singular and plural forms. one and other scenarios are applicable to English. All six scenarios are needed for Arabic.
+
+
+The following example takes en-US.json and ar-AE.json as examples:
+
+
+en-US.json
+
+
+```
+{
+    "strings": {
+        "people": {
+            "one": "one person",
+            "other": "{count} people"
+        }
+    }
+}
+```
+
+
+ar-AE.json
+
+
+```
+{
+    "strings": {
+        "people": {
+            "zero": "لا أحد",
+            "one": "وحده",
+            "two": "اثنان",
+            "few": "ستة اشخاص",
+            "many": "خمسون شخص",
+            "other": "مائة شخص"
+        }
+    }
+}
+```
+
+
+## Resource Reference
+
+Multi-language syntax used on application development pages (including simple formatting and singular-plural formatting) can be used in .hml or .js files.
+
+- Simple formatting
+  Use the $t function to reference to resources of different locales. The $t function is available for both .hml and .js files. The system displays content based on a resource file path specified via $t and the specified resource file whose locale matches the current system language.
+  
+    Table2 Simple formatting
+  
+  | Attribute | Type | Parameter | Mandatory | Description |
+  | -------- | -------- | -------- | -------- | -------- |
+  | $t | Function | See Table3 | Yes | Sets the parameters based on the system language, for example, this.$t('strings.hello'). |
+
+    Table3 $t function parameters
+  
+  | Parameter | Type | Mandatory | Description | 
+  | -------- | -------- | -------- | -------- |
+  | path | string | Yes | Path of the language resource key | 
+  | params | Array\|Object | No | Content used to replace placeholders during runtime. There are two types of placeholders available:<br/>- Named placeholder, for example, {name}. The actual content must be of the object type, for example, $t('strings.object', { name: 'Hello world' }).<br/>- Digit placeholder, for example, {0}. The actual content must be of the array type, for example, $t('strings.array', ['Hello world']. | 
+
+- Example code for simple formatting
+  
+  ```
+  <!-- xxx.hml -->
+  <div>
+    <!-- Display Hello world! without using a placeholder. -->
+    <text>{{ $t('strings.hello') }}</text>
+    <!-- Replace named placeholder {name} with Hello world and display it. -->
+    <text>{{ $t('strings.object', { name: 'Hello world' }) }}</text>
+    <!-- Replace digit placeholder {0} with Hello world and display it. -->
+    <text>{{ $t('strings.array', ['Hello world']) }}</text>
+    <!-- Obtain the resource content from the .js file and display Hello world. -->
+    <text>{{ hello }}</text>
+    <!-- Obtain the resource content from the .js file, replace named placeholder {name} with Hello world, and display Substitution in an object: Hello world. -->
+    <text>{{ replaceObject }}</text>
+    <!-- Obtain the resource content from the .js file, replace digit placeholder {0} with Hello world, and display Substitution in an array: Hello world. -->
+    <text>{{ replaceArray }}</text>
+  
+    <!-- Display the image in the specified file path. -->
+    <image src="{{ $t('files.image') }}" class="image"></image>
+    <!-- Obtain the image file path from the .js file and display the image. -->
+    <image src="{{ replaceSrc }}" class="image"></image>
+  </div>
+  ```
+
+  
+  ```
+  // xxx.js
+  // The following example uses the $t function in the .js file.
+  export default {
+    data: {
+      hello: '',
+      replaceObject: '',
+      replaceArray: '',
+      replaceSrc: '',
+    },
+    onInit() {
+      this.hello = this.$t('strings.hello');
+      this.replaceObject = this.$t('strings.object', { name: 'Hello world' });
+      this.replaceArray = this.$t('strings.array', ['Hello world']);
+      this.replaceSrc = this.$t('files.image');
+    },   
+  }
+  ```
+
+- Singular-plural formatting
+    Table4 Singular-plural formatting
+  
+  | Attribute | Type | Parameter | Mandatory | Description |
+  | -------- | -------- | -------- | -------- | -------- |
+  | $tc | Function | See Table 5. | Yes | Converts between the singular and plural forms based on the system language, for example, this.$tc('strings.people').<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:<br/>> The resource content is distinguished by the following JSON keys: zero, one, two, few, many, and other. |
+
+    Table5 $tc function parameters
+  
+  | Parameter | Type | Mandatory | Description | 
+  | -------- | -------- | -------- | -------- |
+  | path | string | Yes | Path of the language resource key | 
+  | count | number | Yes | Number | 
+
+- Sample code for singular-plural formatting
+  
+  ```
+  <!--xxx.hml-->
+  <div>
+    <!-- When the value 0 is passed, "0 people" matches the Arabic string whose key is zero. -->
+    <text>{{ $tc('strings.people', 0) }}</text>
+    <!-- When the value 1 is passed, "1 person" matches the Arabic string whose key is one. -->
+    <text>{{ $tc('strings.people', 1) }}</text>
+    <!-- When the value 2 is passed, "2 people" matches the Arabic string whose key is two. -->
+    <text>{{ $tc('strings.people', 2) }}</text>
+    <!-- When the value 6 is passed, "6 people" matches the Arabic string whose key is few. -->
+    <text>{{ $tc('strings.people', 6) }}</text>
+    <!-- When the value 50 is passed, "50 people" matches the Arabic string whose key is many. -->
+    <text>{{ $tc('strings.people', 50) }}</text>
+    <!-- When the value 100 is passed, "100 people" matches the Arabic string whose key is other. -->
+    <text>{{ $tc('strings.people', 100) }}</text>
+  </div>
+  ```
+
+
+## Language Acquisition
+
+For details about how to obtain the language, see the Application Configuration section.

en/application-dev/device/ui/js-framework-resource-restriction.md

+# Resource Limitations and Access
+
+
+## Resource Qualifiers
+
+The name of a resource qualifier consists of one or more qualifiers that represent the application scenarios or device characteristics, covering the screen density, and more. The qualifiers are separated using hyphens (-). When creating a qualifiers file under resources, you need to understand the file naming conventions and the rules for matching qualifiers files and the device status.
+
+
+## Naming Conventions for Resource Qualifiers
+
+- Qualifiers are ordered in the following sequence: screen density. You can select one or multiple qualifiers to name your file based on your application scenarios and device characteristics, while following the preceding sequence. 
+
+- The qualifiers are separated using hyphens (-), for example, res-dark-ldpi.json.
+
+- Value range of qualifiers: The value of each qualifier must meet the requirements specified in the following table. Otherwise, the resource files in the resources directory cannot be matched. The qualifiers are case sensitive.
+
+- Qualifier prefix: The name of a qualifier file in the resources file has the prefix res, for example, res-ldpi.json.
+
+- Default resource qualifier file: By default, the resource qualifier file in resources is res-defaults.json.
+
+- In the resource qualifier file, color enumeration cannot be used to set resources.
+
+
+  Table1 Resource qualifiers
+
+| Data Type | Description and Value Range | 
+| -------- | -------- |
+| Screen density | Indicates the screen density of the device, in dpi. The value can be:<br/>- ldpi: low-density screen (~120 dpi) (0.75 x Reference density)<br/>- mdpi: medium-density screen (~160 dpi) (reference density)<br/>- hdpi: high-density screen (~240 dpi) (1.5 x Reference density)<br/>- xhdpi: extra high-density screen (~320 dpi) (2.0 x Reference density)<br/>- xxhdpi: extra extra high-density screen (~480 dpi) (3.0 x Reference density)<br/>- xxxhdpi: extra extra extra high-density screen (~640 dpi) (4.0 x Reference density) | 
+
+
+## Rules for Matching Qualifiers Files and Device Resources
+
+- Qualifiers are matched with the device resources in the following priorities: screen orientation > dark mode > screen density. If no matching resource qualifier file is found, the default resource qualifier file is used.
+
+- If a qualifier file contains resource qualifiers, their values must be consistent with the current device status so that the file can be used for matching the device status. For example, the res-hdpi.json qualifier file does not match the device density xhdpi.
+
+
+## Referencing Resources in the JS Module
+
+You can use the $r syntax in the application development files .hml and .js to format the JSON resources in the resources directory of the JS module and obtain the corresponding resources.
+
+| Attribute | Type | Description |
+| -------- | -------- | -------- |
+| $r | (key: string) => string | Obtains the resource content that matches the specific qualifiers, for example, this.$r('strings.hello loaded).<br/>Parameter description:<br/>- key: key value defined in the resource qualifier file, for example, strings.hello.<br/> |
+
+Example of res-defaults.json:<br/>
+
+```
+{
+    strings: {        
+        hello: 'hello world'    
+    }
+}
+```
+
+## Example
+
+resources/res-dark.json:
+
+
+```
+{
+    "image": {
+        "clockFace": "common/dark_face.png"
+    },
+    "colors": {
+	"background": "#000000"
+    }
+}
+```
+
+resources/res-defaults.json:
+
+
+```
+{
+    "image": {
+        "clockFace": "common/face.png"
+    },
+    "colors": {
+	"background": "#ffffff"
+    }
+}
+```
+
+
+```
+<!-- xxx.hml -->
+<div style="background-color: {{ $r('colors.background') }}">
+    <image src="{{ $r('image.clockFace') }}"></image>
+</div>
+```
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> The resource qualifier file does not support color enumeration.

en/application-dev/device/ui/js-framework-syntax-css.md

+# CSS
+
+
+Cascading Style Sheets (CSS) is a language used to describe the HML page structure. All HML components have default styles. You can customize styles for these components using CSS to design various pages.
+
+## Size Unit
+
+1. Logical px set by <length>:
+   1. The default logical screen width is 720 px (for details, see the "window" section in [config.json](js-framework-js-tag.md)). Your page will be scaled to fit the actual width of the screen. For example, on a screen with the actual width of 1440 physical px, 100 px is displayed on 200 physical px, with all sizes doubled from 720 px to 1440 px.
+   2. If you set autoDesignWidth to true (for details, see the "window" section in [config.json](js-framework-js-tag.md)), the logical px are scaled based on the screen density. For example, if the screen density is 3x, 100 px will be rendered on 300 physical px. This approach is recommended when your application needs to adapt to multiple devices.
+
+2. Percentage set by <percentage>: The component size is represented by its percentage of the parent component size. For example, if the width <percentage> of a component is set to 50%, the width of the component is half of its parent component's width.
+
+
+## Style Import
+
+CSS files can be imported using the @import statement. This facilitates module management and code reuse.
+
+
+## Style Declaration
+
+The .css file with the same name as the .hml file in each page directory describes the styles of components on the HML page, determining how the components will be displayed.
+
+1. Internal style: The style and class attributes can be used to specify the component style. Example:
+  
+   ```
+   <!-- index.hml -->
+   <div class="container">
+     <text style="color: red">Hello World</text>
+   </div>
+   ```
+
+   
+   ```
+   /* index.css */
+   .container {
+     justify-content: center;
+   }
+   ```
+
+2. External style files: You need to import the files. For example, create a style.css file in the common directory and import the file at the beginning of index.css.
+  
+   ```
+   /* style.css */
+   .title {
+     font-size: 50px;
+   }
+   ```
+
+   
+   ```
+   /* index.css */
+   @import '../../common/style.css';
+   .container {
+     justify-content: center;
+   }
+   ```
+
+
+## Selectors
+
+A CSS selector is used to select elements for which styles need to be added to. The following table lists the supported selectors.
+
+| Selector | Example | Description |
+| -------- | -------- | -------- |
+| .class | .container | Selects all components whose class is container. |
+| \#id | \#titleId | Selects all components whose id is titleId. |
+| tag | text | Selects all  &lt;text&gt; components. |
+| , | .title, .content | Selects all components whose class is title or content. |
+| \#id .class tag | \#containerId .content text | Selects all grandchild  &lt;text&gt; components whose grandparent components are identified as containerId and whose parent components are of the content class. To select child components, use > to replace the space between \#id and .class, for example, \#containerId>.content. |
+
+The following is an example:
+
+
+```
+<!-- Page layoutxxx.hml -->
+<div id="containerId" class="container">
+  <text id="titleId" class="title">Title</text>
+  <div class="content">
+    <text id="contentId">Content</text>
+  </div>
+</div>
+```
+
+
+```
+/* Page style xxx.css */
+/* Set the style for all <div> components. */
+div {
+  flex-direction: column;
+}
+/* Set the style for the component whose class is title. */
+.title {
+  font-size: 30px;
+}
+/* Set the style for the component whose id is contentId. */
+#contentId {
+  font-size: 20px;
+}
+/* Set padding for all components of the title or content class to 5 px. */
+.title, .content {
+  padding: 5px;
+}
+/* Set the style for all texts of components whose class is container.
+ */
+.container text {
+  color: #007dff;
+}
+/* Set the style for direct descendant texts of components whose class is container.
+*/
+.container > text {
+  color: #fa2a2d;
+}
+```
+
+The above style works as follows:
+
+![en-us_image_0000001267607889](figures/en-us_image_0000001267607889.png)
+
+In the preceding example, .container text sets title and content to blue, and .container > text sets title to red. The two styles have the same priority, but .container > text declares the style later and overwrites the former style. (For details about the priority, see [Selector Specificity](#selector-specificity).)
+
+## Selector Specificity
+
+The specificity rule of the selectors complies with the W3C rule, which is only available for inline styles, id, class, tag, grandchild components, and child components. (Inline styles are those declared in the style attribute.)
+
+When multiple selectors point to the same element, their priorities are as follows (in descending order): inline style > id > class > tag.
+
+
+## Pseudo-classes
+
+A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, :disabled can be used to select the element whose disabled attribute is true.
+
+In addition to a single pseudo-class, a combination of pseudo-classes is supported. For example, :focus:checked selects the element whose focus and checked attributes are both set to true. The following table lists the supported single pseudo-class in descending order of priority.
+
+  | Pseudo-class | Available Components | Description | 
+| -------- | -------- | -------- |
+| :disabled | Components that support the disabled attribute | Selects the element whose disabled attribute is changed to true (unavailable for animation attributes). | 
+| :focus | Components that support the focusable attribute | Selects the element that takes focus (unavailable for animation attributes). | 
+| :active | Components that support the click event<br/> | Selects the element activated by a user. For example, a pressed button or a selected tab-bar (unavailable for animation attributes).  |
+| :waiting | button | Selects the element whose waiting attribute is true (unavailable for animation attributes). | 
+| :checked | input[type="checkbox", type="radio"], and switch | Selects the element whose checked attribute is true (unavailable for animation attributes).  |
+| :hover<sup>6+</sup> | Components that support the mouseover event | Selects the element that the cursor is on. | 
+
+The following is an example for you to use the :active pseudo-class to control the style when a user presses the button.
+
+
+```
+<!-- index.hml -->
+<div class="container">
+  <input type="button" class="button" value="Button"></input>
+</div>
+```
+
+
+```
+/* index.css */
+.button:active {
+  background-color: #888888;/* After the button is activated, the background color is changed to #888888. */
+}
+```
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> Pseudo-classes are not supported for the <popup> component and its child components, including, <dialog>, <menu>, <option>, and <picker>.
+
+
+## Precompiled Styles
+
+Precompilation is a program that uses specific syntax to generate CSS files. It provides variables and calculation, helping you define component styles more conveniently. Currently, Less, Sass, and Scss are supported. To use precompiled styles, change the suffix of the original .css file. For example, change index.css to index.less, index.sass, or index.scss.
+
+- The following index.less file is changed from index.css.
+  
+  ```
+  /* index.less */
+  /* Define a variable. */
+  @colorBackground: #000000;
+  .container {
+    background-color: @colorBackground; /* Use the variable defined in the .less file. */
+  }
+  ```
+
+- Reference a precompiled style file. For example, if the style.scss file is located in the common directory, change the original index.css file to index.scss and import style.scss.
+  
+  ```
+  /* style.scss */
+  /* Define a variable. */
+  $colorBackground: #000000;
+  ```
+
+  Reference the precompiled style file in index.scss:
+
+  
+  ```
+  /* index.scss */
+  /* Import style.scss. */
+  @import '../../common/style.scss';
+  .container {
+    background-color: $colorBackground; /* Use the variable defined in style.scss. */
+  }
+  ```
+
+  
+  > ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+  > Place precompiled style files in the common directory.
+
+## CSS Style Inheritance<sup>6+</sup>
+
+CSS style inheritance enables a child node to inherit the style of its parent node. The inherited style has the lowest priority when multiple style selectors are involved. Currently, the following styles can be inherited:
+
+- font-family
+
+- font-weight
+
+- font-size
+
+- font-style
+
+- text-align
+
+- line-height
+
+- letter-spacing
+
+- color
+
+- visibility

en/application-dev/device/ui/js-framework-syntax-hml.md

+# HML
+
+
+The OpenHarmony Markup Language (HML) is an HTML-like language that allows you to build pages based on components and events. Pages built using HML have advanced capabilities such as logic control, data binding, event binding, loop rendering, and conditional rendering.
+
+
+## HML Page Structure
+
+
+```
+<!-- xxx.hml -->
+<div class="item-container">
+  <text class="item-title">Image Show</text>
+  <div class="item-content">
+    <image src="/common/xxx.png" class="image"></image>
+  </div>
+</div>
+```
+
+
+## Data Binding
+
+
+```
+<!-- xxx.hml -->
+<div onclick="changeText">
+  <text> {{content[1]}} </text>
+</div>
+```
+
+
+```
+// xxx.js
+export default {
+  data: {
+    content: ['Hello World!', 'Welcome to my world!']
+  },
+  changeText: function() {
+    this.content.splice(1, 1, this.content[0]);
+  }
+}
+```
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> - To make the array data modification take effect, use the splice method to change array items.
+> 
+> - ECMAScript 6 (ES6) syntax is not supported in HML.
+
+
+## Common Event Binding
+
+Events are bound to components through 'on' or '@'. When a component triggers an event, the corresponding event processing function in the .js file is executed.
+
+Events can be written in the following formats:
+
+- funcName: name of the event callback, which is implemented by defining the corresponding function in the .js file.
+
+- funcName(a,b): function parameters, such as a and b, which can be constants, or variables defined in data in the .js file. Do not add the prefix this. to variables.
+
+- Example
+  
+  ```
+  <!-- xxx.hml -->
+  <div class="container">
+      <text class="title">{{count}}</text>
+      <div class="box">
+          <input type="button" class="btn" value="increase" onclick="increase" />
+          <input type="button" class="btn" value="decrease" @click="decrease" />
+      <!-- Pass additional parameters. -->
+          <input type="button" class="btn" value="double" @click="multiply(2)" />
+          <input type="button" class="btn" value="decuple" @click="multiply(10)" />
+          <input type="button" class="btn" value="square" @click="multiply(count)" />
+      </div>
+  </div>
+  ```
+
+  
+  ```
+  // xxx.js
+  export default {
+    data: {
+      count: 0
+    },
+    increase() {
+      this.count++;
+    },
+    decrease() {
+      this.count--;
+    },
+    multiply(multiplier) {
+      this.count = multiplier * this.count;
+    }
+  };
+  ```
+
+  
+  ```
+  /* xxx.css */
+  .container {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      left: 0px;
+      top: 0px;
+      width: 454px;
+      height: 454px;
+  }
+  .title {
+      font-size: 30px;
+      text-align: center;
+      width: 200px;
+      height: 100px;
+  }
+  .box {
+      width: 454px;
+      height: 200px;
+      justify-content: center;
+      align-items: center;
+      flex-wrap: wrap;
+  }
+  .btn {
+      width: 200px;
+      border-radius: 0;
+      margin-top: 10px;
+      margin-left: 10px;
+  }
+  ```
+
+
+## Bubbling Event Binding<sup>5+</sup>
+
+Bubbling event binding covers the following:
+
+- Bind an event callback for event bubbling: on:{event}.bubble. on:{event} is equivalent to on:{event}.bubble.
+
+- Bind an event callback, but stop the event from bubbling upwards: grab:{event}.bubble. grab:{event} is equivalent to grab:{event}.bubble.
+  > ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+  > For details about bubbling events, see [Universal Events](../reference/arkui-js/js-components-common-events.md)
+
+- Example
+  
+  ```
+  <!-- xxx.hml -->
+  <div>
+     <!-- Bind an event callback for event bubbling.5+ -->
+      <div on:touchstart.bubble="touchstartfunc"></div>
+      <div on:touchstart="touchstartfunc"></div>
+      <!-- Bind an event callback, but stop the event from bubbling upwards. 5+ -->
+      <div grab:touchstart.bubble="touchstartfunc"></div>
+      <div grab:touchstart="touchstartfunc"></div>
+      <!-- Bind an event callback for event bubbling.6+ -->
+      <div on:click.bubble="clickfunc"></div>
+      <div on:click="clickfunc"></div>
+      <!-- Bindan event callback, but stop the event from bubbling upwards.6+ -->
+      <div grab:click.bubble="clickfunc"></div>
+      <div grab:click="clickfunc"></div>
+  </div>
+  ```
+  
+  
+  ```
+  // xxx.js
+  export default {
+      clickfunc: function(e) {
+          console.log(e);
+      },
+      touchstartfuc: function(e) {
+          console.log(e);
+      },
+  }
+  ```
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> Events bound using a traditional statement (such as onclick) will bubble only when the API version in use is 6 or later.
+
+## Capturing Event Binding<sup>5+</sup>
+
+Touch events can be captured. In the capture phase, which precedes the bubbling phase, an event starts from the parent component to the child component.
+
+Event capturing binding includes:
+
+- Bind an event callback for event capturing: on:{event}.capture.
+
+- Bind an event callback, but stop the event from being captured during downward transfer: grab:{event}.capture.
+
+- Example
+  
+  ```
+  <!-- xxx.hml -->
+  <div>
+      <!-- Bind an event callback for event capturing.5+ -->    <div on:touchstart.capture="touchstartfunc"></div>
+      <!-- Bind an event callback, but stop the event from being captured during downward transfer.5+ -->
+      <div grab:touchstart.capture="touchstartfunc"></div>
+  </div>
+  ```
+
+  
+  ```
+  // xxx.js
+  export default {
+      touchstartfuc: function(e) {
+          console.log(e);
+      },
+  }
+  ```
+
+
+## Loop Rendering
+
+
+```
+<!-- xxx.hml -->
+<div class="array-container">
+  <!-- div loop rendering -->
+  <!-- By default, $item indicates the element in the array, and $idx indicates the index of the element in the array. -->
+  <div for="{{array}}" tid="id" onclick="changeText">
+    <text>{{$idx}}.{{$item.name}}</text>
+  </div>
+  <!-- Define the name for an element variable. -->
+  <div for="{{value in array}}" tid="id" onclick="changeText">    
+    <text>{{$idx}}.{{value.name}}</text>
+  </div>
+  <!-- Define an element variable and its index name. -->
+  <div for="{{(index, value) in array}}" tid="id" onclick="changeText">    
+    <text>{{index}}.{{value.name}}</text>
+  </div>
+</div>
+```
+
+
+```
+// xxx.js
+export default {
+  data: {
+    array: [
+      {id: 1, name: 'jack', age: 18}, 
+      {id: 2, name: 'tony', age: 18},
+    ],
+  },
+  changeText: function() {
+    if (this.array[1].name === "tony"){
+      this.array.splice(1, 1, {id:2, name: 'Isabella', age: 18});
+    } else {
+      this.array.splice(2, 1, {id:3, name: 'Bary', age: 18});
+    }
+  },
+}
+```
+
+The tid attribute accelerates the for loop and improves the re-rendering efficiency when data in a loop changes.
+
+The tid attribute specifies the unique ID of each element in the array. If it is not specified, the index of each element in the array is used as the ID. For example, tid="id" indicates that the id attribute of each element is its unique ID.
+
+The for loop supports the following statements:
+
+- for="array": array is an array object, whose element variable is $item by default.
+
+- for="v in array": v is a custom element variable, whose index is $idx by default.
+
+- for="(i, v) in array": i indicates the element index, and v indicates the element variable. All elements of the array object will be looped through.
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> - Each element in the array must have the data attribute specified by tid. Otherwise, an exception may occur.
+> 
+> - The attribute specified by tid in the array must be unique. Otherwise, performance loss occurs. In the above example, only id and name can be used as tid because they are unique fields.
+> 
+> - The tid field does not support expressions.
+
+
+## Conditional Rendering
+
+There are two ways to implement conditional rendering: if-elif-else or show. In if-elif-else, when the if statement evaluates to false, the component is not built in the VDOM and is not rendered. For show, when show is false, the component is not rendered but is built in the VDOM. In addition, the if-elif-else statements must be used in sibling nodes. Otherwise, the compilation fails. The following example uses both ways to implement conditional rendering:
+
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <button class="btn" type="capsule" value="toggleShow" onclick="toggleShow"></button>
+  <button class="btn" type="capsule" value="toggleDisplay" onclick="toggleDisplay"></button>
+  <text if="{{visible}}"> Hello-TV </text>
+  <text elif="{{display}}"> Hello-Wearable </text>
+  <text else> Hello-World </text>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container{
+  flex-direction: column;
+  align-items: center;
+}
+.btn{
+  width: 280px;
+  font-size: 26px;
+  margin: 10px 0;
+}
+```
+
+
+```
+// xxx.js
+export default {
+  data: {
+    visible: false,
+    display: true,
+  },
+  toggleShow: function() {
+    this.visible = !this.visible;
+  },
+  toggleDisplay: function() {
+    this.display = !this.display;
+  }
+}
+```
+
+In the optimized rendering (show), if show is true, the node is rendered properly; if it is false, the display style will be none.
+
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <button class="btn" type="capsule" value="toggle" onclick="toggle"></button>
+  <text show="{{visible}}" > Hello World </text>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container{
+  flex-direction: column;
+  align-items: center;
+}
+.btn{
+  width: 280px;
+  font-size: 26px;
+  margin: 10px 0;
+}
+```
+
+
+```
+// xxx.js
+export default {
+  data: {
+    visible: false,
+  },
+  toggle: function() {
+    this.visible = !this.visible;
+  },
+}
+```
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> Do not use for and if attributes at the same time in an element.
+
+## Logic Control Block
+
+<block> makes loop rendering and conditional rendering more flexible. A <block> will not be compiled as a real component. **NOTE** that the <block> tag supports only the for and if attributes.
+
+
+```
+<!-- xxx.hml -->
+<list>
+  <block for="glasses">
+    <list-item type="glasses">
+      <text>{{$item.name}}</text>
+    </list-item>
+    <block for="$item.kinds">
+      <list-item type="kind">
+        <text>{{$item.color}}</text>
+      </list-item>
+    </block>
+  </block>
+</list>
+```
+
+
+```
+// xxx.js
+export default {
+  data: {
+    glasses: [
+      {name:'sunglasses', kinds:[{name:'XXX',color:'XXX'},{name:'XXX',color:'XXX'}]},
+      {name:'nearsightedness mirror', kinds:[{name:'XXX',color:'XXX'}]},
+    ],
+  },
+}
+```
+
+## Template Reference
+
+HML supports using elements to reference template files. For details, see Custom Components.
+
+
+```
+<!-- template.hml -->
+<div class="item"> 
+  <text>Name: {{name}}</text>
+  <text>Age: {{age}}</text>
+</div>
+```
+
+
+```
+<!-- index.hml -->
+<element name='comp' src='../../common/template.hml'></element>
+<div>
+  <comp name="Tony" age="18"></comp>
+</div>
+```

en/application-dev/device/ui/js-framework-syntax-js.md

+# JavaScript
+
+
+You can use a .js file in the ECMAScript compliant JavaScript language to define the service logic of an HML page. With dynamic typing, JavaScript can make your application more expressive with a flexible design. The following describes the JavaScript compilation and running.
+
+
+## Syntax
+
+The ES6 syntax is supported.
+
+- Module declaration
+  Import functionality modules.
+
+  
+  ```
+  import router from '@system.router';
+  ```
+
+- Code reference
+  Import JavaScript code.
+
+  
+  ```
+  import utils from '../../common/utils.js';
+  ```
+
+
+## Objects
+
+- Application Object
+    | Attribute | Type | Description | 
+  | -------- | -------- | -------- |
+  | $def | Object | Object that is exposed in the app.js file and obtained by this.$app.$def.<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:<br/>> Application objects do not support data binding. Data update should be triggered on the UI. | 
+
+  Example Code
+
+  
+  ```
+  // app.js
+  export default {
+    onCreate() {
+      console.info('AceApplication onCreate');
+    },
+    onDestroy() {
+      console.info('AceApplication onDestroy');
+    },
+    globalData: {
+      appData: 'appData',
+      appVersion: '2.0',
+    },
+    globalMethod() {
+      console.info('This is a global method!');
+      this.globalData.appVersion = '3.0';
+    }
+  };
+  ```
+
+  
+  ```
+  // index.js
+  export default {
+    data: {
+      appData: 'localData',
+      appVersion:'1.0',
+    },
+    onInit() {
+      this.appData = this.$app.$def.globalData.appData;
+      this.appVersion = this.$app.$def.globalData.appVersion;
+    },
+    invokeGlobalMethod() {
+      this.$app.$def.globalMethod();
+    },
+    getAppVersion() {
+      this.appVersion = this.$app.$def.globalData.appVersion;
+    }
+  }
+  ```
+
+- Page objects
+    | Attribute | Type | Description |
+  | -------- | -------- | -------- |
+  | data | Object/Function | Data model of the page. If the attribute is of the function type, the return value must be of the object type. The attribute name cannot start with a dollar sign ($) or underscore (_). Do not use reserved words (for, if, show, and tid).<br/>Do not use this attribute and private or public at the same time. |
+  | $refs | Object | DOM elements or child component instances that have registered the ref attribute. For example code, see [Obtaining a DOM element](#obtaining-a-dom-element). |
+  | private | Object | Data model of the page. Private data attribute can be modified only on the current page. |
+  | public | Object | Data model of the page. Behaviors of public data attributes are the same as those of the data attribute. |
+  | props | Array/Object | Used for communication between components. This attribute can be transferred to components via &lt;tag xxxx='value'&gt;. A props name must be in lowercase and cannot start with a dollar sign ($) or underscore (_). Do not use reserved words (for, if, show, and tid). Currently, props does not support functions. For details, see [Custom Component](../reference/arkui-js/js-components-custom-props.md). |
+  | computed | Object | Used for pre-processing an object for reading and setting. The result is cached. The name cannot start with a dollar sign ($) or underscore (_). Do not use reserved words. For details, see [Custom Component](../reference/arkui-js/js-components-custom-props.md). |
+
+## Functions
+
+- Data functions
+    | Function | Parameter | Description | 
+  | -------- | -------- | -------- |
+  | $set | key: string, value: any | Adds an attribute or modifies an existing attribute.<br/>Usage:<br/>this.$set('_key_',_value_): Add an attribute. | 
+  | $delete | key: string | Deletes an attribute.<br/>Usage:<br/>this.$delete('_key_'): Delete an attribute. | 
+
+  Example Code
+
+  
+  ```
+  // index.js
+  export default {
+    data: {
+      keyMap: {
+        OS: 'OpenHarmony',
+        Version: '2.0',
+      },
+    },
+    getAppVersion() {
+      this.$set('keyMap.Version', '3.0');
+      console.info("keyMap.Version = " + this.keyMap.Version); // keyMap.Version = 3.0
+  
+      this.$delete('keyMap');
+      console.info("keyMap.Version = " + this.keyMap); // log print: keyMap.Version = undefined
+    }
+  }
+  ```
+
+- Public functions
+    | Function | Parameter | Description |
+  | -------- | -------- | -------- |
+  | $element | id: string | Obtains the component with a specified ID. If no ID is specified, the root component is returned. For example code, see [Obtaining a DOM element](#obtaining-a-dom-element).<br/>Usage:<br/>```<div id='_xxx_'></div>```<br/>- this.$element('_xxx_'): Obtain the component whose ID is _xxx_.<br/>- this.$element(): Obtain the root component. |
+  | $rootElement | None | Obtains the root element.<br/>Usage: this.$rootElement().scrollTo({ duration: 500, position: 300 }), which scrolls the page by 300 px within 500 ms. |
+  | $root | N/A | Obtains the root ViewModel instance. For example code, see [Obtaining the ViewModel](#obtaining-the-viewmodel). |
+  | $parent | N/A | Obtains the parent ViewModel instance. For example code, see [Obtaining the ViewModel](#obtaining-the-viewmodel). |
+  | $child | id: string | Obtains the ViewModel instance of a custom child component with a specified ID. For example code, see [Obtaining the ViewModel](#obtaining-the-viewmodel).<br/>Usage:<br/>this.$child('_xxx_'): Obtain the ViewModel instance of a custom child component whose ID is _xxx_. |
+
+- Event function
+    | Function | Parameter | Description |
+  | -------- | -------- | -------- |
+  | $watch | data: string, callback: string \| Function | Listens for attribute changes. If the value of the data attribute changes, the bound event is triggered. For details, see [Custom Component](../reference/arkui-js/js-components-custom-props.md)<br/>Usage:<br/>this.$watch('_key_',_callback_) |
+
+- Page function
+    | Function | Parameter | Description |
+  | -------- | -------- | -------- |
+  | scrollTo<sup>6+</sup> | scrollPageParam:  ScrollPageParam | Scrolls the page to the target position. You can specify the position using the ID selector or scrolling distance. |
+
+    Table1 ScrollPageParam<sup>6+</sup>
+  
+  | Name | Type | Default Value | Description |
+  | -------- | -------- | -------- | -------- |
+  | position | number | - | Position to scroll to. |
+  | id | string | - | ID of the element to be scrolled to. |
+  | duration | number | 300 | Scrolling duration, in milliseconds. |
+  | timingFunction | string | ease | Animation curve for scrolling. Available option:<br/>[Animation Styles](../reference/arkui-js/js-components-common-animation.md) |
+  | complete | () => void | - | Callback to be invoked when the scrolling is complete. |
+
+  Example:
+
+  
+  ```
+  this.$rootElement.scrollTo({position: 0})
+  this.$rootElement.scrollTo({id: 'id', duration: 200, timingFunction: 'ease-in', complete: ()=>void})
+  ```
+
+
+## Obtaining a DOM Element
+
+1. Use $refs to obtain a DOM element.
+  
+   ```
+   <!-- index.hml -->
+   <div class="container">
+     <image-animator class="image-player" ref="animator" images="{{images}}" duration="1s" onclick="handleClick"></image-animator>
+   </div>
+   ```
+
+   
+   ```
+   // index.js
+   export default {
+     data: {
+       images: [
+         { src: '/common/frame1.png' },
+         { src: '/common/frame2.png' },
+         { src: '/common/frame3.png' },
+       ],
+     },
+     handleClick() {
+       const animator = this.$refs.animator; // Obtain the DOM element whose $refs attribute is animator.
+       const state = animator.getState();
+       if (state === 'paused') {
+         animator.resume();
+       } else if (state === 'stopped') {
+         animator.start();
+       } else {
+         animator.pause();
+       }
+     },
+   };
+   ```
+
+2. Call $element to obtain a DOM element.
+  
+   ```
+   <!-- index.hml -->
+   <div class="container">
+     <image-animator class="image-player" id="animator" images="{{images}}" duration="1s" onclick="handleClick"></image-animator>
+   </div>
+   ```
+
+   
+   ```
+   // index.js
+   export default {
+     data: {
+       images: [
+         { src: '/common/frame1.png' },
+         { src: '/common/frame2.png' },
+         { src: '/common/frame3.png' },
+       ],
+     },
+     handleClick() {
+       const animator = this.$element('animator'); // Obtain the DOM element whose ID is animator.
+       const state = animator.getState();
+       if (state === 'paused') {
+         animator.resume();
+       } else if (state === 'stopped') {
+         animator.start();
+       } else {
+         animator.pause();
+       }
+     },
+   };
+   ```
+
+## Obtaining the ViewModel
+
+The following shows files of the root page:
+
+
+```
+<!-- root.hml -->
+<element name='parentComp' src='../../common/component/parent/parent.hml'></element>
+<div class="container">
+  <div class="container">
+    <text>{{text}}</text>
+    <parentComp></parentComp>
+  </div>
+</div>
+```
+
+
+```
+// root.js
+export default {
+  data: {
+    text: 'I am a root!',
+  },
+}
+```
+
+Customize the parent component.
+
+
+```
+<!-- parent.hml -->
+<element name='childComp' src='../child/child.hml'></element>
+<div class="item" onclick="textClicked">
+  <text class="text-style" onclick="parentClicked">Click this parent component</text>
+  <text class="text-style" if="{{show}}">Hello parent component!</text>
+  <childComp id = "selfDefineChild"></childComp>
+</div>
+```
+
+
+```
+// parent.js
+export default {
+  data: {
+    show: false,
+    text: 'I am the parent component!',
+  },
+  parentClicked () {
+    this.show = !this.show;
+    console.info('parent component get parent text');
+    console.info(`${this.$parent().text}`);
+    console.info("The parent component gets the child function.");
+    console.info(`${this.$child('selfDefineChild').childClicked()}`);
+  },
+}
+```
+
+Customize the child component.
+
+
+```
+<!-- child.hml -->
+<div class="item" onclick="textClicked">
+  <text class="text-style" onclick="childClicked">Child component clicked</text>
+  <text class="text-style" if="{{show}}">Hello child component</text>
+</div>
+```
+
+
+```
+// child.js
+export default {
+  data: {
+    show: false,
+    text: 'I am the child component!',
+  },
+  childClicked () {
+    this.show = !this.show;
+    console.info('child component get parent text');
+    console.info('${this.$parent().text}');
+    console.info('child component get root text');
+    console.info('${this.$root().text}');
+  },
+}
+```

en/application-dev/device/ui/ts-application-resource-access.md

+# Accessing Application Resources
+
+
+## Resource Definition
+
+Application resources are defined by in the project's resources directory, which is organized as follows:
+
+- Level-1: base sub-directory, qualifiers sub-directories, and rawfile sub-directory
+  - The base sub-directory is a default directory. If no qualifiers sub-directories in the resources directory of the application match the device status, the resource file in the base sub-directory will be automatically referenced.
+  - You need to create qualifiers sub-directories on your own. The name of a qualifiers sub-directory consists of one or more qualifiers that represent the application scenarios or device characteristics, covering the mobile country code (MCC), mobile network code (MNC), language, script, country or region, screen orientation, device type, color mode, and screen density. The qualifiers are separated using underscores (_) or hyphens (-).
+  - When the resources in the rawfile sub-directory are referenced, resource files will not be matched based on the device status. You can directly store resource files in the rawfile sub-directory.
+
+- Level-2: resource sub-directories
+  - Resource sub-directories store basic elements such as character strings, colors, and floating point numbers, and resource files such as media files.
+  - Supported files and resource types are listed in the table below:
+       | File Name | Resource Type | 
+     | -------- | -------- |
+     | color.json | Color resource. | 
+     | float.json | Resources such as spacing, rounded corners, and fonts. | 
+     | string.json | String resource. | 
+     | plural.json | String resource. | 
+     | media directory | Image resource. | 
+
+
+## Referencing Resources
+
+To reference an application resource in a project, use the "$r('app.type.name')" format. app indicates the resource defined in the resources directory of the application. type indicates the resource type (or the location where the resource is stored). The value can be color, float, string, plural, or media. name indicates the resource name, which you set when defining the resource.
+
+When referencing resources in the rawfile sub-directory, use the "$rawfile('filename')" format. Currently, $rawfile allows only the <Image> component to reference image resources. In the format, filename indicates the relative path of a file in the rawfile directory, and the file name must contain the file name extension. **NOTE** that the relative path cannot start with a slash (/).
+
+
+## Example
+
+Some custom resources in the base sub-directory are as follows:
+
+
+```
+    resources
+      ├─ base 
+      │    ├─ element 
+      │    │   ├─ color.json
+      │    │   ├─ string.json
+      │    │   └─ float.json
+      │    └─ media
+      │       └─ my_background_image.png
+      └─ rawfile
+           ├─ test.png
+           └─ newDir
+               └─ newTest.png  
+```
+
+The content of the color.json file is as follows:
+
+
+```
+{
+    "color": [
+        {
+            "name": "color_hello",
+            "value": "#ffff0000"
+        },
+        {
+            "name": "color_world",
+            "value": "#ff0000ff"
+        }
+    ]
+}
+```
+
+The content of the float.json file is as follows:
+
+
+```
+{
+    "float":[
+        {
+            "name":"font_hello",
+            "value":"28.0fp"
+        },
+	{
+            "name":"font_world",
+            "value":"20.0fp"
+        }
+    ]
+}
+```
+
+The content of the string.json file is as follows:
+
+
+```
+{
+    "string":[
+        {
+            "name":"string_hello",
+            "value":"Hello"
+        },
+	{
+            "name":"string_world",
+            "value":"World"
+        },
+	{
+            "name":"message_arrive",
+            "value":"We will arrive at %s."
+        }
+    ]
+}
+```
+
+The content of the plural.json file is as follows:
+
+
+```
+{
+    "plural":[
+        {
+            "name":"eat_apple",
+            "value":[
+                {
+                    "quantity":"one",
+                    "value":"%d apple"
+                },
+                {
+                    "quantity":"other",
+                    "value":"%d apples"
+                }
+            ]
+        }
+    ]
+}
+```
+
+  In the ets file, you can use the resources defined in the resources directory.
+
+```
+Text($r('app.string.string_hello'))
+    .fontColor($r('app.color.color_hello'))
+    .fontSize($r('app.float.font_hello'))
+}
+
+Text($r('app.string.string_world'))
+    .fontColor($r('app.color.color_world'))
+    .fontSize($r('app.float.font_world'))
+}
+
+Text($r('app.string.message_arrive', "five of the clock")) // Reference string resources. The second parameter of $r is used to replace %s.
+    .fontColor($r('app.color.color_hello'))
+    .fontSize($r('app.float.font_hello'))
+}
+
+Text($r('app.plural.eat_apple', 5, 5)) // Reference plural resources. The first parameter specifies the plural resource, and the second parameter specifies the number of plural resources. The third number indicates the substitute of %d.
+    .fontColor($r('app.color.color_world'))
+    .fontSize($r('app.float.font_world'))
+}
+
+Image($r(?app.media.my_background_image creation)) // Reference media resources.
+
+Image($rawfile( Femaletest.png loaded)) // Reference an image in the rawfile directory.
+
+Image($rawfile(newDir/newTest.png loaded)) // Reference an image in the rawfile directory.
+```

en/application-dev/device/ui/ts-application-states-apis-environment.md

+# Environment
+
+
+Environment is a singleton object created by the framework when the application is started. It provides the AppStorage with a series of environment state attributes required by the application. These attributes describe the device environment where the application runs. Environment and its attributes are immutable, and all attribute values are of the simple type. The following example shows how to obtain the semantic environment from Environment:
+
+
+
+```
+Environment.EnvProp("accessibilityEnabled", "default");
+var enable = AppStorage.Get("accessibilityEnabled");
+```
+
+
+accessibilityEnabled is the default system variable identifier provided by Environment. You need to bind the corresponding system attribute to the AppStorage. Then, you can use the methods or decorators in the AppStorage to access the corresponding system attribute data.
+
+
+## Environment APIs
+
+| key | Parameter | Return Value | Description |
+| -------- | -------- | -------- | -------- |
+| EnvProp | key: string,<br/>defaultValue: any | boolean | Binds this system attribute to the AppStorage. You are advised to use this API during application startup. If the attribute already exists in the AppStorage, false is returned. Do not use the variables in the AppStorage. Instead, call this method to bind environment variables. |
+| EnvProps | keys: {<br/>key: string,<br/>defaultValue: any<br/>}[] | void | Associates this system item array with the AppStorage. |
+| Keys | Array&lt;string&gt; | number | Returns the associated system item array. |
+
+
+## Built-in Environment Variables
+
+  | key | Type | Description | 
+| -------- | -------- | -------- |
+| accessibilityEnabled | boolean | Whether to enable accessibility. | 
+| colorMode | ColorMode | Color mode. The options are as follows:<br/>- ColorMode.LIGHT: light mode.<br/>- ColorMode.DARK: dark mode. | 
+| fontScale | number | Font scale. The value range is [0.85, 1.45]. | 
+| fontWeightScale | number | Font weight scale. The value range is [0.6, 1.6]. | 
+| layoutDirection | LayoutDirection | Layout direction. The options are as follows:<br/>- LayoutDirection.LTR: The direction is from left to right.<br/>- LayoutDirection.RTL: The direction is from right to left. | 
+| languageCode | string | Current system language. The value is in lowercase, for example, zh. | 

en/application-dev/device/ui/ts-application-states-apis-persistentstorage.md

+# PersistentStorage
+
+
+ArkUI provides some static methods in the PersistentStorage class for managing persistent data of applications. Persistent data with specific tags can be linked to the AppStorage, and then the persistent data can be accessed through the AppStorage APIs. Alternatively, the @StorageLink decorator can be used to access the variable of the specific key.
+
+
+| Name | Type | Return Value | Definition |
+| -------- | -------- | -------- | -------- |
+| PersistProp | key : string<br/>defaultValue: T | void | Changes the associated named attribute to persistent data in the AppStorage. The value overwriting sequence is as follows:<br/>- If the attribute exists in the AppStorage, use it to overwrite the value in Persistent.<br/>- If Persistent contains the specified attribute, use the attribute value in Persistent.<br/>- If the preceding conditions are not met, use defaultValue. The values null and undefined are not supported. |
+| DeleteProp | key: string | void | Cancels two-way binding. The value of this attribute will be deleted from the persistent storage. |
+| PersistProps | keys: {<br/>key: string,<br/>defaultValue: any<br/>}[] | void | Associates multiple named attribute bindings. |
+| Keys | void | Array &lt;string&gt; | Returns the flags of all persistent attributes. |
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> - When using PersistProp, ensure that the input key exists in the AppStorage.
+> 
+> - DeleteProp takes effect only for the data that has been linked during the current startup.
+
+
+
+```
+PersistentStorage.PersistProp("highScore", "0");
+
+@Entry
+@Component
+struct PersistentComponent {
+    @StorageLink('highScore') highScore: string = '0'
+    @State currentScore: number = 0
+    build() {
+        Column() {
+            if (this.currentScore === Number(this.highScore)) {
+                Text(`new highScore : ${this.highScore}`)
+            }
+            Button() {
+                Text(`goal!, currentScore : ${this.currentScore}`)
+                    .fontSize(10)
+            }.onClick(() => {
+                this.currentScore++
+                if (this.currentScore > Number(this.highScore)) {
+                    this.highScore = this.currentScore.toString()
+                }
+            })
+        }
+    }
+}
+```

en/application-dev/device/ui/ts-application-states-appstorage.md

+# AppStorage
+
+
+AppStorage is a singleton object in an application, which is created by the UI framework when the application is started and destroyed when the application exits. It is used to provide central storage for changing state attributes of an application. AppStorage contains all the state attributes that need to be accessed throughout the application. The AppStorage retains all attributes and their values as long as the application remains running, and the attribute values can be accessed through unique key values.
+
+
+The UI component can synchronize the application state data with the AppStorage through the decorators. The application service logic can also be implemented by accessing the AppStorage through APIs.
+
+
+The selection state attribute of the AppStorage can be synchronized with different data sources or data sinks. These data sources and data sinks can be local or remote devices and provide different functions, such as data persistence. Such data sources and data sinks can be implemented independently of the UI in the service logic.
+
+
+By default, the attributes in the AppStorage are changeable. If needed, AppStorage can also use immutable (read-only) attributes.
+
+
+## AppStorage APIs
+
+| Name | Type | Return Value | Definition |
+| -------- | -------- | -------- | -------- |
+| SetAndLink | key: string,<br/>defaultValue: T | @Link | Works in a way similar to the Link API. If the current key is stored in the AppStorage, the value corresponding to the key is returned. If the key has not been created, a Link instance corresponding to the default value is created and returned. |
+| Set | key: string,<br/>newValue: T | void | Replaces the value of a saved key. |
+| Link | key: string | @Link | Returns two-way binding to this attribute if there is data with a given key. This means that attribute changes made by a variable or component will be synchronized to the AppStorage, and attribute changes made through the AppStorage will be synchronized to the variable or component. If the attribute with this key does not exist or is read-only, undefined is returned. |
+| SetAndProp | propName: string,<br/>defaultValue: S | @Prop | Works in a way similar to the Prop API. If the current key is stored in the AppStorage, the value corresponding to the key is returned. If the key has not been created, a Prop instance corresponding to the default value is created and returned. |
+| Prop | key: string | @Prop | Returns one-way binding to an attribute with a given key if the attribute exists. This means that attribute changes made through the AppStorage will be synchronized to the variable or component, but attribute changes made by the variable or component will be synchronized to the AppStorage. The variable returned by this method is an immutable one, which is applicable both to the variable and immutable state attributes. If the attribute with the specified key does not exist, undefined is returned.<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:<br/>> The attribute value used in the prop method must be of a simple type. |
+| SetOrCreate | key: string,<br/>newValue: T | boolean | If an attribute that has the same name as the specified key exists: replaces the value of the attribute and returns true when the attribute can be modified; retains the original value of the attribute and returns false otherwise.<br/>If an attribute that has the same name as the specified key does not exist: creates an attribute whose key is key and value is newValue. The values null and undefined are not supported. |
+| Get | key: string | T or undefined | Obtains the value of the specified key. |
+| Has | propName: string | boolean | Checks whether the attribute corresponding to the specified key value exists. |
+| Keys | void | array&lt;string&gt; | Returns an array of strings containing all keys. |
+| Delete | key: string | boolean | Deletes the key-value pair for the specified key. Returns true if the key-value pair exists and is successfully deleted; returns false otherwise. |
+| Clear | void | boolean | Deletes all attributes. If any of the attributes is being referenced by a state variable, false is returned. |
+| IsMutable | key: string | boolean | Specifies whether the attribute exists and can be changed. |
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> Currently, the API can process only basic data and cannot modify a value in an object.
+
+
+## Synchronization Between AppStorage and Components
+
+In [Managing Component States](ts-component-states-state.md), we have defined how to synchronize the state variables of child components with the @State decorated variables in the parent component or ancestor component, including @Prop, @Link, and @Consume.
+
+In this section, we'll describe how to synchronize component variables with the AppStorage through the @StorageLink and @StorageProp decorators.
+
+
+### @StorageLink Decorator
+
+Two-way data binding can be established between components and the AppStorage through state variables decorated by @StorageLink(_key_). Wherein, key is the attribute key value in the AppStorage. When a component containing the @StorageLink decorated variable is created, the variable is initialized using the value in the AppStorage. Changes made to this variable in the component will be first synchronized to the AppStorage, and then to other bound instances, such as PersistentStorage or other bound UI components.
+
+
+### @StorageProp Decorator
+
+One-way data binding can be established between components and the AppStorage through state variables decorated by @StorageProp(_key_). Wherein, key is the attribute key value in the AppStorage. When a component containing the @StorageProp decorated variable is created, the variable is initialized using the value in the AppStorage. Changes made to the value in the AppStorage will cause the bound UI component to update the state.
+
+
+## Example
+
+
+```
+let varA = AppStorage.Link('varA')
+let envLang = AppStorage.Prop('languageCode')
+
+@Entry
+@Component
+struct ComponentA {
+  @StorageLink('varA') varA: number = 2
+  @StorageProp('languageCode') lang: string = 'en'
+  private label: string = 'count'
+
+  private aboutToAppear() {
+    this.label = (this.lang === 'en') ? 'Number' : 'Count'
+  }
+
+  build() {
+    Row({ space: 20 }) {
+
+      Button(`${this.label}: ${this.varA}`)
+        .onClick(() => {
+          AppStorage.Set<number>('varA', AppStorage.Get<number>('varA') + 1)
+        })
+      Button(`lang: ${this.lang}`)
+        .onClick(() => {
+          if (this.lang === 'zh') {
+            AppStorage.Set<string>('languageCode', 'en')
+          } else {
+            AppStorage.Set<string>('languageCode', 'en')
+          }
+          this.label = (this.lang === 'en') ? 'Number' : 'Count'
+        })
+    }
+  }
+}
+```
+
+Each time the user clicks the Count button, the value of this.varA will increase by 1. This variable is synchronized with varA in the AppStorage. Each time the user clicks the language icon, the value of languageCode in the AppStorage will be changed, and the change will be synchronized to the this.lang variable.

en/application-dev/device/ui/ts-attribution-configuration.md

+# Attribute Configuration
+
+
+Use attribute methods to configure component attributes. An attribute method follows the corresponding component and is bound to the component using the "." operator.
+
+
+- The following is an example of configuring the font size attribute of the Text component:
+    
+  ```
+  Text('123')
+      .fontSize(12)
+  ```
+
+
+- Use the "." operator to implement chain call to configure multiple attributes at the same time, as shown below:
+    
+  ```
+  Image('a.jpg')
+      .alt('error.jpg')    .width(100)    .height(100)
+  ```
+
+
+- In addition to constants, you can also pass variables or expressions, as shown below:
+    
+  ```
+  // Size, count, and offset are private variables defined in the component.
+  Text('hello')
+      .fontSize(this.size)
+  Image('a.jpg')
+      .width(this.count % 2 === 0 ? 100 : 200)    .height(this.offset + 100)
+  ```
+
+
+- For attributes of preset components, the framework also provides some predefined enumeration types, which you can pass as parameters to methods. Enumeration types must meet the parameter type requirements on the enumeration type definitions for specific attributes. You can configure the font color and weight attributes of the Text component as follows:
+    
+  ```
+  Text('hello')
+      .fontSize(20)
+      .fontColor(Color.Red)
+      .fontWeight(FontWeight.Bold)
+  ```

en/application-dev/device/ui/ts-child-component-configuration.md

+# Child Component Configuration
+
+
+For a component that supports child components, for example, a container component, add the UI descriptions of the child components inside "{ ... }". The <Column>, <Row>, <Stack>, <Button>, <Grid>, and <List> components are container components.
+
+
+- The following is a simple example of the <Column> component:
+  
+  ```
+  Column() {
+      Text('Hello')
+          .fontSize(100)
+      Divider()
+      Text(this.myText)
+          .fontSize(100)
+          .fontColor(Color.Red)
+  }
+  ```
+
+
+- Multiple child components can be nested in the <Column> component, as shown below:
+  
+  ```
+  Column() {
+      Column() {
+          Button() {
+              Text('+ 1')
+          }.type(ButtonType.Capsule)
+          .onClick(() => console.log ('+1 clicked!'))
+          Image('1.jpg')
+      }
+      Divider()
+      Column() {
+          Button() {
+              Text('+ 2')
+          }.type(ButtonType.Capsule)
+          .onClick(() => console.log ('+2 clicked!'))
+          Image('2.jpg')
+      }
+      Divider()
+      Column() {
+          Button() {
+              Text('+ 3')
+          }.type(ButtonType.Capsule)
+          .onClick(() => console.log('+3 clicked!'))
+          Image('3.jpg')
+      }
+  }.alignItems(HorizontalAlign.Center) // center align components inside Column
+  ```

en/application-dev/device/ui/ts-component-based-builder.md

+# @Builder
+
+
+The @Builder decorated method is used to define the declarative UI description of a component and quickly generate multiple layouts in a custom component. The functionality and syntax of the @Builder decorator are the same as those of the [build Function](ts-function-build.md).
+
+
+
+```
+@Entry
+@Component
+struct CompA {
+  size : number = 100;
+
+  @Builder SquareText(label: string) {
+    Text(label)
+      .width(1 * this.size)
+      .height(1 * this.size)
+  }
+
+  @Builder RowOfSquareTexts(label1: string, label2: string) {
+    Row() {
+      this.SquareText(label1)
+      this.SquareText(label2)
+    }
+    .width(2 * this.size)
+    .height(1 * this.size)
+  }
+
+  build() {
+    Column() {
+      Row() {
+        this.SquareText("A")
+        this.SquareText("B")
+        // or as long as tsc is used
+      }
+      .width(2 * this.size)
+      .height(1 * this.size)
+      this.RowOfSquareTexts("C", "D")
+    }
+    .width(2 * this.size)
+    .height(2 * this.size)
+  }
+}
+```
+
+## @BuilderParam<sup>8+</sup>
+
+The @BuilderParam decorator is used to modify the function type attributes (for example, @BuilderParam content: () => any) in a custom component. When the custom component is initialized, the attributes modified by the @BuilderParam decorator must be assigned values.
+
+### Background
+
+In certain circumstances, you may need to add a specific function, such as a click-to-jump action, to a custom component. However, embedding an event method directly inside of the component can add the function to all places where the component is initialized. This is where the @BuilderParam decorator come into the picture. When initializing a custom component, you can assign a @Builder decorated method to the @BuilderParam decorated attribute, thereby adding the specific function to the custom component.
+
+### Component Initialization Through Parameters
+
+When initializing a custom component through parameters, assign a @Builder decorated method to the @BuilderParam decorated attribute —content, and call the value of content in the custom component.
+
+```
+@Component
+struct CustomContainer {
+  header: string = "";
+  @BuilderParam content: () => any;
+  footer: string = "";
+  build() {
+    Column() {
+      Text(this.header)
+        .fontSize(50)
+      this.content()
+      Text(this.footer)
+        .fontSize(50)
+    }
+  }
+}
+
+@Entry
+@Component
+struct CustomContainerUser {
+  @Builder specificParam(label: string) {
+    Column() {
+      Text(label).fontSize(50)
+    }
+  }
+
+  build() {
+    Column() {
+      CustomContainer({
+        header: "Header",
+        content: this.specificParam("111")
+        footer: "Footer",
+      })
+    }
+  }
+}
+```
+
+### Component Initialization Through Trailing Closure
+
+In a custom component, use the @BuilderParam decorated attribute to receive a trailing closure. When the custom component is initialized, the component name is followed by a pair of braces ({}) to form a trailing closure (CustomComponent(){}). You can consider a trailing closure as a container and add content to it. For example, you can add a component ({Column(){Text("content")}) to the closure. The syntax of the closure is the same as that of [build](ts-function-build.md). In this scenario, the custom component has one and only one @BuilderParam decorated attribute.
+
+Example: Add a &lt;Column> component and a click event to the closure, and call the specificParam method decorated by @Builder in the new &lt;Column&gt; component. After the &lt;Column&gt; component is clicked, the value of the component's header attribute will be changed to changeHeader. In addition, when the component is initialized, the content of the trailing closure will be assigned to the closer attribute decorated by @BuilderParam.
+
+```
+@Component
+struct CustomContainer {
+  header: string = "";
+  @BuilderParam closer: () => any;
+  build() {
+    Column() {
+      Text(this.header)
+        .fontSize(50)
+      this.closer()
+    }
+  }
+}
+@Builder function specificParam(label1: string, label2: string) {
+  Column() {
+    Text(label1)
+      .fontSize(50)
+    Text(label2)
+      .fontSize(50)
+  }
+}
+@Entry
+@Component
+struct CustomContainerUser {
+  @State text: string = "header"
+  build() {
+    Column() {
+      CustomContainer({
+        header: this.text,
+      }){
+        Column(){
+          specificParam("111", "22")
+        }.onClick(()=>{
+          this.text = "changeHeader"
+        })
+      }
+    }
+  }
+}
+```

en/application-dev/device/ui/ts-component-based-component.md

+# @Component
+
+
+A struct decorated by @Component has the componentization capability and can serve as an independent component. This type of component is also called a custom component, and its UI structure is described in the build method. Custom components have the following features:
+
+
+- Composability: Custom components can be used with preset or other components, as well as common attributes and methods.
+
+- Reusable: Custom components can be reused by other components and used as different instances in different parent components or containers.
+
+- Lifecycle: Custom components provide callbacks for service logic processing throughout the lifecycle.
+
+- Data-driven update: The UI of custom components can be automatically updated based on the data of state variables.
+
+
+For details about componentization, see [About @Component](ts-function-build.md).
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> - The build method must be defined for a custom component.
+> 
+> - Custom constructors are prohibited for custom components.
+
+
+The following code illustrates how to create a custom component named MyComponent:
+
+```
+@Component
+struct MyComponent {
+    build() {
+        Column() {
+            Text('my component')
+                .fontColor(Color.Red)
+        }.alignItems(HorizontalAlign.Center) // center align Text inside Column
+    }
+}
+```
+
+
+The build method of MyComponent is executed during initial rendering. When the component status changes, the build method will be executed again.
+
+
+The following code illustrates how to use MyComponent:
+
+```
+@Component
+struct ParentComponent {
+    build() {
+        Column() {
+            MyComponent()
+            Text('we use component')
+                .fontSize(20)
+        }
+    }
+}
+```
+
+
+MyComponent can be applied multiple times and reused in different components, as shown in the code below:
+
+```
+@Component
+struct ParentComponent {
+    build() {
+        Row() {
+            Column() {
+                MyComponent()
+                Text('first column')
+                    .fontSize(20)
+            }
+            Column() {
+                MyComponent()
+                Text('second column')
+                    .fontSize(20)
+            }
+        }
+    }
+
+    private aboutToAppear() {
+        console.log('ParentComponent: Just created, about to become rendered first time.')
+    }
+
+    private aboutToDisappear() {
+        console.log('ParentComponent: About to be removed from the UI.')
+    }
+}
+```

en/application-dev/device/ui/ts-component-based-customdialog.md

+# @CustomDialog
+
+
+The @CustomDialog decorator is used to decorate custom pop-up dialog boxes.
+
+
+  
+```
+// custom-dialog-demo.ets
+@CustomDialog
+struct DialogExample {
+    controller: CustomDialogController;
+    action: () => void;
+
+    build() {
+        Row() {
+            Button ("Close CustomDialog")
+                .onClick(() => {
+                    this.controller.close();
+                    this.action();
+                })
+        }.padding(20)
+    }
+}
+
+@Entry
+@Component
+struct CustomDialogUser {
+    dialogController : CustomDialogController = new CustomDialogController({
+        builder: DialogExample({action: this.onAccept}),
+        cancel: this.existApp,
+        autoCancel: true
+    });
+
+    onAccept() {
+        console.log("onAccept");
+    }
+    existApp() {
+        console.log("Cancel dialog!");
+    }
+
+    build() {
+        Column() {
+            Button("Click to open Dialog")
+                .onClick(() => {
+                    this.dialogController.open()
+                })
+        }
+    }
+}
+```

en/application-dev/device/ui/ts-component-based-entry.md

+# @Entry
+
+
+The custom component decorated by @Entry functions as the default entry component of the respective page. When the page is loaded, the custom component decorated by @Entry is created and displayed first.
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> A source file can contain at most one custom component decorated by @Entry.
+
+
+Example of using @Entry:
+
+```
+// Only MyComponent decorated by @Entry is rendered and displayed. "hello world" is displayed, but "goodbye" is not displayed.
+@Entry
+@Component
+struct MyComponent {
+    build() {
+        Column() {
+            Text('hello world')
+                .fontColor(Color.Red)
+        }
+    }
+}
+
+@Component
+struct HideComponent {
+    build() {
+        Column() {
+            Text('goodbye')
+                .fontColor(Color.Blue)
+        }
+    }
+}
+```

en/application-dev/device/ui/ts-component-based-extend.md

+#  @Extend
+
+The @Extend decorator adds new attribute functions to preset components, such as <Text>, <Column>, and <Button>. You can use the @Extend decorator to quickly define and reuse the custom styles of a component.
+
+```
+@Extend(Text) function fancy(fontSize: number) {
+  .fontColor(Color.Red)
+  .fontSize(fontSize)
+  .fontStyle(FontStyle.Italic)
+}
+
+@Entry
+@Component
+struct FancyUse {
+  build() {
+    Row({ space: 10 }) {
+      Text("Fancy")
+        .fancy(16)
+      Text("Fancy")
+        .fancy(24)
+    }
+  }
+}
+```
+
+> ![img](public_sys-resources/icon-note.gif) **NOTE**: The @Extend decorator cannot be used in the struct definition of a custom component.
\ No newline at end of file

en/application-dev/device/ui/ts-component-based-preview.md

+# @Preview
+
+
+Custom components decorated by @Preview can be previewed in the Previewer of DevEco Studio. When the page is loaded, the custom components decorated by @Preview are created and displayed.
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> In a source file, at most one custom component can be decorated by @Preview.
+
+
+Example of using @Preview:
+
+```
+// Display only Hello Component1 on the PC preview. The content under MyComponent is displayed on the real device.
+@Entry
+@Component
+struct MyComponent {
+    build() {
+        Column() {
+            Row() {
+                Text('Hello World!')
+                    .fontSize("50lpx")
+                    .fontWeight(FontWeight.Bold)
+            }
+            Row() {
+                Component1()
+            }
+            Row() {
+                Component2()
+            }
+        }
+    }
+}
+@Preview
+@Component
+struct Component1 {
+    build() {
+        Column() {
+            Row() {
+                Text('Hello Component1')
+                    .fontSize("50lpx")
+                    .fontWeight(FontWeight.Bold)
+            }
+        }
+    }
+}
+
+@Component
+struct Component2 {
+    build() {
+        Column() {
+            Row() {
+                Text('Hello Component2')
+                    .fontSize("50lpx")
+                    .fontWeight(FontWeight.Bold)
+            }
+        }
+    }
+}
+```

en/application-dev/device/ui/ts-component-based-styles.md

+# @Styles
+
+
+The @Styles decorator adds new attribute functions to basic components, such as <Text>, <Column>, and <Button>. Currently, @Styles supports only universal attributes. You can use the @Styles decorator to quickly define and reuse the custom styles of a component.
+
+
+@Styles can be defined inside or outside a component. When it is defined outside a component, the keyword function must be included.
+
+
+
+```
+@Styles function globalFancy() {
+  .backgroundColor(Color.Red)
+}
+
+@Entry
+@Component
+struct FancyUse {
+  @Styles componentFancy() {
+    .backgroundColor(Color.Blue)
+  }
+  build() {
+    Column({ space: 10 }) {
+      Text("Fancy")
+        .globalFancy()
+        .width(100)
+        .height(100)
+        .fontSize(30)
+      Text("Fancy")
+        .componentFancy()
+        .width(100)
+        .height(100)
+        .fontSize(30)
+    }
+  }
+}
+```
+
+
+@Styles can also be used inside the StateStyles attribute to assign state-specific attributes to components.
+
+
+In StateStyles, styles defined outside the component can be directly called. However, the keyword this must be used to call styles defined in the component.
+
+
+
+```
+@Styles function globalFancy() {
+  .width(100)
+  .height(100)
+}
+
+@Entry
+@Component
+struct FancyUse {
+  @Styles function componentFancy() {
+    .width(50)
+    .height(50)
+  }
+  build() {
+    Row({ space: 10 }) {
+      Button() {
+	Text("Fancy")
+      }
+      .stateStyles({
+	normal: {
+	  .width(80)
+	  .height(80)
+	},
+	disabled: this.componentFancy,
+	pressed: globalFancy
+      })
+    }
+  }
+}
+```

en/application-dev/device/ui/ts-component-creation-re-initialization.md

+# Component Creation and Re-initialization
+
+
+## Initial Creation and Rendering
+
+1. Create the parent component ParentComp.
+
+2. Locally initialize the state variable isCountDown of ParentComp.
+
+3. Execute the build function of ParentComp.
+
+4. Create a preset <Column> component.
+   1. Create a preset <Text> component, set the text content to be displayed, and add the <Text> component instance to the <Column> component.
+   2. Create the component on the true branch based on the if condition.
+       1. Create a preset <Image> component and set the image source address.
+       2. Create a TimerComponent using the given constructor.
+           1. Create a TimerComponent object.
+           2. Initialize the values of member variables locally.
+           3. Use the parameters provided by the TimerComponent constructor to update the values of member variables.
+           4. Execute the aboutToAppear function of TimerComponent.
+           5. Execute the build function of TimerComponent to create the corresponding UI description structure.
+   3. Create a preset <Button> component and set the corresponding content.
+
+
+## Status Update
+
+When a user clicks a button:
+
+1. The value of the isCountDown state variable of ParentComp is changed to false.
+
+2. The build function of ParentComp is executed.
+
+3. The preset <Column> component is reused by the framework and reinitialized.
+
+4. The child components of <Column> reuse and reinitialize the objects in the memory.
+   1. Reuse the preset <Text> component after re-initializing the component using new text content.
+   2. Reuse the component on the false branch based on the if condition.
+       1. Destroy the components on the original true branch as these components are no longer used.
+           1. Destroy the created preset <image> component instance.
+           2. Destroy the TimerComponent component instance, and call the aboutToDisappear function.
+       2. Create components on the false branch.
+           1. Create a preset <Image> component and set the image source address.
+           2. Create a TimerComponent again using the given constructor.
+           3. Initialize the newly created TimerComponent and call the aboutToAppear and build functions.
+   3. Reuse the preset <Button> component, with the new image source address.
+
+
+## Example
+
+
+```
+@Entry
+@Component
+struct ParentComp {
+    @State isCountDown: boolean = true
+    build() {
+        Column() {
+            Text(this.isCountDown ? 'Count Down' : 'Stopwatch')
+            if (this.isCountDown) {
+                Image('countdown.png')
+                TimerComponent({counter: 10, changePerSec: -1, showInColor: Color.Red})
+            } else {
+                Image('stopwatch.png')
+                TimerComponent({counter: 0, changePerSec: +1, showInColor: Color.Black })
+            }
+            Button(this.isCountDown ? 'Swtich to Stopwatch' : 'Switch to Count Down')
+                .onClick(() => {this.isCountDown = !this.isCountDown})
+        }
+    }
+}
+
+// Manage and display a count down / stop watch timer
+@Component
+struct TimerComponent {
+    @State counter: number = 0
+    private changePerSec: number = -1
+    private showInColor: Color = Color.Black
+    private timerId : number = -1
+
+    build() {
+        Text(`${this.counter}sec`)
+            .fontColor(this.showInColor)
+    }
+
+    aboutToAppear() {
+        this.timerId = setInterval(() => {this.counter += this.changePerSec}, 1000)
+    }
+
+    aboutToDisappear() {
+        if (this.timerId > 0) {
+            clearTimeout(this.timerId)
+            this.timerId = -1
+        }
+    }
+}   
+```

en/application-dev/device/ui/ts-component-states-link.md

+# @Link
+
+
+Two-way binding can be established between the @Link decorated variable and the @State decorated variable of the parent component. The @Link data has the following features:
+
+
+- Support for multiple types: The value of the @Link decorated variable can be of the same type as the @State decorated variable; that is, the value can be of the following types: class, number, string, boolean, or arrays of these types.
+
+- Private: Data is accessed only within the component.
+
+- Single data source: The variable of the parent component for initializing the @Link decorated variable must be the @State decorated variable.
+
+- Two-way binding: When a child component changes the @Link decorated variable, the @State decorated variable of its parent component is also changed.
+
+- Support for initialization with the variable reference passed to the @Link decorated variable: When creating a new instance of the component, you must use the naming parameter to initialize all @Link decorated variables. The @Link decorated variable can be initialized by using the reference of the @State or @Link decorated variable. Wherein, the @State decorated variable can be referenced using the '$' operator.
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> The @Link decorated variable cannot be initialized within the component.
+
+
+## Simple Type Example
+
+
+```
+@Entry
+@Component
+struct Player {
+    @State isPlaying: boolean = false
+    build() {
+        Column() {
+            PlayButton({buttonPlaying: $isPlaying})
+            Text(`Player is ${this.isPlaying? '':'not'} playing`)
+        }
+    }
+}
+
+@Component
+struct PlayButton {
+    @Link buttonPlaying: boolean
+    build() {
+        Column() {
+            Button() {
+                Image(this.buttonPlaying? 'play.png' : 'pause.png')
+            }.onClick(() => {
+                this.buttonPlaying = !this.buttonPlaying
+            })
+        }
+    }
+}
+```
+
+The @Link semantics are derived from the '$' operator. In other words, $isPlaying is the two-way binding of the internal state this.isPlaying. When you click PlayButton, the <Image> and <Text> components of PlayButton are refreshed at the same time.
+
+
+## Complex Type Example
+
+
+```
+@Entry
+@Component
+struct Parent {
+    @State arr: number[] = [1, 2, 3]
+    build() {
+        Column() {
+            Child({items: $arr})
+            ForEach(this.arr,
+                item => Text(`${item}`),
+                item => item.toString())
+        }
+    }
+}
+
+@Component
+struct Child {
+    @Link items: number[]
+    build() {
+        Column() {
+            Button() {
+                Text('Button1: push')
+            }.onClick(() => {
+                this.items.push(100)
+            })
+            Button() {
+                Text('Button2: replace whole item')
+            }.onClick(() => {
+                this.items = [100, 200, 300]
+            })
+        }
+    }
+}
+```
+
+In the example above, click Button1 and Button2 to change the list of text items displayed in the parent component.
+
+
+## Example of Using @Link, @State, and @Prop Together
+
+
+```
+@Entry
+@Component
+struct ParentView {
+    @State counter: number = 0
+    build() {
+        Column() {
+            ChildA({counterVal: this.counter})  // pass by value
+            ChildB({counterRef: $counter})      // $ creates a Reference that can be bound to counterRef
+        }
+    }
+}
+
+@Component
+struct ChildA {
+    @Prop counterVal: number
+    build() {
+        Button() {
+            Text(`ChildA: (${this.counterVal}) + 1`)
+        }.onClick(() => {this.counterVal+= 1})
+    }
+}
+
+@Component
+struct ChildB {
+    @Link counterRef: number
+    build() {
+        Button() {
+            Text(`ChildB: (${this.counterRef}) + 1`)
+        }.onClick(() => {this.counterRef+= 1})
+    }
+}
+```
+
+In the preceding example, ParentView contains two child components: ChildA and ChildB. They are initialized by the state variable counter of ParentView.
+
+- ChildB uses @Link to establish two-way state binding. When the value of the counterRef state variable is changed in ChildB, the change is synchronized to ParentView and ChildA.
+
+- ChildA uses @Prop to establish one-way state binding from ParentView to itself. When ChildA changes the state, it is re-rendered, but the change is not updated to ParentView or ChildB.

en/application-dev/device/ui/ts-component-states-prop.md

+# @Prop
+
+
+@Prop and @State have the same semantics but different initialization modes. Variables decorated by @Prop must be initialized using the @State decorated variable provided by their parent components. The @Prop decorated variable can be modified in the component, but the modification is not updated to the parent component; that is, @Prop uses one-way data binding.
+
+
+The @Prop state data has the following features:
+
+
+- Support for simple types: The number, string, and boolean types are supported.
+
+- Private: Data is accessed only within the component.
+
+- Support for multiple instances: A component can have multiple attributes decorated by @Prop.
+
+- Support for initialization with a value passed to the @Prop decorated variable: When a new instance of the component is created, all @Prop decorated variables must be initialized. Initialization inside the component is not supported.
+
+
+## Example
+
+  
+```
+@Entry
+@Component
+struct ParentComponent {
+    @State countDownStartValue: number = 10 // 10 Nuggets default start value in a Game
+    build() {
+        Column() {
+            Text(`Grant ${this.countDownStartValue} nuggets to play.`)
+            Button() {
+                Text('+1 - Nuggets in New Game')
+            }.onClick(() => {
+                this.countDownStartValue += 1
+            })
+            Button() {
+                Text('-1  - Nuggets in New Game')
+            }.onClick(() => {
+                this.countDownStartValue -= 1
+            })
+            // When creating a child component, you must provide the initial value of its @Prop decorated variable in the constructor parameter and initialize the regular variable CostOfOneAttump (not Prop).
+            CountDownComponent({ count: this.countDownStartValue, costOfOneAttempt: 2})
+        }
+    }
+}
+
+@Component
+struct CountDownComponent {
+    @Prop count: number
+    private costOfOneAttempt: number
+
+    build() {
+        Column() {
+            if (this.count > 0) {
+                Text(`You have ${this.count} Nuggets left`)
+            } else {
+                Text('Game over!')
+            }
+
+            Button() {
+                Text('Try again')
+            }.onClick(() => {
+                this.count -= this.costOfOneAttempt
+            })
+        }
+    }
+}
+```
+
+In the preceding example, when you press +1 or -1, the status of the parent component changes and the build method is executed again. In this case, a new CountDownComponent is created. The countDownStartValue property of the parent component is used to initialize the @Prop decorated variable of the child component. When you tap the Try again button of the child component, the value of the @Prop decorated variable count is changed. As a result, the CountDownComponent is rendered again. However, the change of the count value does not affect the countDownStartValue value of the parent component.
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> When a new component instance is created, all its @Prop decorated variables must be initialized.

en/application-dev/device/ui/ts-component-states-state.md

+# @State
+
+
+The @State decorated variable is the internal state data of the component. When the state data is modified, the build method of the component is called to refresh the UI.
+
+
+The @State data has the following features:
+
+
+- Support for multiple types: The following types are supported: strong types by value and by reference, including class, number, boolean, string, as well as arrays of these types, that is, Array<class>, Array<string>, Array<boolean>, and Array<number>. object and any are not allowed.
+
+- Support for multiple instances: Multiple instances can coexist in a component. The internal state data of different instances is independent.
+
+- Private: An attribute marked with @State can only be accessed within the component.
+
+- Local initialization required: Initial values must be allocated to all @State decorated variables through the initialization process. Otherwise, they may become undefined in the framework.
+
+- Support for setting of initial attribute values based on the state variable name: When creating a component instance, you can explicitly specify the initial value of the @State decorated attribute based on the variable name.
+
+
+## Simple Example of @State Decorated Attribute
+
+
+```
+@Entry
+@Component
+struct MyComponent {
+    @State count: number = 0
+    // MyComponent provides a method for modifying the @State status data member.
+    private toggleClick() {
+        this.count += 1
+    }
+
+    build() {
+        Column() {
+            Button() {
+                Text(`click times: ${this.count}`)
+                    .fontSize(10)
+            }.onClick(this.toggleClick.bind(this))
+        }
+    }
+}
+```
+
+
+## Complex Example of @State Decorated Variable
+
+
+```
+// Customize the status data class.
+class Model {
+    value: string
+    constructor(value: string) {
+        this.value = value
+    }
+}
+
+@Entry
+@Component
+struct EntryComponent {
+    build() {
+        Column() {
+            MyComponent({count: 1, increaseBy: 2})  // MyComponent1 in this document            
+            MyComponent({title: {value: 'Hello, World 2'}, count: 7})   //MyComponent2 in this document
+        }
+    }
+}
+
+@Component
+struct MyComponent {
+    @State title: Model = {value: 'Hello World'}
+    @State count: number = 0
+    private toggle: string = 'Hello World'
+    private increaseBy: number = 1
+
+    build() {
+        Column() {
+            Text(`${this.title.value}`).fontSize(30)
+            Button() {
+                Text(`Click to change title`).fontSize(20).fontColor(Color.White)
+            }.onClick(() => {
+                this.title.value = (this.toggle == this.title.value) ? 'Hello World' : 'Hello UI'
+            }) // Modify the internal state of MyComponent using the anonymous method.
+
+            Button() {
+                Text(`Click to increase count=${this.count}`).fontSize(20).fontColor(Color.White)
+            }.onClick(() => {
+                this.count += this.increaseBy
+            }) // Modify the internal state of MyComponent using the anonymous method.
+        }
+    }
+}
+```
+
+
+In the preceding example:
+
+
+- Two @State decorated variables, count and title, have been defined for MyComponent. If the value of count or title changes, the build method of MyComponent needs to be called to render the component again.
+
+- The EntryComponent has multiple MyComponent instances. The internal status change of the first MyComponent does not affect the second MyComponent.
+
+- When creating a MyComponent instance, initialize the variables in the component based on the variable name. For example:
+  
+  ```
+  MyComponent({title: {value: 'Hello, World 2'}, count: 7})
+  ```

en/application-dev/device/ui/ts-configuration-with-mandatory-parameters.md

+# Configuration with Mandatory Parameters
+
+
+If the API definition of a component contains any mandatory parameter, set the parameters in the parentheses next to the component. Use constants to assign values to the parameters.
+
+
+Examples:
+
+
+- Set the mandatory parameter src of the <Image> component as follows:
+  
+  ```
+  Image('http://xyz/a.jpg')
+  ```
+
+
+- Set the mandatory parameter content of the <Text> component as follows:
+  
+  ```
+  Text('123')
+  ```
+
+
+You can also use variables or expressions to assign values to parameters. The result type returned by an expression must meet the parameter type requirements. For example, to pass a variable or expression to construct the Image and Text components:
+
+```
+// imagePath, where imageUrl is a private data variable defined in the component.
+Image(this.imagePath)
+Image('http://' + this.imageUrl)
+// count is a private data variable defined in the component.
+// (``) and (${}) are the template character string features supported by the TS language and comply with the
+// features of the corresponding language. This specification is not limited.
+Text(`count: ${this.count}`)
+```

en/application-dev/device/ui/ts-custom-component-initialization.md

+# Initialization of Custom Components' Member Variables
+
+
+The member variables of a component can be initialized in either of the following ways:
+
+
+- Local initialization. For example:
+    
+  ```
+  @State counter: Counter = new Counter()
+  ```
+
+- Initialization using constructor parameters. For example:
+    
+  ```
+  MyComponent(counter: $myCounter)
+  ```
+
+
+The allowed method depends on the decorator of the state variable, as shown in the following table.
+
+
+  | Decorator Type | Local Initialization | Initialization Using Constructor Parameters | 
+| -------- | -------- | -------- |
+| @State | Mandatory | Optional | 
+| @Prop | Forbidden | Mandatory | 
+| @Link | Forbidden | Mandatory | 
+| @StorageLink | Mandatory | Forbidden | 
+| @StorageProp | Mandatory | Forbidden | 
+| @Provide | Mandatory | Optional | 
+| @Consume | Forbidden | Forbidden | 
+| @ObjectLink | Forbidden | Mandatory | 
+| Normal member variable | Recommended | Optional | 
+
+
+As indicated by the preceding table:
+
+
+- The @State decorated variables need to be initialized locally. The initial value can be overwritten by the constructor parameter.
+
+- The @Prop and @Link decorated variables must be initialized only by constructor parameters.
+
+
+Comply with the following rules when using constructors to initialize member variables:
+
+
+  | From the Variable in the Parent Component (Below) to the Variable in the Child Component (Right) | @State | @Link | @Prop | Normal Variable | 
+| -------- | -------- | -------- | -------- | -------- |
+| @State | Not allowed | Allowed | Allowed | Allowed | 
+| @Link | Not allowed | Allowed | Not recommended | Allowed | 
+| @Prop | Not allowed | Not allowed | Allowed | Allowed | 
+| @StorageLink | Not allowed | Allowed | Not allowed | Allowed | 
+| @StorageProp | Not allowed | Not allowed | Not allowed | Allowed | 
+| Normal variable | Allowed | Not allowed | Not allowed | Allowed | 
+
+
+As indicated by the preceding table:
+
+
+- The normal variables of the parent component can be used to initialize the @State decorated variables of the child component, but not the @Link or @Prop decorated variables.
+
+- The @State decorated variable of the parent component can be used to initialize the @Prop, @Link (using $), or normal variables of the child component, but not the @State decorated variables of the child component.
+
+- The @Link decorated variables of the parent component can be used to initialize the @Link decorated or normal variables of the child component. However, initializing the @State decorated members of the child component can result in a syntax error. In addition, initializing the @Prop decorated variables is not recommended.
+
+- The @Prop decorated variables of the parent component can be used to initialize the normal variables or @Prop decorated variables of the child component, but not the @State or @Link decorated variables.
+
+- Passing @StorageLink and @StorageProp from the parent component to the child component is prohibited.
+
+- In addition to the preceding rules, the TypeScript strong type rules need to be followed.
+
+
+## Example
+
+  
+```
+@Entry
+@Component
+struct Parent {
+    @State parentState: ClassA = new ClassA()
+    build() {
+        Row() {
+            CompA({aState: new ClassA, aLink: $parentState}) // valid
+            CompA({aLink: $parentState})   // valid
+            CompA()                 // invalid, @Link aLink remains uninitialized
+            CompA({aLink: new ClassA}) // invalid, @Link aLink must be a reference ($) to either @State or @Link variable
+        }
+    }
+}
+
+@Component
+struct CompA {
+    @State aState: boolean = false   // must initialize locally
+    @Link aLink: ClassA              // must not initialize locally
+
+    build() {
+        Row() {
+            CompB({bLink: $aLink,         // valid init a @Link with reference of another @Link,
+                bProp: this.aState})    // valid init a @Prop with value of a @State
+            CompB({aLink: $aState,  // invalid: type missmatch expected ref to ClassA, provided reference to boolean
+                bProp: false})           // valid init a @Prop by constants value
+        }
+    }
+}
+
+@Component
+struct CompB {
+    @Link bLink: ClassA = new ClassA()       // invalid, must not initialize locally
+    @Prop bProp: boolean = false      // invalid must not initialize locally
+
+    build() {
+        ...
+    }
+}
+```

en/application-dev/device/ui/ts-custom-component-lifecycle-callbacks.md

+# Custom Component Lifecycle Callbacks
+
+
+The lifecycle callbacks of a custom component are used to notify users of the lifecycle of the component. These callbacks are private and are invoked by the development framework at a specified time at runtime. They cannot be manually invoked from applications.
+
+
+## Lifecycle Callback Definition
+
+  | Function | Description | 
+| -------- | -------- |
+| aboutToAppear | Invoked after a new instance of the custom component is created and before its build function is executed. You can change state variables in the aboutToAppear function. The change will take effect when you execute the build function next time. | 
+| aboutToDisappear | Invoked before the destructor of the custom component is consumed. Do not change state variables in the aboutToDisappear function as doing this can cause unexpected errors. For example, the modification of the @Link decorated variable may cause unstable application running. | 
+| onPageShow | Invoked when a page is displayed. This callback is used in the routing process or scenarios where the application is switched to the foreground or background. Only the custom components decorated by @Entry take effect. | 
+| onPageHide | Invoked when a page is hidden. This callback is used in the routing process or scenarios where the application is switched to the foreground or background. Only the custom components decorated by @Entry take effect. | 
+| onBackPress | Invoked when a user clicks the back button. Only the custom components decorated by @Entry take effect.<br/>- The value true is returned if the page processes the return logic instead of performing page routing.<br/>- The value false is returned if the default return logic is used.<br/>- If no value is returned, the default return logic is used. | 
+
+
+## Example
+
+  
+```
+@Component
+struct CountDownTimerComponent {
+    @State countDownFrom: number = 10
+    private timerId: number = -1
+
+    private aboutToAppear(): void  {
+        this.timerId = setInterval(() => {
+            if (this.countDownFrom <= 1) {
+                clearTimeout(this.timerId)
+            }
+            this.countDownFrom -= 1
+        }, 1000) // decr counter by 1 every second
+    }
+
+    private aboutToDisappear(): void {
+        if (this.timerId > 0) {
+            clearTimeout(this.timerId)
+            this.timerId = -1
+        }
+    }
+
+    build() {
+        Text(`${this.countDownFrom} sec left`)
+    }
+}
+```
+
+The example above shows that lifecycle functions are critical for CountDownTimerComponent to manage its timer resources. Similar functions include loading resources asynchronously from the network.
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> - Promise and asynchronous callback functions can be used in lifecycle functions, for example, network resource getters and timer setters.
+> 
+> - Do not use async await in lifecycle functions.

en/application-dev/device/ui/ts-event-configuration.md

+# Event Configuration
+
+
+You can use event methods to configure events supported by components.
+
+
+- Example of using a lambda expression to configure the event of a component:
+    
+  ```
+  // Counter is a private data variable defined in the component.
+  Button('add counter')
+      .onClick(() => {
+          this.counter += 2
+      })
+  ```
+
+
+- When using an anonymous function expression to configure the event of a component, bind must be used to ensure that the contained components are referenced by this in the function body.
+    
+  ```
+  // Counter is a private data variable defined in the component.
+  Button('add counter')
+      .onClick(function () {
+          this.counter += 2
+      }.bind(this))
+  ```
+
+
+- Example of using a component's member function to configure the event of the component:
+    
+  ```
+  myClickHandler(): void {
+      // do something
+  }
+  
+  ...
+  
+  Button('add counter')
+    .onClick(this.myClickHandler)
+  ```

en/application-dev/device/ui/ts-framework-directory.md

+# Directory Structure
+
+
+The following figure shows the typical directory structure of the eTS module (entry/src/main) for an application with feature abilities (FAs).
+
+
+![en-us_image_0000001222967752](figures/en-us_image_0000001222967752.png)
+
+
+Functions of the files are as follows:
+
+
+- The Extended TypeScript (eTS) files that end with the .ets extension describe the UI layouts, styles, event interactions, and page logics.
+
+
+Functions of the folders and files are as follows:
+
+
+- The app.ets file manages global application logics and lifecycles.
+
+- The pages directory stores all component pages.
+
+- The common directory stores common code files, such as custom components and public methods.
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+>
+> TypeScript and JavaScript files can be imported as page files.

en/application-dev/device/ui/ts-framework-file-access-rules.md

+# Rules for Accessing Application Code Files
+
+
+The application code files can be accessed in the following ways:
+
+
+- Use a relative path to reference the code file. For example, if the upper-level directory is ../common/utils/utils.ets, use ./common/utils/utils.ets for the current directory.
+
+- Use the root path of the current module to reference the code file, for example, common/utils/utils.ets.
+
+- Store common code files in the common directory.
+
+
+## Example
+
+  
+```
+import { FoodData, FoodList } from "../common/utils/utils.ets";
+
+@Entry
+@Component
+struct FoodCategoryList {  
+  private foodItems: FoodData[] = [    
+    new FoodData("Tomato"),    
+    new FoodData("Strawberry"),    
+    new FoodData("Cucumber")  
+  ]  
+  build() {    
+    Column() {      
+      FoodList({ foodItems: this.foodItems })    
+    }  
+  }
+}
+```
+
+Example for importing a code file:
+
+  
+```
+//common/utils/utils.ets
+
+export class FoodData {  
+  name: string;  
+  constructor(name: string) {    
+    this.name = name;  
+  }
+}
+
+@Component
+export struct FoodList {  
+  private foodItems: FoodData[]
+
+  build() {    
+    Column() {      
+      Flex({justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center}) {        
+        Text('Food List')          
+          .fontSize(20)      
+      }      
+      .width(200)      
+      .height(56)      
+      .backgroundColor('#FFf1f3f5')      
+      List() {        
+        ForEach(this.foodItems, item => {          
+          ListItem() {            
+            Text(item.name)              
+              .fontSize(14)          
+          }        
+        }, item => item.toString())      
+      }    
+    }  
+  }
+}
+```

en/application-dev/device/ui/ts-framework-js-tag.md

+# "js" Tag
+
+
+Configure the "js" tag in the config.json file of your application. The "js" tag contains the instance name, page route, and window configuration information.
+
+
+  | Tag | Type | Default Value | Mandatory | Description | 
+| -------- | -------- | -------- | -------- | -------- |
+| name | string | default | Yes | Name of the eTS instance. | 
+| pages | Array | - | Yes | Page route information. For details, see ["pages"](#pages). | 
+| window | Object | - | No | Window configuration information. For details, see ["window"](#window). | 
+| mode | Object | - | No | Running type and syntax style of the JS component. For details, see ["mode"](#mode). | 
+
+
+## pages
+
+The "pages" defines the route information of each page's entry component. Each page consists of the page path and page name. The following is an example:
+
+
+```
+{
+    "pages": [
+        "pages/index",
+        "pages/detail"
+    ]
+}
+```
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> - The first page in the "pages" list is the home page of the application.
+>
+> - The page name must not be a component name, for example, Text.ets or Button.ets.
+>
+> - Each page file must contain the [page entry component](ts-component-based-entry.md) (with the @Entry decoration).
+
+
+## window
+
+The "window" configures the view window. The following attributes can be configured:
+
+  | Type | Default Value | Description | 
+| -------- | -------- | -------- |
+| designWidth | - | Logical width of the view. The default value is 720. (The default value is 454 for wearables.) The logical width of the view determines the unit size of lpx. For example, if designWidth is 720 and the view width is 1440 physical pixels, 1 lpx is 2 physical pixels. For details, see [lpx](ts-pixel-units.md). | 
+
+
+```
+{
+  ...
+  "window": {
+    "designWidth": 720
+  }
+  ...
+}
+```
+
+
+## mode
+
+The "mode" configures the running type and syntax style of a JS component. The following attributes are supported:
+
+  | Type | Default Value | Description | 
+| -------- | -------- | -------- |
+| type | - | Running type of the JS component. The options are as follows:<br/>- pageAbility: Run the JS component in ability mode.<br/>- form: Run the JS component as a service widget. | 
+| syntax | - | Syntax type of the JS component. The options are as follows:<br/>- hml: compiled in the .hml, .css, or .js style.<br/>- ets: compiled in the declarative syntax style. | 
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> If type is set to form, syntax cannot be ets.
+
+
+## Example
+
+config.json:
+
+
+```
+{
+    "app": {
+        "bundleName": "com.example.player",
+        "version": {
+            "code": 1,
+            "name": "1.0"
+        },
+        "vendor": "example"
+    },
+    "module": {
+        "js": [{            
+            "name": "default",            
+            "pages": [                
+                "pages/index",                
+                "pages/detail"            
+            ],            
+            "window": {                
+                "designWidth": 720            
+            },            
+            "mode": {                
+                "type": "pageAbility",                
+                "syntax": "ets"            
+            },        
+        }],
+        "abilities": [{
+            ... 
+        }]
+    }
+}
+```

en/application-dev/device/ui/ts-function-build.md

+# build Function
+
+
+The build function meets the definition of the Builder API and is used to define the declarative UI description of components. Components must comply with the preceding Builder API constraints. Custom or preset components are combined in declarative mode in the build method. The build method is called when a component is created or updated.
+
+
+  
+```
+interface Builder {
+    build: () => void
+}
+```
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> The build method supports only composite components and uses the rendering control syntax.

en/application-dev/device/ui/ts-general-ui-concepts.md

+# Basic Concepts
+
+
+The TypeScript-based declarative development paradigm provides a wide array of basic components, which can be combined and extended in a declarative manner to describe the UI of an application. It also provides basic data binding and event processing mechanisms to help you implement the application interaction logic.
+
+
+## HelloWorld Example
+
+
+```
+// An example of displaying Hello World. After you click the button, Hello UI is displayed.
+@Entry
+@Component
+struct Hello {
+    @State myText: string = 'World'
+    build() {
+        Column() {
+            Text('Hello')
+                .fontSize(30)
+            Text(this.myText)
+                .fontSize(32)
+            Divider()
+            Button() {
+                Text('Click me')
+                .fontColor(Color.Red)
+            }.onClick(() => {
+                this.myText = 'UI'
+            })
+            .width(500)
+            .height(200)
+        }
+    }
+}
+```
+
+
+## Basic Concepts
+
+The preceding sample code shows the structure of a simple page. It involves the following basic concepts:
+
+- Decorator: a special kind of declaration that can be applied to classes, structures, methods, and variables. In the sample code, @Entry, @Component, and @State are decorators.
+
+- Custom component: a reusable UI unit, which can be combined with other components. In the sample code, struct Hello decorated by @Component is a custom component.
+
+- UI description: declaratively describes the UI structure. In the sample code, the block of code in the build() method provides the UI description.
+
+- Built-in component: the default basic or layout component preset in the framework. You can directly invoke these components, such as <Column>, <Text>, <Divider>, and <Button> components in the sample code.
+
+- Attribute method: a method used to configure component attributes, such as fontSize(), width(), height(), and color().
+
+- Event method: a method used to add the component response logic to an event. In the sample code, the onClick method is added for the Button component for defining the click response logic.

en/application-dev/device/ui/ts-media-resource-type.md

+# Media Resource Types
+
+
+- The following table describes the image resource types supported by the development framework.
+    | Image Format | File Name Extension | 
+  | -------- | -------- |
+  | JPEG | .jpg | 
+  | PNG | .png | 
+  | GIF | .gif | 
+  | SVG | .svg | 
+  | WEBP | .webp | 
+  | BMP | .bmp |

en/application-dev/device/ui/ts-other-states-consume-provide.md

+# @Consume and @Provide
+
+
+As the data provider, @Provide can update the data of child nodes and trigger page rendering. After @Consume detects that the @Provide data is updated, it will initiate re-rendering of the current view.
+
+
+  Table1 @Provide
+
+| Name | Description | 
+| -------- | -------- |
+| Decorator parameter | A constant of the string type, which is used to set an alias for a decorated variable. If an alias is specified, implement the data update for this alias. If there is no alias, use the variable name as the alias. @Provide("_alias_") is recommended. | 
+| Synchronization mechanism | The @Provide decorated variable is similar to the @state variable. You can modify the variable to re-render the page. You can also modify the @Consume decorated variable to modify the @State decorated variable reversely. | 
+| Initial value | The initial value must be set. | 
+| Page re-rendering scenarios | The following will trigger page re-rendering:<br/>- Changes of variables in primitive types (boolean, string, and number)<br/>- Changes of the @Observed decorated classes or their attributes<br/>- Adding, deleting, or updatingelements in an array | 
+
+
+  Table2 @Consume
+
+| Type | Description | 
+| -------- | -------- |
+| Initial value | No default value can be set. | 
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> To avoid infinite loops caused by circular reference, exercise caution when using @Provide and @Consume.
+
+
+The description of other attributes is the same as that of @Provide.
+
+
+  
+```
+@Entry
+@Component
+struct CompA {
+    @Provide("reviewVote") reviewVotes : number = 0;
+
+    build() {
+        Column() {
+            CompB()
+            Button() {
+                Text(`${this.reviewVotes}`)
+                    .fontSize(30)
+            }
+            .onClick(() => {
+                this.reviewVotes += 1;
+            })
+        }
+    }
+}
+
+@Component
+struct CompB {
+    build() {
+        Column() {
+            CompC()
+        }
+    }
+}
+
+@Component
+struct CompC {
+    @Consume("reviewVote") reviewVotes : number;
+    build() {
+        Column() {
+            Button() {
+                Text(`${this.reviewVotes}`)
+                    .fontSize(30)
+            }
+            .onClick(() => {
+                this.reviewVotes += 1;
+            })
+        }
+    }
+}
+```

en/application-dev/device/ui/ts-other-states-observed-objectlink.md

+# @Observed and @ObjectLink
+
+
+This section introduces to you two new decorators: @Observed and @ObjectLink.
+
+
+- @Observed applies to a class, indicating that the data changes in the class are managed by the UI page, for example, @Observed class ClassA {}.
+
+- @ObjectLink applies to an object decorated by @Observed, for example, @ObjectLink a: ClassA.
+
+
+## Background
+
+When you need to set bidirectional synchronization in a child component for a variable (parent_a) of its parent component, you can use @State to decorate the variable (parent_a) in the parent component and use @Link to decorate the corresponding variable (child_a) in the child component. In this way, data can be synchronized between the parent component and the specific child component, and between the parent component and its other child components. As shown below, bidirectional synchronization is configured for variables of ClassA in the parent and child components. If attribute c of the variable in child component 1 has its value changed, the parent component will be notified to synchronize the change. If attribute c in the parent component has its value changed, all child components will be notified to synchronize the change.
+
+![en-us_image_0000001267647861](figures/en-us_image_0000001267647861.png)
+
+In the preceding example, full synchronization is performed for a data object. If you want to synchronize partial information of a data object in a parent component, and if the information is a class object, use @ObjectLink and @Observed instead, as shown below.
+
+![en-us_image_0000001267607881](figures/en-us_image_0000001267607881.png)
+
+
+## Configuration Requirement
+
+- @Observed applies to classes, and @ObjectLink applies to variables.
+
+- The variables decorated by @ObjectLink must be of the class type.
+  - The classes must be decorated by @Observed.
+  - Parameters of the primitive types are not supported. You can use @Prop to perform unidirectional synchronization.
+
+- @ObjectLink decorated variables are immutable.
+  - Attribute changes are allowed. If an object is referenced by multiple @ObjectLink decorated variables, all custom components that have these variables will be notified for re-rendering.
+
+- Default values cannot be set for @ObjectLink decorated variables.
+  - The parent component must be initialized with a TypeScript expression that involves variables decorated by @State, @Link, @StorageLink, @Provide, or @Consume.
+
+- @ObjectLink decorated variables are private variables and can be accessed only within the component.
+
+
+## Examples
+
+
+### Example 1
+
+  
+```
+@Observed
+class ClassA {
+  public name : string;
+  public c: number;
+  constructor(c: number, name: string = 'OK') {
+    this.name = name;
+    this.c = c;
+  }
+}
+
+class ClassB {
+  public a: ClassA;
+  constructor(a: ClassA) {
+    this.a = a;
+  }
+}
+
+@Component
+struct ViewA {
+  label : string = "ep1";
+  @ObjectLink a : ClassA;
+  build() {
+    Column() {
+      Text(`ViewA [${this.label}]: a.c=${this.a.c}`)
+        .fontSize(20)
+      Button(`+1`)
+        .width(100)
+        .margin(2)
+        .onClick(() => {
+          this.a.c += 1;
+        })
+      Button(`reset`)
+        .width(100)
+        .margin(2)
+        .onClick(() => {
+          this.a = new ClassA(0); // ERROR, this.a is immutable
+        })
+    }
+  }
+}
+
+@Entry
+@Component
+struct ViewB {
+  @State b : ClassB = new ClassB(new ClassA(10));
+  build() {
+    Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center}) {
+      ViewA({label: "ViewA #1", a: this.b.a})
+      ViewA({label: "ViewA #2", a: this.b.a})
+
+      Button(`ViewB: this.b.a.c += 1` )
+        .width(320)
+        .margin(4)
+        .onClick(() => {
+          this.b.a.c += 1;
+        })
+      Button(`ViewB: this.b.a = new ClassA(0)`)
+        .width(240)
+        .margin(4)
+        .onClick(() => {
+          this.b.a = new ClassA(0);
+        })
+      Button(`ViewB: this.b = new ClassB(ClassA(0))`)
+        .width(240)
+        .margin(4)
+        .onClick(() => {
+          this.b = new ClassB(new ClassA(0));
+        })
+    }
+  }
+}
+```
+
+
+### Example 2
+
+  
+```
+var nextID: number = 0;
+@Observed
+class ClassA {
+  public name : string;
+  public c: number;
+  public id : number;
+  constructor(c: number, name: string = 'OK') {
+    this.name = name;
+    this.c = c;
+    this.id = nextID++;
+  }
+}
+
+@Component
+struct ViewA {
+  label : string = "ViewA1";
+  @ObjectLink a: ClassA;
+  build() {
+    Row() {
+      Button(`ViewA [${this.label}] this.a.c= ${this.a.c} +1`)
+        .onClick(() => {
+          this.a.c += 1;
+        })
+    }
+  }
+}
+
+@Entry
+@Component
+struct ViewB {
+  @State arrA : ClassA[] = [ new ClassA(0), new ClassA(0) ];
+  build() {
+    Column() {
+      ForEach (this.arrA, (item) => {
+          ViewA({label: `#${item.id}`, a: item})
+        },
+        (item) => item.id.toString()
+      )
+      ViewA({label: `ViewA this.arrA[first]`, a: this.arrA[0]})
+      ViewA({label: `ViewA this.arrA[last]`, a: this.arrA[this.arrA.length-1]})
+
+      Button(`ViewB: reset array`)
+        .onClick(() => {
+            this.arrA = [ new ClassA(0), new ClassA(0) ];
+        })
+      Button(`ViewB: push`)
+        .onClick(() => {
+            this.arrA.push(new ClassA(0))
+        })
+      Button(`ViewB: shift`)
+        .onClick(() => {
+            this.arrA.shift()
+        })
+    }
+  }
+}
+```

en/application-dev/device/ui/ts-other-states-watch.md

+# @Watch
+
+
+@Watch is used to listen for changes of state variables. The syntax structure is as follows:
+
+
+  
+```
+@State @Watch("onChanged") count : number = 0
+```
+
+
+As shown above, add an @Watch decorator to the target state variable to register an onChanged callback. When the state variable count is changed, the onChanged callback will be triggered.
+
+
+@Watch can be used to listen for changes of variables decorated by @State, @Prop, @Link, @ObjectLink, @Provide, @Consume, @StorageProp, or @StorageLink.
+
+
+  
+```
+@Entry
+@Component
+struct CompA {
+    @State @Watch("onBasketUpdated") shopBasket : Array<number> = [ 7, 12, 47, 3 ];
+    @State totalPurchase : number = 0;
+
+    updateTotal() : number {
+        let sum = 0;
+        this.shopBasket.forEach((i) => { sum += i; });
+        // Calculate the total amount of items in the shopping basket. If the amount exceeds CNY100, the specified discount will be applied.
+        this.totalPurchase = (sum < 100) ? sum : 0.9 * sum;
+        return this.totalPurchase;
+    }
+
+    // @Watch cb
+    onBasketUpdated(propName: string) : void {
+      this.updateTotal();
+    }
+
+    build() {
+        Column() {
+            Button("add to basket").onClick(() => { this.shopBasket.push(Math.round(100 * Math.random())) })
+            Text(`${this.totalPurchase}`)
+                .fontSize(30)
+        }
+    }
+}
+```

en/application-dev/device/ui/ts-parameterless-configuration.md

+# Configuration Without Parameters
+
+
+If the API definition of a component does not contain mandatory parameters, you do not need to configure any content in the parentheses next to the component. For example, the Divider component does not contain parameters:
+
+```
+Column() {
+    Text('item 1')
+    Divider() // No parameter configuration of the divider component
+    Text('item 2')
+}
+```

en/application-dev/device/ui/ts-pixel-units.md

+# Pixel Units
+
+
+The framework provides four pixel units, with vp as the reference data unit.
+
+
+  | Name | Description | 
+| -------- | -------- |
+| px | Physical pixel unit of the screen. | 
+| vp | Pixels specific to the screen density, which are converted into physical pixels of the screen based on the screen pixel density. | 
+| 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](ts-framework-js-tag.md)). For example, if designWidth is set to 720, then 1lpx is equal to 2px for a screen with an actual width of 1440 physical pixels. | 
+
+
+## Pixel Unit Conversion
+
+Conversion from other pixel units to px is supported.
+
+  | API | Description | 
+| -------- | -------- |
+| vp2px(value : number) : number | Converts a value in units of vp to a value in units of px. | 
+| px2vp(value : number) : number | Converts a value in units of px to a value in units of vp. | 
+| fp2px(value : number) : number | Converts a value in units of fp to a value in units of px. | 
+| px2fp(value : number) : number | Converts a value in units of px to a value in units of fp. | 
+| lpx2px(value : number) : number | Converts a value in units of lpx to a value in units of px. | 
+| px2lpx(value : number) : number | Converts a value in units of px to a value in units of lpx. | 
+
+
+## Example
+
+  
+```
+@Entry
+@Component
+struct Example {
+  build() {
+    Column() {
+      Flex({ wrap: FlexWrap.Wrap }) {
+        Column() {
+          Text("width(220)")
+            .width(220).height(40).backgroundColor(0xF9CF93)
+            .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12vp')
+        }.margin(5)
+        Column() {
+          Text("width('220px')")
+            .width('220px').height(40).backgroundColor(0xF9CF93)
+            .textAlign(TextAlign.Center).fontColor(Color.White)
+        }.margin(5)
+        Column() {
+          Text("width('220vp')")
+            .width('220vp').height(40).backgroundColor(0xF9CF93)
+            .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12vp')
+        }.margin(5)
+        Column() {
+          Text("width('220lpx') designWidth:720")
+            .width('220lpx').height(40).backgroundColor(0xF9CF93)
+            .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12vp')
+        }.margin(5)
+        Column() {
+          Text("width(vp2px(220) + 'px')")
+            .width(vp2px(220) + 'px').height(40).backgroundColor(0xF9CF93)
+            .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12vp')
+        }.margin(5)
+        Column() {
+          Text("fontSize('12fp')")
+            .width(220).height(40).backgroundColor(0xF9CF93)
+            .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12fp')
+        }.margin(5)
+      }.width('100%')
+    }
+  }
+}
+```
+
+![en-us_image_0000001267607893](figures/en-us_image_0000001267607893.gif)

en/application-dev/device/ui/ts-rending-control-syntax-foreach.md

+# ForEach
+
+
+The development framework provides ForEach to iterate arrays and create components for each array item. ForEach is defined as follows:
+
+
+  
+```
+ForEach(
+    arr: any[], // Array to be iterated
+    itemGenerator: (item: any, index?: number) => void, // child component generator
+    keyGenerator?: (item: any, index?: number) => string // (optional) Unique key generator, which is recommended.
+)
+```
+
+
+## ForEach
+
+
+ForEach(arr: any[],itemGenerator: (item: any, index?: number) => void, keyGenerator?: (item: any, index?: number) => string):void
+
+
+  Table1 Parameters
+
+| Name | Type | Mandatory | Default Value | Description | 
+| -------- | -------- | -------- | -------- | -------- |
+| arr | any[] | Yes | - | Must be an array. An empty array is allowed. If an array is empty, no child component is created. You can set the functions whose return values are of the array type, for example, arr.slice (1, 3). The set functions cannot change any state variables including the array itself, such as Array.splice, Array.sort, and Array.reverse. | 
+| itemGenerator | (item: any, index?: number) => void | Yes | - | Used to generate the lambda function of the child components. It generates one or more child components for a given array item. A single component and its child component list must be contained in braces ({...}) | 
+| keyGenerator | (item: any, index?: number) => string | No | - | Used as an anonymous parameter for generating a unique and stable key value for a given array item. When the position of a subitem in the array is changed, the key value of the subitem cannot be changed. When a subitem in the array is replaced with a new item, the key value of the current item must be different from that of the new item. This key-value generator is optional. However, for performance reasons, it is strongly recommended that the key-value generator be provided, so that the development framework can better identify array changes. If the array is reversed while no key-value generator is provided, all nodes in ForEach will be rebuilt. | 
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> - ForEach must be used in container components.
+> 
+> - The generated child components are allowed in the parent container component of ForEach. The child component generator function can contain the if/else conditional statement, and the if/else conditional statement can contain ForEach.
+> 
+> - The calling sequence of subitem generator functions may be different from that of the data items in the array. During the development, do not assume whether the subitem generator and key value generator functions are executed and the execution sequence. The following is an example of incorrect usage:
+>     
+>   ```
+>   ForEach(anArray, item => {Text(`${++counter}. item.label`)})
+>   ```
+> 
+>   Below is an example of correct usage:
+> 
+>     
+>   ```
+>   ForEach(anArray.map((item1, index1) => { return { i: index1 + 1, data: item1 }; }), 
+>           item => Text(`${item.i}. item.data.label`),
+>           item => item.data.id.toString())
+>   ```
+
+
+## Example
+
+The following is an example of a simple-type array:
+
+  
+```
+@Entry
+@Component
+struct MyComponent {
+    @State arr: number[] = [10, 20, 30]
+    build() {
+        Column() {
+            Button() {
+                Text('Reverse Array')
+            }.onClick(() => {
+                this.arr.reverse()
+            })
+
+            ForEach(this.arr,                         // Parameter 1: array to be iterated
+                    (item: number) => {               // Parameter 2: item generator
+                        Text(`item value: ${item}`)
+                        Divider()
+                    },
+                    (item: number) => item.toString() // Parameter 3: unique key generator, which is optional but recommended.
+            )
+        }
+    }
+}
+```
+
+  The following is an example of a complex-type array:
+  
+```
+class Month {
+  year: number
+  month: number
+  days: Array<number>
+
+  constructor(year, month, days) {
+    this.year = year;
+    this.month = month;
+    this.days = days;
+  }
+}
+
+@Entry
+@Component
+struct Calendar1 {
+// simulate with 6 months
+  @State calendar: Month[] = [
+    new Month(2020, 1, [...Array(31).keys()]),
+    new Month(2020, 2, [...Array(28).keys()]),
+    new Month(2020, 3, [...Array(31).keys()]),
+    new Month(2020, 4, [...Array(30).keys()]),
+    new Month(2020, 5, [...Array(31).keys()]),
+    new Month(2020, 6, [...Array(30).keys()]),
+  ]
+
+  build() {
+    Column() {
+      Button('next month')
+        .onClick(() => {
+          this.calendar.shift()
+          this.calendar.push({
+            year: 2020,
+            month: 7,
+            days: [...Array(31)
+              .keys()]
+          })
+        })
+      ForEach(this.calendar,
+        (item: Month) => {
+          Text('month:' + item.month)
+            .fontSize(30)
+            .padding(20)
+          Grid() {
+            ForEach(item.days,
+              (day: number) => {
+                GridItem() {
+                  Text((day + 1).toString())
+                    .fontSize(30)
+                }
+              },
+              (day: number) => day.toString())
+          }
+          .columnsTemplate('1fr 1fr 1fr 1fr 1fr 1fr 1fr')
+          .rowsGap(20)
+        },
+        // field is used together with year and month as the unique ID of the month.
+        (item: Month) => (item.year * 12 + item.month).toString())
+    }
+  }
+}
+```

en/application-dev/device/ui/ts-rending-control-syntax-if-else.md

+# if/else
+
+
+Use if/else for conditional rendering.
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> - State variables can be used in the if conditional statement.
+> 
+> - You can use the if conditional statement to implement rendering of child components.
+> 
+> - The if conditional statement must be used in container components.
+> 
+> - Some container components limit the type or number of child components. When if is placed in these components, the limitation applies to components created in if and else statements. For example, when if is used in the <Grid> component, whose child components can only be <GridItem>, only the <GridItem> component can be used in the if conditional statement.
+
+
+## Example
+
+Example of using the if conditional statement:
+
+
+```
+Column() {
+    if (this.count > 0) {
+        Text('count is positive')
+    }
+}
+```
+
+
+Example of using the if, else if, and else conditional statements:
+
+
+
+```
+Column() {
+    if (this.count < 0) {
+        Text('count is negative')
+    } else if (this.count % 2 === 0) {
+        Divider()
+        Text('even')
+    } else {
+        Divider()
+        Text('odd')
+    }
+}
+```

en/application-dev/device/ui/ts-rending-control-syntax-lazyforeach.md

+# LazyForEach
+
+
+The development framework provides LazyForEach to iterate data from provided data sources and create corresponding components during each iteration. LazyForEach is defined as follows:
+
+
+
+```
+LazyForEach(
+    dataSource: IDataSource,             // Data source to be iterated 
+    itemGenerator: (item: any) => void,  // child component generator
+    keyGenerator?: (item: any) => string // (optional) Unique key generator, which is recommended.
+): void
+
+interface IDataSource {
+    totalCount(): number;                                             // Get total count of data
+    getData(index: number): any;                                      // Get single data by index
+    registerDataChangeListener(listener: DataChangeListener): void;   // Register listener to listening data changes
+    unregisterDataChangeListener(listener: DataChangeListener): void; // Unregister listener
+}
+
+interface DataChangeListener {
+    onDataReloaded(): void;                      // Called while data reloaded
+    onDataAdded(index: number): void;            // Called while single data added
+    onDataMoved(from: number, to: number): void; // Called while single data moved
+    onDataDeleted(index: number): void;          // Called while single data deleted
+    onDataChanged(index: number): void;          // Called while single data changed
+}
+```
+
+
+## APIs
+
+
+### LazyForEach
+
+LazyForEach(dataSource: IDataSource, itemGenerator: (item: any) => void, keyGenerator?: (item: any) => string):void
+
+  Table1 Parameters
+
+| Name | Type | Mandatory | Default Value | Description |
+| -------- | -------- | -------- | -------- | -------- |
+| dataSource | IDataSource | Yes | - | Object used to implement the IDataSource API. You need to implement related APIs. |
+| itemGenerator | (item: any) => void | Yes | - | Used to generate the lambda function of the child components. It generates one or more child components for a given array item. A single component and its child component list must be contained in the braces ({...}) |
+| keyGenerator | (item: any) => string | No | - | Used as an anonymous parameter for generating a unique and stable key value for a given array item. When the position of a subitem in the array is changed, the key value of the subitem cannot be changed. When a subitem in the array is replaced with a new item, the key value of the current item must be different from that of the new item. This key-value generator is optional. However, for performance reasons, it is strongly recommended that the key-value generator be provided, so that the development framework can better identify array changes. If the array is reversed while no key-value generator is provided, all nodes in LazyForEach will be rebuilt. |
+
+
+  Table2 Description of IDataSource
+
+| Name | Description |
+| -------- | -------- |
+| totalCount(): number | Obtains the total number of data records. |
+| getData(index: number): any | Obtains the data corresponding to the specified index. |
+| registerDataChangeListener(listener: DataChangeListener): void | Registers the data change listener. |
+| unregisterDataChangeListener(listener: DataChangeListener): void | Unregisters the data change listener. |
+
+
+  Table3 Description of DataChangeListener
+
+| Name | Description | 
+| -------- | -------- |
+| onDataReloaded(): void | Reloads all data. | 
+| onDataAdded(index: number): void | Notifies the component that data is added to the position indicated by the specified index. | 
+| onDataMoved(from: number, to: number): void | Notifies the component that data is moved from the from position to the to position. | 
+| onDataDeleted(index: number): void | Notifies the component that data is deleted from the position indicated by the specified index. | 
+| onDataChanged(index: number): void | Notifies the component that data in the position indicated by the specified index is changed. | 
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> - LazyForEach must be used in the container component. Only the <List>, <Grid>, and <Swiper> components support LazyForEach (that is, only the visible part and a small amount of data before and after the visible part are loaded for caching). For other components, all data is loaded at a time.
+> 
+> - LazyForEach must create one and only one child component in each iteration.
+> 
+> - The generated child component must be in the parent container component of LazyForEach.
+> 
+> - LazyForEach can be included in an if/else conditional statement, but cannot contain an if/else conditional statement.
+> 
+> - For the purpose of high-performance rendering, when the onDataChanged method of the DataChangeListener object is used to update the UI, the component update is triggered only when the state variable is used in the component specified in the UI description of itemGenerator.
+> 
+> - The calling sequence of the subitem generator function may be different from that of the data items in the data source. During the development, do not assume whether the subitem generator and key value generator functions are executed and the execution sequence. The following is an example of incorrect usage:
+>     
+>   ```
+>   LazyForEach(dataSource, item => {Text(`${++counter}. item.label`)})
+>   ```
+> 
+>   Below is an example of correct usage:
+> 
+>     
+>   ```
+>   LazyForEach(dataSource, 
+>           item => Text(`${item.i}. item.data.label`)),
+>           item => item.data.id.toString())
+>   ```
+
+
+## Example
+
+
+```
+// Basic implementation of IDataSource to handle data listener
+class BasicDataSource implements IDataSource {
+    private listeners: DataChangeListener[] = []
+
+    public totalCount(): number {
+        return 0
+    }
+    public getData(index: number): any {
+        return undefined
+    }
+
+    registerDataChangeListener(listener: DataChangeListener): void {
+        if (this.listeners.indexOf(listener) < 0) {
+            console.info('add listener')
+            this.listeners.push(listener)
+        }
+    }
+    unregisterDataChangeListener(listener: DataChangeListener): void {
+        const pos = this.listeners.indexOf(listener);
+        if (pos >= 0) {
+            console.info('remove listener')
+            this.listeners.splice(pos, 1)
+        }
+    }
+
+    notifyDataReload(): void {
+        this.listeners.forEach(listener => {
+            listener.onDataReloaded()
+        })
+    }
+    notifyDataAdd(index: number): void {
+        this.listeners.forEach(listener => {
+            listener.onDataAdded(index)
+        })
+    }
+    notifyDataChange(index: number): void {
+        this.listeners.forEach(listener => {
+            listener.onDataChanged(index)
+        })
+    }
+    notifyDataDelete(index: number): void {
+        this.listeners.forEach(listener => {
+            listener.onDataDeleted(index)
+        })
+    }
+    notifyDataMove(from: number, to: number): void {
+        this.listeners.forEach(listener => {
+            listener.onDataMoved(from, to)
+        })
+    }
+}
+
+class MyDataSource extends BasicDataSource {
+    private dataArray: string[] = ['/path/image0', '/path/image1', '/path/image2', '/path/image3']
+
+    public totalCount(): number {
+        return this.dataArray.length
+    }
+    public getData(index: number): any {
+        return this.dataArray[index]
+    }
+
+    public addData(index: number, data: string): void {
+        this.dataArray.splice(index, 0, data)
+        this.notifyDataAdd(index)
+    }
+    public pushData(data: string): void {
+        this.dataArray.push(data)
+        this.notifyDataAdd(this.dataArray.length - 1)
+    }
+}
+
+@Entry
+@Component
+struct MyComponent {
+    private data: MyDataSource = new MyDataSource()
+    build() {
+        List({space: 3}) {
+            LazyForEach(this.data, (item: string) => {
+                ListItem() {
+                    Row() {
+                        Image(item).width("30%").height(50)
+                        Text(item).fontSize(20).margin({left:10})
+                    }.margin({left: 10, right: 10})
+                }
+                .onClick(()=>{
+                    this.data.pushData('/path/image' + this.data.totalCount())
+                })
+            }, item => item)
+        }
+    }
+}
+```

en/application-dev/device/ui/ts-syntactic-sugar.md

+# About Syntactic Sugar
+
+
+## Decorators
+
+A decorator @Decorator can decorate a class, structure, or class attribute. Multiple decorators can be applied to the same target element and defined on a single line or multiple lines. It is recommended that the decorators be defined on multiple lines.
+
+In the example below, the elements decorated by @Component take on the form of a component, and the variables decorated by @State can be used to represent states.
+
+
+```
+@Component
+struct MyComponent {
+    @State count: number = 0
+}
+```
+
+Multiple decorators can be defined on a single line, as shown below:
+
+
+```
+@Entry @Component struct MyComponent {
+}
+```
+
+However, you are advised to define the decorators on multiple lines, as shown below:
+
+
+```
+@Entry
+@Component
+struct MyComponent {
+}
+```
+
+
+### Supported Decorators
+
+  | Decorator | Decorates... | Description | 
+| -------- | -------- | -------- |
+| @Component | struct | The decorated structure has the component-based capability. The build method must be implemented to update the UI. | 
+| @Entry | struct | The decorated component is used as the entry of a page. The component is rendered and displayed when the page is loaded. | 
+| @Preview | struct | Custom components decorated by @Preview can be previewed in the Previewer of DevEco Studio. When the page is loaded, the custom components decorated by @Preview are created and displayed. | 
+| @Builder | Methods | In the decorated method, you can use the declarative UI description to quickly generate multiple layouts in a custom component. | 
+| @Extend | Methods | This decorator adds new attribute functions to a preset component, allowing you to quickly define and reuse the custom style of the component. | 
+| @CustomDialog | struct | This decorator is used to decorate custom pop-up dialog boxes. | 
+| @State | Primitive data types, classes, and arrays | If the decorated state data is modified, the build method of the component will be called to update the UI. | 
+| @Prop | Primitive data types | This decorator is used to establish one-way data binding between the parent and child components. When the data associated with the parent component is modified, the UI of the current component is updated. | 
+| @Link | Primitive data types, classes, and arrays | This decorator is used to establish two-way data binding between the parent and child components. The internal state data of the parent component is used as the data source. Any changes made to one component will be reflected to the other. | 
+| @Observed | Classes | This decorator is used to indicate that the data changes in the class will be managed by the UI page. | 
+| @ObjectLink | Objects of @Observed decorated classes | When the decorated state variable is modified, the parent and sibling components that have the state variable will be notified for UI re-rendering. | 
+| @Consume | Primitive data types, classes, and arrays | When the @Consume decorated variable detects the update of the @Provide decorated variable, the re-rendering of the current custom component is triggered. | 
+| @Provide | Primitive data types, classes, and arrays | As the data provider, @Provide can update the data of child nodes and trigger page rendering. | 
+| @Watch | Variables decorated by @State, @Prop, @Link, @ObjectLink, @Provide, @Consume, @StorageProp, or @StorageLink | This decorator is used to listen for the changes of the state variables. The application can register a callback method through @Watch. | 
+
+
+## Chain Call
+
+You can configure the UI structure and its attributes and events and separate them with a dot(.) to implement chain call.
+
+
+```
+Column() {
+    Image('1.jpg')
+        .alt('error.jpg')
+        .width(100)
+        .height(100)
+}.padding(10)
+```
+
+
+## struct
+
+Components can be implemented based on structs. Components cannot inherit from each other. The structs implemented components can be created and destroyed more quickly than class implemented components.
+
+
+```
+@Component
+struct MyComponent {
+    @State data: string = ''
+
+    build() {
+    }
+}
+```
+
+
+## Instantiating a struct Without the new Keyword
+
+You can omit the new keyword when instantiating a struct.
+
+
+```
+// Definition
+@Component
+struct MyComponent {
+    build() {
+    }
+}
+
+// Use
+Column() {
+    MyComponent()
+}
+
+// Equivalent to
+new Column() {
+    new MyComponent()
+}
+```
+
+
+## Restrictions on Using TypeScript in Generators
+
+TypeScript has the following restrictions on generators:
+
+- Expressions can be used only in character strings (${expression}), if conditions, ForEach parameters, and component parameters.
+
+- No expressions should cause any application state variables (@State, @Link, and @Prop) to change. Otherwise, undefined and potentially unstable framework behavior may occur.
+
+- The generator function cannot contain local variables.
+
+None of the above restrictions apply to anonymous function implementations of event-handling functions (such as onClick)
+
+Incorrect:
+
+
+```
+build() {
+    let a: number = 1 // invalid: variable declaration not allowed
+    Column() {
+        Text('Hello ${this.myName.toUpperCase()}') // ok.
+        ForEach(this.arr.reverse(), ..., ...) // invalid: Array.reverse modifies the @State array varible in place
+    }
+    buildSpecial()  // invalid: no function calls
+    Text(this.calcTextValue()) // this function call is ok.
+}
+```
+
+## $$
+
+$$ supports two-way binding for simple variables and @State, @Link, and @Prop decorated variables.
+
+Currently, $$ supports only the rendering between the show parameter of the bindPopup attribute and the @State decorated variable, and the checked attribute of the <Radio> component.
+
+```
+@Entry
+@Component
+struct bindPopup {
+	@State customPopup: boolean = false
+	build() {
+		Column() {
+			Button(){
+				Text('Popup')
+			}
+			.onClick(()=>{
+				this.customPopup = !this.customPopup
+			})
+			.bindPopup(
+				$$this.customPopup, {
+					message: "showPopup"
+				}
+			)
+		}
+	}
+}
+```
+

en/application-dev/device/ui/ts-syntax-intro.md

+# Overview
+
+
+This section defines the core mechanism and functions of the TypeScript-based declarative development paradigm. It acquaints you with the declarative UI descriptions, componentization mechanisms, UI state management, rendering control syntax, and syntactic sugar.
+
+
+Follow the provided guidelines for UI development. For details about the components, see components.
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> - All examples use the TypeScript (TS) language. If you are using another language, comply with the syntax requirements for that language.
+> 
+> - The components used in the examples are preset in the UI framework and are used only to explain the UI description specifications.
+> 
+> - Universal attribute and event methods generally apply to all components, and the attribute and event methods within a component apply only to this component.
+

en/application-dev/device/ui/ts-system-resource-access.md

+# Accessing System Resources
+
+
+System resources include colors, rounded corners, fonts, spacing, character strings, and images. By using system resources, you can develop different applications with the same visual style.
+
+
+To reference a system resource, use the "$r('sys.type.resource_id')" format. Wherein: sys indicates a system resource; type indicates the resource type, which can be color, float, string, or media; resource_id indicates the resource ID, which is determined when the system resource is provided. For details about available system resource IDs.
+
+```
+Text('Hello')
+    .fontColor($r('sys.color.id_color_emphasize'))
+    .fontSize($r('sys.float.id_text_size_headline1'))
+    .fontFamily($r('sys.string.id_text_font_family_medium'))
+    .backgroundColor($r('sys.color.id_color_palette_aux1'))
+Image($r('sys.media.ic_app'))
+    .border({color: $r('sys.color.id_color_palette_aux1'), radius: $r('sys.float.id_corner_radius_button'), width: 2})
+    .margin({top: $r('sys.float.id_elements_margin_horizontal_m'), bottom: $r('sys.float.id_elements_margin_horizontal_l')})
+    .height(200)
+    .width(300)
+```

en/application-dev/device/ui/ts-types.md

+# Types
+
+## Length Type
+
+| Name| Type| Description|
+| -------- | -------- | -------- |
+| Length | string \| number | Length unit. If the input is a number, use vp. If the input is a string, explicitly specify the unit, for example, '10px', or specify the length in percentage, for example, '100%'.|
+
+
+## Angle Type
+
+| Name| Type| Description|
+| -------- | -------- | -------- |
+| Angle | string \| number | Angle unit. If the input is a number, use deg. If the input is a string, use either of the following angle units:<br>- deg: for example, '100deg'<br>- rad: for example, '3.14rad' |
+
+
+## Point Type
+
+| Name| Type| Description|
+| -------- | -------- | -------- |
+| Point | [Length, Length] | Coordinates of a point. The first value is the x-axis coordinate, and the second value is the y-axis coordinate.|
+
+
+## Color Type
+
+The Color type used by component attribute methods is described as follows:
+
+| Name| Type| Description|
+| -------- | -------- | -------- |
+| Color | string \| number \| Color | Color information. If the input is a string, use rgb or rgba to specify the color. If the input is a number, use Hex format to specify the color. If the input is a Color enum, use a color value to specify the color.<br>- 'rgb(255, 255, 255)'<br>- 'rgba(255, 255, 255, 1.0)'<br>- Hex format: 0xrrggbb, 0xaarrggbb, '\#FFFFFF'<br>- Enum: Color.Black, Color.White |
+
+
+The supported Color enums are described as follows:
+
+
+| Color| Value| Illustration|
+| -------- | -------- | -------- |
+| Black | 0x000000 | ![en-us_image_0000001219864153](figures/en-us_image_0000001219864153.png) |
+| Blue | 0x0000ff | ![en-us_image_0000001174104404](figures/en-us_image_0000001174104404.png) |
+| Brown | 0xa52a2a | ![en-us_image_0000001219744201](figures/en-us_image_0000001219744201.png) |
+| Gray | 0x808080 | ![en-us_image_0000001174264376](figures/en-us_image_0000001174264376.png) |
+| Green | 0x008000 | ![en-us_image_0000001174422914](figures/en-us_image_0000001174422914.png) |
+| Orange | 0xffa500 | ![en-us_image_0000001219662661](figures/en-us_image_0000001219662661.png) |
+| Pink | 0xffc0cb | ![en-us_image_0000001219662663](figures/en-us_image_0000001219662663.png) |
+| Red | 0xff0000 | ![en-us_image_0000001219662665](figures/en-us_image_0000001219662665.png) |
+| White | 0xffffff | ![en-us_image_0000001174582866](figures/en-us_image_0000001174582866.png) |
+| Yellow | 0xffff00 | ![en-us_image_0000001174582864](figures/en-us_image_0000001174582864.png) |
+
+
+## ColorStop Type
+
+ColorStop is used to describe the progressive color stop.
+
+| Name| Type| Description|
+| -------- | -------- | -------- |
+| ColorStop | [Color, number] | Type of the progressive color stop. The first parameter specifies the color value, and the second parameter specifies the ratio of 0 to 1.|
+
+
+## Resource Type
+
+The Resource type is used to reference resources for setting the value of a component attribute.
+
+You can use $r or $rawfile to create a Resource object. For details, see [Resource Access](ts-application-resource-access.md).
+
+- $r('belonging.type.name')
+  belonging: system or application resource. The value can be 'sys' or 'app'.
+
+  type: resource type, which can be 'color', 'float', 'string', or 'media'.
+
+  name: resource name, which is determined during resource definition.
+
+- $rawfile('filename')
+  filename: name of the file in resources/rawfile of the project.
+
+| Name| Type| Description|
+| -------- | -------- | -------- |
+| Resource | {<br>readonly id: [number];<br>readonly type: [number];<br>readonly params?: any[];<br>} | id: resource ID.<br>type: resource type (enumerated value).<br>params: optional parameters.<br>After a Resource object is created using $r or $rawfile, modifying attribute values of the object is prohibited.|
+
+
+## ResourceStr Type<sup>8+</sup>
+
+| Name| Type| Description|
+| -------- | -------- | -------- |
+| ResourceStr | string \| Resource| Resource string.|
+
+
+## ResourceColor Type<sup>8+</sup>
+
+| Name| Type| Description|
+| -------- | -------- | -------- |
+| ResourceColor | Color \| number \| string \| Resource | Resource color.|
+
+## Font Type<sup>8+</sup>
+
+| Name| Type| Description|
+| -------- | -------- | -------- |
+| Font | {<br>size?: Length;<br>weight?: FontWeight \| number  \| string;<br>family?: string  \| Resource;<br>style?: FontStyle;<br>} | Text style.<br>size: font size. For the number type, use the unit fp.<br>weight: 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.<br>family: font family. Use commas (,) to separate multiple fonts. The priority of the fonts is the sequence in which they are placed. An example value is 'Arial, sans-serif'.<br>style: font style.|
+
+## CustomBuilder Type<sup>8+</sup>
+
+You can use CustomBuilder to define custom UI descriptions in component attribute methods.
+
+| Name| Type| Description|
+| -------- | -------- | -------- |
+| CustomBuilder | () => any | Builder of component attribute methods for defining custom UI descriptions. This type of method must be decorated by @Builder. For details, see [@Builder](ts-component-based-builder.md).|
+
+
+## Example
+
+```
+@Entry
+@Component
+struct dataTypeExample {
+  build() {
+    Column({ space: 5 }) {
+      Text('Length').fontColor(0xCCCCCC).fontSize(9).width('90%')
+      Text('90%').width('90%').height(40).backgroundColor(0xF9CF93)
+        .textAlign(TextAlign.Center).fontColor(Color.White)
+      Text('320').width(320).height(40).backgroundColor(0xF9CF93)
+        .textAlign(TextAlign.Center).fontColor(Color.White)
+      Text('1000px').width('1000px').height(40).backgroundColor(0xF9CF93)
+        .textAlign(TextAlign.Center).fontColor(Color.White)
+
+      Text('Angle').fontColor(0xCCCCCC).fontSize(9).width('90%')
+      Text('45deg')
+        .width(40).height(40)
+        .rotate({ x: 0, y: 0, z: 1, angle: 45, centerX: '50%', centerY: '50%' })
+        .fontColor(Color.White)
+        .backgroundColor(0xF9CF93).textAlign(TextAlign.Center)
+
+      Text('45rad')
+        .width(40).height(40)
+        .rotate({ x: 0, y: 0, z: 1, angle: '45rad', centerX: '50%', centerY: '50%' })
+        .fontColor(Color.White)
+        .backgroundColor(0xF9CF93).textAlign(TextAlign.Center).margin({ top: 30 })
+
+      Text('Point').fontColor(0xCCCCCC).fontSize(9).width('90%')
+      Line().width(300).height(40).startPoint([0, 20]).endPoint([300, 20])
+
+      Text('Color').fontColor('#CCCCCC').fontSize(9).width('90%')
+      Text('0xF9CF93')
+        .fontColor(Color.White).textAlign(TextAlign.Center)
+        .width('90%').height(40).backgroundColor(0xF9CF93)
+
+      Text('#F9CF93')
+        .fontColor(Color.White).textAlign(TextAlign.Center)
+        .width('90%').height(40).backgroundColor('#F9CF93')
+
+      Text('rgb(249, 207, 147)')
+        .fontColor(Color.White).textAlign(TextAlign.Center)
+        .width('90%').height(40).backgroundColor('rgb(249, 207, 147)')
+
+      Text('rgba(249, 207, 147, 1.0)')
+        .fontColor(Color.White).textAlign(TextAlign.Center)
+        .width('90%').height(40).backgroundColor('rgba(249, 207, 147, 1.0)')
+
+      Text('Color.Yellow')
+        .textAlign(TextAlign.Center)
+        .width('90%').height(40).backgroundColor(Color.Yellow)
+    }
+    .width('100%').margin({ top: 5 })
+  }
+}
+```
+
+![en-us_image_0000001219982719](figures/en-us_image_0000001219982719.png)

en/application-dev/device/ui/ts-ui-state-mgmt-concepts.md

+# Basic Concepts
+
+
+In the declarative UI programming paradigm, the UI is a function in the specific application state, and you update a UI by modifying the current application state. The development framework provides comprehensive application state management capabilities, as shown in the figure below.
+
+
+![en-us_image_0000001222967768](figures/en-us_image_0000001222967768.png)
+
+
+## State Variable Decorators
+
+- @State: state attribute of the component. Each time the @State decorated variable changes, the component re-renders and updates the UI.
+
+- @Link: allows a component to depend on some state attributes of its parent component. Each time the data in one component is updated, the state of the other component is updated, and the parent and child components are rendered again.
+
+- @Prop: works in a way similar to that of @Link. The difference is that the changes made by a child component are not synchronized to the parent component.
+
+
+## Application State Data
+
+AppStorage is the central store of the application states in the entire UI. The UI framework creates a singleton AppStorage object for the application and provides the corresponding decorators and APIs for the application.
+
+- @StorageLink: works in a way similar to that of @Consume. The difference is that the link object with the specified name is obtained from the AppStorage. It establishes two-way binding between the UI component and AppStorage to synchronize data.
+
+- @StorageProp: synchronizes UI component attributes with the AppStorage unidirectionally. That is, the value change in the AppStorage will trigger an update of the corresponding UI component, but the change of the UI component will not cause an update of the attribute value in the AppStorage.
+
+- Service logic implementation API: adds, reads, modifies, or deletes the state attributes of applications. The changes made by this API will be synchronized to the UI component for UI update.

en/application-dev/device/ui/ui-js-animate-attribute-style.md

+# Defining Attribute Style Animations
+
+
+Keyframes is used to scale a component by dynamically setting the width and height of its parent component. Set the scale attribute for child components to scale the child and parent components at the same time. Then, set the opacity attribute to display or hide the child and parent components.
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <div class="fade">
+    <text>fading away</text>
+  </div>
+  <div class="bigger">
+    <text>getting bigger</text>
+  </div>
+</div>
+```
+
+```
+/* xxx.css */
+.container {
+  background-color:#F1F3F5;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+.fade{
+  width: 30%;
+  height: 200px;
+  left: 35%;
+  top: 25%;
+  position: absolute;
+  animation: 2s change infinite friction;
+}
+.bigger{
+  width: 20%;
+  height: 100px;
+  background-color: blue;
+  animation: 2s change1 infinite linear-out-slow-in;
+}
+text{
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  color: white;
+  font-size: 35px;
+  animation: 2s change2 infinite linear-out-slow-in;
+}
+/* Color change */
+@keyframes change{
+  from {
+    background-color: #f76160;
+    opacity: 1;
+  }
+  to {
+    background-color: #09ba07;
+    opacity: 0;
+  }
+}
+/* Scaling of the parent component */
+@keyframes change1{
+  0% {
+    width: 20%;
+    height: 100px;
+  }
+  100% {
+    width: 80%;
+    height: 200px;
+  }
+}  
+/* Text scaling of the child component */
+@keyframes change2{
+  0%{
+   transform: scale(0);
+  }
+  100% {
+    transform: scale(1.5);
+  }
+}
+```
+
+
+![en-us_image_0000001267647889](figures/en-us_image_0000001267647889.gif)
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> 1. The values of animation attributes are not sequenced. However, the values of duration and delay are parsed based on the sequence in which they are displayed.
+> 
+> 2. The animation-duration attribute must be set. Otherwise, the duration is 0, which means there is no animation effect. When animation-fill-mode is set to forwards, the component directly displays the style of the last frame.

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

+# Defining Animations with the background-position Attribute
+
+
+By changing the background-position attribute (where the first value is the position on the x-axis and the second value is the position on the y-axis), you move a background image. If the background image goes beyond the respective component boundaries, the excess parts will not be displayed.
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <div class="content"></div>
+  <div class="content1"></div>
+</div>
+```
+
+```
+/* xxx.css */
+.container {
+  background-color:#F1F3F5;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+.content{
+  width: 400px;
+  height: 400px;
+  background-image: url('common/images/bg-tv.jpg');
+  background-size: 100%;
+  background-repeat: no-repeat;
+  animation: change 3s infinite;
+  border: 1px solid black;
+}
+.content1{
+  margin-top:50px;
+  width: 400px;
+  height: 400px;
+  background-image: url('common/images/bg-tv.jpg');
+  background-size: 50%;
+  background-repeat: no-repeat;
+  animation: change1 5s infinite;
+  border: 1px solid black;
+}
+/* Move the background image out of the component. */
+@keyframes change{
+  0%{
+    background-position:0px top;
+  }
+  25%{
+    background-position:400px top;
+  }
+  50%{
+    background-position:0px top;
+  }
+  75%{
+    background-position:0px bottom;
+  }
+  100%{
+    background-position:0px top;
+  }
+}
+/* Move the background image within the component. */
+@keyframes change1{
+  0%{
+    background-position:left top;
+  }
+  25%{
+    background-position:50% 50%;
+  }
+  50%{
+    background-position:right bottom;
+  }
+  100%{
+    background-position:left top;;
+  }
+}
+```
+
+
+![en-us_image_0000001267607873](figures/en-us_image_0000001267607873.gif)
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> The background-position attribute can only be used to move background images, but not the background color (background-color).

en/application-dev/device/ui/ui-js-animate-component.md

+# Component Animation
+
+
+Create and run an animation shortcut on the component. For details, see [Universal Methods](../reference/arkui-js/js-components-common-methods.md).
+
+
+## Obtaining an Animation Object
+
+Call the animate method to obtain an animation object, which supports animation attributes, methods, and events.
+
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <div id="content" class="box" onclick="Show"></div>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+.box{
+  width: 200px;
+  height: 200px;
+  background-color: #ff0000;
+  margin-top: 30px;
+}
+```
+
+
+```
+/* xxx.js */
+export default {
+  data: {
+    animation: '',
+  },
+  onInit() {
+  },
+  onShow() {
+    var options = {
+      duration: 1500,
+    };
+    var frames = [
+      {
+        width:200,height:200,
+      },
+      {
+        width:300,height:300,
+      }
+    ];
+    this.animation = this.$element('content').animate(frames, options);  // Obtain the animation object.
+  },
+  Show() {   
+    this.animation.play();
+  }
+}
+```
+
+![en-us_image_0000001222807812](figures/en-us_image_0000001222807812.gif)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> - When using the animate method, you must pass the keyframes and options parameters.
+> - If animate is called multiple times and the replace policy is used, parameters passed to the last call will take effect.
+
+
+## Setting Animation Parameters
+
+After obtaining an animation object, you can set its style working on the component by using the keyframes parameter.
+
+
+```
+<!-- xxx.hml -->
+<div class="container">
+   <div id="content" class="box" onclick="Show"></div>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+.box{
+  width: 200px;
+  height: 200px;
+  background-color: #ff0000;
+  margin-top: 30px;
+}
+```
+
+
+```
+/* xxx.js */
+export default {
+  data: {
+    animation: '',
+    keyframes:{},
+    options:{}
+  },
+  onInit() {
+    this.options = {
+      duration: 4000,
+    };
+    this.keyframes = [
+      {
+        transform: {
+          translate: '-120px -0px',
+          scale: 1,
+          rotate: 0
+        },
+        transformOrigin: '100px 100px',
+        offset: 0.0,
+        width: 200,
+        height: 200
+      },
+      {
+        transform: {
+          translate: '120px 0px',
+          scale: 1.5,
+          rotate: 90
+        },
+        transformOrigin: '100px 100px',
+        offset: 1.0,
+        width: 300,
+        height: 300
+      }
+    ];
+  },
+  Show() {
+    this.animation = this.$element('content').animate(this.keyframes, this.options);
+    this.animation.play();
+  }
+}
+```
+
+![en-us_image_0000001267647897](figures/en-us_image_0000001267647897.gif)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> - The sequence of translate, scale, and rotate affects the animation effect.
+> 
+> - transformOrigin works only for scale and rotate.
+
+Set the animation attributes by using the options parameter.
+
+
+```
+<!-- xxx.hml -->
+<div class="container">
+   <div id="content" class="box" onclick="Show"></div>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+.box{
+  width: 200px;
+  height: 200px;
+  background-color: #ff0000;
+  margin-top: 30px;
+}
+```
+
+
+```
+/* xxx.js */
+export default {
+  data: {
+    animation: '',
+  },
+  onInit() {
+  },
+  onShow() {
+    var options = {      duration: 1500,      easing: 'ease-in',      delay: 5,      iterations: 2,      direction: 'normal',    };
+    var frames = [
+      {
+        transform: {
+          translate: '-150px -0px'
+        }
+      },
+      {
+        transform: {
+          translate: '150px 0px'
+        }
+      }
+    ];
+    this.animation = this.$element('content').animate(frames, options);
+  },
+  Show() {
+    this.animation.play();
+  }
+}
+```
+
+![en-us_image_0000001222967796](figures/en-us_image_0000001222967796.gif)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> direction: mode of playing the animation.
+> 
+> normal: plays the animation in forward loop mode.
+> 
+> reverse: plays the animation in reverse loop mode.
+> 
+> alternate: plays the animation in alternating loop mode. When the animation is played for an odd number of times, the playback is in forward direction. When the animation is played for an even number of times, the playback is in reverse direction.
+> 
+> alternate-reverse: plays the animation in reverse alternating loop mode. When the animation is played for an odd number of times, the playback is in reverse direction. When the animation is played for an even number of times, the playback is in forward direction.
+
+
+## Adding an Event and Calling a Method
+
+Animation objects support animation events and methods. You can achieve the intended animation by adding start and cancel events and calling the play, pause, rewind, and stop methods.
+
+
+```
+<!-- xxx.hml -->
+<div class="container">
+ <div id="content" style="width: 350px;height: 350px;margin-top: 100px;background: linear-gradient(pink, purple);">
+ </div>
+   <div class="row">
+      <button type="capsule" value="play" onclick="playAnimation"></button>
+      <button type="capsule" value="pause" onclick="pauseAnimation"></button>
+   </div>
+   <div class="row1">
+      <button type="capsule" value="reverse" onclick="reverseAnimation"></button>
+      <button type="capsule" value="cancel" onclick="cancelAnimation"></button>
+   </div>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container {
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+button{
+  width: 200px;
+}
+.row{
+  width: 65%;
+  height: 100px;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 40px;
+  position: fixed;
+  top: 65%;
+  left: 120px;
+}
+.row1{
+  width: 65%;
+  height: 100px;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 30px;
+  position: fixed;
+  top: 75%;
+  left: 120px;
+}
+```
+
+
+```
+/* xxx.js */
+import prompt from '@system.prompt';
+export default {
+  data: {
+    animation: '',
+  },
+  onInit() {
+  },
+  onShow() {
+    var options = {
+      duration: 1500,
+      easing:'ease-in',
+      elay:5,
+      direction:'normal',
+      iterations:2
+    };
+    var frames = [
+      {
+        transform: {
+          translate: '-150px -0px'
+        },
+        opacity: 0.1,
+        offset: 0.0,
+        width: 200,
+        height: 200,
+      },
+      {
+        transform: {
+          translate: '150px 0px'
+        },
+        opacity: 1.0,
+        offset: 1.0,
+        width: 300,
+        height: 300,
+      }
+    ];
+    this.animation = this.$element('content').animate(frames, options);
+    this.animation.onstart = function(){
+      prompt.showToast({
+        message: "start"
+      });
+    }; // Add a start event.
+    this.animation.onrepeat = function(){
+      prompt.showToast({
+        message: " repeated"
+      });
+    };// Add a repeat event.
+    this.animation.oncancel = function(){
+      prompt.showToast({
+        message: "canceled"
+      });
+    };// Add a cancellation event.
+    this.animation.onfinish = function(){
+      prompt.showToast({
+        message: "finish"
+      });
+    };// Add a finish event.
+  },
+  playAnimation() {
+    this.animation.play();// Start this animation.
+  },
+  pauseAnimation() {
+    this.animation.pause();// Pause this animation.
+  },
+  reverseAnimation() {
+    this.animation.reverse();// Reverse this animation.
+  },
+  cancelAnimation() {
+    this.animation.cancel();// Cancel this animation.
+  }
+}
+```
+
+![en-us_image_0000001223127752](figures/en-us_image_0000001223127752.gif)
+
+Change the animation status by changing the playStat attribute.
+
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <div id="content" style="width: 350px;height: 350px;margin-top: 100px;background: linear-gradient(pink, purple);">
+  </div>
+  <div class="row">
+     <button type="capsule" value="{{state}}" onclick="playStateClick"></button>
+  </div>
+  <div class="row1">
+     <button type="capsule" value="{{state1}}" onclick="playStateClick1"></button>
+  </div>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container {
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+button{
+  width: 200px;
+}
+.row{
+  width: 65%;
+  height: 100px;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 50px;
+  margin-left: 260px;
+  position: fixed;
+  top: 65%;
+}
+.row1{
+  width: 65%;
+  height: 100px;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 50px;
+   margin-left: 260px;
+  position: fixed;
+  top: 75%;
+}
+```
+
+
+```
+/* xxx.js */
+import prompt from '@system.prompt';
+export default {
+  data: {
+    animation: '',
+    state:'play',
+    state1:'play'
+  },
+  onInit() {
+  },
+  onShow() {
+    var options = {
+      duration: 1500,
+      easing:'ease-in',
+      elay:5,
+      direction:'normal',
+      iterations:2,
+    };
+    var frames = [
+      {
+        transform: {
+          translate: '-150px -0px'
+        },
+        opacity: 0.1,
+        offset: 0.0,
+        width: 200,
+        height: 200,
+      },
+      {
+        transform: {
+          translate: '150px 0px'
+        },
+          opacity: 1.0,
+          offset: 1.0,
+          width: 300,
+          height: 300,
+        }
+      ];
+      this.animation = this.$element('content').animate(frames, options);
+      this.animation.onstart = function(){
+        prompt.showToast({
+          message: "start"
+        });
+      };
+      this.animation.onrepeat = function(){
+        prompt.showToast({
+          message: " repeated"
+        });
+      };
+      this.animation.onfinish = function(){
+        prompt.showToast({
+          message: " finished"
+      });
+    };
+  },
+  playStateClick(){
+    if(this.animation.playState != 'running'){
+      this.animation.playState = 'running';// Set playState to running to run the animation.
+      this.state = 'pause'
+    }else{
+      this.animation.playState = 'paused';// Set playState to paused to pause the animation.
+      this.state = 'play'
+    }
+  },
+  playStateClick1(){
+    if(this.animation.playState != 'running'){
+      this.animation.playState = 'running';
+      this.state1 = 'finish'
+    }else{
+      this.animation.playState = 'finished';// Set playState to finished to stop the animation.
+      this.state1 = 'play'
+    }
+  }
+}
+```
+
+![en-us_image_0000001267607921](figures/en-us_image_0000001267607921.gif)

en/application-dev/device/ui/ui-js-animate-dynamic-effects.md

+# Animation Effect
+
+
+You can set the interpolator to implement the animation effect. For details, see [Animation](../reference/apis/js-apis-basic-features-animator.md).
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> This feature is supported since API version 6.
+
+
+## Creating an Animation Object
+
+Use createAnimator to create an animation object and set the animation attributes by using the options parameter.
+
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <div style="width: 300px;height: 300px;margin-top: 100px;background: linear-gradient(pink, purple);transform: translate({{translateVal}});">
+  </div>
+  <div class="row">
+    <button type="capsule" value="play" onclick="playAnimation"></button>
+  </div>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container {
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+button{
+  width: 200px;
+}
+.row{
+  width: 65%;
+  height: 100px;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 50px;
+  margin-left: 260px;
+}
+```
+
+
+```
+/* xxx.js */
+import animator from '@ohos.animator';
+export default {
+  data: {
+    translateVal: 0,
+    animation: null
+  },
+  onInit() {},
+  onShow(){
+    var options = {
+      duration: 3000,
+      easing:"friction",
+      delay:"1000",
+      fill: 'forwards',
+      direction:'alternate',
+      iterations: 2,
+      begin: 0,
+      end: 180
+    };// Set attributes.
+    this.animation = animator.createAnimator(options)// Create an animation.
+  },
+  playAnimation() {
+    var _this = this;
+    this.animation.onframe = function(value) {
+      _this.translateVal= value
+    };
+    this.animation.play();
+  }
+}
+```
+
+![en-us_image_0000001267887885](figures/en-us_image_0000001267887885.gif)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> - When you use createAnimator to create an animation object, you must pass the options parameter.
+> 
+> - begin indicates the start point of the animation interpolation. If it is not set, the default value 0 is used.
+> 
+> - end indicates the end point of the animation interpolation. If it is not set, the default value 1 is used.
+
+
+## Adding Animation Events and Calling Methods
+
+The animator supports events and methods, which you can use to customize the animation effect. Events include frame, cancel, repeat, and finish. Methods include update, play, pause, cancel, reverse, and finish. For details about the supported events and methods, see [animator supported events and animator supported APIs](../reference/apis/js-apis-basic-features-animator.md).
+
+
+```
+<!-- xxx.hml -->
+<div style="flex-direction: column;align-items: center;">
+  <div style="width:200px;height: 200px;margin-top: 100px;background: linear-gradient(#b30d29, #dcac1b);
+  transform: scale({{scaleVal}});"></div>
+  <div style="width: {{DivWidth}};height: {{DivHeight}};margin-top: 200px;
+  background: linear-gradient(pink, purple);margin-top: 200px;transform:translateY({{translateVal}});">
+  </div>
+  <div class="row">
+    <button type="capsule" value="play" onclick="playAnimation"></button>
+    <button type="capsule" value="update" onclick="updateAnimation"></button>
+  </div>
+  <div class="row1">
+    <button type="capsule" value="pause" onclick="pauseAnimation"></button>
+    <button type="capsule" value="finish" onclick="finishAnimation"></button>
+  </div>
+  <div class="row2">
+    <button type="capsule" value="cancel" onclick="cancelAnimation"></button>
+    <button type="capsule" value="reverse" onclick="reverseAnimation"></button>
+  </div>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container {
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+button{
+  width: 200px;
+}
+.row{
+  width: 65%;
+  height: 100px;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 150px;
+  position: fixed;
+  top: 55%;
+  left: 120px;
+}
+.row1{
+  width: 65%;
+  height: 100px;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 120px;
+  position: fixed;
+  top: 65%;
+  left: 120px;
+}
+.row2{
+  width: 65%;
+  height: 100px;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 100px;
+  position: fixed;
+  top: 75%;
+  left: 120px;
+}
+```
+
+
+```
+/* xxx.js */
+import animator from '@ohos.animator';
+import prompt from '@system.prompt';
+export default {
+  data: {
+    scaleVal:1,
+    DivWidth:200,
+    DivHeight:200,
+    translateVal:0,
+    animation: null
+  },
+  onInit() {
+    var options = {
+      duration: 3000,
+      fill: 'forwards',
+      begin: 200,
+      end: 270
+    };
+    this.animation = animator.createAnimator(options);
+  },
+  onShow() {
+    var _this= this;
+    // Add an animation repeat event.
+    this.animation.onrepeat = function() {
+      prompt.showToast({
+        message: 'repeat'
+      });
+      var repeatoptions = {
+        duration: 2000,
+        iterations: 1,
+         direction: 'alternate',
+         begin: 180,
+         end: 240
+       };
+        _this.animation.update(repeatoptions);
+        _this.animation.play();
+      };
+  },
+  playAnimation() {
+    var _this= this;
+    // Add the frame-by-frame interpolation callback event for the animation.
+    this.animation.onframe = function(value) {
+      _this. scaleVal= value/150,
+      _this.DivWidth = value,
+      _this.DivHeight = value,
+      _this.translateVal = value-180
+    };
+    this.animation.play();
+  },
+  updateAnimation() {
+    var newoptions = {
+      duration: 5000,
+      iterations: 2,
+      begin: 120,
+      end: 180
+    };
+    this.animation.update(newoptions);
+    this.animation.play();// Play this animation.
+  },
+  pauseAnimation() {
+    this.animation.pause();// Pause this animation.
+  },
+  finishAnimation() {
+    var _this= this;
+   // Add an animation completion event.
+    this.animation.onfinish = function() {
+      prompt.showToast({
+        message: 'finish'
+      })
+    };
+    this.animation.finish(); // Finish this animation.
+  },
+  cancelAnimation() {
+    this.animation.cancel(); // Cancel this animation.
+  },
+  reverseAnimation() {
+    this.animation.reverse(); // Reverse this animation.
+  }
+}
+```
+
+![en-us_image_0000001223287724](figures/en-us_image_0000001223287724.gif)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> When calling the update method, you can use it to update the animation parameters. The input parameters are the same as those of createAnimator.

en/application-dev/device/ui/ui-js-animate-frame.md

+# Animation Frame
+
+
+## Requesting an Animation Frame
+
+Use the requestAnimationFrame method to request frames on a one-by-one basis. This method accepts a callback as an argument.
+
+When runframe calls requestAnimationFrame, the step callback with the timestamp parameter is passed, and this timestamp iss assigned to startTime. When the difference between the timestamp and startTime is less than the specified value, requestAnimationFrame is called again, and the animation stops.
+
+  
+```
+<!-- xxx.hml -->
+<div class="container">
+  <tabs onchange="changecontent">
+    <tab-content>
+      <div class="container">
+        <stack style="width: 300px;height: 300px;margin-top: 100px;margin-bottom: 100px;">
+          <canvas id="mycanvas" style="width: 100%;height: 100%;background-color: coral;">
+          </canvas>
+          <div style="width: 50px;height: 50px;border-radius: 25px;background-color: indigo;position: absolute;left: {{left}};top: {{top}};">
+          </div>
+        </stack>
+        <button type="capsule" value="play" onclick="runframe"></button>
+      </div>
+    </tab-content>
+  </tabs>
+</div>
+```
+
+  
+```
+/* xxx.css */
+.container {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+button{
+  width: 300px;
+}
+```
+
+  
+```
+/* xxx.js */
+export default {
+  data: {
+    timer: null,
+    left: 0,
+    top: 0,
+    flag: true,
+    animation: null,
+    startTime: 0,
+  },
+  onShow() {
+    var test = this.$element("mycanvas");
+    var ctx = test.getContext("2d");
+    ctx.beginPath();
+    ctx.moveTo(0, 0);
+    ctx.lineTo(300, 300);
+    ctx.lineWidth = 5;
+    ctx.strokeStyle = "red";
+    ctx.stroke();
+  },
+  runframe() {
+    this.left = 0;
+    this.top = 0;
+    this.flag = true;
+    this.animation = requestAnimationFrame(this.step);
+  },
+  step(timestamp) {
+    if (this.flag) {
+      this.left += 5;
+      this.top += 5;
+      if (this.startTime == 0) {
+        this.startTime = timestamp;
+      }
+      var elapsed = timestamp - this.startTime;
+        if (elapsed < 500) {
+          console.log('callback step timestamp: ' + timestamp);
+          this.animation = requestAnimationFrame(this.step);
+        }
+      } else {
+        this.left -= 5;
+        this.top -= 5;
+        this.animation = requestAnimationFrame(this.step);
+      }
+      if (this.left == 250 || this.left == 0) {
+        this.flag = !this.flag
+     }
+    },
+    onDestroy() {
+      cancelAnimationFrame(this.animation);
+    }
+}
+```
+
+![en-us_image_0000001267767877](figures/en-us_image_0000001267767877.gif)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> When invoking the callback, the requestAnimationFrame method passes the timestamp as the first parameter, which indicates the time when requestAnimationFrame starts to execute the callback.
+
+
+## Canceling an Animation Frame
+
+Use the cancelAnimationFrame method to cancel frames on a one-by-one basis. When this method is called, the animation frame request sent through requestAnimationFrame will be canceled.
+
+  
+```
+<!-- xxx.hml -->
+<div class="container">
+  <tabs onchange="changecontent">
+    <tab-content>
+      <div class="container">
+        <stack style="width: 300px;height: 300px;margin-top: 100px;margin-bottom: 100px;">
+          <canvas id="mycanvas" style="width: 100%;height: 100%;background-color: coral;">
+          </canvas>
+          <div style="width: 50px;height: 50px;border-radius: 25px;background-color: indigo;position: absolute;left: {{left}};top: {{top}};">
+          </div>
+        </stack>
+        <button type="capsule" value="play" onclick="runframe"></button>
+      </div>
+    </tab-content>
+  </tabs>
+</div>
+```
+
+  
+```
+/* xxx.css */
+.container {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+button{
+  width: 300px;
+}
+```
+
+  
+```
+/* xxx.js */
+export default {
+  data: {
+    timer: null,
+    left: 0,
+    top: 0,
+    flag: true,
+    animation: null
+  },
+  onShow() {
+    var test = this.$element("mycanvas");
+    var ctx = test.getContext("2d");
+    ctx.beginPath();
+    ctx.moveTo(0, 0);
+    ctx.lineTo(300, 300);
+    ctx.lineWidth = 5;
+    ctx.strokeStyle = "red";
+    ctx.stroke();
+  },
+  runframe() {
+    this.left = 0;
+    this.top = 0;
+    this.flag = true;
+    this.animation = requestAnimationFrame(this.step);
+  },
+  step(timestamp) {
+    if (this.flag) {
+      this.left += 5;
+      this.top += 5;
+      this.animation = requestAnimationFrame(this.step);
+    } else {
+      this.left -= 5;
+      this.top -= 5;
+      this.animation = requestAnimationFrame(this.step);
+    }
+    if (this.left == 250 || this.left == 0) {
+      this.flag = !this.flag
+    }
+  },
+  onDestroy() {
+    cancelAnimationFrame(this.animation);
+  }
+}
+```
+
+![en-us_image_0000001223127740](figures/en-us_image_0000001223127740.gif)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> When cancelAnimationFrame is called, a parameter that indicates an ID must be passed.

en/application-dev/device/ui/ui-js-animate-svg.md

+# Defining Animations for SVG Components
+
+You can use child components in the <svg> component to animate attributes over time.
+
+#### Attribute Style Animation
+
+In the [animate](../reference/arkui-js/js-components-svg-animate.md) child component of the <svg> component, set attributeName to the attribute you want to animate, set from to the animation start value, and set to to the animation end value.
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <svg>
+    <text x="300" y="300" fill="blue">
+      Hello
+      <animate attributeName="font-size" from="30" to="60" dur="3s" repeatCount="indefinite">
+      </animate>
+      <animate attributeName="fill" from="red" to="blue" dur="3s" repeatCount="indefinite">
+      </animate>
+      <animate attributeName="opacity" from="1" to="0.3" dur="3s" repeatCount="indefinite">
+      </animate>
+    </text>
+    <text x="300" y="600" fill="blue">
+      World
+      <animate attributeName="font-size" from="30" to="60" values="30;80" dur="3s" repeatCount="indefinite">
+      </animate>
+      <animate attributeName="fill" from="red" to="blue"  dur="3s" repeatCount="indefinite">
+      </animate>
+      <animate attributeName="opacity" from="0.3" to="1" dur="3s" repeatCount="indefinite">
+      </animate>
+    </text>
+  </svg>
+</div>
+```
+
+![en-us_image_0000001183871404.gif](figures/en-us_image_0000001183871404.gif)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) NOTE:
+> When values is also set, the from and to settings do not take effect.
+
+#### Motion Path Animation
+
+In the [animateMotion](../reference/arkui-js/js-components-svg-animatemotion.md) child component of the &lt;svg&gt; component, set path to define a shape for the animation.
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <svg fill="white" width="800" height="900">
+    <path d="M300,200 h-150 a150 150 0 1 0 150 -150 z" fill="white" stroke="blue" stroke-width="5" >
+    </path>
+    <path fill="red" d="M-5,-5 L10,0 L-5,5 L0,0 Z"  >
+      <animateMotion dur="2000" repeatCount="indefinite" rotate="auto-reverse"path="M300,200 h-150 a150 150 0 1 0 150 -150 z">
+      </animateMotion>
+    </path>
+  </svg>
+</div>
+```
+
+![en-us_image_0000001229510983.gif](figures/en-us_image_0000001229510983.gif)
+
+#### animateTransform Animation
+
+In the [animateTransform](../reference/arkui-js/js-components-svg-animatetransform.md) child component of the &lt;svg&gt; component, set attributeName to bind the corresponding attribute to the transform attribute, and set type to the animation type, from to the start value, and to to the end value.
+
+```
+<!-- xxx.hml -->
+<div class="container" style="">
+  <svg>
+    <line x1="90" y1="300" x2="90" y2="730" stroke-width="10" stroke="black" stroke-linecap="round">
+      <animateTransform attributeName="transform" attributeType="XML" type="translate"  dur="3s" values="0;30;10;30;20;30;25;30" keyTimes="0;0.3;0.5;0.7;0.8;0.9;1.0;1.1" 
+      fill="freeze">
+      </animateTransform>
+    </line>
+    <circle cx="500" cy="500" r="50" stroke-width="15" fill="red" stroke="#e70d0d">
+      <animateTransform attributeName="transform" attributeType="XML" type="rotate"  dur="3s" values="0;30;10;30;20;30;25;30" keyTimes="0;0.3;0.5;0.7;0.8;0.9;1.0;1.1" fill="freeze">
+      </animateTransform>
+      <animateTransform attributeName="transform" attributeType="XML" type="scale"  dur="6s" values="1;1;1.3" keyTimes="0;0.5;1" fill="freeze"></animateTransform>
+      <animateTransform attributeName="transform" attributeType="XML" type="translate"  dur="9s" values="0;0;300 7" keyTimes="0;0.6;0.9" fill="freeze"></animateTransform>
+    </circle>
+    <rect width="500" height="200" x="90" y="840">
+      <animateTransform attributeName="transform" attributeType="XML" type="skewY"  dur="6s" values="0;0;30" keyTimes="0;0.5;1" fill="freeze"></animateTransform>
+    </rect>
+    <line x1="650" y1="300" x2="650" y2="600" stroke-width="20" stroke="blue" stroke-linecap="round">
+      <animateTransform attributeName="transform" attributeType="XML" type="translate"  dur="9s" values="0;0;0 800" keyTimes="0;0.6;1" fill="freeze"></animateTransform>
+    </line>
+  </svg>
+</div>
+```
+
+```
+/* xxx.css */
+.container {
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background-color: #F1F3F5;
+}
+```
+
+![en-us_image_0000001182832088.gif](figures/en-us_image_0000001182832088.gif)
\ No newline at end of file

en/application-dev/device/ui/ui-js-animate-transform.md

+# Defining Animations with the transform Attribute
+
+
+Set the transform attribute for component rotation, scaling, translation, and skewing.
+
+
+## Designing Static Animation
+
+Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower part of the rhombus with a rectangle to form a roof. Set the translate attribute of the rectangle to the coordinate (150px, -150px) to form a door, use the position attribute to translate the horizontal and vertical axes to the specified coordinates of the parent component (square), set the scale attribute to scale up the parent and child components together to determine the window size, and use the skewX attribute to skew the component and set the coordinate translate(200px,-830px) to form a chimney.
+
+  
+```
+<!-- xxx.hml -->
+<div class="container">
+  <div class="top"></div>
+  <div class="content"></div>
+  <div class="door"></div>
+  <!-- Window -->
+  <div class="window">
+    <div class="horizontal"></div>
+    <div class="vertical"></div>
+  </div>
+  <div class="chimney"></div>
+</div>
+```
+
+  
+```
+/* xxx.css */
+.container {
+  background-color:#F1F3F5;
+  align-items: center;
+  flex-direction: column;
+}
+.top{
+  z-index: -1;
+  position: absolute;
+  width: 428px;
+  height: 428px;
+  background-color: #860303;
+  transform: rotate(45deg);
+  margin-top: 230px;
+  margin-left: 266px;
+}
+.content{
+  margin-top: 500px;
+  width: 600px;
+  height: 400px;
+  background-color: white;
+  border:  1px solid black;
+}
+.door{
+  width: 100px;
+  height: 150px;
+  background-color: #1033d9;
+  transform: translate(150px,-150px);
+}
+.window{
+  z-index: 1;
+  position: relative;   
+  width: 100px;
+  height: 100px;
+  background-color: white;
+  border: 1px solid black;
+  transform: translate(-150px,-400px) scale(1.5);
+}
+/* Horizontal axis of the window */
+.horizontal{
+  position: absolute;
+  top: 50%;
+  width: 100px;
+  height: 5px;
+  background-color: black;
+}
+/* Vertical axis of the window */
+.vertical{
+  position: absolute;
+  left: 50%;
+  width: 5px;
+  height: 100px;
+  background-color: black;
+}
+.chimney{
+  z-index: -2;
+  width: 40px;
+  height: 100px;
+  border-radius: 15px;
+  background-color: #9a7404;
+  transform: translate(200px,-830px) skewX(-5deg);
+}
+```
+
+![en-us_image_0000001267887841](figures/en-us_image_0000001267887841.png)
+
+
+## Designing Translation Animation
+
+Decrease the y-coordinate over a time frame to make the ball bounce back. Gradually decrease the bounce height until it drops to 0. An animation where the ball falls is hereby created.
+
+  
+```
+<!-- xxx.hml -->
+<div class="container">
+  <div class="circle"></div>
+  <div class="flower"></div>
+</div>
+```
+
+  
+```
+/* xxx.css */
+.container {
+  background-color:#F1F3F5;
+  display: flex;
+  justify-content: center;
+}
+.circle{
+  width: 100px;
+  height: 100px;
+  border-radius: 50px;
+  background-color: red;
+  /* Use forwards to enable the animation stop at the last frame. */
+  animation: down 3s fast-out-linear-in forwards;
+}
+.flower{
+  position: fixed;
+  width: 80%;
+  margin-left: 10%;
+  height: 5px;
+  background-color: black;
+  top: 1000px;
+}
+@keyframes down {
+  0%{
+    transform: translate(0px,0px);
+  }
+  /* Start ball falling. */
+  15%{
+    transform: translate(10px,900px);
+  }
+  /* Start bouncing back. */
+  25%{
+    transform: translate(20px,500px);
+  }
+  /* Let the ball fall. */
+  35%{
+    transform: translate(30px,900px);
+  }
+  /* Let the ball bounce back. */
+  45%{
+    transform: translate(40px,700px);
+  }
+  55%{
+    transform: translate(50px,900px);
+  }
+  65%{
+    transform: translate(60px,800px);
+  }
+  80%{
+    transform: translate(70px,900px);
+  }
+  90%{
+    transform: translate(80px,850px);
+  }
+  /* Stop falling. */
+  100%{
+    transform: translate(90px,900px);
+  }
+}
+```
+
+![en-us_image_0000001222967760](figures/en-us_image_0000001222967760.gif)
+
+
+## Designing Rotation Animation
+
+Set the rotation center around an element in different transform-origin positions. Of the rotate3d values, the first three values are the rotation vectors of the x-axis, y-axis, and z-axis, respectively; the fourth value is the rotation angle, which can be a negative value to indicate that the rotation is performed counterclockwise.
+
+  
+```
+<!-- xxx.hml -->
+<div class="container">
+  <div class="rotate">
+    <div class="rect rect1"></div>
+    <div class="rect rect2"></div>
+    <div class="rect rect3"></div>
+  </div>
+  <!-- 3D attributes -->
+  <div class="rotate3d">
+    <div class="content">
+        <div class="rect4"></div>
+        <div class="rect5"> </div>
+    </div>
+    <div class="mouse"></div>
+  </div>
+</div>
+```
+
+  
+```
+/* xxx.css */
+.container {
+  flex-direction: column;
+  background-color:#F1F3F5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.rect{
+  width: 100px;
+  height: 100px;
+  animation: rotate 3s infinite;
+  margin-left: 100px;
+}
+.rect1{
+  background-color: #f76160;
+}
+.rect2{
+  background-color: #60f76f;
+  /* Change the origin position.*/
+  transform-origin: 10% 10px;
+}
+.rect3{
+  background-color: #6081f7;
+  /* Change the origin position.*/
+  transform-origin: right bottom;
+}
+@keyframes rotate {
+  from {
+    transform: rotate(0deg)
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+/* 3D sample style */
+.rotate3d{
+  margin-top: 150px;
+  flex-direction: column;
+  background-color:#F1F3F5;
+  display: flex;
+  align-items: center;
+  width: 80%;
+  height: 600px;
+  border-radius: 300px;
+  border: 1px solid #ec0808;
+}
+.content{
+  padding-top: 150px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+/* Use react4 and react5 to shape eyes. */
+.rect4{
+  width: 100px;
+  height: 100px;
+  animation: rotate3d1 17ms infinite;
+  background: linear-gradient(#e6c4ec, #be15d9)
+}
+.rect5{
+  width: 100px;
+  height: 100px;
+  animation: rotate3d1 17ms infinite;
+  margin-left: 100px;
+  background: linear-gradient(#e6c4ec, #be15d9)
+}
+.mouse{
+  margin-top: 150px;
+  width: 200px;
+  height: 100px;
+  border-radius: 50px;
+  border: 1px solid #e70303;
+  animation: rotate3d2 17ms infinite;
+}
+/* Eye animation */
+@keyframes rotate3d1{
+  0% {
+    transform:rotate3d(0,0,0,0deg)
+  }
+  50% {
+    transform:rotate3d(20,20,20,360deg);
+  }
+  100% {
+    transform:rotate3d(0,0,0,0deg);
+  }
+}
+/* Mouth animation */
+@keyframes rotate3d2{
+  0% {
+    transform:rotate3d(0,0,0,0deg)
+  }
+  33% {
+    transform:rotate3d(0,0,10,30deg);
+  }
+  66% {
+    transform:rotate3d(0,0,10,-30deg);
+  }
+  100% {
+    transform:rotate3d(0,0,0,0deg);
+  }
+}
+```
+
+![en-us_image_0000001222807776](figures/en-us_image_0000001222807776.gif)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> transform-origin specifies the origin of an element's transformation. If only one value is set, the other value is 50%. If both values are set, the first value indicates the position on the x-axis, and the second value indicates the position on the y-axis.
+
+
+## Designing Scaling Animation
+
+This example implements a ripple animation with the scale attribute. Here is the overall procedure: First, use the positioning function to determine the coordinates of the element's position. Then, create multiple components to achieve the overlapping effect. After that, set the opacity attribute to hide or display the components. To scale and hide/display a component at the same time, set both the scale and opacity attributes. Finally, set different animation durations for different components to achieve the diffusion effect.
+
+Set the scaling values for the x-axis, y-axis, and z-axis in scale3d to implement the animation.
+
+  
+```
+<!-- xxx.hml -->
+<div class="container">
+  <div class="circle">
+    <text>ripple</text>
+  </div>
+  <div class="ripple"></div>
+  <div class="ripple ripple2"></div>
+  <!-- 3d -->
+  <div class="content">
+    <text>spring</text>
+  </div>
+</div>
+```
+
+  
+```
+/* xxx.css */
+.container {
+  flex-direction: column;
+  background-color:#F1F3F5;
+  width: 100%;
+  position: relative;
+}
+.circle{
+  margin-top: 400px;
+  margin-left: 40%;
+  width: 100px;
+  height: 100px;
+  border-radius: 50px;
+  background:linear-gradient(#dcaec1, #d3a8e3);
+  z-index: 1;  position: absolute;
+}
+.ripple{
+  margin-top: 400px;
+  margin-left: 40%;
+  position: absolute;  z-index: 0;
+  width: 100px;
+  height: 100px;
+  border-radius: 50px;
+  background:linear-gradient(#dcaec1,#d3a8e3);
+  animation: ripple 5s infinite;
+}
+/* Set different animation durations for different components. */
+.ripple2{
+  animation-duration: 2.5s;
+}
+@keyframes ripple{
+  0%{
+    transform: scale(1);
+    opacity: 0.5;
+  }
+  50%{
+    transform: scale(3);
+    opacity: 0;
+  }
+  100%{
+    transform: scale(1);
+    opacity: 0.5;
+  }
+}
+text{
+  color: white;
+  text-align: center;
+  height: 100%;
+  width: 100%;
+}
+.content {
+  margin-top: 700px;
+  margin-left: 33%;
+  width: 200px;
+  height: 100px;
+  animation:rubberBand 1s infinite;
+  /* Set the gradient.*/
+  background:linear-gradient(#e276aa,#ec0d66);
+  position: absolute;
+}
+@keyframes rubberBand {
+  0% {
+    transform: scale3d(1, 1, 1);
+  }
+  30% {
+    transform: scale3d(1.25, 0.75, 1.1);
+  }
+  40% {
+    transform: scale3d(0.75, 1.25, 1.2);
+  }
+  50% {
+    transform: scale3d(1.15, 0.85, 1.3);
+  }
+  65% {
+    transform: scale3d(.95, 1.05, 1.2);
+  }
+  75% {
+    transform: scale3d(1.05, .95, 1.1);
+  }
+  100%{
+    transform: scale3d(1, 1, 1);
+  }
+}
+```
+
+![en-us_image_0000001267887837](figures/en-us_image_0000001267887837.gif)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> After the transform attributes are set, the child element changes with the parent element. Value changing of other attributes (such as height and width) of the parent element will not affect the child element.
+
+
+## Setting matrix
+
+The matrix attribute defines a transformation matrix with six input parameters: scaleX, skewY, skewX, scaleY, translateX, and translateY. In the following example, matrix is set to matrix(1,0,0,1,0,200) to skew and translate the component.
+
+  
+```
+<!-- xxx.hml -->
+<div class="container">
+  <div class="rect"> </div>
+</div>
+```
+
+  
+```
+/* xxx.css */
+.container{
+  background-color:#F1F3F5;
+  display: flex;
+  justify-content: center;
+}
+.rect{
+  width: 100px;
+  height: 100px;
+  background-color: red;
+  animation: down 3s infinite forwards;
+}
+@keyframes down{
+  0%{
+    transform: matrix(1,0,0,1,0,0);
+  }
+  10%{
+    transform: matrix(1,0,0,1,0,200);
+  }
+  60%{
+    transform: matrix(2,1.5,1.5,2,0,700);
+  }
+  100%{
+    transform: matrix(1,0,0,1,0,0);
+  }
+}
+```
+
+![en-us_image_0000001267767853](figures/en-us_image_0000001267767853.gif)
+
+
+## Integrating transform Attributes
+
+You can set multiple transform attributes at the same time to apply different transformations to a component. The following example applies the scale, translate, and rotate attributes simultaneously.
+
+  
+```
+<!-- xxx.hml -->
+<div class="container">
+  <div class="rect1"></div>
+  <div class="rect2"></div>
+  <div class="rect3"></div>
+  <div class="rect4"></div>
+  <div class="rect5"></div>
+</div>
+```
+
+  
+```
+/* xxx.css */
+.container{
+  flex-direction:column;
+  background-color:#F1F3F5;
+  padding:50px;
+}
+.rect1{
+  width: 100px;
+  height: 100px;
+  background:linear-gradient(#e77070,#ee0202);
+  animation: change1 3s infinite forwards;
+}
+.rect2{
+  margin-top: 50px;
+  width: 100px;
+  height: 100px;
+  background:linear-gradient(#95a6e8, #2739de);
+  animation: change2 3s infinite forwards;
+}
+.rect3{
+  margin-top: 50px;
+  width: 100px;
+  height: 100px;
+  background:linear-gradient(#142ee2, #8cb1e5);
+  animation: change3 3s infinite;
+}
+.rect4{
+  align-self: center;
+  margin-left: 50px;
+  margin-top: 200px;
+  width: 100px;
+  height: 100px;
+  background:linear-gradient(#e2a8df, #9c67d4,#8245d9,#e251c3);
+  animation: change4 3s infinite;
+}
+.rect5{
+  margin-top: 300px;
+  width: 100px;
+  height: 100px;
+  background:linear-gradient(#e7ded7, #486ccd, #94b4d2);
+  animation: change5 3s infinite;
+}
+/* Use change1 and change2 for comparison. */
+@keyframes change1{
+  0%{
+    transform: translate(0,0);    transform: rotate(0deg)
+  }
+  100%{
+    transform: translate(0,500px);
+    transform: rotate(360deg)
+  }
+}
+/*change2 and change3 compare the animation effects with different attribute sequences.*/
+@keyframes change2{
+  0%{
+    transform:translate(0,0) rotate(0deg) ;
+  }
+  100%{
+    transform: translate(300px,0) rotate(360deg);
+  }
+}
+@keyframes change3{
+  0%{
+    transform:rotate(0deg) translate(0,0);
+  }
+  100%{
+    transform:rotate(360deg)  translate(300px,0);
+  }
+}
+/* Where the attribute values do not match. */
+@keyframes change4{
+  0%{
+    transform: scale(0.5);
+  }
+  100%{
+    transform:scale(2) rotate(45deg);
+  }
+}
+/* Multi-attribute format */
+@keyframes change5{
+  0%{
+    transform:scale(0) translate(0,0) rotate(0);
+  }
+  100%{
+    transform: scale(1.5) rotate(360deg) translate(200px,0);
+  }
+}
+```
+
+![en-us_image_0000001223127712](figures/en-us_image_0000001223127712.gif)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> 1. When multiple transform attributes are set, the later one overwrites the previous one. To apply multiple transform styles at the same time, use the shorthand notation; that is, write multiple style values in one transform, for example, transform: scale(1) rotate(0) translate(0,0).
+> 
+> 2. When using the shorthand notion, **NOTE** that the animation effect varies according to the sequence of the style values.
+> 
+> 3. The style values in the transform attribute used when the animation starts and ends must be in one-to-one mapping. Only the styles that have value mappings are played.

en/application-dev/device/ui/ui-js-building-ui-animation.md

+# Developing Animations
+
+
+Animations are classified into [Static Animation](#static-animation) and [Continuous Animation](#continuous-animation).
+
+
+## Static Animation
+
+The transform attributes are the core of the static animation. A static animation can transform in the following three ways and only once in each way at a time:
+
+- translate: Moves a specified component horizontally or vertically.
+
+- scale: Scales a specified component horizontally or vertically to the required scale.
+
+- rotate: Rotates a specified component by a specified angle along the horizontal axis, vertical axis, or center point.
+
+For more information, see [Component Methods](../reference/arkui-js/js-components-common-methods.md). The following is an example:
+
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <text class="translate">hello</text>
+  <text class="rotate">hello</text>
+  <text class="scale">hello</text>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container {
+  flex-direction: column;
+  align-items: center;
+}
+.translate {
+  height: 150px;
+  width: 300px;
+  font-size: 50px;
+  background-color: #008000;
+  transform: translate(200px);
+}
+.rotate {
+  height: 150px;
+  width: 300px;
+  font-size: 50px;
+  background-color: #008000;
+  transform-origin: 200px 100px;
+  transform: rotateX(45deg);
+}
+.scale {
+  height: 150px;
+  width: 300px;
+  font-size: 50px;
+  background-color: #008000;
+  transform: scaleX(1.5);
+}
+```
+
+
+  figure1 Static animation
+  
+  ![en-us_image_0000001223127724](figures/en-us_image_0000001223127724.png)
+
+
+## Continuous Animation
+
+The static animation has only the start and end states. To set the transition state and conversion effect, use continuous animations.
+
+The core of a continuous animation is animation attributes, which define the start and end states of the animation and the curve of time and speed. Animation attributes can implement the following effects:
+
+- animation-name: Background color, opacity, width, height, and transformation type applied to the element after the animation is executed
+
+- animation-delay and animation-duration: Element delay and duration after the animation is executed
+
+- animation-timing-function: Speed curve of an animation, which makes the animation more fluent
+
+- animation-iteration-count: Number of animation playback times
+
+- animation-fill-mode: Whether to restore the initial state after the animation is executed
+
+To use the animation attributes, you need to define a @keyframes rule in the .css file, set the animation transition effect in @keyframes, and invoke the effect through a style class in the .hml file. The following is an example for animation-name:
+
+
+```
+<!-- xxx.hml -->
+<div class="item-container">
+  <text class="header">animation-name</text>
+  <div class="item {{colorParam}}">
+    <text class="txt">color</text>
+  </div>
+  <div class="item {{opacityParam}}">
+    <text class="txt">opacity</text>
+  </div>
+  <input class="button" type="button" name="" value="show" onclick="showAnimation"/>
+</div>
+```
+
+
+```
+/* xxx.css */
+.item-container {
+  margin-right: 60px;
+  margin-left: 60px;
+  flex-direction: column;
+}
+.header {
+  margin-bottom: 20px;
+}
+.item {
+  background-color: #f76160;
+}
+.txt {
+  text-align: center;
+  width: 200px;
+  height: 100px;
+}
+.button {
+  width: 200px;
+  font-size: 30px;
+  background-color: #09ba07;
+}
+.color {
+  animation-name: Color;
+  animation-duration: 8000ms;
+}
+.opacity {
+  animation-name: Opacity;
+  animation-duration: 8000ms;
+}
+@keyframes Color {
+  from {
+    background-color: #f76160;
+  }
+  to {
+    background-color: #09ba07;
+  }
+}
+@keyframes Opacity {
+  from {
+    opacity: 0.9;
+  }
+  to {
+    opacity: 0.1;
+  }
+}
+```
+
+
+```
+// xxx.js
+export default {
+  data: {
+    colorParam: '',
+    opacityParam: '',
+  },
+  showAnimation: function () {
+    this.colorParam = '';
+    this.opacityParam = '';
+    this.colorParam = 'color';
+    this.opacityParam = 'opacity';
+  },
+}
+```
+
+  figure2 Continuous animation effect
+  
+  ![en-us_image_0000001223287696](figures/en-us_image_0000001223287696.gif)

en/application-dev/device/ui/ui-js-building-ui-component.md

+# Component Overview
+
+
+Components are the core of a UI page. Each component can provide visible and interactive functional units that are independent from each other. This is achieved by data and method encapsulation. You can use and reuse any component anywhere as needed. For details about how to use the components, see [Universal Attributes](../reference/arkui-js/js-components-common-attributes.md).
+
+
+You can also customize a new component through proper combination of components to make the development simple and easy. For details about how to customize components, see [Custom Components](ui-js-custom-components.md).
+
+
+## Classification
+
+Components can be classified into the following types based on their functions.
+
+  | Type | Components | 
+| -------- | -------- |
+| Container | badge, dialog, div, form, list, list-item, list-item-group, panel, popup, refresh, stack, stepper, stepper-item, swiper, tabs, tab-bar, tab-content | 
+| Basic | button, chart, divider, image, image-animator, input, label, marquee, menu, option, picker, picker-view, piece, progress, qrcode, rating, richtext, search, select, slider, span, switch, text, textarea, toolbar, toolbar-item, toggle | 
+| Media | video | 
+| Canvas | canvas | 
+| Grid | grid-container, grid-row, grid-col | 
+| SVG | svg, rect, circle, ellipse, path, line, polyline, polygon, text, tspan, textPath, animate, animateMotion, animateTransform |

en/application-dev/device/ui/ui-js-building-ui-event.md

+# Defining Events
+
+
+Events mainly include gesture events for touchscreen devices.
+
+
+## Gesture Events
+
+A gesture represents a semantic action (for example, tap, drag, or longpress) that can trigger one or more events. A gesture lifecycle may consist of multiple events from the start to the end of the gesture. Supported events:
+
+  Touch
+- touchstart: Triggered when the touch starts
+
+- touchmove: Triggered when the touch moves
+
+- touchcancel: Triggered when the touch is interrupted, for example, by an incoming call notification or pop-up message
+
+- touchend: Triggered when the touch ends
+
+Click
+
+click: Triggered when a user taps the screen quickly.
+
+Longpress
+
+longpress: Triggered when a user keeps tapping the screen at the same position for a while.
+
+The following is an example:
+
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <div class="text-container" onclick="click">
+    <text class="text-style">{{onClick}}</text>
+  </div>
+  <div class="text-container" ontouchstart="touchStart">
+    <text class="text-style">{{touchstart}}</text>
+  </div>
+  <div class="text-container" ontouchmove="touchMove">
+    <text class="text-style">{{touchmove}}</text>
+  </div>
+  <div class="text-container" ontouchend="touchEnd">
+    <text class="text-style">{{touchend}}</text>
+  </div>
+  <div class="text-container" ontouchcancel="touchCancel">
+    <text class="text-style">{{touchcancel}}</text>
+  </div>
+  <div class="text-container" onlongpress="longPress">
+    <text class="text-style">{{onLongPress}}</text>
+  </div>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.text-container {
+  margin-top: 10px;
+  flex-direction: column;
+  width: 750px;
+  height: 50px;
+  background-color: #09ba07;
+}
+.text-style {
+  width: 100%;
+  line-height: 50px;
+  text-align: center;
+  font-size: 24px;
+  color: #ffffff;
+}
+```
+
+
+```
+// xxx.js
+export default {
+  data: {
+    touchstart: 'touchstart',
+    touchmove: 'touchmove',
+    touchend: 'touchend',
+    touchcancel: 'touchcancel',
+    onClick: 'onclick',
+    onLongPress: 'onlongpress',
+  },
+  touchCancel: function (event) {
+    this.touchcancel = 'canceled';
+  },
+  touchEnd: function(event) {
+    this.touchend = 'ended';
+  },
+  touchMove: function(event) {
+    this.touchmove = 'moved';
+  }, 
+  touchStart: function(event) {
+    this.touchstart = 'touched';
+  },
+  longPress: function() {
+    this.onLongPress = 'longpressed';
+  },
+  click: function() {
+    this.onClick = 'clicked';
+  },
+}
+```

en/application-dev/device/ui/ui-js-building-ui-interactions.md

+# Adding Interactions
+
+  You can make the UI interactive by binding events to components. This section describes how to bind <div>, <text>, and <image> components to click events to build a thumb up button, as shown in the following figure.
+  figure1 Thumb up button effect
+
+![en-us_image_0000001267647901](figures/en-us_image_0000001267647901.gif)
+
+
+The thumb up button is implemented by binding a click event to a <div> component. The <div> component contains an <image> component and a <text> component.
+
+
+- The <image> component is used to display unselected and selected (highlighted) thumbs up images. The click event function alternately updates the paths of the images that are liked and not liked.
+
+- The <text> component is used to display the number of thumbs up. The number is updated in the function of the click event.
+
+
+The click event calls the likeClick() function defined in the .js file. You can change the value of isPressed to update the image component. If the value of isPressed is true, the number of thumbs up is incremented by 1. The likeClick() function takes effect on the <div> component in the .hml file. The style of each child component for the thumbs up button is set in the .css file. The following is an example:
+
+```
+<!-- xxx.hml -->
+<!-- Thumb up button -->
+<div>
+  <div class="like" onclick="likeClick">
+    <image class="like-img" src="{{likeImage}}" focusable="true"></image>
+    <text class="like-num" focusable="true">{{total}}</text>
+  </div>
+</div>
+```
+
+```
+/* xxx.css */
+.like {
+  width: 104px;
+  height: 54px;
+  border: 2px solid #bcbcbc;
+  justify-content: space-between;
+  align-items: center;
+  margin-left: 72px;
+  border-radius: 8px;
+}
+.like-img {
+  width: 33px;
+  height: 33px;
+  margin-left: 14px;
+}
+.like-num {
+  color: #bcbcbc;
+  font-size: 20px;
+  margin-right: 17px;
+}
+```
+
+```
+// xxx.js
+export default {
+  data: {
+    likeImage: '/common/unLike.png',
+    isPressed: false,
+    total: 20,
+  },
+  likeClick() {
+    var temp;
+    if (!this.isPressed) {
+      temp = this.total + 1;
+      this.likeImage = '/common/like.png';
+    } else {
+      temp = this.total - 1;
+      this.likeImage = '/common/unLike.png';
+    }
+    this.total = temp;
+    this.isPressed = !this.isPressed;
+  },
+}
+```
+
+
+ArkUI also provides many form components, such as switches, tags, and pickers, for you to flexibly lay out pages and improve their interactions with users. For details, see Container Components.

en/application-dev/device/ui/ui-js-building-ui-layout-comment.md

+# Adding a Comment
+
+
+After a user enters a comment and clicks the submit button, the content is displayed in the comment area. The user can click the delete button to delete the current comment and enter another comment again.
+
+
+To set such a comment area on a page, you need to associate a click event with <div>, <text>, and <input>. You can use the <input> component to obtain the comment entered by a user, use the <text> component to display the comment, and use commentText to mark the <text> component (controlled by the if attribute). Associate the click event with the <text> component that contains Done and Delete to update the commentText and inputValue. The following is an example:
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <text class="comment-title">Comment</text>
+  <div if="{{!commentText}}">
+    <input class="comment" value="{{inputValue}}" onchange="updateValue()"></input>
+    <text class="comment-key" onclick="update" focusable="true">Done</text>
+  </div>
+  <div if="{{commentText}}">
+    <text class="comment-text" focusable="true">{{inputValue}}</text>
+    <text class="comment-key" onclick="update" focusable="true">Delete</text>
+  </div>
+</div>
+```
+
+
+
+```
+/* xxx.css */
+.container {
+  margin-top: 24px;
+  background-color: #ffffff;
+}
+.comment-title {
+  font-size: 40px;
+  color: #1a1a1a;
+  font-weight: bold;
+  margin-top: 40px;
+  margin-bottom: 10px;
+}
+.comment {
+  width: 550px;
+  height: 100px;
+  background-color: lightgrey;
+}
+.comment-key {
+  width: 150px;
+  height: 100px;
+  margin-left: 20px;
+  font-size: 32px;
+  color: #1a1a1a;
+  font-weight: bold;
+}
+.comment-key:focus {
+  color: #007dff;
+}
+.comment-text {
+  width: 550px;
+  height: 100px;
+  text-align: left;
+  line-height: 35px;
+  font-size: 30px;
+  color: #000000;
+  border-bottom-color: #bcbcbc;
+  border-bottom-width: 0.5px;
+}
+```
+
+
+
+```
+// xxx.js
+export default {
+  data: {
+    inputValue: '',
+    commentText: false,
+  },
+  update() {
+    this.commentText = !this.commentText;
+  },
+  updateValue(e) {
+    this.inputValue = e.text;
+  },
+}
+```

en/application-dev/device/ui/ui-js-building-ui-layout-external-container.md

+# Adding a Container
+
+
+To assemble the basic elements of a page, you need a container component. The <div>, <list>, and <tabs> components are commonly used for laying out page elements. You can use <div> as the container in a page with simple layout. <div> supports a variety of child components required to build the page.
+
+
+## <List>
+
+If you use <div> repeatedly to render a complex page, frame freezing may occur. In this case, use the <list> component instead of <div> to lay out list items, which provides a smooth list scrolling. **NOTE** that <list> supports only <list-item> as it child components. The following is an example:
+
+
+```
+<!-- xxx.hml -->
+<list class="list">
+  <list-item type="listItem" for="{{textList}}">
+    <text class="desc-text">{{$item.value}}</text>
+  </list-item>
+</list>
+```
+
+
+```
+/* xxx.css */
+.desc-text {
+  width: 683.3px;
+  font-size: 35.4px;
+}
+```
+
+
+```
+// xxx.js
+export default {
+  data: {
+    textList:  [{value: 'JS FA'}],
+  },
+}
+```
+
+To shorten the sample code, the list contains only one &lt;list-item&gt; component that holds only one &lt;text&gt; component. In practice, a &lt;list&gt; has multiple &lt;list-item&gt; components, and a &lt;list-item&gt; has multiple child components.
+
+
+## &lt;Tabs&gt;
+
+If your page needs to be dynamically loaded, use the &lt;tabs&gt; component. This component supports the change event, which is triggered after tab switching. A &lt;tabs&gt; component can hold only one &lt;tab-bar&gt; and one &lt;tab-content&gt;. The following is an example:
+
+
+```
+<!-- xxx.hml -->
+<tabs>
+  <tab-bar>
+    <text>Home</text>
+    <text>Index</text>
+    <text>Detail</text>
+  </tab-bar>
+  <tab-content>
+    <image src="{{homeImage}}"></image>
+    <image src="{{indexImage}}"></image>
+    <image src="{{detailImage}}"></image>
+  </tab-content>
+</tabs>
+```
+
+
+```
+// xxx.js
+export default {
+  data: {
+    homeImage: '/common/home.png',
+    indexImage: '/common/index.png',
+    detailImage: '/common/detail.png',
+  },
+}
+```
+
+The &lt;tab-content&gt; component is used to display the tab content, which vertically fills the remaining space of the &lt;tabs&gt; component by default. 

en/application-dev/device/ui/ui-js-building-ui-layout-image.md

+# Adding an Image
+
+
+Generally, the [<image>](../reference/arkui-js/js-components-basic-image.md)component is used to add images on a page. The method of using this component is similar to that of using the <text> component.
+
+
+To reference images via the <image> component, you must create the common directory under jsdefault, and then store the image files in the common directory. For details about the directory structure, see [Directory Structure](js-framework-file.md). The following sample code shows you how to add an image and set its style.
+
+```
+<!-- xxx.hml -->
+<image class="img" src="{{middleImage}}"></image>
+```
+
+```
+/* xxx.css */
+.img {  
+  margin-top: 30px;
+  margin-bottom: 30px;
+  height: 385px;
+}
+```
+
+```
+// xxx.js
+export default {
+  data: {
+    middleImage: '/common/ice.png',
+  },
+}
+```

en/application-dev/device/ui/ui-js-building-ui-layout-intro.md

+# Layout Description
+
+
+The baseline width for page design is 720 logical pixels. The display width of a page element depends on the ratio of the screen width to the baseline width.
+
+
+For example, when the width of a component is 100 px, its display width is converted as follows:
+
+
+On a screen with the width of 720 physical pixels, the display width is 100 physical pixels. On a screen with the width of 1440 physical pixels, the display width is 200 physical pixels.
+
+Basic page elements include title, text, and image areas. Each basic element may contain multiple sub-elements. You can add components, such as buttons, switches, and progress bars, to these elements and sub-elements as required. When setting the layout, you need to consider the following for each basic element:
+
+
+- Size and arrangement
+
+- Overlapping with other elements
+
+- Alignment, padding, and margin
+
+- Sub-elements and their positions
+
+- Container components and their types
+
+  You can disassemble elements on the page first and then implement them in sequence. This reduces visual confusion and logical conflicts caused by element nesting and improves code readability for easier modification. For example, as shown below, you disassemble the page elements and elements in the comment area.
+  figure1 Page layout
+
+  ![en-us_image_0000001222967792](figures/en-us_image_0000001222967792.png)
+
+  figure2 Layout of the comment area
+
+![en-us_image_0000001267767889](figures/en-us_image_0000001267767889.png)

en/application-dev/device/ui/ui-js-building-ui-layout-text.md

+# Adding Title and Paragraph Text
+
+
+The <text> component is most commonly used to display text in title and paragraph areas. You can set attributes and styles for a <text> component and add the text to be displayed between the <text> and </text> tags. For details about the attributes and styles, see [text](../reference/arkui-js/js-components-basic-text.md). The following is an example of adding title and paragraph text on a page:
+
+
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <text class="title-text">{{headTitle}}</text>
+  <text class="paragraph-text">{{paragraphFirst}}</text>
+  <text class="paragraph-text">{{paragraphSecond}}</text>
+</div>
+```
+
+
+
+```
+/* xxx.css */
+.container {
+  flex-direction: column;
+  margin-top: 20px;
+  margin-left: 30px;
+}
+.title-text {
+  color: #1a1a1a;
+  font-size: 50px;
+  margin-top: 40px;
+  margin-bottom: 20px;
+}
+.paragraph-text {
+  color: #000000;
+  font-size: 35px;
+  line-height: 60px;
+}
+```
+
+
+
+```
+// xxx.js
+export default {
+  data: {
+    headTitle: 'Capture the Beauty in This Moment',
+    paragraphFirst: 'Capture the beauty of light during the transition and fusion of ice and water. At the instant of movement and stillness, softness and rigidity, force and beauty, condensing moving moments.',
+    paragraphSecond: 'Reflecting the purity of nature, the innovative design upgrades your visual entertainment and ergonomic comfort. Effortlessly capture what you see and let it speak for what you feel.',
+  },
+}
+```

en/application-dev/device/ui/ui-js-building-ui-routes.md

+# Defining Page Routes
+
+
+An application generally consist of more than one page. For example, in a music application, a user taps a song on a music list page to jump to the playback page of the song. You need to link these pages through the page router to implement redirection as required.
+
+
+The page router finds the target page based on the page URI. The following describes how to implement redirection between two pages:
+
+
+1. In the “Project“ window of DevEco Studio, choose entry > src > mainjsdefault. Right-click the pages folder and choose NewJS Page from the shortcut menu to create the detail page.
+
+2. Call router.push() to navigate users to the detail page.
+
+3. Call router.back() to navigate users to the index page.
+
+
+## Building the Page Layout
+
+The index and detail pages each contains a <text> component that specifies the current page, and a <button> component that implements the switching between two pages. Example code in .hml files is as follows:
+
+
+```
+<!-- index.hml -->
+<div class="container">
+  <text class="title">This is the index page.</text>
+  <button type="capsule" value="Go to the second page" class="button" onclick="launch"></button>
+</div>
+```
+
+
+```
+<!-- detail.hml -->
+<div class="container">
+  <text class="title">This is the detail page.</text>
+  <button type="capsule" value="Go back" class="button" onclick="launch"></button>
+</div>
+```
+
+
+## Setting Page Styles
+
+Set styles for the index and detail pages. Center the &lt;text&gt; and &lt;button&gt; components and space the two components with 50 pixels. The CSS code for the two pages is as follows:
+
+
+```
+/* index.css */
+/* detail.css */
+.container {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.title {
+  font-size: 50px;
+  margin-bottom: 50px;
+}
+```
+
+
+## Implementing Redirection
+
+To make the launch method of the &lt;button&gt; component take effect, the redirection logic needs to be implemented in the .js file of the page. Call router.push() to add the page URI to the route stack, that is, to jump to the page specified by the URI. You need to import the router module before calling the router method. The sample code is as follows:
+
+
+```
+// index.js
+import router from '@system.router';
+export default {
+  launch() {
+    router.push ({
+      uri: 'pages/detail/detail',
+    });
+  },
+}
+```
+
+
+```
+// detail.js
+import router from '@system.router';
+export default {
+  launch() {
+    router.back();
+  },
+}
+```
+
+The figure below shows the effect.
+
+  figure1 Page routing
+
+  ![en-us_image_0000001222967784](figures/en-us_image_0000001222967784.png)

en/application-dev/device/ui/ui-js-component-tabs.md

+# <tabs> Development
+
+
+The <tabs> component is a common UI component for navigation. It allows quick access to different functions of an app. For details, see [tabs](../reference/arkui-js/js-components-container-tabs.md).
+
+
+## Creating Tabs
+
+Create a <tabs> component in the .hml file under pages/index.
+
+
+```
+<!-- index.hml -->
+<div class="container" >
+  <tabs>
+   <tab-bar>
+      <text>item1</text>
+      <text>item2</text>
+    </tab-bar>
+    <tab-content>
+      <div class="text">
+        <text>content1</text>
+      </div>
+      <div class="text">
+        <text>content2</text>
+      </div>
+    </tab-content>
+  </tabs>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #F1F3F5;
+}
+.text{
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+}
+```
+
+![en-us_image_0000001223287676](figures/en-us_image_0000001223287676.gif)
+
+
+## Setting the Tabs Orientation
+
+By default, the active tab of a &lt;tabs&gt; component is the one with the specified index. To show the &lt;tabs&gt; vertically, set the vertical attribute to true.
+
+
+```
+<!-- index.hml -->
+<div class="container" style="background-color:#F1F3F5;">
+  <tabs index="1"  vertical="true">
+    <tab-bar >
+      <text>item1</text>
+      <text style="margin-top: 50px;">item2</text>
+    </tab-bar>
+    <tab-content>
+      <div>
+        <image src="common/images/bg-tv.jpg" style="object-fit: contain;"> </image>
+      </div>
+      <div>
+        <image src="common/images/img1.jpg" style="object-fit: contain;"> </image>
+      </div>
+    </tab-content>
+  </tabs>
+</div>
+```
+
+![en-us_image_0000001222967756](figures/en-us_image_0000001222967756.gif)
+
+Set the mode attribute to enable the child components of the <tab-bar> to be evenly distributed. Set the scrollable attribute to disable scrolling of the <tab-content>.
+
+
+```
+<!-- index.hml -->
+<div class="container" style="background-color:#F1F3F5;">
+  <tabs style="margin-top: 30px;">
+    <tab-bar mode="fixed">
+      <text>item1</text>
+      <text>item2</text>
+    </tab-bar>
+    <tab-content scrollable="false">
+      <div>
+        <image src="common/images/bg-tv.jpg" style="object-fit: contain;"> </image>
+      </div>
+      <div>
+        <image src="common/images/img2.jpg" style="object-fit: contain;"> </image>
+      </div>
+    </tab-content>
+  </tabs>
+</div>
+```
+
+![en-us_image_0000001267647857](figures/en-us_image_0000001267647857.gif)
+
+
+## Setting the Style
+
+  Set the background color, border, and tab-content layout of the &lt;tabs&gt; component.
+
+```
+<!-- index.hml -->
+<div class="container">
+  <tabs class="tabs">
+    <tab-bar class="tabBar">
+      <text class="tabBarItem">item1</text>
+      <text class="tabBarItem">item2</text>
+    </tab-bar>
+    <tab-content class="tabContent">
+      <div class="tabContent">
+        <text>content1</text>
+      </div>
+      <div class="tabContent" >
+        <text>content2</text>
+      </div>
+    </tab-content>
+  </tabs>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container {
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+ background-color:#F1F3F5;
+}
+.tabs{
+  margin-top: 20px;
+ border: 1px solid #2262ef;
+  width: 99%;
+  padding: 10px;
+}
+.tabBar{
+  width: 100%;
+  border: 1px solid #78abec;
+}
+.tabContent{
+  width: 100%;
+  margin-top: 10px;
+  height: 300px;
+  color: blue;   
+  justify-content: center;  align-items: center;
+}
+```
+
+![en-us_image_0000001267767857](figures/en-us_image_0000001267767857.gif)
+
+
+## Displaying the Tab Index
+
+Add the change event for the &lt;tabs&gt; component to display the index of the current tab after tab switching.
+
+
+```
+<!-- index.hml -->
+<div class="container" style="background-color:#F1F3F5;">
+  <tabs class="tabs" onchange="tabChange">
+    <tab-bar class="tabBar">
+      <text class="tabBarItem">item1</text>
+      <text class="tabBarItem">item2</text>
+    </tab-bar>
+    <tab-content class="tabContent">
+      <div>
+        <image src="common/images/bg-tv.jpg" style="object-fit: contain;"> </image>
+      </div>
+      <div>
+        <image src="common/images/img1.jpg" style="object-fit: contain;"> </image>
+      </div>
+    </tab-content>
+  </tabs>
+</div>
+```
+
+
+```
+/* index.js */
+import prompt from '@system.prompt';
+export default {
+  tabChange(e){
+    prompt.showToast({
+      message: "Tab index: " + e.index
+    })
+  }
+}
+```
+
+![en-us_image_0000001222807772](figures/en-us_image_0000001222807772.gif)
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> - A &lt;tabs&gt; can wrap at most one [<tab-bar>](../reference/arkui-js/js-components-container-tab-bar.md) and at most one [<tab-content>](../reference/arkui-js/js-components-container-tab-content.md).
+
+
+## Example Scenario
+
+In this example, you can switch between tabs and the active tab has the title text in red with an underline below.
+
+Use the &lt;tabs&gt;, <tab-bar>, and <tab-content> components to implement tab switching. Then define the arrays and attributes. Add the change event to change the attribute values in the arrays so that the active tab has a different font color and an underline.
+
+
+```
+<!-- index.hml -->
+<div class="container">
+  <tabs onchange="changeTabactive">
+    <tab-content>
+      <div class="item-container" for="datas.list">
+        <div if="{{$item.title=='List1'?true:false}}">
+          <image src="common/images/bg-tv.jpg" style="object-fit: contain;"> </image>
+        </div>
+        <div if="{{$item.title=='List2'?true:false}}">
+          <image src="common/images/img1.jpg" style="object-fit: none;"> </image>
+        </div>
+        <div if="{{$item.title=='List3'?true:false}}">
+          <image src="common/images/img2.jpg" style="object-fit: contain;"> </image>
+        </div>
+      </div>
+    </tab-content>
+    <tab-bar class="tab_bar mytabs" mode="scrollable">
+      <div class="tab_item" for="datas.list">
+        <text style="color: {{$item.color}};">{{$item.title}}</text>
+        <div class="underline-show" if="{{$item.show}}"></div>
+        <div class="underline-hide" if="{{!$item.show}}"></div>
+      </div>
+    </tab-bar>
+  </tabs>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container{
+background-color:#F1F3F5;
+}
+.tab_bar {
+  width: 100%;
+}
+.tab_item {
+  flex-direction: column;
+  align-items: center;
+}
+.tab_item text {
+  font-size: 32px;
+}
+.item-container {
+  justify-content: center;
+  flex-direction: column;
+}
+.underline-show {
+  height: 2px;
+  width: 160px;
+  background-color: #FF4500;
+  margin-top: 7.5px;
+}
+.underline-hide {
+  height: 2px;
+  margin-top: 7.5px;
+  width: 160px;
+}
+```
+
+
+```
+/* index.js */
+import prompt from '@system.prompt';
+export default {
+  data() {
+    return {
+      datas: {
+        color_normal: '#878787',
+        color_active: '#ff4500',
+        show: true,
+        list: [{
+          i: 0,
+          color: '#ff4500',
+          show: true,
+          title: 'List1'
+        }, {
+          i: 1,
+          color: '#878787',
+          show: false,
+          title: 'List2'
+        }, {
+           i: 2,
+           color: '#878787',
+           show: false,
+           title: 'List3'
+        }]
+      }
+    }
+  },
+  changeTabactive (e) {
+    for (let i = 0; i < this.datas.list.length; i++) {
+      let element = this.datas.list[i];
+      element.show = false;
+      element.color = this.datas.color_normal;
+      if (i === e.index) {
+        element.show = true;
+        element.color = this.datas.color_active;
+      }
+    }
+  }
+}
+```
+
+![en-us_image_0000001267607885](figures/en-us_image_0000001267607885.gif)

en/application-dev/device/ui/ui-js-components-button.md

+# <button> Development
+
+
+The<button>component can be used to set a capsule, circle, text, arc, or download button. For details, see [button](../reference/arkui-js/js-components-basic-button.md).
+
+
+## Creating a <button> Component
+
+Create a <button> component in the .hml file under pages/index.
+
+
+```
+<!-- xxx.hml -->
+<div class="container">       
+  <button  type="capsule" value="Capsule button"></button>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #F1F3F5;
+}
+```
+
+![en-us_image_0000001267887821](figures/en-us_image_0000001267887821.png)
+
+
+## Setting the Button Type
+
+Set the type attribute of the &lt;input&gt; component to button, date, or any of the supported values.
+
+```
+<!-- xxx.hml -->
+<div class="container">    
+  <button class="circle" type="circle" >+</button>
+  <button class="text" type="text"> button</button>
+</div>
+```
+
+```
+/* xxx.css */
+.container {  
+  background-color: #F1F3F5;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.circle {
+  font-size: 120px;
+  background-color: blue;
+  radius: 72px;
+}
+.text {
+  margin-top: 30px;
+  text-color: white;
+  font-size: 30px;
+  font-style: normal;
+  background-color: blue;
+  width: 50%;
+  height: 100px;
+}
+```
+
+
+![en-us_image_0000001222967744](figures/en-us_image_0000001222967744.png)
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> - For capsule buttons, border-related styles are not supported.
+> 
+> - For circle buttons, text-related styles are not supported.
+> 
+> - For text buttons, the text size is adaptive, and radius, width, and height cannot be set. The background-color style is not supported when the background is completely transparent.
+> 
+> - If the icon used by the&lt;button&gt;component is from the cloud, you must declare the ohos.permission.INTERNET permission in the config.json file under the resources folder.
+
+
+Sample code for declaring the ohos.permission.INTERNET permission in the config.json file under the resources folder:
+
+```
+<!-- config.json -->
+"module": {
+  "reqPermissions": [{
+    "name": "ohos.permission.INTERNET"
+  }],
+}
+```
+
+
+## Showing the Download Progress
+
+Add the progress method to the&lt;button&gt;component to display the download progress in real time.
+
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <button class="button download" type="download" id="download-btn" onclick="setProgress">{{downloadText}}</button>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container { 
+  background-color: #F1F3F5;  
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.download {    
+  width: 280px;
+  text-color: white;
+  background-color: #007dff;
+}
+```
+
+
+```
+// xxx.js
+import prompt from '@system.prompt';
+export default {
+  data: {
+    percent: 0,
+    downloadText: "Download",
+    isPaused: true,
+    intervalId : null,
+  },
+  star(){
+    this.intervalId = setInterval(()=>{
+      if(this.percent <100){
+        this.percent += 1;
+        this.downloadText = this.percent+ "%";
+       } else{
+         prompt.showToast({
+            message: "Download succeeded."
+         })
+         this.paused()
+         this.downloadText = "Download";
+         this.percent = 0;
+         this.isPaused = true;
+       }
+    },100)
+  },
+  paused(){
+    clearInterval(this.intervalId);
+    this.intervalId = null;
+  },
+ setProgress(e) {
+    if(this.isPaused){
+      prompt.showToast({
+        message: "Download started"
+      })
+      this.star();
+      this.isPaused = false;
+    }else{
+      prompt.showToast({
+        message: "Paused."
+      })
+      this.paused();
+      this.isPaused = true;
+    }
+  }
+}
+```
+
+![en-us_image_0000001223287652](figures/en-us_image_0000001223287652.gif)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+>
+> The setProgress method supports only buttons of the download type.
+
+
+## Example Scenario
+
+Switch between the button types for different types of text.
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <div class="input-item">
+    <input class="input-text" id="change" type="{{mytype}}"  placeholder="{{myholder}}" 
+      style="background-color:{{mystyle1}};
+      placeholder-color:{{mystyle2}};flex-grow:{{myflex}};"name="{{myname}}" value="{{myvalue}}"></input>
+  </div>
+  <div class="input-item">
+    <div class="doc-row">
+      <input type="button" class="select-button color-3" value="text" onclick="changetype3"></input>
+      <input type="button" class="select-button color-3" value="data" onclick="changetype4"></input>
+    </div>
+  </div>
+</div>
+```
+
+```
+/* xxx.css */
+.container {
+  flex-direction: column;
+  align-items: center;
+  background-color: #F1F3F5;
+}
+.input-item {
+  margin-bottom: 80px;
+  flex-direction: column;
+}
+.doc-row {
+  justify-content: center;
+  margin-left: 30px;
+  margin-right: 30px;
+  justify-content: space-around;
+}
+.input-text {
+  height: 80px;
+  line-height: 80px;
+  padding-left: 30px;
+  padding-right: 30px;
+  margin-left: 30px;
+  margin-right: 30px;
+  margin-top:100px;
+  border: 3px solid;
+  border-color: #999999;
+  font-size: 30px;
+  background-color: #ffffff;
+  font-weight: 400;
+}
+.select-button {
+  width: 35%;
+  text-align: center;
+  height: 70px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  margin-top: 30px;
+  font-size: 30px;
+  color: #ffffff;
+}
+.color-3 {
+  background-color: #0598db;;
+}
+```
+
+```
+// xxx.js
+export default {
+  data: {
+    myflex: '',
+    myholder: 'Enter text.',
+    myname: '',
+    mystyle1: "#ffffff",
+    mystyle2: "#ff0000",
+    mytype: 'text',
+    myvalue: '',
+  },
+  onInit() {
+  },
+  changetype3() {
+    this.myflex = '';
+    this.myholder = 'Enter text.';
+    this.myname = '';
+    this.mystyle1 = "#ffffff";
+    this.mystyle2 = "#FF0000";
+    this.mytype = 'text';
+    this.myvalue = '';
+  },
+  changetype4() {
+    this.myflex = '';
+    this.myholder = 'Enter a date.';
+    this.myname = '';
+    this.mystyle1 = "#ffffff";
+    this.mystyle2 = "#FF0000";
+    this.mytype = 'date';
+    this.myvalue = '';
+  },
+}
+```
+
+
+![en-us_image_0000001222967740](figures/en-us_image_0000001222967740.gif)

en/application-dev/device/ui/ui-js-components-dialog.md

+# <dialog> Development
+
+
+The <dialog> component is custom pop-up container for showing critical information or calling for an action. For details, see [dialog](../reference/arkui-js/js-components-container-dialog.md).
+
+
+## Creating a <dialog> Component
+
+  Create a <dialog> component in the .hml file under pages/index and add <button> components to trigger the <dialog>. The <dialog> component supports only the width, height, margin, margin-[left|top|right|bottom], and margin-[start|end] styles.
+
+```
+<!-- xxx.hml -->
+<div class="doc-page">
+  <dialog class="dialogClass" id="dialogId"><div class="content">
+      <text>this is a dialog</text>
+    </div>
+  </dialog>
+  <button value="click me" onclick="openDialog"></button>
+</div>
+```
+
+
+```
+/* xxx.css */
+.doc-page {
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #F1F3F5;
+}
+.dialogClass{
+  width: 80%;
+  height: 250px;
+  margin-start: 1%;
+}
+.content{
+  width: 100%;
+  height: 250px;
+  justify-content: center;
+  background-color: #e8ebec;
+  border-radius: 20px;
+}
+text{
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}
+button{
+  width: 70%;
+  height: 60px;
+}
+```
+
+
+```
+/* xxx.js */
+export default {
+  //Touch to open the dialog box.
+  openDialog(){
+    this.$element('dialogId').show()
+  },
+}
+```
+
+![en-us_image_0000001267767893](figures/en-us_image_0000001267767893.gif)
+
+
+## Setting Dialog Box Response
+
+Add a cancel event that is triggered when a user touches a non-dialog area to cancel the pop-up dialog box. Add the show and close methods to display and close the dialog box, respectively.
+
+```
+<!-- xxx.hml -->
+<div class="doc-page">
+  <dialog class="dialogClass" id="dialogId">
+    <div class="dialogDiv">
+      <text>dialog</text>
+      <button value="confirm" onclick="confirmClick"></button>
+    </div>
+  </dialog>
+  <button value="click me" onclick="openDialog"></button>
+</div>
+```
+
+```
+/* xxx.css */
+.doc-page {
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #F1F3F5;
+}
+.dialogClass{
+  width: 80%;
+  height: 300px;
+  margin-start: 1%;
+}
+.dialogDiv{
+  width: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-self: center;
+}
+text{
+  height: 100px;
+  align-self: center;
+}
+button{
+  align-self: center;
+  margin-top: 20px;
+  width: 60%;
+  height: 80px;
+}
+```
+
+```
+/* xxx.js */
+import prompt from '@system.prompt';
+export default {
+  openDialog(){
+    this.$element('dialogId').show()
+  },
+  confirmClick(e) {
+    this.$element('dialogId').close()
+    prompt.showToast({
+      message: 'Confirmed.'
+    })
+  },
+}
+```
+
+
+![en-us_image_0000001223287720](figures/en-us_image_0000001223287720.gif)
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> - This component supports only one child component.
+> 
+> - Attributes and styles of a &lt;dialog&gt; component cannot be dynamically updated.
+> 
+> - The &lt;dialog&gt; component does not support the focusable and click-effect attributes.
+
+
+## Example Scenario
+
+
+Use the &lt;dialog&gt; component to implement a schedule. When the dialog box is open, use the [&lt;textarea&gt;](../reference/arkui-js/js-components-basic-textarea.md) component to add an event and touch the OK button to obtain the current time and save the input text. The events in the calendar are displayed in a list.
+
+```
+<!-- xxx.hml -->
+<div class="doc-page">
+  <text style="margin-top: 60px;margin-left: 30px;">
+    <span>{{date}} events</span>
+  </text>
+  <div class="btndiv">
+    <button type="circle" class="btn" onclick="addschedule">+</button>
+  </div>
+<!--  for Render events data  -->
+  <list style="width: 100%;">
+    <list-item type="item" for="schedulelist" style="width:100%;height: 200px;">
+      <div class="schedulediv">
+        <text class="text1">{{date}}  event</text>
+        <text class="text2">{{$item.schedule}}</text>
+      </div>
+    </list-item>
+  </list>
+  <dialog id="datedialog" oncancel="canceldialog" >
+    <div class="dialogdiv">
+      <div class="innertxt">
+        <text class="text3">{{date}}</text>
+        <text class="text4">New event</text>
+      </div>
+      <textarea placeholder="Event information" onchange="getschedule" class="area" extend="true"></textarea>
+      <div class="innerbtn">
+        <button type="text" value="Cancel" onclick="cancelschedule" class="btntxt"></button>
+        <button type="text" value="OK" onclick="setschedule" class="btntxt"></button>
+      </div>
+    </div>
+  </dialog>
+</div>
+```
+
+```
+/* xxx.css */
+.doc-page {
+  flex-direction: column;
+  background-color: #F1F3F5;
+}
+.btndiv {
+  width: 100%;
+  height: 200px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.btn {
+  radius:60px;
+  font-size: 100px;
+  background-color: #1E90FF;
+}
+.schedulediv {
+  width: 100%;
+  height: 200px;
+  flex-direction: column;
+  justify-content: space-around;
+  padding-left: 55px;
+}
+.text1 {
+  color: #000000;
+  font-weight: bold;
+  font-size: 39px;
+}
+.text2 {
+  color: #a9a9a9;
+  font-size: 30px;
+}
+.dialogdiv {
+  flex-direction: column;
+  align-items: center;
+}
+.innertxt {
+  width: 320px;
+  height: 160px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+}
+.text3 {
+  font-family: serif;
+  color: #1E90FF;
+  font-size: 38px;
+}
+.text4 {
+  color: #a9a9a9;
+  font-size: 33px;
+}
+.area {
+  width: 320px;
+  border-bottom: 1px solid #1E90FF;
+}
+.innerbtn {
+  width: 320px;
+  height: 120px;
+  justify-content: space-around;
+}
+.btntxt {
+  text-color: #1E90FF;
+}
+```
+
+```
+/* xxx.js */
+var info = null;
+import prompt from '@system.prompt';
+import router from '@system.router';
+export default {
+  data: {
+    curYear:'',
+    curMonth:'',
+    curDay:'',
+    date:'',
+    schedule:'',
+    schedulelist:[]
+  },
+  onInit() {
+    // Obtain the current date. 
+    var date = new Date();
+    this.curYear = date.getFullYear();
+    this.curMonth = date.getMonth() + 1;
+    this.curDay = date.getDate();
+    this.date = this.curYear + '-' + this.curMonth + '-' + this.curDay;
+    this.schedulelist = []
+  },
+  addschedule(e) {
+    this.$element('datedialog').show()
+  },
+  canceldialog(e) {
+    prompt.showToast({
+      message: 'Event setting canceled.'
+    })
+  },
+  getschedule(e) {
+    info = e.value
+  },
+  cancelschedule(e) {
+    this.$element('datedialog').close()
+    prompt.showToast({
+      message: 'Event setting canceled.'
+    })
+  },
+//    Touch OK to save the data.
+  setschedule(e) {
+    if (e.text === '') {
+      this.schedule = info
+    } else {
+      this.schedule = info
+      var addItem =  {schedule: this.schedule,}
+      this.schedulelist.push(addItem)
+    }
+    this.$element('datedialog').close()
+  }
+}
+```
+
+
+![en-us_image_0000001223127756](figures/en-us_image_0000001223127756.gif)

en/application-dev/device/ui/ui-js-components-form.md

+# <form> Development
+
+
+The <form> component allows the content in [<input>](../reference/arkui-js/js-components-basic-input.md)components to be submitted and reset. For details, see [form](../reference/arkui-js/js-components-container-form.md).
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> This component is supported since API version 6.
+
+
+## Creating a <form> Component
+
+  Create a <form> component in the .hml file under pages/index.
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <form>  <input type="text" style="width:80%"></input>
+  </form>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #F1F3F5;
+}
+```
+
+![en-us_image_0000001267887873](figures/en-us_image_0000001267887873.png)
+
+
+## Zooming In or Out on a Form
+
+  To implement the zoom effect after a form is clicked, add the click-effect attribute to the &lt;form&gt; component. For values of click-effect, see [Universal Attributes](../reference/arkui-js/js-components-common-attributes.md).
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <form  id="formId" class="formClass" click-effect="spring-large">
+    <input type="text"></input>  
+  </form>
+</div>
+```
+
+
+## Setting the Form Style
+
+
+Add the background-color and border attributes.
+
+```
+/* xxx.css */
+.container {
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #F1F3F5;
+}
+.formClass{
+  width: 80%;
+  padding: 10px;
+  border: 1px solid #c3d3e7;
+}
+```
+
+
+![en-us_image_0000001267607913](figures/en-us_image_0000001267607913.gif)
+
+
+## Adding Response Events
+
+  To submit or reset a form, add the submit and reset events.
+
+```
+<!-- xxx.hml -->
+<div class="container" style="background-color:#F1F3F5;">
+  <form onsubmit='onSubmit' onreset='onReset' style="justify-content: center; align-items: center;text-align: center;">
+    <div style="flex-direction: column;justify-content: center;align-self: center;">
+      <div style="justify-content: center; align-items: center;">
+        <label>Option 1</label>
+        <input type='radio' name='radioGroup' value='radio1'></input>
+        <label>Option 2</label>
+        <input type='radio' name='radioGroup' value='radio2'></input>
+      </div>
+      <div style="margin-top: 30px;justify-content: center; align-items: center;">
+        <input type="submit" value="Submit" style="width:100px; margin-right:20px;" ></input>
+        <input type="reset" value="Reset" style="width:100px;"></input>
+      </div>
+    </div> 
+  </form>
+</div>
+```
+
+
+```
+/* xxx.js */
+import prompt from '@system.prompt';
+export default{
+  onSubmit(result) {
+    prompt.showToast({
+      message: result.value.radioGroup
+    })
+  },
+  onReset() {
+    prompt.showToast({
+      message: 'Reset All'
+    })
+  }
+}
+```
+
+
+![en-us_image_0000001267767885](figures/en-us_image_0000001267767885.gif)
+
+
+## Example Scenario
+
+Select an option and submit or reset the form data.
+
+Create [&lt;input&gt;](../reference/arkui-js/js-components-basic-input.md) (en-us_topic_0000001173324647.xml) components, set their type attribute to checkbox and radio, and use the onsubmit and onreset events of the &lt;form&gt; component to submit and reset the form data.
+
+
+```
+<!-- xxx.hml -->
+<div class="container">
+   <form onsubmit="formSubmit" onreset="formReset">
+ <text style="font-size: 30px; margin-bottom: 20px; margin-top: 100px;">
+      <span > Form </span>
+  </text>
+    <div style="flex-direction: column;width: 90%;padding: 30px 0px;">
+     <text class="txt">Select 1 or more options</text>
+      <div style="width: 90%;height: 150px;align-items: center;justify-content: space-around;">
+        <label target="checkbox1">Option 1</label>
+        <input id="checkbox1" type="checkbox" name="checkbox1"></input>
+        <label target="checkbox2">Option 2</label>
+        <input id="checkbox2" type="checkbox" name="checkbox2"></input>
+       </div>
+       <divider style="margin: 20px 0px;color: pink;height: 5px;"></divider>
+       <text class="txt">Select 1 option</text>
+       <div style="width: 90%;height: 150px;align-items: center;justify-content: space-around;">
+         <label target="radio1">Option 1</label>
+         <input id="radio1" type="radio" name="myradio"></input>
+         <label target="radio2">Option 2</label>
+         <input id="radio2" type="radio" name="myradio"></input>
+       </div>
+       <divider style="margin: 20px 0px;color: pink;height: 5px;"></divider>
+       <text class="txt">Text box</text>
+       <input type="text" placeholder="Enter content." style="margin-top: 50px;"></input>
+       <div style="width: 90%;align-items: center;justify-content: space-between;margin: 40px;">
+         <input type="submit">Submit</input>
+         <input type="reset">Reset</input>
+       </div>
+    </div>
+  </form>
+</div>
+```
+
+
+```
+/* index.css */
+.container {
+  flex-direction:column;
+  align-items:center;
+  background-color:#F1F3F5;
+}
+.txt {
+  font-size:33px;
+  font-weight:bold;
+  color:darkgray;
+}
+label{
+  font-size: 20px;
+}
+```
+
+
+```
+/* xxx.js */
+import prompt from '@system.prompt';
+export default {
+  formSubmit() {
+    prompt.showToast({
+      message: 'Submitted.'
+    })
+  },
+  formReset() {
+    prompt.showToast({
+      message: 'Reset.'
+    })
+  }
+}
+```
+
+![en-us_image_0000001222967788](figures/en-us_image_0000001222967788.gif)

en/application-dev/device/ui/ui-js-components-images.md

+# <image> Development
+
+
+The <image> component is used to render and display images. For details, see [image](../reference/arkui-js/js-components-basic-image.md).
+
+
+## Creating an <image> Component
+
+  Create an <image> component in the .hml file under pages/index.
+
+```
+<!-- index.hml -->
+<div class="container">
+  <image src="common/images/bg-tv.jpg"> </image>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #F1F3F5;
+}
+```
+
+![en-us_image_0000001223127736](figures/en-us_image_0000001223127736.png)
+
+
+## Setting the Image Style
+
+Set the width, height, and object-fit attributes to define the width, height, and scale type of an image.
+
+```
+<!-- index.hml -->
+<div class="container">
+  <image src="common/images/bg-tv.jpg"> </image>
+</div>
+```
+
+```
+/* xxx.css */
+.container {
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+background-color:#F1F3F5;
+}
+image{
+  width: 80%;  height: 500px;
+  border: 5px solid saddlebrown;
+  border-radius: 20px;
+  object-fit: contain;
+  match-text-direction:true;
+
+}
+```
+
+
+![en-us_image_0000001222807796](figures/en-us_image_0000001222807796.png)
+
+
+## Display Multiple Images
+
+  Define a for loop to display multiple images cyclically. Set option to specify the image scale style. For details about the scale styles, see the description of object-fit.
+
+```
+<!-- index.hml -->
+<div class="page-container">
+  <list>
+    <list-item class="item-container" for="{{list}}">
+      <image class="testimage" src="{{url[$idx]}}" style="object-fit: {{fit}};"></image>
+      <div class="text-container">
+        <text style="font-size: 32px;color:#7b68ee;">image{{$idx}}</text>
+        <text style="font-size: 23px;color: orange;font-style: italic;">content</text>
+      </div>
+    </list-item>
+  </list>
+  <div style="width: 100%;height:100px;justify-content: center;margin-top: 100px;flex-shrink: 0;">
+    <select id="slt2" style="border: 3px solid orange;color: orange;font-size: 40px;width:300px;height:160px;" onchange="setfit">
+      <option for="{{fit_list}}" value="{{$item}}" style="font-size: 36px;">{{$item}}</option>
+    </select>
+  </div>
+</div>
+```
+
+
+```
+/* xxx.css */
+.page-container {
+  flex-direction:column;
+  background-color:#F1F3F5;
+}
+.text-container {
+  width: 300px;
+  flex-direction: column;
+  justify-content: center;
+}
+.item-container {
+  flex-direction: row;
+  align-items: center;
+  justify-content:center;
+  margin-top:200px;
+}
+.testimage {
+  width: 175px;
+  height: 220px;
+  border: 5px solid #add8e6;
+  padding: 5px 5px 5px 5px;
+  margin: 5px 5px 5px 5px;
+}
+.testicon {
+  width: 50px;
+  height: 50px;
+  margin-left: 150px;
+  border-radius: 25px;
+  background-color: orange;
+}
+```
+
+
+```
+/* index.js */
+export default {
+  data: {
+    url:['common/images/bg-tv.jpg','common/images/img2.jpg'],
+    list:[0,1],
+    fit:'cover',
+    fit_list:['cover','contain','fill','none','scale-down']
+  },
+  setfit(e) {
+    this.fit = e.newValue
+  }
+}
+```
+
+
+![en-us_image_0000001267767873](figures/en-us_image_0000001267767873.gif)
+
+
+## Loading Images
+
+When an image is successfully loaded, the complete event is triggered, and the loaded image is returned. If an exception occurs during image loading, the error event is triggered, and the image loading failure is printed.
+
+
+```
+<!-- index.hml -->
+<div class="container" >
+  <div>
+    <image src="common/images/bg-tv.jpg" oncomplete="imageComplete(1)" onerror="imageError(1)"> </image>
+  </div>
+  <div>
+    <image src="common/images/bg-tv1.jpg" oncomplete="imageComplete(2)" onerror="imageError(2)"> </image>
+  </div>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container{
+  flex-direction: column;
+  justify-content: center;
+  align-self: center;
+  background-color: #F1F3F5;
+}
+.container div{
+  margin-left: 10%;
+  width: 80%;
+  height: 300px;
+  margin-bottom: 40px;
+}
+```
+
+
+```
+/* index.js */
+import prompt from '@system.prompt';
+export default {
+  imageComplete(i,e){
+    prompt.showToast({
+      message: "Image "+i+"'s width"+ e.width+"----Image "+i+"'s height"+e.height,
+      duration: 3000,
+    })
+  },
+  imageError(i,e){
+    setTimeout(()=>{
+      prompt.showToast({
+        message: "Failed to load image "+i+".",
+        duration: 3000,
+      })
+    },3000)
+  }
+}
+```
+
+![en-us_image_0000001267887865](figures/en-us_image_0000001267887865.gif)
+
+
+## Example Scenario
+
+  In this example you touch and hold an image to gradually hide it. After the image is completely hidden, it will show in its original setting. Set a setInterval timer to change the image opacity at a specified interval so that it is hidden gradually. When the opacity changes to 0, the timer is cleared and the opacity is set to 1.
+
+```
+<!-- index.hml -->
+<div class="page-container">
+  <div class="content">
+    <div class="image-container">
+      <image class="testimage" src="{{testuri}}" style="display:{{displaytype}};opacity:{{imageopacity}};" onclick="changedisplaytype" onlongpress="changeopacity"> </image>
+    </div>
+    <div class="text-container">
+      <text style="font-size: 37px;font-weight:bold;color:orange;text-align: center;width: 100%;">Touch and hold the image</text>
+    </div>
+  </div>
+</div>
+```
+
+
+```
+/* xxx.css */
+.page-container {
+  flex-direction:column;
+  align-self: center;
+  justify-content: center;
+  background-color:#F1F3F5;
+  background-color: #F1F3F5;
+}
+.content{
+  flex-direction:column;
+}
+.image-container {
+  width: 100%;
+  height: 300px;
+  align-items: center;
+  justify-content: center;
+}
+.text-container {
+  margin-top:50px;
+  width: 100%;
+  height: 60px;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.testimage {
+  width: 100%;  height: 400px;   object-fit: scale-down;  border-radius: 20px;}
+```
+
+
+```
+/* index.js */
+import prompt from '@system.prompt';
+export default {
+  data: {
+    testuri: 'common/images/bg-tv.jpg',
+    imageopacity:1,
+    timer: null
+  },
+  changeopacity: function () {
+    prompt.showToast({
+      message: 'Touch and hold the image.'
+    })
+    var opval = this.imageopacity * 20
+    clearInterval(this.timer);
+    this.timer = setInterval(()=>{
+      opval--;
+      this.imageopacity = opval / 20
+      if (opval===0) {
+        clearInterval(this.timer)
+        this.imageopacity = 1
+      }
+    },100);
+  }
+}
+```
+
+![en-us_image_0000001267607905](figures/en-us_image_0000001267607905.gif)

en/application-dev/device/ui/ui-js-components-input.md

+# <input> Development
+
+
+The <input> component provides an interactive way to receive user input of various types, including date, checkbox, and button. For details, see [input](../reference/arkui-js/js-components-basic-input.md).
+
+
+## Creating an <input> Component
+
+Create an <input> component in the .hml file under pages/index.
+
+
+```
+<!-- xxx.hml -->
+<div class="container">       
+  <input type="text">             Please enter the content  </input>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #F1F3F5;
+}
+```
+
+![en-us_image_0000001222807768](figures/en-us_image_0000001222807768.png)
+
+
+## Setting the Input Type
+
+Set the type attribute of the <input> component to button, date, or any of the supported values.
+
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <div class="div-button">
+    <dialog class="dialogClass" id="dialogId">
+      <div class="content">
+        <text>this is a dialog</text>
+      </div>
+    </dialog>
+    <input class="button" type="button" value="click" onclick="btnclick"></input>
+  </div>
+  <div class="content">
+    <input onchange="checkboxOnChange" checked="true" type="checkbox"></input>
+  </div>
+  <div class="content">
+    <input type="date" class="flex" placeholder="Enter data"></input>
+  </div>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container {
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  background-color: #F1F3F5 ;
+}
+.div-button {
+  flex-direction: column;
+  align-items: center;
+}
+.dialogClass{
+  width:80%;
+  height: 200px;
+}
+.button {
+  margin-top: 30px;
+  width: 50%;
+}
+.content{
+  width: 90%;
+  height: 150px;
+  align-items: center;
+  justify-content: center;
+}
+.flex {
+  width: 80%;
+  margin-bottom:40px;
+}
+```
+
+
+```
+// xxx.js
+export default {
+  btnclick(){
+    this.$element('dialogId').show()
+  },
+}
+```
+
+
+![en-us_image_0000001223287672](figures/en-us_image_0000001223287672.gif)
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> - For wearables, the input type can only be button, radio, or checkbox.
+> 
+> - The settings of checked take effect only when the input type is set to checkbox or radio. The default value of checked is false.
+
+
+## Event Binding
+
+  Add the search and translate events to the <input> component.
+
+```
+<!-- xxx.hml -->
+<div class="content">
+  <text style="margin-left: -7px;">
+    <span>Enter text and then touch and hold what you've entered</span>
+  </text>
+  <input class="input" type="text" onsearch="search" placeholder="search"> </input>
+  <input class="input" type="text" ontranslate="translate" placeholder="translate"> </input>
+</div>
+```
+
+
+```
+/* xxx.css */
+.content {
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #F1F3F5;
+}
+.input {
+  margin-top: 50px;
+  width: 60%;
+  placeholder-color: gray;
+}
+text{
+  width:100%;
+  font-size:25px;
+  text-align:center;
+}
+```
+
+
+```
+// xxx.js
+import prompt from '@system.prompt'
+export default {
+  search(e){
+    prompt.showToast({
+      message:  e.value,
+      duration: 3000,
+    });
+  },
+  translate(e){
+    prompt.showToast({
+      message:  e.value,
+      duration: 3000,
+    });
+  }
+}
+```
+
+![en-us_image_0000001267647853](figures/en-us_image_0000001267647853.gif)
+
+
+## Setting the Input Error Message
+
+Add the showError method to the <input> component to display an error message in the event of incorrect input.
+
+
+```
+<!-- xxx.hml -->
+<div class="content">
+  <input id="input" class="input" type="text"  maxlength="20" placeholder="Please input text" onchange="change">
+  </input>
+  <input class="button" type="button" value="Submit" onclick="buttonClick"></input>
+</div>
+```
+
+
+```
+/* xxx.css */
+.content {
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #F1F3F5;
+}
+.input {
+  width: 80%;
+  placeholder-color: gray;
+}
+.button {
+  width: 30%;
+  margin-top: 50px;
+}
+```
+
+
+```
+// xxx.js
+import prompt from '@system.prompt' 
+ export default { 
+   data:{ 
+     value:'', 
+   }, 
+   change(e){ 
+     this.value = e.value; 
+     prompt.showToast({ 
+     message: "value: " + this.value, 
+       duration: 3000, 
+      }); 
+   }, 
+   buttonClick(e){ 
+     if(this.value.length > 6){ 
+       this.$element("input").showError({        error:  'Up to 6 characters are allowed.'       }); 
+      }else if(this.value.length == 0){ 
+        this.$element("input").showError({         error:this.value + 'This field cannot be left empty.'       }); 
+      }else{ 
+        prompt.showToast({ 
+          message: "success " 
+        }); 
+      } 
+   }, 
+ }
+```
+
+![en-us_image_0000001223127708](figures/en-us_image_0000001223127708.gif)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> - This method is available when the input type is set to text, email, date, time, number, or password.
+
+
+## Example Scenario
+
+
+Enter information by using the <input> component of the type that suits your needs.
+
+
+
+```
+<!-- xxx.hml -->
+<div class="container">    
+  <div class="label-item"> 
+    <label>memorandum</label>   
+  </div>    
+  <div class="label-item">        
+    <label class="lab" target="input1">content:</label>        
+    <input class="flex" id="input1" placeholder="Enter content" />    
+  </div>    
+  <div class="label-item">        
+    <label class="lab" target="input3">date:</label>        
+    <input class="flex" id="input3" type="date" placeholder="Enter data" />    
+  </div>    
+  <div class="label-item">        
+    <label class="lab" target="input4">time:</label>        
+    <input class="flex" id="input4" type="time" placeholder="Enter time" />    
+  </div>   
+  <div class="label-item">        
+    <label class="lab" target="checkbox1">Complete:</label>        
+    <input class="flex" type="checkbox" id="checkbox1" style="width: 100px;height: 100px;" />    
+  </div>    
+  <div class="label-item">        
+    <input class="flex" type="button" id="button" value="save" onclick="btnclick"/>    
+  </div>
+</div>
+```
+
+
+
+```
+/* xxx.css */
+.container { 
+  flex-direction: column;
+  background-color: #F1F3F5;
+}
+.label-item {   
+  align-items: center;
+  border-bottom-width: 1px;border-color: #dddddd;
+}
+.lab {    
+  width: 400px;}
+label {    
+  padding: 30px;
+  font-size: 30px;      
+  width: 320px;
+  font-family: serif;
+  color: #9370d8;
+  font-weight: bold;
+}
+.flex {    
+  flex: 1;
+}
+.textareaPadding {    
+  padding-left: 100px;
+}
+```
+
+
+
+```
+// xxx.js
+import prompt from '@system.prompt';
+export default {    
+  data: {    
+  },    
+  onInit() { 
+  },   
+  btnclick(e) {        
+    prompt.showToast({            
+      message:'Saved successfully!'        
+    })    
+  }
+}     
+```
+
+
+![en-us_image_0000001222807760](figures/en-us_image_0000001222807760.gif)

en/application-dev/device/ui/ui-js-components-list.md

+# <list> Development
+
+
+The <list> component provides a list container that presents a series of list items arranged in a column with the same width. Lists can be used for presenting the same type of data in a multiple and coherent row style. For details, see [list](../reference/arkui-js/js-components-container-list.md).
+
+
+## Creating a <list> Component
+
+Create a <list> component in the .hml file under pages/index.
+
+
+```
+<!-- index.hml -->
+<div class="container"> 
+ <list>    <list-item class="listItem"></list-item>
+   <list-item class="listItem"></list-item>
+   <list-item class="listItem"></list-item>
+   <list-item class="listItem"></list-item>
+ </list>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container {
+  flex-direction: column;
+  align-items: center;
+  background-color: #F1F3F5;
+}
+.listItem{
+  height: 20%;
+  background-color:#d2e0e0;
+  margin-top: 20px;
+}
+```
+
+![en-us_image_0000001223287680](figures/en-us_image_0000001223287680.png)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> - &lt;list-item-group&gt; is a child component of the &lt;list&gt; component and is used to group items in a list. It can have a &lt;list-item&gt; nested inside, but not &lt;list&gt;.
+> 
+> - &lt;list-item&gt; is a child component of the &lt;list&gt; component and is used to display items in a list.
+
+
+## Adding a Scrollbar
+
+To display a scrollbar on the right side of the screen, set scrollbar to on. The side scrollbar can be used to scroll a long list or the screen up or down.
+
+
+```
+<!-- index.hml -->
+<div class="container">
+  <list class="listCss" scrollbar="on" >
+    <list-item class="listItem"></list-item>
+    <list-item class="listItem"></list-item>
+    <list-item class="listItem"></list-item>
+    <list-item class="listItem"></list-item>
+    <list-item class="listItem"></list-item>
+    <list-item class="listItem"></list-item>
+ </list>
+</div> 
+```
+
+
+```
+/* index.css */
+.container {
+  flex-direction: column;
+  background-color: #F1F3F5;
+}
+.listItem{
+  height: 20%;
+  background-color:#d2e0e0;
+  margin-top: 20px;
+}
+.listCss{
+  height: 100%;
+  scrollbar-color: #8e8b8b;
+  scrollbar-width: 50px;
+}
+```
+
+![en-us_image_0000001223287684](figures/en-us_image_0000001223287684.gif)
+
+
+## Adding a Side Index Bar
+
+Set a custom indexer component to add an index bar at the right boundary of a list. By default, an alphabetical indexer is used.
+
+
+```
+<!-- index.hml -->
+<div class="container">   
+  <list class="listCss"  indexer="{{['#','1','2','3','4','5','6','7','8']}}" >  
+    <list-item class="listItem"  section="#" ></list-item>   
+  </list>
+</div>
+```
+
+
+```
+/* index.css */
+.container{
+  flex-direction: column;
+  background-color: #F1F3F5;
+ } 
+.listCss{
+  height: 100%;    
+  flex-direction: column;
+  columns: 1
+}
+```
+
+![en-us_image_0000001223127716](figures/en-us_image_0000001223127716.png)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> - This indexer attribute is valid only when flex-direction is set to column and columns is set to 1.
+> 
+> - You must include "\#" when using a customized indexer.
+
+
+## Collapsing or Expanding a List
+
+To allow a &lt;list&gt; component to collapse and expand, add groupcollapse and groupexpand events.
+
+
+```
+<!-- index.hml -->
+<div class="doc-page">
+  <list style="width: 100%;" id="mylist">
+    <list-item-group for="listgroup in list" id="{{listgroup.value}}" ongroupcollapse="collapse" ongroupexpand="expand">
+      <list-item type="item" style="background-color:#FFF0F5;height:95px;">
+        <div class="item-group-child">
+          <text>One---{{listgroup.value}}</text>
+        </div>
+      </list-item>
+      <list-item type="item" style="background-color: #87CEFA;height:145px;" primary="true">
+        <div class="item-group-child">
+          <text>Primary---{{listgroup.value}}</text>
+        </div>
+      </list-item>
+    </list-item-group>
+  </list>
+</div>
+```
+
+
+```
+/* index.css */
+.doc-page {
+  flex-direction: column;
+  background-color: #F1F3F5;
+}
+list-item{
+margin-top:30px;
+}
+.top-list-item {
+  width:100%;
+  background-color:#D4F2E7;
+}
+.item-group-child {
+  justify-content: center;
+  align-items: center;
+  width:100%;
+}
+```
+
+
+```
+// xxx.js
+import prompt from '@system.prompt';
+export default {
+  data: {
+    direction: 'column',
+    list: []
+  },
+  onInit() {
+    this.list = []
+    this.listAdd = []
+    for (var i = 1; i <= 2; i++) {
+      var dataItem = {
+        value: 'GROUP' + i,
+      };
+        this.list.push(dataItem);
+    }
+  },
+  collapse(e) {
+    prompt.showToast({
+      message: 'Close ' + e.groupid
+    })
+  },
+  expand(e) {
+    prompt.showToast({
+    message: 'Open ' + e.groupid
+    })
+  }
+}
+```
+
+![en-us_image_0000001267887845](figures/en-us_image_0000001267887845.gif)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> - The groupcollapse and groupexpand events can be used only by the list-item-group component.
+
+
+## Example Scenario
+
+Search for contacts by using an alphabetical indexer.
+
+```
+<!-- index.hml -->
+<div class="doc-page"> 
+  <text style="font-size: 35px; font-weight: 500; text-align: center; margin-top: 20px; margin-bottom: 20px;"> 
+      <span>Contacts</span> 
+  </text> 
+  <list class="list" indexer="true"> 
+    <list-item class="item" for="{{namelist}}" type="{{$item.section}}" section="{{$item.section}}"> 
+      <div class="container"> 
+        <div class="in-container"> 
+          <text class="name">{{$item.name}}</text> 
+          <text class="phone">18888888888</text> 
+        </div> 
+      </div> 
+    </list-item> 
+    <list-item type="end" class="item"> 
+      <div style="align-items:center;justify-content:center;width:750px;"> 
+        <text style="text-align: center;">Total: 10</text> 
+      </div> 
+    </list-item> 
+  </list> 
+</div>
+```
+
+```
+/* index.css */
+.doc-page {
+  flex-direction: column;
+  background-color: #F1F3F5;
+}
+.list {
+  width: 100%;
+  height: 100%;
+}
+.item {
+  height: 120px;
+  padding-left: 10%;
+  border-top: 1px solid #dcdcdc;
+}
+.name {
+  color: #000000;
+  font-size: 39px;
+}
+.phone {
+  color: black;
+  font-size: 25px;
+}
+.container {
+  flex-direction: row;
+  align-items: center;
+}
+.in-container {
+  flex-direction: column;
+  justify-content: space-around;
+}
+```
+
+```
+// xxx.js
+export default { 
+   data: { 
+     namelist:[{ 
+       name: 'Zoey', 
+       section:'Z' 
+     },{ 
+       name: 'Quin', 
+       section:'Q' 
+     },{ 
+       name:'Sam', 
+       section:'S' 
+     },{ 
+       name:'Leo', 
+       section:'L' 
+     },{ 
+       name:'Zach', 
+       section:'Z' 
+     },{ 
+       name:'Wade', 
+       section:'W' 
+     },{ 
+       name:'Zoe', 
+       section:'Z' 
+     },{ 
+        name:'Warren', 
+        section:'W' 
+     },{ 
+        name:'Kyle', 
+        section:'K' 
+     },{ 
+       name:'Zaneta', 
+       section:'Z' 
+     }] 
+   }, 
+   onInit() { 
+   } 
+ }
+```
+
+
+![en-us_image_0000001267767861](figures/en-us_image_0000001267767861.gif)

en/application-dev/device/ui/ui-js-components-picker.md

+# <picker> Development
+
+
+The <picker> component supports common, date, time, data and time, and multi-column text selectors. For details, see [picker](../reference/arkui-js/js-components-basic-picker.md).
+
+
+## Creating a <picker> Component
+
+Create a <picker> component in the .hml file under pages/index.
+
+
+```
+<!-- index.hml -->
+<div class="container">
+  <picker>    picker  </picker>
+<div>
+```
+
+
+```
+/* index.css */
+.container {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #F1F3F5;
+}
+```
+
+![en-us_image_0000001223287716](figures/en-us_image_0000001223287716.gif)
+
+
+## Setting the Picker Type
+
+Set the type attribute of the &lt;picker&gt; component. For example, set it to date.
+
+
+```
+<!-- index.hml -->
+<div class="container">
+  <picker id="picker_text" type="text" value="{{textvalue}}"range="{{rangetext}}" class="pickertext" ></picker>
+  <picker id="picker_date" type="date" value="{{datevalue}}" lunarswitch="true" start="2002-2-5" end="2030-6-5" class="pickerdate"></picker>
+</div>
+```
+
+
+```
+/* index.css */
+.container {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #F1F3F5;
+}
+.pickertext{
+  margin-bottom: 30px;
+}
+```
+
+
+```
+// xxx.js
+export default {
+  data: {
+    rangetext:['15', "20", "25"],
+    textvalue:'Select text',
+    datevalue:'Select date',
+  }
+}
+```
+
+![en-us_image_0000001267647893](figures/en-us_image_0000001267647893.gif)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> - When setting the value range of a common selector, you must use the data binding mode.
+> 
+> - The lunarswitch attribute of the date selector is only supported on phones and tablets.
+
+
+## Setting the Time Format
+
+Set the hours attribute to specify the time format used by the time selector. Available values include 12 and 24, indicating the 12-hour format and 24-hour format, respectively.
+
+
+```
+<!-- index.hml -->
+<div class="container">
+  <picker id="picker_time" type="time" value="12-hour format" hours="12" onchange="timeonchange"  class="pickertime"></picker>
+  <picker id="picker_time" type="time" value="24-hour format" hours="24" onchange="timeonchange"  class="pickertime"></picker>
+</div>
+```
+
+
+```
+/* index.css */
+.container {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #F1F3F5;
+}
+.pickertime {
+  margin-bottom:50px;
+  width: 300px;
+  height: 50px;
+}
+```
+
+![en-us_image_0000001222807808](figures/en-us_image_0000001222807808.gif)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> - When hours is set to 12, the time is displayed in 12-hour format and distinguished by a.m. and p.m.
+> 
+> - When hours is set to 24, the time is displayed in 24-hour format.
+
+
+## Adding Response Events
+
+To confirm and cancel selection, add change and cancel events.
+
+
+```
+<!-- index.hml -->
+<div class="container">
+  <picker id="picker_multi" type="multi-text" value="{{multitextvalue}}" columns="3" range="{{multitext}}" selected="
+     {{multitextselect}}" onchange="multitextonchange" oncancel="multitextoncancel" class="pickermuitl"></picker>
+</div>
+```
+
+
+```
+/* index.css */
+.container {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #F1F3F5; 
+}
+.pickermuitl {
+  margin-bottom:20px;
+  width: 600px;
+  height: 50px;
+  font-size: 25px;
+  letter-spacing:15px;
+}
+```
+
+
+```
+// xxx.js
+import prompt from '@system.prompt';
+export default {
+  data: {
+    multitext:[["a", "b", "c"], ["e", "f", "g"], ["h", "i"]],
+    multitextvalue:'Select multi-line text',
+    multitextselect:[0,0,0],
+  },
+  multitextonchange(e) {
+    this.multitextvalue=e.newValue;
+    prompt.showToast({ message:"Multi-column text changed to:" + e.newValue })
+  },
+  multitextoncancel() {
+    prompt.showToast({ message:"multitextoncancel" })
+  },
+}
+```
+
+![en-us_image_0000001223127748](figures/en-us_image_0000001223127748.gif)
+
+
+## Example Scenario
+
+
+Implement a health check-in application by using the &lt;picker&gt; component.
+
+```
+<!-- index.hml -->
+<div class="doc-page">
+  <text class="title">Health check-in</text>
+  <div class="out-container">
+    <text class="txt">Office:</text>
+    <picker class="pick" focusable="true" type="text" value="{{pos}}" range="{{posarr}}" onchange="setPos"></picker>
+  </div>
+  <divider class="dvd"></divider>
+  <div class="out-container">
+    <text class="txt">Office hours:</text>
+    <picker class="pick" type="date" value="{{datevalue}}"  start="2002-2-5" end="2030-6-5" selected="{{dateselect}}"
+      lunarswitch="true" onchange="dateonchange"></picker>
+  </div>
+  <divider class="dvd"></divider>
+  <div class="out-container">
+    <text class="txt">Having fever or cold symptoms</text>
+    <picker class="pick" type="text" value="{{yorn1}}" range="{{yesno}}" selected="1" onchange="isFever"></picker>
+  </div>
+  <divider class="dvd"></divider>
+  <div class="out-container">
+    <text class="txt">Close contact with someone with COVID-19</text>
+    <picker class="pick" type="text" value="{{yorn2}}" range="{{yesno}}" selected="1" onchange="isTouch"></picker>
+  </div>
+  <div class="out-container">
+    <button value="Submit" style="margin-top:100px;width:50%;font-color:#0000ff;height:80px" onclick="showtoast"></button>
+  </div>
+</div>
+```
+
+```
+/* index.css */
+.doc-page {
+  flex-direction: column;
+  background-color: #F1F3F5;
+}
+.title {
+  margin-top: 30px;
+  margin-bottom: 30px;
+  margin-left: 50px;
+  font-weight: bold;
+  color: #0000ff;
+  font-size: 38px;
+}
+.out-container {
+  flex-direction: column;
+  align-items: center;
+}
+.pick {
+  width: 80%;
+  height: 76px;
+  border: 1px solid #0000ff;
+  border-radius: 20px;
+  padding-left: 12px;
+}
+.txt {
+  width: 80%;
+  font-size: 18px;
+  text-align: left;
+  margin-bottom: 12px;
+  margin-left: 12px;
+}
+.dvd {
+  margin-top: 30px;
+  margin-bottom: 30px;
+  margin-left: 80px;
+  margin-right: 80px;
+  color: #6495ED;
+  stroke-width: 6px;
+}
+```
+
+```
+// xxx.js
+import pmt from '@system.prompt'
+export default {
+  data: {
+    yorn1:'No',
+    yorn2:'No',
+    pos:'Home',
+    yesno:['Yes', 'No'],
+    posarr:['Home', 'Company'],
+    datevalue:'Select time',
+    datetimeselect:'2012-5-6-11-25',
+    dateselect:'2021-9-17',
+    showbuild:true
+  },
+  onInit() {
+  },
+  isFever(e) {
+    this.yorn1 = e.newValue
+  },
+  isTouch(e) {
+    this.yorn2 = e.newValue
+  },
+  setPos(e) {
+    this.pos = e.newValue
+    if (e.newValue === 'Non-research center') {
+      this.showbuild = false
+    } else {
+      this.showbuild = true
+    }
+  },
+  setbuild(e) {
+    this.build = e.newValue
+  },
+  dateonchange(e) {
+    e.month=e.month+1;
+    this.datevalue = e.year + "-" + e.month + "-" + e.day;
+    pmt.showToast({ message:"date:"+e.year+"-"+e.month+"-"+e.day }) 
+  },
+  showtoast() {
+    pmt.showToast({
+      message: 'Submitted.',
+      duration: 2000,
+      gravity: 'center'
+    })
+  }
+}
+```
+
+
+![en-us_image_0000001267887877](figures/en-us_image_0000001267887877.gif)

en/application-dev/device/ui/ui-js-components-stepper.md

+# <stepper> Development
+
+
+When multiple steps are required to complete a task, you can use the <stepper> component to navigate your users through the whole process. For details, see [stepper](../reference/arkui-js/js-components-container-stepper.md).
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> This component is supported since API version 5.
+
+
+## Creating a <stepper> Component
+
+Create a <stepper> component in the .hml file under pages/index.
+
+
+```
+<!-- index.hml -->
+<div class="container"> 
+ <stepper>    <stepper-item>     
+     <text>Step 1</text>
+   </stepper-item> 
+   <stepper-item>     
+     <text>Step 2</text>
+   </stepper-item> 
+ </stepper> 
+</div>
+```
+
+
+```
+/* xxx.css */
+.container {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #F1F3F5;
+}
+text{
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}
+```
+
+![en-us_image_0000001223287656](figures/en-us_image_0000001223287656.gif)
+
+
+## Setting the Index
+
+Set index to the index value of the step that you want to display by default.
+
+
+```
+<!-- index.hml -->
+<div class="container"> 
+ <stepper index="2">    
+   <stepper-item>     
+     <text>stepper-item1</text>
+   </stepper-item> 
+   <stepper-item>     
+     <text>stepper-item2</text>
+   </stepper-item> 
+   <stepper-item>     
+     <text>stepper-item3</text>
+   </stepper-item> 
+  </stepper> 
+</div>
+```
+
+
+```
+/* index.css */
+.container {
+  flex-direction: column;
+  background-color:#F1F3F5;
+}
+text{
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}
+```
+
+![en-us_image_0000001267767837](figures/en-us_image_0000001267767837.gif)
+
+Set the label attribute to customize the button text for the &lt;stepper-item&gt;.
+
+
+```
+<!-- index.hml -->
+<div class="container" style="background-color:#F1F3F5;"> 
+ <stepper index="1">    
+   <stepper-item label="{{label_1}}">     
+     <text>stepper-item1</text>
+   </stepper-item> 
+   <stepper-item label="{{label_2}}">     
+     <text>stepper-item2</text>
+   </stepper-item> 
+   <stepper-item label="{{label_3}}">     
+     <text>stepper-item3</text>
+   </stepper-item>
+   <stepper-item>     
+     <text>stepper-item4</text>
+   </stepper-item> 
+ </stepper> 
+</div>
+```
+
+
+```
+/* index.css */
+.container {
+  flex-direction: column;
+  background-color:#F1F3F5;
+}
+text{
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}
+```
+
+
+```
+/* index.js */
+export default { 
+  data: {
+    label_1:{      nextLabel: 'NEXT',      status: 'normal'    },
+    label_2:{
+      prevLabel: 'BACK',
+      nextLabel: 'NEXT',
+      status: 'normal'
+    },
+    label_3:{
+      prevLabel: 'BACK',
+      nextLabel: 'END',
+      status: 'disabled'
+    },
+  },
+}
+```
+
+![en-us_image_0000001267767841](figures/en-us_image_0000001267767841.gif)
+
+
+## Setting the Style
+
+  By default, the &lt;stepper&gt; component fills entire space of its container. The sample code below shows how to set the border and background color using the border and background-color attributes.
+
+```
+<!-- index.hml -->
+<div class="container" > 
+  <div class="stepperContent">
+    <stepper class="stepperClass">    
+      <stepper-item>     
+        <text>stepper-item1</text>
+      </stepper-item> 
+    </stepper> 
+  </div>
+</div>
+```
+
+
+```
+/* index.css */
+.container {
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color:#F1F3F5;
+}
+.stepperContent{
+  width: 300px;
+  height: 300px;
+}
+.stepperClass{
+  border:1px solid silver ;  background-color: white;
+}
+text{
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}
+```
+
+![en-us_image_0000001223287668](figures/en-us_image_0000001223287668.png)
+
+
+## Adding Events
+
+The &lt;stepper&gt; component supports the finish, change, next, back, and skip events.
+
+- When the change and next or back events exist at the same time, the next or back event is executed before the change event.
+
+- Before resetting the index attribute, you must remove the current value. Otherwise, the value change cannot be detected.
+
+```
+<!-- index.hml -->
+<div class="container"  style="background-color:#F1F3F5;">
+  <div >
+    <stepper onfinish="stepperFinish" onchange="stepperChange" onnext="stepperNext" onback="stepperBack" onskip="stepperSkip" id="stepperId" index="{{index}}">
+      <stepper-item>
+        <text>stepper-item1</text>
+        <button value="skip" onclick="skipClick"></button>
+      </stepper-item>
+      <stepper-item>
+         <text>stepper-item2</text>
+         <button value="skip" onclick="skipClick"></button>
+      </stepper-item>
+      <stepper-item>
+        <text>stepper-item3</text>
+      </stepper-item>
+    </stepper>
+  </div>
+</div>
+```
+
+
+```
+/* xxx.css */
+.doc-page {
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+stepper-item{
+  width: 100%;
+  flex-direction: column;
+  align-self: center;
+  justify-content: center;
+}
+text{
+  margin-top: 45%;
+  justify-content: center;
+  align-self: center;
+  margin-bottom: 50px;
+}
+button{
+  width: 80%;
+  height: 60px;
+  margin-top: 20px;
+}
+```
+
+
+```
+/* index.js */
+import prompt from '@system.prompt';
+export default {
+  data: {
+    index:0,
+  },
+   stepperSkip(){
+    this.index = null;
+    this.index=2;
+  },
+   skipClick(){
+    this.$element('stepperId').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+  },
+  stepperFinish(){
+    prompt.showToast({
+      message: 'All Finished'
+    })
+  },
+  stepperChange(e){
+    console.log("stepperChange"+e.index)
+    prompt.showToast({
+      message: 'Previous step: '+e.prevIndex+"-------Current step:"+e.index
+    })
+  },
+  stepperNext(e){
+    console.log("stepperNext"+e.index)
+    prompt.showToast({
+      message: 'Current step:'+e.index+"-------Next step:"+e.pendingIndex
+    })
+    var index = {pendingIndex:e.pendingIndex }
+    return index;
+  },
+  stepperBack(e){
+    console.log("stepperBack"+e.index)
+    var index = {pendingIndex: e.pendingIndex }
+    return index;
+  }
+}
+```
+
+![en-us_image_0000001267607869](figures/en-us_image_0000001267607869.gif)
+
+
+## Example Scenario
+
+Select the options displayed on the page. Your selection will be shown in real time. Click the next button to dynamically change the font color and font size on the page.
+
+Use the &lt;stepper&gt; component to navigate through the steps. Create a [&lt;toggle&gt;](../reference/arkui-js/js-components-basic-toggle.md) component to implement the functions of selection and displaying the selection result. Then use the [&lt;select&gt;](../reference/arkui-js/js-components-basic-select.md) component to dynamically change the font color or size of the selected options.
+
+
+```
+<div class="container">
+  <stepper id="mystep" index="0" onfinish="back" style="text-color: indigo;">
+    <stepper-item label="{{label1}}">
+      <div style="flex-direction: column;padding: 0px 10px;">
+        <text class="text" style="margin-top: 10%;text-align: center;width: 100%;">Select error types:</text>
+        <text style="margin-top: 20px;padding: 10px">
+          <span>{{error}}</span>
+        </text>
+        <div style="justify-content: space-around;flex-wrap: wrap;">
+          <toggle for="{{togglelist1}}" value="{{$item}}" class="tog" onchange="multiTog({{$item}})"></toggle>
+        </div>
+      </div>
+    </stepper-item>
+    <stepper-item label="{{label2}}">
+      <div style="flex-direction: column;align-items: center;">
+        <text class="txt" style="margin-top: 10%;">Toggle</text>
+        <div style="justify-content: space-around;flex-wrap: wrap;;margin-top:10%">
+          <toggle class="tog" for="{{togglelist1}}" value="{{$item}}" style="text-color: {{tcolor}};font-size: {{tsize}}; font-style: {{tstyle}};font-weight: {{tweight}};font-family: {{tfamily}};">
+          </toggle>
+        </div>
+        <div style="flex-wrap: wrap;width: 700px;margin-top:10%">
+          <div style="flex-direction: column;width: 350px;height: 185px;align-items: center;">
+            <text class="txt">text-color</text>
+            <select onchange="settcolor">
+              <option for="{{color_list}}" value="{{$item}}">{{$item}}</option>
+            </select>
+          </div>
+          <div style="flex-direction: column;width: 350px;height: 185px;align-items: center;">
+            <text class="txt">font-size</text>
+            <select onchange="settsize">
+              <option for="{{size_list}}" value="{{$item}}">{{$item}}</option>
+            </select>
+          </div>
+        </div>
+      </div>
+    </stepper-item>
+  </stepper>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container {
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color:#F1F3F5;
+}
+.dvd {
+  stroke-width: 8px;
+  color: orangered;
+  margin: 65px;
+}
+.tog{
+  margin-right: 20px;
+  margin-top: 30px;
+}
+```
+
+
+```
+/* index.js */
+import prompt from '@system.prompt';
+import router from '@system.router';
+let myset = new Set();
+export default {
+  data: {
+    error: '',
+    tcolor:'#FF4500',
+    color_list:['#FF4500','#5F9EA0','#0000FF'],
+    tsize: '12px',
+    size_list: ['12px', '30px', '8px', '50px'],
+    label1: {
+      prevLabel: 'The text on the left of the starting step is invalid.',
+      nextLabel: 'Toggle'
+    },
+    label2: {
+      prevLabel: 'toggle',
+      nextLabel: 'END'
+    },
+    togglelist1:['Program error', 'Software', 'System', 'Application'],
+  },
+  multiTog(arg, e) {
+    this.error = ' '
+    if (e.checked) {
+      myset.add(arg)
+    } else {
+      myset.delete(arg)
+    }
+    for (let item of myset) {
+      this.error += item + ' '
+    }
+  },
+  settcolor(e) {
+    this.tcolor = e.newValue
+  },
+  settsize(e) {
+    this.tsize = e.newValue
+  }
+}
+```
+
+![en-us_image_0000001267887817](figures/en-us_image_0000001267887817.gif)

en/application-dev/device/ui/ui-js-components-text.md

+# <text> Development
+
+
+The <text> component is used to display a piece of textual information. For details, see [text](../reference/arkui-js/js-components-basic-text.md).
+
+
+## Creating a <text> Component
+
+Create a <text> component in the .hml file under pages/index.
+
+
+```
+<!-- xxx.hml -->
+<div class="container" style="text-align: center;justify-content: center; align-items: center;">
+  <text>Hello World</text>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container {
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #F1F3F5;
+}
+```
+
+![en-us_image_0000001222807780](figures/en-us_image_0000001222807780.png)
+
+
+## Setting the Text Style and Attributes
+
+- Adding a text style
+
+
+  Set the color, font-size, allow-scale, word-spacing, and text-valign attributes to apply the color, size, zoom, spacing, and vertical alignment styles to the text.
+
+  ```
+  <!-- xxx.hml -->
+  <div class="container" style="background-color:#F1F3F5;flex-direction: column;justify-content: center; align-items: center;">   
+    <text style="color: blueviolet; font-size: 40px; allow-scale:true"> 
+      This is a passage
+    </text>
+    <text style="color: blueviolet; font-size: 40px; margin-top: 20px; allow-scale:true;word-spacing: 20px;" >
+      This is a passage
+    </text>
+  </div>
+  ```
+
+  
+
+  ```
+  /* xxx.css */
+  .container {
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: #F1F3F5;
+  }
+  ```
+
+
+  ![en-us_image_0000001222967764](figures/en-us_image_0000001222967764.png)
+
+- Adding a text modifier
+
+
+  Set the text-decoration attribute to add a line to selected text. Set the text-decoration-color attribute to apply specific color to the added line. For values of text-decoration, see [Text Style](../reference/arkui-js/js-components-basic-text.md).
+
+  ```
+  <!-- xxx.hml -->
+  <div class="container" style="background-color:#F1F3F5;">
+    <text style="text-decoration:underline">
+      This is a passage
+    </text>
+    <text style="text-decoration:line-through;text-decoration-color: red">
+      This is a passage
+    </text>
+  </div>
+  ```
+
+  ```
+  /* xxx.css */
+  .container {
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+  text{
+    font-size: 50px;
+  }
+  ```
+
+
+  ![en-us_image_0000001223287688](figures/en-us_image_0000001223287688.png)
+
+- Hiding text content
+
+
+  Set the text-overflow attribute to ellipsis so that overflowed text is displayed as an ellipsis.
+
+  ```
+  <!-- xxx.hml -->
+  <div class="container">
+    <text class="text">
+      This is a passage
+    </text>
+  </div>
+  ```
+
+  ```
+  /* xxx.css */
+  .container {
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
+    align-items: center;
+    background-color: #F1F3F5;
+    justify-content: center;
+  }
+  .text{
+    width: 200px;
+    max-lines: 1;
+    text-overflow:ellipsis;
+  }
+  ```
+
+
+  > ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+  > - text-overflow must be used together with max-lines.
+  >
+  > - max-lines indicates the maximum number of lines in the text.
+
+
+![en-us_image_0000001267647865](figures/en-us_image_0000001267647865.png)
+
+
+- Setting the text line breaking mode
+
+
+  Set the word-break attribute to specify how to break lines of text. For values of word-break, see [Text Styles](../reference/arkui-js/js-components-basic-text.md).
+
+  ```
+  <!-- xxx.hml -->
+  <div class="container">
+    <div class="content">
+      <text class="text1">
+        Welcome to the world
+      </text>
+      <text class="text2">
+        Welcome to the world
+      </text>
+    </div>
+  </div>
+  ```
+
+  ```
+  /* xxx.css */
+  .container {
+    background-color: #F1F3F5;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+  .content{
+    width: 50%;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+  .text1{
+    height: 200px;
+    border:1px solid #1a1919;
+    margin-bottom: 50px;
+    text-align: center;
+    word-break: break-word;
+    font-size: 40px;
+  }
+  .text2{
+    height: 200px;
+    border:1px solid #0931e8;
+    text-align: center;
+    word-break: break-all;
+    font-size: 40px;
+  }
+  ```
+
+
+  ![en-us_image_0000001267767865](figures/en-us_image_0000001267767865.png)
+
+- Setting the [&lt;span&gt;](../reference/arkui-js/js-components-basic-span.md)child component
+
+```
+<!-- xxx.hml -->
+<div class="container" style="justify-content: center; align-items: center;flex-direction: column;background-color: #F1F3F5;">
+  <text style="font-size: 45px;">
+    This is a passage
+  </text>
+  <text style="font-size: 45px;">
+    <span style="color: aqua;">This </span><span style="color: #F1F3F5;">      1    </span>    <span style="color: blue;"> is a </span>    <span style="color: #F1F3F5;">      1    </span>    <span style="color: red;">  passage </span>
+  </text>
+</div>
+```
+
+
+![en-us_image_0000001223127720](figures/en-us_image_0000001223127720.png)
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> - When the &lt;span&gt; child component is used to form a text paragraph, incorrect &lt;span&gt; attribute settings (for example, setting of font-weight to 1000) will result in abnormal display of the text paragraph.
+> 
+> - When the &lt;span&gt; child component is being used, do not include any text you want to show in the &lt;text&gt; component, as such text will not be displayed if you do so.
+
+
+## Example Scenario
+
+Use the &lt;text&gt; component to display text content through data binding. Use the &lt;span&gt; child component to hide or display text content by setting the show attribute.
+
+
+    ```
+    <!-- xxx.hml -->
+    <div class="container">
+      <div style="align-items: center;justify-content: center;">
+        <text class="title">
+          {{ content }}
+        </text>
+        <switch checked="true" onchange="test"></switch>
+      </div>
+      <text class="span-container" style="color: #ff00ff;">
+        <span show="{{isShow}}">  {{ content  }}  </span>
+        <span style="color: white;">
+            1
+        </span>
+        <span style="color: #f76160">Hide clip </span>
+      </text>
+    </div>
+    ```
+
+
+```
+/* xxx.css */
+.container {
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  background-color: #F1F3F5;
+}
+.title {
+  font-size: 26px;
+  text-align:center;
+  width: 200px;
+  height: 200px;
+}
+```
+
+
+```
+// xxx.js
+export default {   
+  data: {    
+    isShow:true,    
+    content: 'Hello World'
+  },   
+  onInit(){    },  
+  test(e) {    
+    this.isShow = e.checked  
+  }
+}
+```
+
+![en-us_image_0000001267887849](figures/en-us_image_0000001267887849.gif)

en/application-dev/device/ui/ui-js-custom-components.md

+# Custom Components
+
+
+The ArkUI that uses the JavaScript-based web-like development paradigm supports custom components for you to extend existing components. You can encapsulate custom private attributes and events into new components to reuse them multiple times in your project. This also improves code readability. The following is an example:
+
+
+- Building a custom component
+  
+  ```
+  <!-- comp.hml -->
+   <div class="item"> 
+     <text class="title-style">{{title}}</text>
+     <text class="text-style" onclick="childClicked" focusable="true">Click to view the hidden text.</text>
+     <text class="text-style" if="{{showObj}}">hello world</text>
+   </div>
+  ```
+
+  
+  ```
+  /* comp.css */
+   .item { 
+     width: 700px;  
+     flex-direction: column;  
+     height: 300px;  
+     align-items: center;  
+     margin-top: 100px; 
+   }
+   .text-style {
+     width: 100%;
+     text-align: center;
+     font-weight: 500;
+     font-family: Courier;
+     font-size: 36px;
+   }
+   .title-style {
+     font-weight: 500;
+     font-family: Courier;
+     font-size: 50px;
+     color: #483d8b;
+   }
+  ```
+
+  
+  ```
+  // comp.js
+   export default {
+     props: {
+       title: {
+         default: 'title',
+       },
+       showObject: {},
+     },
+     data() { 
+       return {
+         showObj: this.showObject,
+       };
+     }, 
+     childClicked () { 
+       this.$emit('eventType1', {text: 'Receive the parameters from the child component.'});
+       this.showObj = !this.showObj; 
+     }, 
+   }
+  ```
+
+- Introducing the custom component
+  
+  ```
+  <!-- xxx.hml -->
+   <element name='comp' src='../../common/component/comp.hml'></element> 
+   <div class="container"> 
+     <text>Parent component: {{text}}</text>
+     <comp title="Custom component" show-object="{{isShow}}" @event-type1="textClicked"></comp>
+   </div>
+  ```
+
+  
+  ```
+  /* xxx.css */
+   .container { 
+     background-color: #f8f8ff; 
+     flex: 1; 
+     flex-direction: column; 
+     align-content: center;
+   } 
+  ```
+
+  
+  ```
+  // xxx.js
+   export default { 
+     data: {
+       text: 'Start'
+       isShow: false,
+     },
+     textClicked (e) {
+       this.text = e.detail.text;
+     },
+   }
+  ```
+
+
+In this example, the parent component passes the customized attribute through title to the child component, and the child component receives the attribute value in props. The child component passes text to the parent through the bound event, and the passed value is obtained via e.detail. To successfully bind the child component event to the parent component, ensure that the event name meet the requirements for event binding. For details, see [Basic Usage of Custom Components](../reference/arkui-js/js-components-custom-basic-usage.md). The following figures show how the custom component works.
+
+  figure1 Running effect
+
+  ![en-us_image_0000001222807816](figures/en-us_image_0000001222807816.png)

en/application-dev/device/ui/ui-js-overview.md

+# Overview
+
+
+The web-like development paradigm uses the classical three-stage programming model, in which OpenHarmony Markup Language (HML) is used for building layouts, CSS for defining styles, and JavaScript for adding processing logic. UI components are associated with data through one-way data-binding. This means that when data changes, the UI automatically updates with the new data. This development paradigm has a low learning curve for frontend web developers, allowing them to quickly transform existing web applications into ArkUI applications. It could be helpful if you are developing small- and medium-sized applications with simple UIs.
+
+
+## Overall Architecture
+
+ArkUI with the JavaScript-based web-like development paradigm consists of the following layers: application layer, frontend framework layer, engine layer, and porting layer.
+
+
+
+![en-us_image_0000001223127696](figures/en-us_image_0000001223127696.png)
+
+- Application
+
+  Contains applications with FAs you developed. The FA application in this document refers to the application with FAs developed using JavaScript. 
+
+- Framework
+
+  Parses UI pages and provides the Model-View-ViewModel (MVVM), page routing, custom components and more for front end development.
+
+- Engine
+
+  Accomplishes animation parsing, Document Object Model (DOM) building, layout computing, rendering command building and drawing, and event management.
+
+- Porting Layer
+
+  Abstracts the platform layer to provide abstract interfaces to connect to the platform. For example, event interconnection, rendering pipeline interconnection, and lifecycle interconnection.

en/application-dev/device/ui/ui-ts-building-category-grid-layout.md

+# Building a Food Category Grid Layout
+
+
+The diet application allows food on the home page to display in list or grid mode. You can implement switching between food categories through tabs in grid mode.
+
+
+1. Import the Category enumeration type to the FoodCategoryList page.
+     
+   ```
+   import { Category, FoodData } from '../model/FoodData'
+   ```
+
+2. Create the FoodCategoryList and FoodCategory components. The FoodCategoryList component is used as the entry component of the new page, and the initializeOnStartup method is invoked in the entry component.
+     
+   ```
+   @Component
+   struct FoodList {
+     private foodItems: FoodData[]
+     build() {
+       ......
+     }
+   }
+   
+   @Component
+   struct FoodCategory {
+     private foodItems: FoodData[]
+     build() {
+       ......
+     }
+   }
+   
+   @Entry
+   @Component
+   struct FoodCategoryList {
+     private foodItems: FoodData[] = initializeOnStartup()
+     build() {
+       ......
+     }
+   }
+   ```
+
+3. Create the showList member variable in the FoodCategoryList component to control the rendering switchover between the list layout and grid layout. The conditional rendering statement if...else... is required.
+     
+   ```
+   @Entry
+   @Component
+   struct FoodCategoryList {
+     private foodItems: FoodData[] = initializeOnStartup()
+     private showList: boolean = false
+   
+     build() {
+       Stack() {
+         if (this.showList) {
+           FoodList({ foodItems: this.foodItems })
+         } else {
+           FoodCategory({ foodItems: this.foodItems })
+         }
+       }
+     }
+   }
+   ```
+
+4. In the upper right corner of the page, create an icon for switching between the list and grid layouts. Set the stack alignment mode to TopEnd, top-bottom alignment. Create an image component, and set the click event, that is, negation of showList.
+     
+   ```
+   @Entry
+   @Component
+   struct FoodCategoryList {
+     private foodItems: FoodData[] = initializeOnStartup()
+     private showList: boolean = false
+   
+     build() {
+       Stack({ alignContent: Alignment.TopEnd }) {
+         if (this.showList) {
+           FoodList({ foodItems: this.foodItems })
+         } else {
+           FoodCategory({ foodItems: this.foodItems })
+         }
+         Image($r('app.media.Switch'))
+           .height(24)
+           .width(24)
+           .margin({ top: 15, right: 10 })
+           .onClick(() => {
+           this.showList = !this.showList
+         })
+       }.height('100%')
+     }
+   }
+   ```
+
+5. Add the @State decorator. After you click the switch tab in the upper right corner, the page does not change. This is because the showList does not have state data and its change does not trigger the page refresh. You need to add the @State decorator to make it state data. The change of the @State decorator will cause re-rendering of the component where the decorator is located.
+     
+   ```
+   @Entry
+   @Component
+   struct FoodCategoryList {
+     private foodItems: FoodData[] = initializeOnStartup()
+     @State private showList: boolean = false
+   
+     build() {
+       Stack({ alignContent: Alignment.TopEnd }) {
+         if (this.showList) {
+           FoodList({ foodItems: this.foodItems })
+         } else {
+           FoodCategory({ foodItems: this.foodItems })
+         }
+         Image($r('app.media.Switch'))
+           .height(24)
+           .width(24)
+           .margin({ top: 15, right: 10 })
+           .onClick(() => {
+           this.showList = !this.showList
+         })
+       }.height('100%')
+     }
+   }
+   
+   ```
+
+   When you click the switch icon, the FoodList component is displayed. When you click the switch icon again, the FoodList component is hidden.
+
+   ![en-us_image_0000001222807800](figures/en-us_image_0000001222807800.gif)
+
+6. Create a tab to display all food categories (All). Create the <Tabs> component and its child component TabContent in the FoodCategory component, and set tabBar to All. Set the width of the TabBars to 280 and the layout mode to Scrollable. This means that the TabBars can be scrolled when the total length exceeds 280. The <Tabs> component is a container component that allows users to switch between content views through tabs. Each tab page corresponds to a TabContent.
+     
+   ```
+   @Component
+   struct FoodCategory {
+     private foodItems: FoodData[]
+     build() {
+       Stack() {
+         Tabs() {
+           TabContent() {}.tabBar('All')
+         }
+         .barWidth(280)
+         .barMode(BarMode.Scrollable)
+       }
+     }
+   }
+   ```
+
+   ![en-us_image_0000001267647881](figures/en-us_image_0000001267647881.png)
+
+7. Create the FoodGrid component to function as a child component of the TabContent component.
+     
+   ```
+   @Component
+   struct FoodGrid {
+     private foodItems: FoodData[]
+     build() {}
+   }
+   
+   @Component
+   struct FoodCategory {
+     private foodItems: FoodData[]
+     build() {
+       Stack() {
+         Tabs() {
+           TabContent() {
+             FoodGrid({ foodItems: this.foodItems })
+           }.tabBar('All')
+         }
+         .barWidth(280)
+         .barMode(BarMode.Scrollable)
+       }
+     }
+   }
+   ```
+
+8. Implement a 2 x 6 grid layout (12 food data resources in total). Create a Grid component, and set columnsTemplate to ('1fr 1fr'), rowsTemplate to ('1fr 1fr 1fr 1fr 1fr 1fr'), and both rowsGap and columnsGap to 8. Create a Scroll component so that it can be slid.
+     
+   ```
+   @Component
+   struct FoodGrid {
+     private foodItems: FoodData[]
+     build() {
+       Scroll() {
+         Grid() {
+           ForEach(this.foodItems, (item: FoodData) => {
+             GridItem() {}
+           }, (item: FoodData) => item.id.toString())
+         }
+         .rowsTemplate('1fr 1fr 1fr 1fr 1fr 1fr')
+         .columnsTemplate('1fr 1fr')
+         .columnsGap(8)
+         .rowsGap(8)
+       }
+       .scrollBar(BarState.Off)
+       .padding({left: 16, right: 16})
+     }
+   }
+   ```
+
+9. Create a FoodGridItem component to display the food image, name, and calories and implement the UI layout. The FoodGridItem component is a child component of the GridItem component. The height of each FoodGridItem is 184, and the line spacing is 8. The total height of the Grid component is calculated as follows: (184 + 8) x 6 – 8 = 1144.
+     
+   ```
+   @Component
+   struct FoodGridItem {
+     private foodItem: FoodData
+     build() {
+       Column() {
+         Row() {
+           Image(this.foodItem.image)
+             .objectFit(ImageFit.Contain)
+             .height(152)
+             .width('100%')
+         }.backgroundColor('#FFf1f3f5')
+         Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
+           Text(this.foodItem.name)
+             .fontSize(14)
+             .flexGrow(1)
+             .padding({ left: 8 })
+           Text(this.foodItem.calories + 'kcal')
+             .fontSize(14)
+             .margin({ right: 6 })
+         }
+         .height(32)
+         .width('100%')
+         .backgroundColor('#FFe5e5e5')
+       }
+       .height(184)
+       .width('100%')
+     }
+   }
+   
+   @Component
+   struct FoodGrid {
+     private foodItems: FoodData[]
+     build() {
+       Scroll() {
+         Grid() {
+           ForEach(this.foodItems, (item: FoodData) => {
+             GridItem() {
+               FoodGridItem({foodItem: item})
+             }
+           }, (item: FoodData) => item.id.toString())
+         }
+         .rowsTemplate('1fr 1fr 1fr 1fr 1fr 1fr')
+         .columnsTemplate('1fr 1fr')
+         .columnsGap(8)
+         .rowsGap(8)
+         .height(1144)
+       }
+       .scrollBar(BarState.Off)
+       .padding({ left: 16, right: 16 })
+     }
+   }
+   ```
+
+   ![en-us_image_0000001223287708](figures/en-us_image_0000001223287708.gif)
+
+10. Create the Category.Vegetable, Category.Fruit, Category.Nut, Category.SeaFood, and Category.Dessert tabs.
+     
+   ```
+   @Component
+   struct FoodCategory {
+     private foodItems: FoodData[]
+     build() {
+       Stack() {
+         Tabs() {
+           TabContent() {
+             FoodGrid({ foodItems: this.foodItems })
+           }.tabBar('All')
+   
+           TabContent() {
+             FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Vegetable)) })
+           }.tabBar('Vegetable')
+   
+           TabContent() {
+             FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Fruit)) })
+           }.tabBar('Fruit')
+   
+           TabContent() {
+             FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Nut)) })
+           }.tabBar('Nut')
+   
+           TabContent() {
+             FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Seafood)) })
+           }.tabBar('Seafood')
+   
+           TabContent() {
+             FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Dessert)) })
+           }.tabBar('Dessert')
+         }
+         .barWidth(280)
+         .barMode(BarMode.Scrollable)
+       }
+     }
+   }
+   ```
+
+11. Set the number of rows and height of grids for different food categories. Because the number of foods varies according to the category, the ''1fr 1fr 1fr 1fr 1fr 1fr ' constant cannot be used to set the number of rows to 6.
+   Create member variables gridRowTemplate and HeightValue, and set the number of grid rows and height by using these member variables.
+
+     
+   ```
+   @Component
+   struct FoodGrid {
+     private foodItems: FoodData[]
+     private gridRowTemplate : string = ''
+     private heightValue: number
+     build() {
+       Scroll() {
+         Grid() {
+           ForEach(this.foodItems, (item: FoodData) => {
+             GridItem() {
+               FoodGridItem({foodItem: item})
+             }
+           }, (item: FoodData) => item.id.toString())
+         }
+         .rowsTemplate(this.gridRowTemplate)
+         .columnsTemplate('1fr 1fr')
+         .columnsGap(8)
+         .rowsGap(8)
+         .height(this.heightValue)
+       }
+       .scrollBar(BarState.Off)
+       .padding({left: 16, right: 16})
+     }
+   }
+   ```
+
+   Invoke the aboutToAppear API to calculate the number of rows (gridRowTemplate) and height (heightValue).
+
+     
+   ```
+   aboutToAppear() {
+     var rows = Math.round(this.foodItems.length / 2);
+     this.gridRowTemplate = '1fr '.repeat(rows);
+     this.heightValue = rows * 192 - 8;
+   }
+   ```
+
+   The custom component provides two lifecycle callbacks: aboutToAppear and aboutToDisappear. aboutToAppear is executed after the custom component is created and before the build method of the custom component is executed. aboutToDisappear is executed when the custom component is deinitialized.
+
+   ![en-us_image_0000001267647885](figures/en-us_image_0000001267647885.png)
+
+     
+   ```
+   @Component
+   struct FoodGrid {
+     private foodItems: FoodData[]
+     private gridRowTemplate : string = ''
+     private heightValue: number
+   
+     aboutToAppear() {
+       var rows = Math.round(this.foodItems.length / 2);
+       this.gridRowTemplate = '1fr '.repeat(rows);
+       this.heightValue = rows * 192 - 8;
+     }
+   
+     build() {
+       Scroll() {
+         Grid() {
+           ForEach(this.foodItems, (item: FoodData) => {
+             GridItem() {
+               FoodGridItem({foodItem: item})
+             }
+           }, (item: FoodData) => item.id.toString())
+         }
+         .rowsTemplate(this.gridRowTemplate)
+         .columnsTemplate('1fr 1fr')
+         .columnsGap(8)
+         .rowsGap(8)
+         .height(this.heightValue)
+       }
+       .scrollBar(BarState.Off)
+       .padding({left: 16, right: 16})
+     }
+   }
+   ```
+
+   ![en-us_image_0000001267887869](figures/en-us_image_0000001267887869.gif)

en/application-dev/device/ui/ui-ts-building-category-list-layout.md

+# Building a Food Category List Layout
+
+
+Use the List component and ForEach loop to build the food category list layout.
+
+
+1. Create a page file named FoodCategoryList.ets in the pages directory, rename the index.ets file FoodDetail.ets, and add the renamed file to the "pages" tag in the config.json file. The first page under the tag is the home page.
+     
+   ```
+   "js": [
+     {
+       "pages": [
+         "pages/FoodCategoryList",
+         "pages/FoodDetail"
+       ],
+   ]
+   ```
+
+2. Create a List component named FoodList as the page entry point. Then, add a ListItem component named FoodListItem as its child component. The List component is used to display data of the same type. Its child component <ListItem> is used to display specific items in the list.
+     
+   ```
+   @Component
+   struct FoodListItem {
+     build() {}
+   }
+   
+   @Entry
+   @Component
+   struct FoodList {
+     build() {
+       List() {
+         ListItem() {
+           FoodListItem()
+         }
+       }
+     }
+   }
+   ```
+
+3. Import the FoodData class and initializeOnStartup method.
+     
+   ```
+   import { FoodData } from '../model/FoodData'
+   import { initializeOnStartup } from '../model/FoodDataModels'
+   ```
+
+4. Configure the FoodList and FoodListItem components to pass values. Create a member variable named foodItems of the FoodData[] type in the FoodList component and invoke the initializeOnStartup method to assign a value to the variable. Create a member variable foodItem of the FoodData type in the FoodListItem component. Pass the foodItems[0] of the first element in the parent foodItems array as a parameter to FoodListItem.
+     
+   ```
+   import { FoodData } from '../model/FoodData'
+   import { initializeOnStartup } from '../model/FoodDataModels'
+   
+   @Component
+   struct FoodListItem {
+     private foodItem: FoodData
+     build() {}
+   }
+   
+   @Entry
+   @Component
+   struct FoodList {
+     private foodItems: FoodData[] = initializeOnStartup()
+     build() {
+       List() {
+         ListItem() {
+           FoodListItem({ foodItem: this.foodItems[0] })
+         }
+       }
+     }
+   }
+   ```
+
+5. Declare the UI layout of the FoodListItem child component. Create a Flex component, including the food image thumbnail, food name, and calories in the food.
+     
+   ```
+   import { FoodData } from '../model/FoodData'
+   import { initializeOnStartup } from '../model/FoodDataModels'
+   
+   @Component
+   struct FoodListItem {
+     private foodItem: FoodData
+     build() {
+       Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
+         Image(this.foodItem.image)
+           .objectFit(ImageFit.Contain)
+           .height(40)
+           .width(40)
+           .backgroundColor('#FFf1f3f5')
+           .margin({ right: 16 })
+         Text(this.foodItem.name)
+           .fontSize(14)
+           .flexGrow(1)
+         Text(this.foodItem.calories + ' kcal')
+           .fontSize(14)
+       }
+       .height(64)
+       .margin({ right: 24, left:32 })
+     }
+   }
+   
+   @Entry
+   @Component
+   struct FoodList {
+     private foodItems: FoodData[] = initializeOnStartup()
+     build() {
+       List() {
+         ListItem() {
+           FoodListItem({ foodItem: this.foodItems[0] })
+         }
+       }
+     }
+   }
+   ```
+
+   ![en-us_image_0000001267887833](figures/en-us_image_0000001267887833.png)
+
+6. Create two FoodListItem objects. Create two FoodListItem objects in the List component and pass the first element this.foodItems[0] and the second element foodItem: this.foodItems[1] to the FoodListItem.
+     
+   ```
+   import { FoodData } from '../model/FoodData'
+   import { initializeOnStartup } from '../model/FoodDataModels'
+   
+   @Component
+   struct FoodListItem {
+       private foodItem: FoodData
+       build() {
+           Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
+               Image(this.foodItem.image)
+                   .objectFit(ImageFit.Contain)
+                   .height(40)
+                   .width(40)
+                   .backgroundColor('#FFf1f3f5')
+                   .margin({ right: 16 })
+               Text(this.foodItem.name)
+                   .fontSize(14)
+                   .flexGrow(1)
+               Text(this.foodItem.calories + ' kcal')
+                   .fontSize(14)
+           }
+           .height(64)
+           .margin({ right: 24, left:32 })
+       }
+   }
+   
+   @Entry
+   @Component
+   struct FoodList {
+     private foodItems: FoodData[] = initializeOnStartup()
+     build() {
+       List() {
+         ListItem() {
+           FoodListItem({ foodItem: this.foodItems[0] })
+         }
+         ListItem() {
+           FoodListItem({ foodItem: this.foodItems[1] })
+         }
+       }
+     }
+   }
+   ```
+
+   ![en-us_image_0000001267767849](figures/en-us_image_0000001267767849.png)
+
+7. Import ForEach so that you do not need to create FoodListItem objects one by one.
+     
+   ```
+   ForEach(
+       arr: any[], // Array to be iterated
+       itemGenerator: (item: any) => void, // child component generator
+       keyGenerator?: (item: any) => string // (optional) Unique key generator, which is recommended.
+   )
+   ```
+
+   The ForEach group has three parameters. The first parameter is the array to be traversed, the second parameter is the lambda function for generating child components, and the third parameter is the key value generator. The third parameter is optional. Yet, for performance reasons, it is strongly recommended that you provide it. keyGenerator enables the development framework to better recognize array changes without having to rebuild all nodes after item changes.
+
+   Traverse the foodItems array to cyclically create the ListItem component. Pass each item in foodItems as a parameter to the FoodListItem component.
+
+     
+   ```
+   ForEach(this.foodItems, item => {
+       ListItem() {
+           FoodListItem({ foodItem: item })
+       }
+   }, item => item.id.toString())
+   ```
+
+   The code is as follows:
+
+     
+   ```
+   import { FoodData } from '../model/FoodData'
+   import { initializeOnStartup } from '../model/FoodDataModels'
+   
+   @Component
+   struct FoodListItem {
+     private foodItem: FoodData
+     build() {
+       Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
+         Image(this.foodItem.image)
+           .objectFit(ImageFit.Contain)
+           .height(40)
+           .width(40)
+           .backgroundColor('#FFf1f3f5')
+           .margin({ right: 16 })
+         Text(this.foodItem.name)
+           .fontSize(14)
+           .flexGrow(1)
+         Text(this.foodItem.calories + ' kcal')
+           .fontSize(14)
+       }
+       .height(64)
+       .margin({ right: 24, left:32 })
+     }
+   }
+   
+   @Entry
+   @Component
+   struct FoodList {
+     private foodItems: FoodData[] = initializeOnStartup()
+     build() {
+       List() {
+         ForEach(this.foodItems, item => {
+           ListItem() {
+             FoodListItem({ foodItem: item })
+           }
+         }, item => item.id.toString())
+       }
+     }
+   }
+   ```
+
+8. Add a title for the FoodList.
+     
+   ```
+   @Entry
+   @Component
+   struct FoodList {
+     private foodItems: FoodData[] = initializeOnStartup()
+     build() {
+       Column() {
+         Flex({justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center}) {
+           Text('Food List')
+             .fontSize(20)
+             .margin({ left:20 })
+         }
+         .height('7%')
+         .backgroundColor('#FFf1f3f5')
+         List() {
+           ForEach(this.foodItems, item => {
+             ListItem() {
+               FoodListItem({ foodItem: item })
+             }
+           }, item => item.id.toString())
+         }
+         .height('93%')
+       }
+     }
+   }
+   ```
+
+   ![en-us_image_0000001267607877](figures/en-us_image_0000001267607877.png)

en/application-dev/device/ui/ui-ts-building-data-model.md

+# Building a Food Data Model
+
+
+On the created page, we use various items to describe food, such as food names, calories, proteins, fats, carbohydrates, and vitamin C. This form of coding is impractical in actual development. Therefore, you need to create food data models to store and manage data in a unified manner.
+
+
+![en-us_image_0000001267767897](figures/en-us_image_0000001267767897.png)
+
+
+1. Create a folder named model and create a file named FoodData.ets therein.
+   ![en-us_image_0000001223127760](figures/en-us_image_0000001223127760.png)
+
+2. Define a food data storage model, FoodData, and an enum variable, Category. The FoodData class contains the food ID, name, category, image, calories, protein, fat, carbohydrates, and vitamin C attributes.
+   The eTS programming language is an extension of the TS language and also supports the TS syntax.
+
+     
+   ```
+   enum Category  {
+     Fruit,
+     Vegetable,
+     Nut,
+     Seafood,
+     Dessert
+   }
+   
+   let NextId = 0;
+   class FoodData {
+     id: string;
+     name: string;
+     image: Resource;
+     category: Category;
+     calories: number;
+     protein: number;
+     fat: number;
+     carbohydrates: number;
+     vitaminC: number;
+   
+     constructor(name: string, image: Resource, category: Category, calories: number, protein: number, fat: number, carbohydrates: number, vitaminC: number) {
+       this.id = `${ NextId++ }`;
+       this.name = name;
+       this.image = image;
+       this.category = category;
+       this.calories = calories;
+       this.protein = protein;
+       this.fat = fat;
+       this.carbohydrates = carbohydrates;
+       this.vitaminC = vitaminC;
+     }
+   }
+   ```
+
+3. Store food image resources in the resources > phone > media directory. Use food names as the image names.
+   ![en-us_image_0000001222967800](figures/en-us_image_0000001222967800.png)
+
+4. Create food resource data. Create FoodDataModels.ets in the model folder and declare a food composition array, FoodComposition on the page.
+   In this example, 12 pieces of food data are used. You can customize more data resources when needed. Use LazyForEach to load data if a large amount of food data is involved. The following nutritional data is sourced from the Internet.
+
+     
+   ```
+   const FoodComposition: any[] = [
+     { 'name': 'Tomato', 'image': $r('app.media.Tomato'), 'category': Category.Vegetable, 'calories': 17, 'protein': 0.9, 'fat': 0.2, 'carbohydrates': 3.9, 'vitaminC': 17.8 },
+     { 'name': 'Walnut', 'image': $r('app.media.Walnut'), 'category': Category.Nut, 'calories': 654 , 'protein': 15, 'fat': 65, 'carbohydrates': 14, 'vitaminC': 1.3 },
+     { 'name': 'Cucumber', 'image': $r('app.media.Cucumber'), 'category': Category.Vegetable, 'calories': 30, 'protein': 3, 'fat': 0, 'carbohydrates': 1.9, 'vitaminC': 2.1 },
+     { 'name': 'Blueberry', 'image': $r('app.media.Blueberry'), 'category': Category.Fruit, 'calories': 57, 'protein': 0.7, 'fat': 0.3, 'carbohydrates': 14, 'vitaminC': 9.7 },
+     { 'name': 'Crab', 'image': $r('app.media.Crab'), 'category': Category.Seafood, 'calories': 97, 'protein': 19, 'fat': 1.5, 'carbohydrates': 0, 'vitaminC': 7.6 },
+     { 'name': 'IceCream', 'image': $r('app.media.IceCream'), 'category': Category.Dessert, 'calories': 207, 'protein': 3.5, 'fat': 11, 'carbohydrates': 24, 'vitaminC': 0.6 },
+     { 'name': 'Onion', 'image': $r('app.media.Onion'), 'category': Category.Vegetable, 'calories': 39, 'protein': 1.1, 'fat': 0.1, 'carbohydrates': 9, 'vitaminC': 7.4 },
+     { 'name': 'Mushroom', 'image': $r('app.media.Mushroom'), 'category': Category.Vegetable, 'calories': 22, 'protein': 3.1, 'fat': 0.3, 'carbohydrates': 3.3, 'vitaminC': 2.1 },
+     { 'name': 'Kiwi', 'image': $r('app.media.Kiwi'), 'category': Category.Fruit, 'calories': 60 , 'protein': 1.1, 'fat': 0.5, 'carbohydrates': 15, 'vitaminC': 20.5 },
+     { 'name': 'Pitaya', 'image': $r('app.media.Pitaya'), 'category': Category.Fruit, 'calories': 60, 'protein': 1.2, 'fat': 0, 'carbohydrates': 10, 'vitaminC': 60.9 },
+     { 'name': 'Avocado', 'image': $r('app.media.Avocado'), 'category': Category.Fruit, 'calories': 160, 'protein': 2, 'fat': 15, 'carbohydrates': 9, 'vitaminC': 10 },
+     { 'name': 'Strawberry', 'image': $r('app.media.Strawberry'), 'category': Category.Fruit, 'calories': 32, 'protein': 0.7, 'fat': 0.3, 'carbohydrates': 8, 'vitaminC': 58.8 }
+   ]
+   ```
+
+5. Create the initializeOnStartUp method to initialize the FoodData array. Export the FoodData class from FoodData.ets, and import FoodData and Category in FoodDataModels.ets.
+     
+   ```
+   // FoodData.ets
+   export enum Category {
+    ......
+   }
+   export class FoodData {
+     ......
+   }
+   // FoodDataModels.ets
+   import { Category, FoodData } from './FoodData'
+   
+   export function initializeOnStartup(): Array<FoodData> {
+     let FoodDataArray: Array<FoodData> = []
+     FoodComposition.forEach(item => {
+       FoodDataArray.push(new FoodData(item.name, item.image, item.category, item.calories, item.protein, item.fat, item.carbohydrates, item.vitaminC ));
+     })
+     return FoodDataArray;
+   }
+   ```
+
+
+The data resources for the diet application are now ready. You can continue to create a food category list by loading the data.

en/application-dev/device/ui/ui-ts-components-web.md

+# Web
+
+The \<Web> component can be used to display web pages. For details, see [Web API](../reference/arkui-ts/ts-basic-components-web.md).
+
+## Creating a Component
+
+Create a \<Web> component in the .ets file under main/ets/MainAbility/pages. Then, in the created component, use src to specify the web page URI to be referenced, and bind a controller to the component to call the component APIs.
+
+  ```
+  // xxx.ets
+  @Entry
+  @Component
+  struct WebComponent {
+    controller: WebController = new WebController();
+    build() {
+      Column() {
+        Web({ src: 'https://www.example.com', controller: this.controller })
+      }
+    }
+  }
+  ```
+
+## Setting Styles and Attributes
+
+When using the \<Web> component, you need to specify the styles and attributes. The sample code is as follows.
+
+```
+// xxx.ets
+@Entry
+@Component
+struct WebComponent {
+  fileAccess: boolean = true;
+  controller: WebController = new WebController();
+  build() {
+    Column() {
+      Text('Hello world!')
+        .fontSize(20)
+      Web({ src: 'https://www.example.com', controller: this.controller })
+        // Set the height and padding.
+        .height(500)
+        .padding(20)
+        // Set the file access permission and script execution permission.
+        .fileAccess(this.fileAccess)
+        .javaScriptAccess(true)
+      Text('End')
+        .fontSize(20)
+    }
+  }
+}
+```
+## Adding Events and Methods
+
+Add the onProgressChange event for the \<Web> component, which is triggered when the loading progress changes and returns the progress value in its callback. Assign the progress value to the \<Progress> component to control the status of the component. When the progress reaches 100%, the \<Progress> component is hidden, and the web page loading is complete.
+
+```
+// xxx.ets
+@Entry
+@Component
+struct WebComponent {
+  @State progress: number = 0;
+  @State hideProgress: boolean = true;
+  fileAccess: boolean = true;
+  controller: WebController = new WebController();
+  build() {
+    Column() {
+      Text('Hello world!')
+        .fontSize(20)
+      Progress({value: this.progress, total: 100})
+        .color('#0000ff')
+        .visibility(this.hideProgress ? Visibility.None : Visibility.Visible)
+      Web({ src: 'https://www.example.com', controller: this.controller })
+        .fileAccess(this.fileAccess)
+        .javaScriptAccess(true)
+        .height(500)
+        .padding(20)
+        // Add an onProgressChange event.
+        .onProgressChange(e => {
+          this.progress = e.newProgress;
+          // When the progress reaches 100%, the progress bar disappears.
+          if (this.progress === 100) {
+            this.hideProgress = true;
+          } else {
+            this.hideProgress = false;
+          }
+        })
+      Text('End')
+        .fontSize(20)
+    }
+  }
+}
+```
+Add the runJavaScript method to the onPageEnd event. The onPageEnd event is triggered when the web page finishes loading. In this case, the runJavaScript method can be used to execute JavaScript scripts in the HTML file. In the sample code below, when the web page finishes loading, the onPageEnd event is triggered to call the test method in the HTML file and print information on the console.
+
+```
+// xxx.ets
+@Entry
+@Component
+struct WebComponent {
+  @State progress: number = 0;
+  @State hideProgress: boolean = true;
+  fileAccess: boolean = true;
+  // Define the controller for the \<Web> component.
+  controller: WebController = new WebController();
+  build() {
+    Column() {
+      Text('Hello world!')
+        .fontSize(20)
+      Progress({value: this.progress, total: 100})
+        .color('#0000ff')
+        .visibility(this.hideProgress ? Visibility.None : Visibility.Visible)
+      // Initialize the \<Web> component and bind it to the controller.
+      Web({ src: $rawfile('index.html'), controller: this.controller })
+        .fileAccess(this.fileAccess)
+        .javaScriptAccess(true)
+        .height(500)
+        .padding(20)
+        .onProgressChange(e => {
+          this.progress = e.newProgress;
+          if (this.progress === 100) {
+            this.hideProgress = true;
+          } else {
+            this.hideProgress = false;
+          }
+        })
+        .onPageEnd(e => {
+          // test() is defined in index.html.
+          this.controller.runJavaScript({ script: 'test()' });
+          console.info('url: ', e.url);
+        })
+      Text('End')
+        .fontSize(20)
+    }
+  }
+}
+```
+
+Create an HTML file in main/resources/rawfile.
+
+```
+<!-- index.html -->
+<!DOCTYPE html>
+<html>
+<meta charset="utf-8">
+<body>
+    Hello world!
+</body>
+<script type="text/javascript">
+  function test() {
+      console.info('Ark Web Component');
+  }
+</script>
+</html>
+```
+## Scenario Example
+
+In this example, you'll implement a \<Web> component where videos can be played dynamically. Embed a video resource into an HTML page, and then use the \<Web> component controller to invoke the onActive and onInactive methods to activate and pause page rendering, respectively. When the page is hidden, the \<Web> component stops rendering and the video playback pauses. When the page is displayed, the \<Web> component is activated and the video playback resumes.
+
+  ```
+  // xxx.ets
+  @Entry
+  @Component
+  struct WebComponent {
+    controller: WebController = new WebController();
+    build() {
+      Column() {
+        Web({ src: $rawfile('index.html'), controller: this.controller })
+        .fileAccess(true)
+      }
+    }
+
+    onPageHide() {
+      // Invoked when the page is hidden.
+      this.controller.onInactive();
+    }
+
+    onPageShow() {
+      // Invoked when the page is displayed.
+      this.controller.onActive();
+    }
+  }
+  ```
+
+  ```
+  <!-- index.html -->
+  <!DOCTYPE html>
+  <html>
+  <meta charset="utf-8">
+  <body>
+      <video width="320" height="240" controls="controls" muted="muted" autoplay="autoplay">
+          <!-- The test.mp4 video file is stored in main/resources/rawfile. -->
+          <source src="test.mp4" type="video/mp4">
+      </video>
+  </body>
+  </html>
+  ```

en/application-dev/device/ui/ui-ts-components.md

+# Getting to Know Components
+
+
+Before customizing a component, get to know what the [component and decorator](#components-and-decorators) are and initialize the component. Then, [modify the component attributes and constructor parameters](#modifying-component-attributes-and-constructor-parameters) to customize a component.
+
+
+## Components and Decorators
+
+In a declarative UI, all pages are composed of components. The data structure of the component is struct, and the decorator [@Component](ts-component-based-component.md) is the component-based flag. The struct decorated by @Component indicates that the struct has the component capability.
+
+The method for declaring a custom component is as follows:
+
+
+```
+@Component
+struct MyComponent {}
+```
+
+In an IDE project template, MyComponent is a custom component that can display text in the center. You can describe your UI structures in the build method of the component, by complying with the API constraints of the Builder.
+
+
+```
+interface Builder {
+    build: () => void
+}
+```
+
+The component decorated by [@Entry](ts-component-based-entry.md) indicates that the component is the main entry of the page and can also be considered as the root node of the page. **NOTE** that a page must have one and only one @Entry. Only the @Entry decorated component and its child components are displayed on the page.
+
+@Component and @Entry are basic and important decorators. To put it simply, a decorator assigns a capability to an object to be decorated. For example, @Entry assigns the capability of the page entry, and @Component assigns the component capability.
+
+With a basic knowledge of the component and decorator, you are ready to develop a diet application.
+
+
+## Modifying Component Attributes and Constructor Parameters
+
+When you create a system component, the default style is used. You can change the display of the component by changing its attributes and styles.
+
+1. Modify the fontSize attribute of the <Text> component to change the font size of the component. In this example, the font size is set to 26 and font weight 500. Two configuration methods are available for setting the font weight:
+   1. The value of the number type ranges from 100 to 900. The default value is 400. A larger value indicates a thicker font.
+   2. fontWeight is a built-in enumeration type. Its value can be Lighter, Normal, Bold, or Bolder.
+
+   The attribute method must follow the component and be connected by the operator ".". You can also configure multiple attributes of the component in method chaining mode.
+
+   
+   ```
+   @Entry
+   @Component
+   struct MyComponent {
+       build() {
+           Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+               Text('Hello World')
+                   .fontSize(26)
+                   .fontWeight(500)
+           }
+           .width('100%')
+           .height('100%')
+       }
+   }
+   ```
+
+   ![en-us_image_0000001267767845](figures/en-us_image_0000001267767845.png)
+
+2. Change the display content of the <Text> component from Hello World to Tomato by modifying the constructor parameters of the <Text> component.
+  
+   ```
+   @Entry
+   @Component
+   struct MyComponent {
+       build() {
+           Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+               Text('Tomato')
+                   .fontSize(26)
+                   .fontWeight(500)
+           }
+           .width('100%')
+           .height('100%')
+       }
+   }
+   ```
+
+   ![en-us_image_0000001267887829](figures/en-us_image_0000001267887829.png)

en/application-dev/device/ui/ui-ts-creating-project.md

+# Creating a Declarative UI Project
+
+
+Before creating a project, you need to install DevEco Studio. 
+
+
+1. Open DevEco Studio and click Create Project. If there is already a project, choose File > New > New project.
+   ![en-us_image_0000001267607861](figures/en-us_image_0000001267607861.png)
+
+2. 
+  
+
+   On the page for selecting an ability template, select [Standard]Empty Ability.
+
+   ![en-us_image_0000001223127704](figures/en-us_image_0000001223127704.png)
+
+3. 
+  Install the OpenHarmony SDK.
+
+   ![en-us_image_0000001223127700](figures/en-us_image_0000001223127700.png)
+
+4. On the project configuration page, set Project Name to HealthyDiet, Project Type to Application, Device Type to Phone, Language to eTS, and Compatible API Version to SDK: API Version 7. By default, DevEco Studio saves the project to drive C. You can change the save path by setting Save Location. When you are done, click Finish.
+  
+
+   ![en-us_image_0000001267647849](figures/en-us_image_0000001267647849.png)
+
+5. After the project is created, open the app.ets file.
+     The app.ets file provides the onCreate and onDestroy methods for the application lifecycle. onCreate is called when an application is created, and onDestroy is called when an application is destroyed. Global variables can be declared in the app.ets file, wherein the declared data and methods are shared by the entire application.
+     
+   ```
+   export default {
+       onCreate() {
+           console.info('Application onCreate')
+       },
+       onDestroy() {
+           console.info('Application onDestroy')
+       },
+   }
+   ```
+
+6. In the project navigation tree, open index.ets. This page displays the current UI description. The declarative UI framework automatically generates a component-based struct, which complies with the Builder API declaration. The current layout and components are declared in the build method.
+  
+   ```
+   @Entry
+   @Component
+   struct MyComponent  {
+     build() {
+       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+         Text('Hello World')
+           .fontSize(50)
+           .fontWeight(FontWeight.Bold)
+       }
+       .width('100%')
+       .height('100%')
+     }
+   }
+   ```
+
+7. Click Previewer on the right to open the Previewer window. In the Previewer window of the phone type, Hello World is displayed in the middle and in bold.
+   If the Previewer button is unavailable, choose Settings > SDK Manager >OpenHarmony SDK > Tools to check whether the Previewer is installed.
+
+   ![en-us_image_0000001222807756](figures/en-us_image_0000001222807756.png)
+
+8. Install the application on the phone and run the application. Connect the phone to the computer. After the IDE identifies the phone, click Run'entry'.
+   ![en-us_image_0000001267607865](figures/en-us_image_0000001267607865.png)
+
+   Before the installation, you must configure an application signature. For details, see [Configuring the OpenHarmony App Signature](../quick-start/configuring-the-openharmony-app-signature.md). After the installation is complete, click the Run icon on the screen to open the application. Hello World is displayed in the center of the screen.
+
+   ![en-us_image_0000001267647841](figures/en-us_image_0000001267647841.png)

en/application-dev/device/ui/ui-ts-creating-simple-page.md

+# Creating a Simple Page
+
+
+In this section, we will develop an infographic food details page, by building custom components through the container components <Stack> and <Flex> as well as basic components <Image> and <Text>.
+
+
+## Building the Stack Layout
+
+1. Create a food name.
+     Delete the code of the build method in the project template, create a <Stack> component, and place the <Text> component in the braces of the <Stack> component so that the <Text> component becomes a child component of the <Stack> component. A <Stack> component consists of one or more child components. The latter child component overwrites the former one.
+     
+   ```
+   @Entry
+   @Component
+   struct MyComponent {
+     build() {
+       Stack() {
+           Text('Tomato')
+               .fontSize(26)
+               .fontWeight(500)
+       }
+     }
+   }
+   ```
+
+   ![en-us_image_0000001222967780](figures/en-us_image_0000001222967780.png)
+
+2. Display food pictures.
+     Create an <Image> component and specify a URL for it. The <Image> and <Text> components are mandatory. To display the <Text> component above the <Image> component, you need to declare the <Image> component first. Image resources are stored in the rawfile folder in resources. When referencing the resources in the rawfile folder, use the $rawfile('_filename_ loaded) format, where filename indicates the relative path of the file in the rawfile folder. Currently, $rawfile only allows the <Image> component to reference image resources.
+     
+   ```
+   @Entry
+   @Component
+   struct MyComponent {
+     build() {
+       Stack() {
+           Image($rawfile('Tomato.png'))
+           Text('Tomato')
+               .fontSize(26)
+               .fontWeight(500)
+       }
+     }
+   }
+   ```
+
+   ![en-us_image_0000001267887861](figures/en-us_image_0000001267887861.png)
+
+3. Access images through resources.
+   In addition to specifying the image path, you can also use the media resource symbol $r to reference resources based on the resource qualifier rules in the resources folder. Right-click the resources folder, choose New > Resource Directory, set Resource Type to Media (image resource), and set the resource qualifier to Device-Phone (currently, phones are used).
+
+   ![en-us_image_0000001267887853](figures/en-us_image_0000001267887853.png)
+
+   Click OK. The phone.media folder is generated in the resources folder. Place Tomato.png in the folder.
+
+   ![en-us_image_0000001222807784](figures/en-us_image_0000001222807784.png)
+
+   You can then can reference the application resource in the $r('app.type.name') format, that is, $r('app.media.Tomato').
+
+   
+   ```
+   @Entry
+   @Component
+   struct MyComponent {
+     build() {
+       Stack() {
+           Image($r('app.media.Tomato'))
+               .objectFit(ImageFit.Contain)
+               .height(357)
+           Text('Tomato')
+               .fontSize(26)
+               .fontWeight(500)
+       }
+     }
+   }
+   ```
+
+4. Set the width and height of the image, and set the objectFit attribute of the image to ImageFit.Contain, which means to keep the aspect ratio of the image to ensure that the image is completely displayed within the boundary.
+     If the image fills the entire screen, the possible causes are as follows:
+   1. The width and height of the image are not set.
+   
+   2. The default attribute of objectFit of the image is ImageFit.Cover, that is, the image is zoomed in or zoomed out to fill the entire display boundary with the aspect ratio locked.
+
+     
+   ```
+   @Entry
+   @Component
+   struct MyComponent {
+     build() {
+       Stack() {
+           Image($r('app.media.Tomato'))
+               .objectFit(ImageFit.Contain)
+               .height(357)
+           Text('Tomato')
+               .fontSize(26)
+               .fontWeight(500)
+       }
+     }
+   }
+   ```
+
+   ![en-us_image_0000001223127732](figures/en-us_image_0000001223127732.png)
+
+5. Set the food image and name layout. Set the alignment mode of the stack to bottom alignment. By default, the stack is center aligned. Set alignContent to Alignment.BottomStart. Similar to FontWeight, Alignment is a built-in enumeration type provided by the framework.
+  
+   ```
+   @Entry
+   @Component
+   struct MyComponent {
+     build() {
+       Stack({ alignContent: Alignment.BottomStart }) {
+           Image($r('app.media.Tomato'))
+               .objectFit(ImageFit.Contain)
+               .height(357)
+            Text('Tomato')
+               .fontSize(26)
+               .fontWeight(500)
+       }
+     }
+   }
+   ```
+
+   ![en-us_image_0000001267647873](figures/en-us_image_0000001267647873.png)
+
+6. You can change the background color of the food image by setting the background color of the stack. You can set the background color in either of the following ways:
+   1. By using the built-in enumeration value of Color provided by the framework. For example, backgroundColor(Color.Red) indicates that the background color is set to red.
+   2. By using the parameter of the string type. The supported color formats are rgb, rgba, and HEX. For example, you can set the background color to blue by setting backgroundColor(??\#0000FF??) and set the background color to white by setting backgroundColor(??rgb(255, 255, 255)??).
+
+     
+   ```
+   @Entry
+   @Component
+   struct MyComponent {
+     build() {
+       Stack({ alignContent: Alignment.BottomStart }) {
+           Image($r('app.media.Tomato'))
+               .objectFit(ImageFit.Contain)
+               .height(357)
+           Text('Tomato')
+               .fontSize(26)
+               .fontWeight(500)
+       }
+       .backgroundColor('#FFedf2f5')
+     }
+   }
+   ```
+
+   ![en-us_image_0000001222967772](figures/en-us_image_0000001222967772.png)
+
+7. Adjust the left and bottom margin of the <Text> component. Margin is a shorthand attribute. You can specify the margins of the four edges in a unified manner or separately. The configuration method is as follows:
+   1. When the parameter is set to Length, the outer margins of the four edges are specified. For example, margin(20) indicates that the outer margins of the top, right, bottom, and left edges are all 20.
+   2. {top?: Length, right?: Length, bottom?: Length, left?:Length} specifies the margins of the four edges. For example, margin({ left: 26, bottom: 17.4 }) indicates that the left margin is 26 and the bottom margin is 17.4.
+
+     
+   ```
+   @Entry
+   @Component
+   struct MyComponent {
+     build() {
+       Stack({ alignContent: Alignment.BottomStart }) {
+           Image($r('app.media.Tomato'))
+               .objectFit(ImageFit.Contain)
+               .height(357)
+           Text('Tomato')
+               .fontSize(26)
+               .fontWeight(500)
+               .margin({left: 26, bottom: 17.4})
+       }
+        .backgroundColor('#FFedf2f5')
+     }
+   }
+   ```
+
+   ![en-us_image_0000001222967776](figures/en-us_image_0000001222967776.png)
+
+8. Adjust the structure between components and semanticize component names. Create the FoodDetail page entry component, create a column in FoodDetail, and set the alignment to alignItems(HorizontalAlign.Center). Change the name of the MyComponent component to FoodImageDisplay, which is a child component of the FoodDetail component.
+   A column is a container component whose child components are vertically arranged. It is a linear layout in essence. Therefore, only the alignment in the cross axis direction can be set.
+
+   
+   ```
+   @Component
+   struct FoodImageDisplay {
+     build() {
+       Stack({ alignContent: Alignment.BottomStart }) {
+         Image($r('app.media.Tomato'))
+           .objectFit(ImageFit.Contain)
+         Text('Tomato')
+           .fontSize(26)
+           .fontWeight(500)
+           .margin({ left: 26, bottom: 17.4 })
+       }
+       .height(357)
+       .backgroundColor('#FFedf2f5')
+     }
+   }
+   
+   @Entry
+   @Component
+   struct FoodDetail {
+     build() {
+       Column() {
+         FoodImageDisplay()
+       }
+       .alignItems(HorizontalAlign.Center)
+     }
+   }
+   ```
+
+
+## Building the Flex Layout
+
+You can use the Flex layout to build a food composition table. In this way you do not need to worry about the width and height calculation. The size of different cells can be flexibly set based on the proportion.
+
+1. Create a ContentTable component as a child component of the FoodDetail component.
+  
+   ```
+   @Component
+   struct FoodImageDisplay {
+     build() {
+       Stack({ alignContent: Alignment.BottomStart }) {
+         Image($r('app.media.Tomato'))
+           .objectFit(ImageFit.Contain)
+           .height(357)
+         Text('Tomato')
+           .fontSize(26)
+           .fontWeight(500)
+           .margin({ left: 26, bottom: 17.4 })
+       }
+       .backgroundColor('#FFedf2f5')
+     }
+   }
+   
+   @Component
+   struct ContentTable {
+     build() {}
+   }
+   
+   @Entry
+   @Component
+   struct FoodDetail {
+     build() {
+       Column() {
+         FoodImageDisplay()
+         ContentTable()
+       }
+       .alignItems(HorizontalAlign.Center)
+     }
+   }
+   ```
+
+2. Create a Flex component to display two food composition categories in the tomato: Calories and Nutrition.
+   Calories contains information about calories. Nutrition contains information about protein, fat, carbohydrates, and vitamin C.
+
+   Create the Calories class. Create a Flex component and set its height to 280, and the top, right, and left margins to 30. The Flex component contains three Text child components, which represent the category name (Calories), content name (Calories), and contain value (17 kcal), respectively. By default, child components in the Flex component are arranged horizontally.
+
+   In the following example, code of FoodImageDisplay is omitted, and only code of ContentTable is provided.
+
+   
+   ```
+   @Component
+   struct ContentTable {
+     build() {
+       Flex() {
+         Text('Calories')
+           .fontSize(17.4)
+           .fontWeight(FontWeight.Bold)
+         Text('Calories')
+           .fontSize(17.4)
+         Text('17kcal')
+           .fontSize(17.4)
+       }
+       .height(280)
+       .padding({ top: 30, right: 30, left: 30 })
+     }
+   }
+   
+   @Entry
+   @Component
+   struct FoodDetail {
+     build() {
+       Column() {
+         FoodImageDisplay()
+         ContentTable()
+       }
+       .alignItems(HorizontalAlign.Center)
+     }
+   }
+   ```
+
+   ![en-us_image_0000001267767869](figures/en-us_image_0000001267767869.png)
+
+3. Adjust the layout and set the proportion (layoutWeight) of each part. Set the proportion of the category name to 1, and the total proportion of content name and content value to 2. The content name and content value are in a same Flex, and the content name occupies all remaining space flexGrow(1).
+  
+   ```
+   @Component
+   struct FoodImageDisplay {
+     build() {
+       Stack({ alignContent: Alignment.BottomStart }) {
+         Image($m('Tomato.png'))
+           .objectFit(ImageFit.Contain)
+           .height(357)
+         Text('Tomato')
+           .fontSize(26)
+           .fontWeight(500)
+           .margin({ left: 26, bottom: 17.4 })
+       }
+       .backgroundColor('#FFedf2f5')
+     }
+   }
+   
+   @Component
+   struct ContentTable {
+     build() {
+       Flex() {
+         Text('Calories')
+           .fontSize(17.4)
+           .fontWeight(FontWeight.Bold)
+           .layoutWeight(1)
+         Flex() {
+           Text('Calories')
+             .fontSize(17.4)
+             .flexGrow(1)
+           Text('17kcal')
+             .fontSize(17.4)
+         }
+         .layoutWeight(2)
+       }
+       .height(280)
+       .padding({ top: 30, right: 30, left: 30 })
+     }
+   }
+   
+   @Entry
+   @Component
+   struct FoodDetail {
+     build() {
+       Column() {
+         FoodImageDisplay()
+         ContentTable()
+       }
+       .alignItems(HorizontalAlign.Center)
+     }
+   }
+   ```
+
+   ![en-us_image_0000001267607901](figures/en-us_image_0000001267607901.png)
+
+4. Create the Nutrient class in a similar process. Nutrition consists of four parts: Protein, Fat, Carbohydrates, and VitaminC. The names of the last three parts are omitted in the table and represented by spaces.
+   Set FlexDirection.Column, FlexAlign.SpaceBetween, and ItemAlign.Start.
+
+   
+   ```
+   @Component
+   struct ContentTable {
+     build() {
+       Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Start }) {
+         Flex() {
+           Text('Calories')
+             .fontSize(17.4)
+             .fontWeight(FontWeight.Bold)
+             .layoutWeight(1)
+           Flex() {
+             Text('Calories')
+               .fontSize(17.4)
+               .flexGrow(1)
+             Text('17kcal')
+               .fontSize(17.4)
+           }
+           .layoutWeight(2)
+         }
+         Flex() {
+           Text('Nutrition')
+             .fontSize(17.4)
+             .fontWeight(FontWeight.Bold)
+             .layoutWeight(1)
+           Flex() {
+             Text('Protein')
+               .fontSize(17.4)
+               .flexGrow(1)
+             Text('0.9g')
+               .fontSize(17.4)
+           }
+           .layoutWeight(2)
+         }
+         Flex() {
+           Text(' ')
+             .fontSize(17.4)
+             .fontWeight(FontWeight.Bold)
+             .layoutWeight(1)
+           Flex() {
+             Text('Fat')
+               .fontSize(17.4)
+               .flexGrow(1)
+             Text('0.2g')
+               .fontSize(17.4)
+           }
+           .layoutWeight(2)
+         }
+         Flex() {
+           Text(' ')
+             .fontSize(17.4)
+             .fontWeight(FontWeight.Bold)
+             .layoutWeight(1)
+           Flex() {
+             Text('Carbohydrates')
+               .fontSize(17.4)
+               .flexGrow(1)
+             Text('3.9g')
+               .fontSize(17.4)
+           }
+           .layoutWeight(2)
+         }
+         Flex() {
+           Text(' ')
+             .fontSize(17.4)
+             .fontWeight(FontWeight.Bold)
+             .layoutWeight(1)
+           Flex() {
+             Text('vitaminC')
+               .fontSize(17.4)
+               .flexGrow(1)
+             Text('17.8mg')
+               .fontSize(17.4)
+           }
+           .layoutWeight(2)
+         }
+       }
+       .height(280)
+       .padding({ top: 30, right: 30, left: 30 })
+     }
+   }
+   
+   @Entry
+   @Component
+   struct FoodDetail {
+       build() {
+           Column() {
+               FoodImageDisplay()
+               ContentTable()
+           }
+           .alignItems(HorizontalAlign.Center)
+       }
+   }
+   ```
+
+5. Use the custom constructor @Builder to simplify the code. It can be found that the food groups in each food composition table are actually of the same UI structure.
+   ![en-us_image_0000001223287704](figures/en-us_image_0000001223287704.png)
+
+   Currently, all food groups are declared, resulting in code duplication and redundancy. You can use @Builder to build a custom method and abstract the same UI structure declaration. The @Builder decorated method and the build method for the @Component decorated component are used to declare some UI rendering structures and comply with the same eTS syntax. You can define one or more methods decorated by @Builder, but a component decorated by @Component can have only one build method.
+
+   Declare the IngredientItem method decorated by @Builder in ContentTable to declare the UI descriptions for the category name, content name, and content value.
+
+   
+   ```
+   @Component
+   struct ContentTable {
+     @Builder IngredientItem(title:string, name: string, value: string) {
+       Flex() {
+         Text(title)
+           .fontSize(17.4)
+           .fontWeight(FontWeight.Bold)
+           .layoutWeight(1)
+         Flex({ alignItems: ItemAlign.Center }) {
+           Circle({width: 6, height: 6})
+             .margin({right: 12})
+             .fill(colorValue)
+           Text(name)
+             .fontSize(17.4)
+             .flexGrow(1)
+           Text(value)
+             .fontSize(17.4)
+         }
+         .layoutWeight(2)
+       }
+     }
+   }
+   ```
+
+   When the IngredientItem API is called in the build method of ContentTable, this needs to be used to invoke the method in the scope of the component to distinguish the global method call.
+
+   
+   ```
+   @Component
+   struct ContentTable {
+     ......
+     build() {
+       Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Start }) {
+         this.IngredientItem('Calories', 'Calories', '17kcal')
+         this.IngredientItem('Nutrition', 'Protein', '0.9g')
+         this.IngredientItem('', 'Fat', '0.2g')
+         this.IngredientItem('', 'Carbohydrates', '3.9g')
+         this.IngredientItem('', 'VitaminC', '17.8mg')
+       }
+       .height(280)
+       .padding({ top: 30, right: 30, left: 30 })
+     }
+   }
+   ```
+
+   The overall code of the ContentTable component is as follows:
+
+   
+   ```
+   @Component
+   struct ContentTable {
+     @Builder IngredientItem(title:string, name: string, value: string) {
+       Flex() {
+         Text(title)
+           .fontSize(17.4)
+           .fontWeight(FontWeight.Bold)
+           .layoutWeight(1)
+         Flex() {
+           Text(name)
+             .fontSize(17.4)
+             .flexGrow(1)
+           Text(value)
+             .fontSize(17.4)
+         }
+         .layoutWeight(2)
+       }
+     }
+   
+     build() {
+       Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Start }) {
+         this.IngredientItem('Calories', 'Calories', '17kcal')
+         this.IngredientItem('Nutrition', 'Protein', '0.9g')
+         this.IngredientItem('', 'Fat', '0.2g')
+         this.IngredientItem('', 'Carbohydrates', '3.9g')
+         this.IngredientItem('', 'VitaminC', '17.8mg')
+       }
+       .height(280)
+       .padding({ top: 30, right: 30, left: 30 })
+     }
+   }
+   
+   @Entry
+   @Component
+   struct FoodDetail {
+       build() {
+           Column() {
+               FoodImageDisplay()
+               ContentTable()
+           }
+           .alignItems(HorizontalAlign.Center)
+       }
+   }
+   ```
+
+   ![en-us_image_0000001222807792](figures/en-us_image_0000001222807792.png)
+
+You've learned how to build a simple food details page. Read on to learn how to define the page layout and connection.
+
+## Samples
+
+The following sample is provided to help you better understand how to use build a simple page:
+
+- [eTSBuildCommonView](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/eTSBuildCommonView)
+
+  This sample shows how to build a common view to display the picture of tomatoes and nutrition information, with the stack layout and flex layout.

en/application-dev/device/ui/ui-ts-overview.md

+# Overview
+
+
+The TypeScript-based declarative development paradigm of ArkUI is a simplified, high-performance UI development framework for cross-device applications.
+
+
+## Basic Capabilities
+
+In ArkUI that uses the TypeScript-based declarative development paradigm, the programming mode is closer to natural semantics. You can intuitively describe the UI without caring about how the framework implements UI drawing and rendering, leading to simplified and efficient development. The UI capabilities are provided from three dimensions: component, animation, and state management. System capability APIs are also provided to allow for effortless invocation of system capabilities.
+
+
+- Out-of-the-box components
+  A wide range of preset system components are provided. You can set the rendering effect of these components in method chaining mode. You can combine system components to form custom components. In this way, page components are divided into independent UI units to implement independent creation, development, and reuse of different units on pages, making pages more engineering-oriented.
+
+
+- A diverse array of animation APIs
+  By drawing from the standard SVG drawing capability and various open animation APIs, you can customize animation tracks by encapsulating physical models or calling the provided APIs.
+
+
+- State and data management
+  State data management provides clear page update and rendering processes and pipes through decorators with different functions. State management covers UI component states and application states. With these features, you are able to build an application-wide data update and UI rendering process.
+
+
+- System capability APIs
+  Development has never been so easy, with a diverse array of encapsulated system capability APIs, from UI design to system capability invoking.
+
+
+## Overall Architecture
+
+
+
+![en-us_image_0000001223287712](figures/en-us_image_0000001223287712.png)
+
+- Declarative UI frontend
+  Provides basic language specifications of the UI development paradigm, built-in UI components, layouts, and animations, and multiple state management mechanisms, with a wide array of APIs for you to call as required.
+
+- Language runtime
+  Provides the parsing capability for the UI paradigm syntax and allows for cross-language API calls for a high-performance running environment of the TS language.
+
+- Declarative UI backend engine
+  Provides UI rendering pipelines that are compatible with different development paradigms, multiple basic components, layout calculation, dynamic effects, and interaction events, with state management and drawing capabilities.
+
+- Render engine
+  Provides efficient drawing capabilities, which enable rendering instructions collected by the rendering pipeline to be drawn to the screen.
+
+- Porting layer
+  Provides abstract APIs to connect to different systems, such as system rendering pipelines and lifecycle scheduling.

en/application-dev/device/ui/ui-ts-page-redirection-data-transmission.md

+# Implementing Page Redirection and Data Transmission
+
+
+This section describes how to implement page redirection and data transmission between pages:
+
+
+1. Page redirection: Click a food item on the food list page to go to the food details page. Click the back button on the food details page to go back to the food list page.
+
+2. Data transmission between pages: After you click a food item, FoodDetail receives data from the previous page and renders the corresponding food details page.
+
+
+## Page Redirection
+
+The declarative UI paradigm provides two mechanisms for page redirection:
+
+1. Navigator: encapsulates the page routing capability. After the page target is specified, all child components in the page target have the routing capability.
+
+2. Router APIs: called to implement various operations of page routing. You'll need to import router before calling the router APIs.
+
+The procedure below uses these two mechanisms for redirection between the page list page and food details page.
+
+1. Click FoodListItem. The FoodDetail page is displayed. Create a Navigator component in FoodListItem to enable its child components to have the routing function. The target page is 'pages/FoodDetail'.
+  
+   ```
+   @Component
+   struct FoodListItem {
+     private foodItem: FoodData
+     build() {
+       Navigator({ target: 'pages/FoodDetail' }) {
+         Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
+           Image(this.foodItem.image)
+             .objectFit(ImageFit.Contain)
+             .height(40)
+             .width(40)
+             .backgroundColor('#FFf1f3f5')
+             .margin({ right: 16 })
+           Text(this.foodItem.name)
+             .fontSize(14)
+             .flexGrow(1)
+           Text(this.foodItem.calories + ' kcal')
+             .fontSize(14)
+         }
+         .height(64)
+       }
+       .margin({ right: 24, left:32 })
+     }
+   }
+   ```
+
+   ![en-us_image_0000001223127744](figures/en-us_image_0000001223127744.gif)
+
+2. Click FoodGridItem. The FoodDetail page is displayed. Import the router module, and then call the push API of this module to push the FoodDetail page to the route stack to implement page redirection.
+  
+   ```
+   import router from '@system.router'
+   
+   @Component
+   struct FoodGridItem {
+     private foodItem: FoodData
+     build() {
+       Column() {
+         ......
+       }
+       .height(184)
+       .width('100%')
+       .onClick(() => {
+         router.push({ uri: 'pages/FoodDetail' })
+       })
+     }
+   }
+   ```
+
+   ![en-us_image_0000001267607909](figures/en-us_image_0000001267607909.gif)
+
+3. Add the icon for returning from the FoodDetail page to the food list page. Save the Back.png file to the resources > phone > media directory. Create a custom component PageTitle, which contains the back icon and Food Detail text. Call the router.back() API of the router to display the top page of the route stack, that is, the upper-level page.
+  
+   ```
+   // FoodDetail.ets
+   import router from '@system.router'
+   
+   @Component
+   struct PageTitle {
+       build() {
+           Flex({ alignItems: ItemAlign.Start }) {
+               Image($r('app.media.Back'))
+                   .width(21.8)
+                   .height(19.6)
+               Text('Food Detail')
+                   .fontSize(21.8)
+                   .margin({left: 17.4})
+           }
+           .height(61)
+           .backgroundColor('#FFedf2f5')
+           .padding({ top: 13, bottom: 15, left: 28.3 })
+           .onClick(() => {
+               router.back()
+           })
+       }
+   }
+   ```
+
+4. Create the Stack component in the FoodDetail component, including the FoodImageDisplay and PageTitle child components. Set the alignment mode to TopStart.
+  
+   ```
+   @Entry
+   @Component
+   struct FoodDetail {
+     build() {
+       Column() {
+         Stack( { alignContent: Alignment.TopStart }) {
+           FoodImageDisplay()
+           PageTitle()
+         }
+         ContentTable()
+       }
+       .alignItems(HorizontalAlign.Center)
+     }
+   }
+   ```
+
+   ![en-us_image_0000001267767881](figures/en-us_image_0000001267767881.png)
+
+
+## Data Transmission Between Pages
+
+We have implemented the redirection and going back of the FoodCategoryList and FoodDetail pages. At this point, the tomato details page is displayed no matter which FoodListItem/FoodGridItem is clicked. This is because the data transmission between pages is not yet configured. To configure data transmission between pages, set the routing with parameters as follows:
+
+1. Set the params attribute in the Navigator of the FoodListItem component. The params attribute accepts the key-value object.
+  
+   ```
+   // FoodList.ets
+   @Component
+   struct FoodListItem {
+     private foodItem: FoodData
+     build() {
+       Navigator({ target: 'pages/FoodDetail' }) {
+         ......
+       }
+       .params({ foodData: this.foodItem })
+     }
+   }
+   ```
+
+   The router API called by FoodGridItem also has the capability of redirection with parameters. The method of using the router API is similar to that of using the Navigator.
+
+   
+   ```
+   router.push({
+     uri: 'pages/FoodDetail',
+     params: { foodData: this.foodItem }
+   })
+   ```
+
+2. Import the FoodData class to the FoodDetail page and add the foodItem member variable to the FoodDetail component.
+  
+   ```
+   // FoodDetail.ets
+   import { FoodData } from '../model/FoodData'
+   
+   @Entry
+   @Component
+   struct FoodDetail {
+     private foodItem: FoodData
+     build() {
+       ......
+     }
+   }
+   ```
+
+3. Obtain the value of foodData. Call router.getParams().foodData to obtain the data corresponding to foodData carried when the FoodCategoryList page is displayed.
+  
+   ```
+   @Entry
+   @Component
+   struct FoodDetail {
+     private foodItem: FoodData = router.getParams().foodData
+   
+     build() {
+       ......
+     }
+   }
+   ```
+
+4. Re-build the components on the FoodDetail page. During building, the food information on the FoodDetail page is all directly declared constants. You need to use the passed FoodData data to assign a new value to the constants. The code is as follows:
+  
+   ```
+   @Component
+   struct PageTitle {
+       build() {
+           Flex({ alignItems: ItemAlign.Start }) {
+               Image($r('app.media.Back'))
+                   .width(21.8)
+                   .height(19.6)
+               Text('Food Detail')
+                   .fontSize(21.8)
+                   .margin({left: 17.4})
+           }
+           .height(61)
+           .backgroundColor('#FFedf2f5')
+           .padding({ top: 13, bottom: 15, left: 28.3 })
+           .onClick(() => {
+               router.back()
+           })
+       }
+   }
+   
+   @Component
+   struct FoodImageDisplay {
+     private foodItem: FoodData
+     build() {
+       Stack({ alignContent: Alignment.BottomStart }) {
+         Image(this.foodItem.image)
+           .objectFit(ImageFit.Contain)
+         Text(this.foodItem.name)
+           .fontSize(26)
+           .fontWeight(500)
+           .margin({ left: 26, bottom: 17.4 })
+       }
+       .height(357)
+       .backgroundColor('#FFedf2f5')
+     }
+   }
+   
+   @Component
+   struct ContentTable {
+     private foodItem: FoodData
+   
+     @Builder IngredientItem(title:string, name: string, value: string) {
+       Flex() {
+         Text(title)
+           .fontSize(17.4)
+           .fontWeight(FontWeight.Bold)
+           .layoutWeight(1)
+         Flex() {
+           Text(name)
+             .fontSize(17.4)
+             .flexGrow(1)
+           Text(value)
+             .fontSize(17.4)
+         }
+         .layoutWeight(2)
+       }
+     }
+   
+     build() {
+       Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Start }) {
+         this.IngredientItem('Calories', 'Calories', this.foodItem.calories + 'kcal')
+         this.IngredientItem('Nutrition', 'Protein', this.foodItem.protein + 'g')
+         this.IngredientItem('', 'Fat', this.foodItem.fat + 'g')
+         this.IngredientItem('', 'Carbohydrates', this.foodItem.carbohydrates + 'g')
+         this.IngredientItem('', 'VitaminC', this.foodItem.vitaminC + 'mg')
+       }
+       .height(280)
+       .padding({ top: 30, right: 30, left: 30 })
+     }
+   }
+   
+   @Entry
+   @Component
+   struct FoodDetail {
+     private foodItem: FoodData = router.getParams().foodData
+   
+     build() {
+       Column() {
+         Stack( { alignContent: Alignment.TopStart }) {
+           FoodImageDisplay({ foodItem: this.foodItem })
+           PageTitle()
+         }
+         ContentTable({ foodItem: this.foodItem })
+       }
+       .alignItems(HorizontalAlign.Center)
+     }
+   }
+   ```
+
+## Samples
+
+The following sample is provided to help you better understand how to define the page layout and connection:
+
+- [eTSDefiningPageLayoutAndConnection](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/eTSDefiningPageLayoutAndConnection)
+
+  This sample exemplifies the basic usage of the list layout, grid layout, and page routing, by building the food list page and food details page.

en/application-dev/ui/Readme-CN.md

+# UI
+
+- [ArkUI Overview](arkui-overview.md)
+- JavaScript-based Web-like Development Paradigm
+    - [Overview](ui-js-overview.md)
+    - Framework
+        - [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)
+        - [Lifecycle](js-framework-lifecycle.md)
+        - [Resource Limitations and Access](js-framework-resource-restriction.md)
+        - [Multi-Language Capability](js-framework-multiple-languages.md)
+    - Building the UI
+        - [Component Overview](ui-js-building-ui-component.md)
+        - Building the Layout
+            - [Layout Description](ui-js-building-ui-layout-intro.md)
+            - [Adding Title and Paragraph Text](ui-js-building-ui-layout-text.md)
+            - [Adding an Image](ui-js-building-ui-layout-image.md)
+            - [Adding a Comment](ui-js-building-ui-layout-comment.md)
+            - [Adding a Container](ui-js-building-ui-layout-external-container.md)
+        - [Adding Interactions](ui-js-building-ui-interactions.md)
+        - [Developing Animations](ui-js-building-ui-animation.md)
+        - [Defining Events](ui-js-building-ui-event.md)
+        - [Defining Page Routes](ui-js-building-ui-routes.md)
+    - Common Component Development Guidelines
+        - [<text> Development](ui-js-components-text.md)
+        -   [<input> Development](ui-js-components-input.md)
+        -   [<button> Development](ui-js-components-button.md)
+        -   [<list> Development](ui-js-components-list.md)
+        -   [<picker> Development](ui-js-components-picker.md)
+        -   [<dialog> Development](ui-js-components-dialog.md)
+        -   [<form> Development](ui-js-components-form.md)
+        -   [<stepper> Development](ui-js-components-stepper.md)
+        -   [<tabs> Development](ui-js-component-tabs.md)
+        -   [<image> Development](ui-js-components-images.md)
+    - Animation Development Guidelines
+        - CSS Animation
+            - [Defining Attribute Style Animations](ui-js-animate-attribute-style.md)
+            - [Defining Animations with the transform Attribute](ui-js-animate-transform.md)
+            - [Defining Animations with the background-position Attribute](ui-js-animate-background-position-style.md)
+            - [Defining Animations for SVG Components](ui-js-animate-svg.md)
+        - JS Animation
+            - [Component Animation](ui-js-animate-component.md)
+            - Interpolator Animation
+                - [Animation Effect](ui-js-animate-dynamic-effects.md)
+                - [Animation Frame](ui-js-animate-frame.md)
+    - [Custom Components](ui-js-custom-components.md)
+- TypeScript-based Declarative Development Paradigm
+    - [Overview](ui-ts-overview.md)
+    - Framework Overview
+        - File Organization
+            - [Directory Structure](ts-framework-directory.md)
+            - [Rules for Accessing Application Code Files](ts-framework-file-access-rules.md)
+        - ["js" Tag](ts-framework-js-tag.md)
+        - Resource Access
+            - [Accessing Application Resources](ts-application-resource-access.md)
+            - [Accessing System Resources](ts-system-resource-access.md)
+            - [Media Resource Types](ts-media-resource-type.md)
+        - [Pixel Units](ts-pixel-units.md)
+        - [Types](ts-types.md)
+    - Declarative Syntax
+        - [Overview](ts-syntax-intro.md)
+        - General UI Description Specifications
+            - [Basic Concepts](ts-general-ui-concepts.md)
+            - Declarative UI Description Specifications
+                - [Configuration Without Parameters](ts-parameterless-configuration.md)
+                - [Configuration with Mandatory Parameters](ts-configuration-with-mandatory-parameters.md)
+                - [Attribute Configuration](ts-attribution-configuration.md)
+                - [Event Configuration](ts-event-configuration.md)
+                - [Child Component Configuration](ts-child-component-configuration.md)
+            - Componentization
+                - [@Component](ts-component-based-component.md)
+                - [@Entry](ts-component-based-entry.md)
+                - [@Preview](ts-component-based-preview.md)
+                - [@Builder](ts-component-based-builder.md)
+                - [@Extend](ts-component-based-extend.md)
+                - [@CustomDialog](ts-component-based-customdialog.md)
+                - [@Styles](ts-component-based-styles.md)
+        - About UI State Management
+            - [Basic Concepts](ts-ui-state-mgmt-concepts.md)
+            - Managing Component States
+                - [@State](ts-component-states-state.md)
+                - [@Prop](ts-component-states-prop.md)
+                - [@Link](ts-component-states-link.md)
+            - Managing Application States
+                - [AppStorage](ts-application-states-appstorage.md)
+                - [PersistentStorage](ts-application-states-apis-persistentstorage.md)
+                - [Environment](ts-application-states-apis-environment.md)
+            - Managing Other States
+                - [@Observed and @ObjectLink](ts-other-states-observed-objectlink.md)
+                - [@Consume and @Provide](ts-other-states-consume-provide.md)
+                - [@Watch](ts-other-states-watch.md)
+            - About Rendering Control Syntax
+                - [if/else](ts-rending-control-syntax-if-else.md)
+                - [ForEach](ts-rending-control-syntax-foreach.md)
+                - [LazyForEach](ts-rending-control-syntax-lazyforeach.md)
+        - About @Component
+            - [build Function](ts-function-build.md)
+            - [Initialization of Custom Components' Member Variables](ts-custom-component-initialization.md)
+            - [Custom Component Lifecycle Callbacks](ts-custom-component-lifecycle-callbacks.md)
+            - [Component Creation and Re-initialization](ts-component-creation-re-initialization.md)
+        - [About Syntactic Sugar](ts-syntactic-sugar.md)
+    - Common Component Development Guidelines
+        - [<web> Development](ui-ts-components-web.md)
+    - Experiencing the Declarative UI
+        - [Creating a Declarative UI Project](ui-ts-creating-project.md)
+        - [Getting to Know Components](ui-ts-components.md)
+        - [Creating a Simple Page](ui-ts-creating-simple-page.md)
+    - Defining Page Layout and Connection
+        - [Building a Food Data Model](ui-ts-building-data-model.md)
+        - [Building a Food Category List Layout](ui-ts-building-category-list-layout.md)
+        - [Building a Food Category Grid Layout](ui-ts-building-category-grid-layout.md)
+        - [Implementing Page Redirection and Data Transmission](ui-ts-page-redirection-data-transmission.md)

en/application-dev/ui/arkui-overview.md

+# ArkUI Overview
+
+
+## Introduction
+
+ArkUI is a UI development framework that provides what you'll need to develop application UIs.
+
+
+## Basic Concepts
+
+- Component: the smallest unit for UI building and display. You build a UI that meets your needs through flexible combinations of components.
+
+- Page: the smallest unit for ArkUI application scheduling. You can design multiple pages for your application, manage their files on a per-page basis, and schedule page redirection through routing APIs, so as to implement decoupling of application functions.
+
+
+## Key Capabilities
+
+- Diverse components: In addition to a wide range of basic components, such as components for text display, image display, and keypress interaction, ArkUI provides media components that support video playback. Better yet, it also provides polymorphic components, which can adapt to styles of different devices.
+
+- Flexible layouts: Creating a responsive UI in ArkUI is easy, with our carefully-designed layout approaches: Besides the classic flexible layout capability, you also have access to the list, grid, and atomic layouts that auto-adapt to screen resolutions.
+
+- Animation: Apart from animations embedded in components, ArkUI offers additional animation features: attribute animation, transition animation, and custom animation.
+
+- UI interaction: ArkUI allows users to interact with your application UI properly, regardless of the system platform and input device. By default, the UI accepts input from touch gestures, remote controls, and mouse devices, with support for the event notification capability.
+
+- Drawing: ArkUI offers advanced drawing capabilities that allow you to draw custom shapes with a range of editors, from images to fill colors and texts.
+
+- Platform API channel: ArkUI provides an API extension mechanism through which platform capabilities are encapsulated to produce JavaScript APIs in a unified style.
+
+
+## Development Paradigms
+
+ArkUI comes with two development paradigms: JavaScript-based web-like development paradigm (web-like development paradigm for short) and TypeScript-based declarative development paradigm (declarative development paradigm for short). You can choose whichever development paradigm that aligns with your practice.
+
+
+### Web-like Development Paradigm
+
+The web-like development paradigm uses the classical three-stage programming model, in which OpenHarmony Markup Language (HML) is used for building layouts, CSS for defining styles, and JavaScript for adding processing logic. UI components are associated with data through one-way data-binding. This means that when data changes, the UI automatically updates with the new data. This development paradigm has a low learning curve for frontend web developers, allowing them to quickly transform existing web applications into ArkUI applications. It could be helpful if you are developing small- and medium-sized applications with simple UIs.
+
+
+### Declarative Development Paradigm
+
+The declarative development paradigm uses the TypeScript programming language and extends the declarative UI syntax, providing UI drawing capabilities from three dimensions: component, animation, and state management. The programming mode used is closer to natural semantics. You can intuitively describe the UI without caring about how the framework implements UI drawing and rendering, leading to simplified and efficient development. With type annotations in TypeScript, you can enforce type checking at compile time. If you are developing large applications, the declarative development paradigm is more applicable.
+
+
+### Web-like Development Paradigm vs. Declarative Development Paradigm
+
+  | Development Paradigm | Language | UI Update Mode | Applicable To | Intended Audience | 
+| -------- | -------- | -------- | -------- | -------- |
+| Web-like development paradigm | JavaScript | Data-driven | Applets and service widgets with simple UIs | Frontend web developers | 
+| Declarative development paradigm | Extended TypeScript (eTS) | Data-driven | Applications involving technological sophistication and teamwork | Mobile application and system application developers | 
+
+
+### Framework Structure
+
+![en-us_image_0000001267647869](figures/en-us_image_0000001267647869.png)
+
+As shown above, the two development paradigms share the UI backend engine and language runtime. The UI backend engine implements the six basic capabilities of the ArkUI framework. The declarative development paradigm does not require the JS Framework for managing the page DOM. As such, it has more streamlined rendering and update links and less memory usage. This makes the declarative development paradigm a better choice for building application UIs.

en/application-dev/ui/js-framework-file.md

-# File Organization<a name="EN-US_TOPIC_0000001127125012"></a>
+# File Organization
 
-## Directory Structure<a name="section119431650182015"></a>
+## Directory Structure
 
-The following figure shows the typical directory structure of the JavaScript module \(**entry/src/main/js/module**\) for an application with feature abilities \(FA\) using JavaScript APIs.
-
-**Figure  1**  Directory structure<a name="fig72881050193012"></a>  
+The following figure shows the typical directory structure of the JavaScript module \(entry/src/main/js/module\) for an application with feature abilities \(FA\) using JavaScript APIs.
 
+**Figure1**  Directory structure
 
 ![](figures/unnaming-(1).png)
 
-**Figure  2**  Directory structure for resource sharing  <sup>5+</sup><a name="fig103221917162010"></a>  
+**Figure2**  Directory structure for resource sharing  <sup>5+</sup>  
+
 ![](figures/directory-structure-for-resource-sharing-5+.png "directory-structure-for-resource-sharing-5+")
 
 Functions of the files are as follows:
 
--   **.hml**  files describe the page layout.
--   **.css**  files describe the page style.
--   **.js**  files process the interactions between pages and users.
+-   .hml  files describe the page layout.
+-   .css  files describe the page style.
+-   .js  files process the interactions between pages and users.
 
 Functions of the folders are as follows:
 
--   The  **app.js**  file manages global JavaScript logics and application lifecycle. For details, see  [app.js](js-framework-js-file.md).
--   The  **pages**  directory stores all component pages.
--   The  **common**  directory stores public resource files, such as media resources, custom components,  and  **.js**  files.
--   The  **resources**  directory stores resource configuration files, for example, for multi-resolution loading. For details, see  [Resource Limitations and Access](js-framework-resource-restriction.md).
--   The  **share**  directory<sup>5+</sup>  is used to configure resources shared by multiple instances. For example, images and JSON files in this directory can be shared by  **default1**  and  **default2**  instances.
+-   The  app.js  file manages global JavaScript logics and application lifecycle. For details, see  [app.js](js-framework-js-file.md).
+-   The  pages  directory stores all component pages.
+-   The  common  directory stores public resource files, such as media resources, custom components,  and  .js  files.
+-   The  resources  directory stores resource configuration files, for example, for multi-resolution loading. For details, see  [Resource Limitations and Access](js-framework-resource-restriction.md).
+-   The  share  directory<sup>5+</sup>  is used to configure resources shared by multiple instances. For example, images and JSON files in this directory can be shared by  default1  and  default2  instances.
 
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->-   Reserved folders \(**i18n**  and  **resources**\) cannot be renamed.
->-   If the same resource name and directory are used under the  **share**  directory and the instance \(**default**\) directory, the resource in the instance directory will be used when you reference the directory.
->-   The  **share**  directory does not support  **i18n**.
+>![](public_sys-resources/icon-note.gif) **NOTE**: 
+>-   Reserved folders \(i18n  and  resources\) cannot be renamed.
+>-   If the same resource name and directory are used under the  share  directory and the instance \(default\) directory, the resource in the instance directory will be used when you reference the directory.
+>-   The  share  directory does not support  i18n.
 >-   You should create the optional folders \(shown in the directory structure\) as needed after you create the project in DevEco Studio.
 
-## File Access Rules<a name="section6620355202117"></a>
+## File Access Rules
 
-Application resources can be accessed via an absolute or relative path. In the JS UI framework, an absolute path starts with a slash \(/\), and a relative path starts with  **./**  or  **../**. The rules are as follows:
+Application resources can be accessed via an absolute or relative path. In the JS UI framework, an absolute path starts with a slash \(/\), and a relative path starts with  ./  or  ../. The rules are as follows:
 
--   To reference a code file, use a relative path, for example,  **../common/utils.js**.
--   To reference a resource file, use an absolute path, for example,  **/common/xxx.png**.
--   Store code files and resource files in the  **common**  directory and access the files in a required fashion.
--   In a  **.css**  file, use the  **url\(\)**  function to create a URL, for example,  **url\(/common/xxx.png\)**.
+-   To reference a code file, use a relative path, for example,  ../common/utils.js.
+-   To reference a resource file, use an absolute path, for example,  /common/xxx.png.
+-   Store code files and resource files in the  common  directory and access the files in a required fashion.
+-   In a  .css  file, use the  url\(\)  function to create a URL, for example,  url\(/common/xxx.png\).
 
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
+>![](public_sys-resources/icon-note.gif) **NOTE**: 
 >When code file A needs to reference code file B:
+>
 >-   If code files A and B are in the same directory, you can use either a relative or absolute path in code file B to reference resource files.
 >-   If code files A and B are in different directories, you must use an absolute path in code file B to reference resource files because the directory of code file B changes during Webpack packaging.
->-   Use an absolute path if you want to dynamically change the resource file path through data binding in a  **.js**  file.
-
-## Media File Formats<a name="section79731562617"></a>
-
-**Table  1**  Supported image formats
-
-<a name="table59058237819"></a>
-<table><thead align="left"><tr id="row890542312811"><th class="cellrowborder" valign="top" width="50%" id="mcps1.2.3.1.1"><p id="p1290662316815"><a name="p1290662316815"></a><a name="p1290662316815"></a>Image Format</p>
-</th>
-<th class="cellrowborder" valign="top" width="50%" id="mcps1.2.3.1.2"><p id="p12906623088"><a name="p12906623088"></a><a name="p12906623088"></a>File Format</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row49065231788"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p10906112316811"><a name="p10906112316811"></a><a name="p10906112316811"></a>BMP</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p590619232813"><a name="p590619232813"></a><a name="p590619232813"></a>.bmp</p>
-</td>
-</tr>
-<tr id="row1690615234816"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p6906122313816"><a name="p6906122313816"></a><a name="p6906122313816"></a>GIF</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p290662317818"><a name="p290662317818"></a><a name="p290662317818"></a>.gif</p>
-</td>
-</tr>
-<tr id="row5906823580"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p109061423685"><a name="p109061423685"></a><a name="p109061423685"></a>JPEG</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p109061723488"><a name="p109061723488"></a><a name="p109061723488"></a>.jpg</p>
-</td>
-</tr>
-<tr id="row310155772112"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p17101195717217"><a name="p17101195717217"></a><a name="p17101195717217"></a>PNG</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p161021157162120"><a name="p161021157162120"></a><a name="p161021157162120"></a>.png</p>
-</td>
-</tr>
-<tr id="row942813247228"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p6428152432218"><a name="p6428152432218"></a><a name="p6428152432218"></a>WebP</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p04281246226"><a name="p04281246226"></a><a name="p04281246226"></a>.webp</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-**Table  2**  Supported video formats
-
-<a name="table31310367289"></a>
-<table><thead align="left"><tr id="row713736152813"><th class="cellrowborder" valign="top" width="50%" id="mcps1.2.3.1.1"><p id="p11383616283"><a name="p11383616283"></a><a name="p11383616283"></a>Video Formats</p>
-</th>
-<th class="cellrowborder" valign="top" width="50%" id="mcps1.2.3.1.2"><p id="p91353619287"><a name="p91353619287"></a><a name="p91353619287"></a>File Formats</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row1613136102817"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p1713736192820"><a name="p1713736192820"></a><a name="p1713736192820"></a>H.264 AVC</p>
-<p id="p181343620281"><a name="p181343620281"></a><a name="p181343620281"></a>Baseline Profile (BP)</p>
-</td>
-<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p1014136162818"><a name="p1014136162818"></a><a name="p1014136162818"></a>.3gp</p>
-<p id="p121418360288"><a name="p121418360288"></a><a name="p121418360288"></a>.mp4</p>
-</td>
-</tr>
-</tbody>
-</table>
+>-   Use an absolute path if you want to dynamically change the resource file path through data binding in a  .js  file.
+
+## Media File Formats
+
+Table1  Supported image formats
+
+| Image Format | File Format |
+| ------------ | ----------- |
+| BMP          | .bmp        |
+| GIF          | .gif        |
+| JPEG         | .jpg        |
+| PNG          | .png        |
+| WebP         | .webp       |
+
+Table2  Supported video formats
+
+| Video Formats                   | File Format |
+| ------------------------------- | ----------- |
+| H.264 AVC Baseline Profile (BP) | .3gp .mp4   |
 

en/application-dev/ui/js-framework-js-file.md

-# app.js<a name="EN-US_TOPIC_0000001173164711"></a>
+# app.js
 
-## Application Lifecycle<a name="section597315421776"></a>
 
-You can customize the  [lifecycle](js-framework-lifecycle.md)  implementation logic on an application-by-application basis in  **app.js**. The following example only prints the corresponding logs in the  **lifecycle**  function:
+## Application Lifecycle
+
+  You can customize the [lifecycle](js-framework-lifecycle.md) implementation logic on an application-by-application basis in app.js. The following example only prints the corresponding logs in the lifecycle function:
 
 ```
 // app.js
@@ -17,29 +18,15 @@ export default {
 }
 ```
 
-## Application Object<sup>6+</sup><a name="section61671730771"></a>
-
-<a name="table2114112717810"></a>
-<table><thead align="left"><tr id="r03f71ea1fd1245fd80e907a22a315e99"><th class="cellrowborder" valign="top" width="8.63%" id="mcps1.1.4.1.1"><p id="ae816119c3e0143c892512012c7927037"><a name="ae816119c3e0143c892512012c7927037"></a><a name="ae816119c3e0143c892512012c7927037"></a>Attribute</p>
-</th>
-<th class="cellrowborder" valign="top" width="9.370000000000001%" id="mcps1.1.4.1.2"><p id="ab72e901bb3ef4657b303513b8fa5ec1f"><a name="ab72e901bb3ef4657b303513b8fa5ec1f"></a><a name="ab72e901bb3ef4657b303513b8fa5ec1f"></a>Data Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="82%" id="mcps1.1.4.1.3"><p id="ae95f3df496fc41939ac6c1cf74aef9d8"><a name="ae95f3df496fc41939ac6c1cf74aef9d8"></a><a name="ae95f3df496fc41939ac6c1cf74aef9d8"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row16114627482"><td class="cellrowborder" valign="top" width="8.63%" headers="mcps1.1.4.1.1 "><p id="p1311416272810"><a name="p1311416272810"></a><a name="p1311416272810"></a>getApp</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.370000000000001%" headers="mcps1.1.4.1.2 "><p id="p171148271181"><a name="p171148271181"></a><a name="p171148271181"></a>Function</p>
-</td>
-<td class="cellrowborder" valign="top" width="82%" headers="mcps1.1.4.1.3 "><p id="p1111420275815"><a name="p1111420275815"></a><a name="p1111420275815"></a>Obtains the object exposed in the <strong id="b18467112117297"><a name="b18467112117297"></a><a name="b18467112117297"></a>app.js</strong> file from the custom <strong id="b2399945121212"><a name="b2399945121212"></a><a name="b2399945121212"></a>.js</strong> file.</p>
-</td>
-</tr>
-</tbody>
-</table>
+## Application Object<sup>6+</sup>
+
+  | Attribute | Data Type | Description | 
+| -------- | -------- | -------- |
+| getApp | Function | Obtains the object exposed in the app.js file from the custom .js file. | 
 
 The following is a sample code snippet:
 
+
 ```
 // app.js
 export default {
@@ -47,16 +34,16 @@ export default {
         test: "by getAPP"
     },
     onCreate() {
-        console.info('Application onCreate');
+        console.info('AceApplication onCreate');
     },
     onDestroy() {
-        console.info('Application onDestroy');
+        console.info('AceApplication onDestroy');
     },
 };
 ```
 
+
 ```
 // test.js Customize the logic code.
 export var appData = getApp().data;
 ```
-

en/application-dev/ui/js-framework-js-tag.md

-# "js" Tag<a name="EN-US_TOPIC_0000001173324643"></a>
+# "js" Tag
+
 
 The "js" tag contains the instance name, window style, and page route information.
 
-<a name="t092f7d78cacb46d583b3499e7cf3e7f2"></a>
-<table><thead align="left"><tr id="r8ff2bb3ff6c84115be187bad81bb8dce"><th class="cellrowborder" valign="top" width="25%" id="mcps1.1.6.1.1"><p id="a16a1bbba39d7414b8e77ae9bcf230b7b"><a name="a16a1bbba39d7414b8e77ae9bcf230b7b"></a><a name="a16a1bbba39d7414b8e77ae9bcf230b7b"></a>Tag</p>
-</th>
-<th class="cellrowborder" valign="top" width="12%" id="mcps1.1.6.1.2"><p id="a1fdbf4e9a38840029b6eb94a7f89b29a"><a name="a1fdbf4e9a38840029b6eb94a7f89b29a"></a><a name="a1fdbf4e9a38840029b6eb94a7f89b29a"></a>Data Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="12%" id="mcps1.1.6.1.3"><p id="a07bcb8a8bbea4e8d9c60b8a4b1031970"><a name="a07bcb8a8bbea4e8d9c60b8a4b1031970"></a><a name="a07bcb8a8bbea4e8d9c60b8a4b1031970"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="9%" id="mcps1.1.6.1.4"><p id="a39b2ea2535e04e37a418e8374f3271e4"><a name="a39b2ea2535e04e37a418e8374f3271e4"></a><a name="a39b2ea2535e04e37a418e8374f3271e4"></a>Mandatory</p>
-</th>
-<th class="cellrowborder" valign="top" width="42%" id="mcps1.1.6.1.5"><p id="ae9e9127cfa374d18a3741f4247791acf"><a name="ae9e9127cfa374d18a3741f4247791acf"></a><a name="ae9e9127cfa374d18a3741f4247791acf"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row19493102613510"><td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.6.1.1 "><p id="p6494172618357"><a name="p6494172618357"></a><a name="p6494172618357"></a>name</p>
-</td>
-<td class="cellrowborder" valign="top" width="12%" headers="mcps1.1.6.1.2 "><p id="p1449472643513"><a name="p1449472643513"></a><a name="p1449472643513"></a>string</p>
-</td>
-<td class="cellrowborder" valign="top" width="12%" headers="mcps1.1.6.1.3 "><p id="p1749412619355"><a name="p1749412619355"></a><a name="p1749412619355"></a>default</p>
-</td>
-<td class="cellrowborder" valign="top" width="9%" headers="mcps1.1.6.1.4 "><p id="p64947262359"><a name="p64947262359"></a><a name="p64947262359"></a>Yes</p>
-</td>
-<td class="cellrowborder" valign="top" width="42%" headers="mcps1.1.6.1.5 "><p id="p8494122612352"><a name="p8494122612352"></a><a name="p8494122612352"></a>Name of the JavaScript instance.</p>
-</td>
-</tr>
-<tr id="r3d05cd5e24f14308a71d21d2d01adb81"><td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.6.1.1 "><p id="a5a33cd31feb7416ab1ee44a6b863e57d"><a name="a5a33cd31feb7416ab1ee44a6b863e57d"></a><a name="a5a33cd31feb7416ab1ee44a6b863e57d"></a>pages</p>
-</td>
-<td class="cellrowborder" valign="top" width="12%" headers="mcps1.1.6.1.2 "><p id="a90233739ef8a4977ba0a9a48282d324d"><a name="a90233739ef8a4977ba0a9a48282d324d"></a><a name="a90233739ef8a4977ba0a9a48282d324d"></a>Array</p>
-</td>
-<td class="cellrowborder" valign="top" width="12%" headers="mcps1.1.6.1.3 "><p id="aaa1317b02aef4aee98e42227902ac7e5"><a name="aaa1317b02aef4aee98e42227902ac7e5"></a><a name="aaa1317b02aef4aee98e42227902ac7e5"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="9%" headers="mcps1.1.6.1.4 "><p id="a225959a4c42f44f4ad25fac5f48f34f5"><a name="a225959a4c42f44f4ad25fac5f48f34f5"></a><a name="a225959a4c42f44f4ad25fac5f48f34f5"></a>Yes</p>
-</td>
-<td class="cellrowborder" valign="top" width="42%" headers="mcps1.1.6.1.5 "><p id="a5f03a4f4a1fd461b9e4bc025569fcb2d"><a name="a5f03a4f4a1fd461b9e4bc025569fcb2d"></a><a name="a5f03a4f4a1fd461b9e4bc025569fcb2d"></a>Route information. For details, see <a href="#section3239252133513">"pages"</a>.</p>
-</td>
-</tr>
-<tr id="row12517192619239"><td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.6.1.1 "><p id="p18517172622317"><a name="p18517172622317"></a><a name="p18517172622317"></a>window</p>
-</td>
-<td class="cellrowborder" valign="top" width="12%" headers="mcps1.1.6.1.2 "><p id="p15517626112313"><a name="p15517626112313"></a><a name="p15517626112313"></a>Object</p>
-</td>
-<td class="cellrowborder" valign="top" width="12%" headers="mcps1.1.6.1.3 "><p id="p3517112615234"><a name="p3517112615234"></a><a name="p3517112615234"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="9%" headers="mcps1.1.6.1.4 "><p id="p1451782692314"><a name="p1451782692314"></a><a name="p1451782692314"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="42%" headers="mcps1.1.6.1.5 "><p id="p1517326152317"><a name="p1517326152317"></a><a name="p1517326152317"></a>Window information. For details, see <a href="#section728811177376">"window"</a>.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->The  **"name"**, "window", and  **"pages"**  tags are configured in the  **"js"**  tag of the  config.json  file.
-
-## "pages"<a name="section3239252133513"></a>
-
-The  **"pages"**  defines the route information of each page. Each page consists of the page path and page name. The following is an example:
+
+  | Tag | Data Type | Default Value | Mandatory | Description | 
+| -------- | -------- | -------- | -------- | -------- |
+| name | string | default | Yes | Name of the JavaScript instance. | 
+| pages | Array | - | Yes | Route information. For details, see ["pages"](#pages). |
+| window | Object | - | No | Window information. For details, see ["window"](#window). | 
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> The "name", "window", and "pages" tags are configured in the "js" tag of the config.json file.
+
+
+## "pages"
+
+The "pages" defines the route information of each page. Each page consists of the page path and page name. The following is an example:
+
 
 ```
 {
@@ -69,59 +31,31 @@ The  **"pages"**  defines the route information of each page. Each page consists
 }
 ```
 
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->-   The first page in the  **pages**  list is the home page, also referred to as the entry, of the application.
->-   The page name should not be a component name, for example,  **text.hml**  or  **button.hml**.
-
-## window<a name="section728811177376"></a>
-
-The  **"window"**  defines window-related configurations. To solve the screen adaptation problem, you can use either of the following methods:
-
--   Specify  **designWidth**, which is the logical screen width. All size styles, such as  **width**  and  **font-size**, are scaled at the ratio of  **designWidth**  to the physical screen width. For example, when  **designWidth**  is 720 px and if you set  **width**  to 100 px, the actual display width is scaled to 200 physical px on the screen whose physical width is 1440 px.
--   Set  **autoDesignWidth**  to  **true**, the  **designWidth**  field will be ignored, and the component and layout will be scaled automatically based on the screen density. The logical screen width is automatically calculated based on the physical screen width and screen density. The logical screen width may vary depending on the device. Use the relative layout to adapt to different devices. For example, on a device with a resolution of 466x466 and 320 DPI \(a screen density of 2x, with 160 DPI as the base\), 1 px is equivalent to 2 physical px.
-
-    >![](../public_sys-resources/icon-note.gif) **NOTE:** 
-    >1. The default  **<length\>**  value in the current style is calculated based on the screen density. For example, if the screen density is x2 \(with 160 DPI as the baseline\) and the default  **<length\>**  value is 1 px, the actual length rendered on the device is 2 physical px.
-    >2. Values of  **autoDesignWidth**  and  **designWidth**  do not affect how the default  **<length\>**  value is calculated and the final effect.
-
-
-<a name="table4231104116370"></a>
-<table><thead align="left"><tr id="row17231541183714"><th class="cellrowborder" valign="top" width="16.28837116288371%" id="mcps1.1.6.1.1"><p id="p1723112411376"><a name="p1723112411376"></a><a name="p1723112411376"></a>Attribute</p>
-</th>
-<th class="cellrowborder" valign="top" width="11.678832116788321%" id="mcps1.1.6.1.2"><p id="p12313414371"><a name="p12313414371"></a><a name="p12313414371"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="10.63893610638936%" id="mcps1.1.6.1.3"><p id="p1323118413374"><a name="p1323118413374"></a><a name="p1323118413374"></a>Mandatory</p>
-</th>
-<th class="cellrowborder" valign="top" width="6.969303069693031%" id="mcps1.1.6.1.4"><p id="p2423537113218"><a name="p2423537113218"></a><a name="p2423537113218"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="54.42455754424558%" id="mcps1.1.6.1.5"><p id="p17231124163710"><a name="p17231124163710"></a><a name="p17231124163710"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row1423174133715"><td class="cellrowborder" valign="top" width="16.28837116288371%" headers="mcps1.1.6.1.1 "><p id="p1923284111373"><a name="p1923284111373"></a><a name="p1923284111373"></a>designWidth</p>
-</td>
-<td class="cellrowborder" valign="top" width="11.678832116788321%" headers="mcps1.1.6.1.2 "><p id="p1023219418372"><a name="p1023219418372"></a><a name="p1023219418372"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="10.63893610638936%" headers="mcps1.1.6.1.3 "><p id="p023217410379"><a name="p023217410379"></a><a name="p023217410379"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="6.969303069693031%" headers="mcps1.1.6.1.4 "><p id="p15424137103212"><a name="p15424137103212"></a><a name="p15424137103212"></a>720</p>
-</td>
-<td class="cellrowborder" valign="top" width="54.42455754424558%" headers="mcps1.1.6.1.5 "><p id="p1232174173717"><a name="p1232174173717"></a><a name="p1232174173717"></a>Logical screen width, which is a reference value for page design. The actual display width is scaled at the ratio of the value to the device width.</p>
-</td>
-</tr>
-<tr id="row78924466220"><td class="cellrowborder" valign="top" width="16.28837116288371%" headers="mcps1.1.6.1.1 "><p id="p1289216461925"><a name="p1289216461925"></a><a name="p1289216461925"></a>autoDesignWidth</p>
-</td>
-<td class="cellrowborder" valign="top" width="11.678832116788321%" headers="mcps1.1.6.1.2 "><p id="p1489220466214"><a name="p1489220466214"></a><a name="p1489220466214"></a>boolean</p>
-</td>
-<td class="cellrowborder" valign="top" width="10.63893610638936%" headers="mcps1.1.6.1.3 "><p id="p10892184612218"><a name="p10892184612218"></a><a name="p10892184612218"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="6.969303069693031%" headers="mcps1.1.6.1.4 "><p id="p10424237183218"><a name="p10424237183218"></a><a name="p10424237183218"></a>false</p>
-</td>
-<td class="cellrowborder" valign="top" width="54.42455754424558%" headers="mcps1.1.6.1.5 "><p id="p198921746524"><a name="p198921746524"></a><a name="p198921746524"></a>Whether to automatically calculate the baseline width. If <strong id="b14176155215510"><a name="b14176155215510"></a><a name="b14176155215510"></a>autoDesignWidth</strong> is set to <strong id="b68529554517"><a name="b68529554517"></a><a name="b68529554517"></a>true</strong>, <strong id="b1690031366"><a name="b1690031366"></a><a name="b1690031366"></a>designWidth</strong> is ignored. The baseline width is calculated based on the physical screen width and screen density.</p>
-</td>
-</tr>
-</tbody>
-</table>
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> 
+> - The first page in the pages list is the home page, also referred to as the entry, of the application.
+>
+> 
+> - The page name should not be a component name, for example, text.hml or button.hml.
+
+## window
+
+The "window" defines window-related configurations. To solve the screen adaptation problem, you can use either of the following methods:
+
+- Specify designWidth, which is the logical screen width. All size styles, such as width and font-size, are scaled at the ratio of designWidth to the physical screen width. For example, when designWidth is 720 px and if you set width to 100 px, the actual display width is scaled to 200 physical px on the screen whose physical width is 1440 px.
+
+- Set autoDesignWidth to true, the designWidth field will be ignored, and the component and layout will be scaled automatically based on the screen density. The logical screen width is automatically calculated based on the physical screen width and screen density. The logical screen width may vary depending on the device. Use the relative layout to adapt to different devices. For example, on a device with a resolution of 466x466 and 320 DPI (a screen density of 2x, with 160 DPI as the base), 1 px is equivalent to 2 physical px.
+  
+  > ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+  > 1. The default  &lt;length&gt; value in the current style is calculated based on the screen density. For example, if the screen density is x2 (with 160 DPI as the baseline) and the default  &lt;length&gt; value is 1 px, the actual length rendered on the device is 2 physical px.
+  > 
+  > 2. Values of autoDesignWidth and designWidth do not affect how the default  &lt;length&gt; value is calculated and the final effect.
+| Attribute | Type | Mandatory | Default Value | Description |
+| -------- | -------- | -------- | -------- | -------- |
+|  |  |  |  |  |
+| designWidth | number | No | 720<br/> | Logical screen width, which is a reference value for page design. The actual display width is scaled at the ratio of the value to the device width. |
+| autoDesignWidth | boolean | No | false | Whether to automatically calculate the baseline width. If autoDesignWidth is set to true, designWidth is ignored. The baseline width is calculated based on the physical screen width and screen density. |
 
 The following is a sample code snippet:
 
@@ -136,7 +70,9 @@ The following is a sample code snippet:
 }
 ```
 
-## Example<a name="section19421142983812"></a>
+
+## Example
+
 
 ```
 {
@@ -156,11 +92,7 @@ The following is a sample code snippet:
           "pages": [
               "pages/index/index",
               "pages/detail/detail"
-          ],
-          "window": {
-              "designWidth": 720,
-              "autoDesignWidth": false
-          }
+          ],          "window": {              "designWidth": 720,              "autoDesignWidth": false          }
       }
       ],
       "abilities": [
@@ -171,4 +103,3 @@ The following is a sample code snippet:
   }
 }
 ```
-

en/application-dev/ui/js-framework-lifecycle.md

-# Lifecycle<a name="EN-US_TOPIC_0000001173164671"></a>
+# Lifecycle
 
-## Application Lifecycle<a name="section9779102014714"></a>
 
-You can define the following application lifecycle functions in the  **app.js**  file.
+## Application Lifecycle
 
-<a name="table8760251124713"></a>
-<table><thead align="left"><tr id="row147612518471"><th class="cellrowborder" valign="top" width="21.052105210521052%" id="mcps1.1.5.1.1"><p id="p8761165113471"><a name="p8761165113471"></a><a name="p8761165113471"></a>Attribute</p>
-</th>
-<th class="cellrowborder" valign="top" width="18.421842184218423%" id="mcps1.1.5.1.2"><p id="p157613518475"><a name="p157613518475"></a><a name="p157613518475"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="21.052105210521052%" id="mcps1.1.5.1.3"><p id="p19761051154711"><a name="p19761051154711"></a><a name="p19761051154711"></a>Description</p>
-</th>
-<th class="cellrowborder" valign="top" width="39.473947394739476%" id="mcps1.1.5.1.4"><p id="p1976105174713"><a name="p1976105174713"></a><a name="p1976105174713"></a>Called When</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row12761165124716"><td class="cellrowborder" valign="top" width="21.052105210521052%" headers="mcps1.1.5.1.1 "><p id="p15761105113478"><a name="p15761105113478"></a><a name="p15761105113478"></a>onCreate</p>
-</td>
-<td class="cellrowborder" valign="top" width="18.421842184218423%" headers="mcps1.1.5.1.2 "><p id="p1476285124715"><a name="p1476285124715"></a><a name="p1476285124715"></a>() =&gt; void</p>
-</td>
-<td class="cellrowborder" valign="top" width="21.052105210521052%" headers="mcps1.1.5.1.3 "><p id="p7762165124714"><a name="p7762165124714"></a><a name="p7762165124714"></a>Listens for application creation.</p>
-</td>
-<td class="cellrowborder" valign="top" width="39.473947394739476%" headers="mcps1.1.5.1.4 "><p id="p47628519476"><a name="p47628519476"></a><a name="p47628519476"></a>The application is created.</p>
-</td>
-</tr>
-<tr id="row846314312512"><td class="cellrowborder" valign="top" width="21.052105210521052%" headers="mcps1.1.5.1.1 "><p id="p246417315512"><a name="p246417315512"></a><a name="p246417315512"></a>onShow<sup id="sup9720688529"><a name="sup9720688529"></a><a name="sup9720688529"></a>6+</sup></p>
-</td>
-<td class="cellrowborder" valign="top" width="18.421842184218423%" headers="mcps1.1.5.1.2 "><p id="p19386104510"><a name="p19386104510"></a><a name="p19386104510"></a>() =&gt; void</p>
-</td>
-<td class="cellrowborder" valign="top" width="21.052105210521052%" headers="mcps1.1.5.1.3 "><p id="p1546413125110"><a name="p1546413125110"></a><a name="p1546413125110"></a>Listens for whether the application is running in the foreground.</p>
-</td>
-<td class="cellrowborder" valign="top" width="39.473947394739476%" headers="mcps1.1.5.1.4 "><p id="p84646335116"><a name="p84646335116"></a><a name="p84646335116"></a>The application is running in the foreground.</p>
-</td>
-</tr>
-<tr id="row2035233945117"><td class="cellrowborder" valign="top" width="21.052105210521052%" headers="mcps1.1.5.1.1 "><p id="p73531398511"><a name="p73531398511"></a><a name="p73531398511"></a>onHide<sup id="sup78997116520"><a name="sup78997116520"></a><a name="sup78997116520"></a>6+</sup></p>
-</td>
-<td class="cellrowborder" valign="top" width="18.421842184218423%" headers="mcps1.1.5.1.2 "><p id="p28393441516"><a name="p28393441516"></a><a name="p28393441516"></a>() =&gt; void</p>
-</td>
-<td class="cellrowborder" valign="top" width="21.052105210521052%" headers="mcps1.1.5.1.3 "><p id="p43531839145118"><a name="p43531839145118"></a><a name="p43531839145118"></a>Listens for whether the application is running in the background.</p>
-</td>
-<td class="cellrowborder" valign="top" width="39.473947394739476%" headers="mcps1.1.5.1.4 "><p id="p2041805635112"><a name="p2041805635112"></a><a name="p2041805635112"></a>The application is running in the background.</p>
-</td>
-</tr>
-<tr id="row7762751174719"><td class="cellrowborder" valign="top" width="21.052105210521052%" headers="mcps1.1.5.1.1 "><p id="p176215118478"><a name="p176215118478"></a><a name="p176215118478"></a>onDestroy</p>
-</td>
-<td class="cellrowborder" valign="top" width="18.421842184218423%" headers="mcps1.1.5.1.2 "><p id="p1576295114474"><a name="p1576295114474"></a><a name="p1576295114474"></a>() =&gt; void</p>
-</td>
-<td class="cellrowborder" valign="top" width="21.052105210521052%" headers="mcps1.1.5.1.3 "><p id="p37621351104718"><a name="p37621351104718"></a><a name="p37621351104718"></a>Listens for application uninstallation.</p>
-</td>
-<td class="cellrowborder" valign="top" width="39.473947394739476%" headers="mcps1.1.5.1.4 "><p id="p976265111475"><a name="p976265111475"></a><a name="p976265111475"></a>The application exits.</p>
-</td>
-</tr>
-</tbody>
-</table>
+You can define the following application lifecycle functions in the app.js file.
 
-## Page Lifecycle<a name="section921934910481"></a>
+  | Attribute | Type | Description | Called When | 
+| -------- | -------- | -------- | -------- |
+| onCreate | () => void | Listens for application creation. | The application is created. |
+| onShow<sup>6+</sup> | () => void | Listens for whether the application is running in the foreground. | The application is running in the foreground. | 
+| onHide<sup>6+</sup> | () => void | Listens for whether the application is running in the background. | The application is running in the background. | 
+| onDestroy | () => void | Listens for application uninstallation. | The application exits. | 
 
-You can define the following page lifecycle functions in the  **.js**  file of the page.
+## Page Lifecycle
 
-<a name="table8214149144810"></a>
-<table><thead align="left"><tr id="row320574954820"><th class="cellrowborder" valign="top" width="22.12%" id="mcps1.1.5.1.1"><p id="p6205184994816"><a name="p6205184994816"></a><a name="p6205184994816"></a>Attribute</p>
-</th>
-<th class="cellrowborder" valign="top" width="23.05%" id="mcps1.1.5.1.2"><p id="p1420594918484"><a name="p1420594918484"></a><a name="p1420594918484"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="17.23%" id="mcps1.1.5.1.3"><p id="p1420524994817"><a name="p1420524994817"></a><a name="p1420524994817"></a>Description</p>
-</th>
-<th class="cellrowborder" valign="top" width="37.6%" id="mcps1.1.5.1.4"><p id="p22055492486"><a name="p22055492486"></a><a name="p22055492486"></a>Called When</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row120616499486"><td class="cellrowborder" valign="top" width="22.12%" headers="mcps1.1.5.1.1 "><p id="p5205114974810"><a name="p5205114974810"></a><a name="p5205114974810"></a>onInit</p>
-</td>
-<td class="cellrowborder" valign="top" width="23.05%" headers="mcps1.1.5.1.2 "><p id="p220514918482"><a name="p220514918482"></a><a name="p220514918482"></a>() =&gt; void</p>
-</td>
-<td class="cellrowborder" valign="top" width="17.23%" headers="mcps1.1.5.1.3 "><p id="p122065491483"><a name="p122065491483"></a><a name="p122065491483"></a>Listens for page initialization.</p>
-</td>
-<td class="cellrowborder" valign="top" width="37.6%" headers="mcps1.1.5.1.4 "><p id="p72061949104813"><a name="p72061949104813"></a><a name="p72061949104813"></a>Page initialization is complete. This function is called only once in the page lifecycle.</p>
-</td>
-</tr>
-<tr id="row920612490483"><td class="cellrowborder" valign="top" width="22.12%" headers="mcps1.1.5.1.1 "><p id="p5206349114812"><a name="p5206349114812"></a><a name="p5206349114812"></a>onReady</p>
-</td>
-<td class="cellrowborder" valign="top" width="23.05%" headers="mcps1.1.5.1.2 "><p id="p1206164910486"><a name="p1206164910486"></a><a name="p1206164910486"></a>() =&gt; void</p>
-</td>
-<td class="cellrowborder" valign="top" width="17.23%" headers="mcps1.1.5.1.3 "><p id="p112066492486"><a name="p112066492486"></a><a name="p112066492486"></a>Listens for page creation.</p>
-</td>
-<td class="cellrowborder" valign="top" width="37.6%" headers="mcps1.1.5.1.4 "><p id="p19206649154818"><a name="p19206649154818"></a><a name="p19206649154818"></a>A page is created. This function is called only once in the page lifecycle.</p>
-</td>
-</tr>
-<tr id="row920615493488"><td class="cellrowborder" valign="top" width="22.12%" headers="mcps1.1.5.1.1 "><p id="p16206144911482"><a name="p16206144911482"></a><a name="p16206144911482"></a>onShow</p>
-</td>
-<td class="cellrowborder" valign="top" width="23.05%" headers="mcps1.1.5.1.2 "><p id="p1020619492480"><a name="p1020619492480"></a><a name="p1020619492480"></a>() =&gt; void</p>
-</td>
-<td class="cellrowborder" valign="top" width="17.23%" headers="mcps1.1.5.1.3 "><p id="p72061349164819"><a name="p72061349164819"></a><a name="p72061349164819"></a>Listens for page display.</p>
-</td>
-<td class="cellrowborder" valign="top" width="37.6%" headers="mcps1.1.5.1.4 "><p id="p1920684934812"><a name="p1920684934812"></a><a name="p1920684934812"></a>The page is displayed.</p>
-</td>
-</tr>
-<tr id="row14207184919481"><td class="cellrowborder" valign="top" width="22.12%" headers="mcps1.1.5.1.1 "><p id="p1820694917488"><a name="p1820694917488"></a><a name="p1820694917488"></a>onHide</p>
-</td>
-<td class="cellrowborder" valign="top" width="23.05%" headers="mcps1.1.5.1.2 "><p id="p1720694914485"><a name="p1720694914485"></a><a name="p1720694914485"></a>() =&gt; void</p>
-</td>
-<td class="cellrowborder" valign="top" width="17.23%" headers="mcps1.1.5.1.3 "><p id="p10207144914813"><a name="p10207144914813"></a><a name="p10207144914813"></a>Listens for page disappearance.</p>
-</td>
-<td class="cellrowborder" valign="top" width="37.6%" headers="mcps1.1.5.1.4 "><p id="p1020724994815"><a name="p1020724994815"></a><a name="p1020724994815"></a>The page disappears.</p>
-</td>
-</tr>
-<tr id="row11207194916482"><td class="cellrowborder" valign="top" width="22.12%" headers="mcps1.1.5.1.1 "><p id="p16207849204813"><a name="p16207849204813"></a><a name="p16207849204813"></a>onDestroy</p>
-</td>
-<td class="cellrowborder" valign="top" width="23.05%" headers="mcps1.1.5.1.2 "><p id="p102071490484"><a name="p102071490484"></a><a name="p102071490484"></a>() =&gt; void</p>
-</td>
-<td class="cellrowborder" valign="top" width="17.23%" headers="mcps1.1.5.1.3 "><p id="p1520744911486"><a name="p1520744911486"></a><a name="p1520744911486"></a>Listens for page destruction.</p>
-</td>
-<td class="cellrowborder" valign="top" width="37.6%" headers="mcps1.1.5.1.4 "><p id="p82071649104811"><a name="p82071649104811"></a><a name="p82071649104811"></a>The page is destroyed.</p>
-</td>
-</tr>
-<tr id="row192082496486"><td class="cellrowborder" valign="top" width="22.12%" headers="mcps1.1.5.1.1 "><p id="p1420710493489"><a name="p1420710493489"></a><a name="p1420710493489"></a>onBackPress</p>
-</td>
-<td class="cellrowborder" valign="top" width="23.05%" headers="mcps1.1.5.1.2 "><p id="p12207649174810"><a name="p12207649174810"></a><a name="p12207649174810"></a>() =&gt; boolean</p>
-</td>
-<td class="cellrowborder" valign="top" width="17.23%" headers="mcps1.1.5.1.3 "><p id="p14207249154815"><a name="p14207249154815"></a><a name="p14207249154815"></a>Listens for the back button action.</p>
-</td>
-<td class="cellrowborder" valign="top" width="37.6%" headers="mcps1.1.5.1.4 "><p id="p1020714916483"><a name="p1020714916483"></a><a name="p1020714916483"></a>The back button is touched.</p>
-<a name="ul02081949144816"></a><a name="ul02081949144816"></a><ul id="ul02081949144816"><li><strong id="b1355813548581"><a name="b1355813548581"></a><a name="b1355813548581"></a>true</strong> means that the page processes the return logic.</li><li><strong id="b163335813598"><a name="b163335813598"></a><a name="b163335813598"></a>false</strong> means that the default return logic is used.</li><li>If no value is returned, the default return logic is used.</li></ul>
-</td>
-</tr>
-<tr id="row8208174916489"><td class="cellrowborder" valign="top" width="22.12%" headers="mcps1.1.5.1.1 "><p id="p1920810495486"><a name="p1920810495486"></a><a name="p1920810495486"></a>onActive()<sup id="sup1920884964819"><a name="sup1920884964819"></a><a name="sup1920884964819"></a>5+</sup></p>
-</td>
-<td class="cellrowborder" valign="top" width="23.05%" headers="mcps1.1.5.1.2 "><p id="p92081349194817"><a name="p92081349194817"></a><a name="p92081349194817"></a>() =&gt; void</p>
-</td>
-<td class="cellrowborder" valign="top" width="17.23%" headers="mcps1.1.5.1.3 "><p id="p1320812492487"><a name="p1320812492487"></a><a name="p1320812492487"></a>Listens for page activation.</p>
-</td>
-<td class="cellrowborder" valign="top" width="37.6%" headers="mcps1.1.5.1.4 "><p id="p820834974814"><a name="p820834974814"></a><a name="p820834974814"></a>The page is activated.</p>
-</td>
-</tr>
-<tr id="row92091549174812"><td class="cellrowborder" valign="top" width="22.12%" headers="mcps1.1.5.1.1 "><p id="p12084494487"><a name="p12084494487"></a><a name="p12084494487"></a>onInactive()<sup id="sup3208349144814"><a name="sup3208349144814"></a><a name="sup3208349144814"></a>5+</sup></p>
-</td>
-<td class="cellrowborder" valign="top" width="23.05%" headers="mcps1.1.5.1.2 "><p id="p1820854911485"><a name="p1820854911485"></a><a name="p1820854911485"></a>() =&gt; void</p>
-</td>
-<td class="cellrowborder" valign="top" width="17.23%" headers="mcps1.1.5.1.3 "><p id="p2209114954816"><a name="p2209114954816"></a><a name="p2209114954816"></a>Listens for page suspension.</p>
-</td>
-<td class="cellrowborder" valign="top" width="37.6%" headers="mcps1.1.5.1.4 "><p id="p1220944974811"><a name="p1220944974811"></a><a name="p1220944974811"></a>The page is suspended.</p>
-</td>
-</tr>
-<tr id="row020918491481"><td class="cellrowborder" valign="top" width="22.12%" headers="mcps1.1.5.1.1 "><p id="p5209849124815"><a name="p5209849124815"></a><a name="p5209849124815"></a>onNewRequest()<sup id="sup32095496485"><a name="sup32095496485"></a><a name="sup32095496485"></a>5+</sup></p>
-</td>
-<td class="cellrowborder" valign="top" width="23.05%" headers="mcps1.1.5.1.2 "><p id="p22091849144815"><a name="p22091849144815"></a><a name="p22091849144815"></a>() =&gt; void</p>
-</td>
-<td class="cellrowborder" valign="top" width="17.23%" headers="mcps1.1.5.1.3 "><p id="p72091149134813"><a name="p72091149134813"></a><a name="p72091149134813"></a>Listens for a new FA request.</p>
-</td>
-<td class="cellrowborder" valign="top" width="37.6%" headers="mcps1.1.5.1.4 "><p id="p1920974974818"><a name="p1920974974818"></a><a name="p1920974974818"></a>The FA has been started and a new request is received.</p>
-</td>
-</tr>
-</tbody>
-</table>
+You can define the following page lifecycle functions in the .js file of the page.
 
-The lifecycle functions of page A are called in the following sequence:
+| Attribute | Type | Description | Called When |
+| -------- | -------- | -------- | -------- |
+| onInit | () => void | Listens for page initialization. | Page initialization is complete. This function is called only once in the page lifecycle. |
+| onReady | () => void | Listens for page creation. | A page is created. This function is called only once in the page lifecycle. |
+| onShow | () => void | Listens for page display. | The page is displayed. |
+| onHide | () => void | Listens for page disappearance. | The page disappears. |
+| onDestroy | () => void | Listens for page destruction. | The page is destroyed. |
+| onBackPress | () => boolean | Listens for the back button action. | The back button is touched.<br/>- true means that the page processes the return logic.<br/>- false means that the default return logic is used.<br/>- If no value is returned, the default return logic is used. |
+| onActive()<sup>5+</sup> | () => void | Listens for page activation. | The page is activated. |
+| onInactive()<sup>5+</sup> | () => void | Listens for page suspension. | The page is suspended. |
+| onNewRequest()<sup>5+</sup> | () => void | Listens for a new FA request. | The FA has been started and a new request is received. |
 
--   Open page A: onInit\(\) -\> onReady\(\) -\> onShow\(\)
--   Open page B on page A: onHide\(\)
--   Go back to page A from page B: onShow\(\)
--   Exit page A: onBackPress\(\) -\> onHide\(\) -\> onDestroy\(\)
--   Hide page A: onInactive\(\) -\> onHide\(\)
--   Show background page A on the foreground: onShow\(\) -\> onActive\(\)
+ The lifecycle functions of page A are called in the following sequence:
+- Open page A: onInit() -> onReady() -> onShow()
 
-![](figures/en-us_image_0000001147417424.png)
+- Open page B on page A: onHide()
+
+- Go back to page A from page B: onShow()
+
+- Exit page A: onBackPress() -> onHide() -> onDestroy()
+
+- Hide page A: onInactive() -> onHide()
+
+- Show background page A on the foreground: onShow() -> onActive()
+
+![en-us_image_0000001267887881](figures/en-us_image_0000001267887881.png)
 

en/application-dev/ui/js-framework-multiple-languages.md

-# Multi-Language Capability<a name="EN-US_TOPIC_0000001173324681"></a>
+# Multi-Language Capability
+
 
 Applications designed based on the JS UI framework apply to different countries and regions. With the multi-language capability, you do not need to develop application versions in different languages, and your users can switch between various locales. This also facilitates project maintenance.
 
-You only need to perform operations in  [Resource Files](#section733935013515)  and  [Resource Reference](#section522111116527)  to use the multi-language capability of this framework. For details about how to obtain the current system language, see  [Language Acquisition](#section2872192475310).
 
-## Resource Files<a name="section733935013515"></a>
+You only need to perform operations in [Resource Files](#resource-files) and [Resource Reference](#resource-reference) to use the multi-language capability of this framework. For details about how to obtain the current system language, see [Language Acquisition](#language-acquisition).
+
+
+## Resource Files
 
-Resource files store application content in multiple languages. This framework uses JSON files to store resource definitions. Place the resource file of each locale in the  **i18n**  directory described in  [File Organization](js-framework-file.md). 
+Resource files store application content in multiple languages. This framework uses JSON files to store resource definitions. Place the resource file of each locale in the i18n directory described in [File Organization](js-framework-file.md). 
+
+Resource files should be named in _language-script-region_.json format. For example, the resource file for Hong Kong Chinese in the traditional script is named zh-Hant-HK. You can omit the region, for example, zh-CN for simplified Chinese, or omit both the script and region, for example, zh for Chinese.
 
-Resource files should be named in  _language-script-region_**.json**  format. For example, the resource file for Hong Kong Chinese in the traditional script is named  **zh-Hant-HK**. You can omit the region, for example,  **zh-CN**  for simplified Chinese, or omit both the script and region, for example,  **zh**  for Chinese.
 
 ```
 language[-script-region].json
@@ -16,41 +20,19 @@ language[-script-region].json
 
 The following table describes the requirements for the qualifiers of resource file names.
 
-**Table  1**  Requirements for qualifier values
-
-<a name="table18887936123715"></a>
-<table><thead align="left"><tr id="row1288893623719"><th class="cellrowborder" valign="top" width="16.3%" id="mcps1.2.3.1.1"><p id="en-us_topic_0000001062847941_p933162572513"><a name="en-us_topic_0000001062847941_p933162572513"></a><a name="en-us_topic_0000001062847941_p933162572513"></a>Qualifier Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="83.7%" id="mcps1.2.3.1.2"><p id="en-us_topic_0000001062847941_p0331102502517"><a name="en-us_topic_0000001062847941_p0331102502517"></a><a name="en-us_topic_0000001062847941_p0331102502517"></a>Description and Value Range</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row198881636143719"><td class="cellrowborder" valign="top" width="16.3%" headers="mcps1.2.3.1.1 "><p id="en-us_topic_0000001062847941_p5331192542519"><a name="en-us_topic_0000001062847941_p5331192542519"></a><a name="en-us_topic_0000001062847941_p5331192542519"></a>Language</p>
-</td>
-<td class="cellrowborder" valign="top" width="83.7%" headers="mcps1.2.3.1.2 "><p id="en-us_topic_0000001062847941_p19331625202513"><a name="en-us_topic_0000001062847941_p19331625202513"></a><a name="en-us_topic_0000001062847941_p19331625202513"></a>Indicates the language used by the device. The value consists of two or three lowercase letters, for example, <strong id="en-us_topic_0000001062847941_b576443512210"><a name="en-us_topic_0000001062847941_b576443512210"></a><a name="en-us_topic_0000001062847941_b576443512210"></a>zh</strong> indicates Chinese, <strong id="en-us_topic_0000001062847941_b182198414218"><a name="en-us_topic_0000001062847941_b182198414218"></a><a name="en-us_topic_0000001062847941_b182198414218"></a>en</strong> indicates English, and <strong id="en-us_topic_0000001062847941_b157701569717"><a name="en-us_topic_0000001062847941_b157701569717"></a><a name="en-us_topic_0000001062847941_b157701569717"></a>mai</strong> indicates Maithili.</p>
-<p id="en-us_topic_0000001062847941_p633232516255"><a name="en-us_topic_0000001062847941_p633232516255"></a><a name="en-us_topic_0000001062847941_p633232516255"></a>For details about the value range, refer to <strong id="en-us_topic_0000001062847941_b4332142515256"><a name="en-us_topic_0000001062847941_b4332142515256"></a><a name="en-us_topic_0000001062847941_b4332142515256"></a>ISO 639</strong> (codes for the representation of names of languages).</p>
-</td>
-</tr>
-<tr id="row5888133693714"><td class="cellrowborder" valign="top" width="16.3%" headers="mcps1.2.3.1.1 "><p id="en-us_topic_0000001062847941_p14332112518252"><a name="en-us_topic_0000001062847941_p14332112518252"></a><a name="en-us_topic_0000001062847941_p14332112518252"></a>Script</p>
-</td>
-<td class="cellrowborder" valign="top" width="83.7%" headers="mcps1.2.3.1.2 "><p id="en-us_topic_0000001062847941_p9332192522510"><a name="en-us_topic_0000001062847941_p9332192522510"></a><a name="en-us_topic_0000001062847941_p9332192522510"></a>Indicates the script type used by the device. The value starts with one uppercase letter followed by three lowercase letters, for example, <strong id="en-us_topic_0000001062847941_b61243486306"><a name="en-us_topic_0000001062847941_b61243486306"></a><a name="en-us_topic_0000001062847941_b61243486306"></a>Hans</strong> indicates simplified Chinese and <strong id="en-us_topic_0000001062847941_b1643275214309"><a name="en-us_topic_0000001062847941_b1643275214309"></a><a name="en-us_topic_0000001062847941_b1643275214309"></a>Hant</strong> indicates traditional Chinese.</p>
-<p id="en-us_topic_0000001062847941_p20332152582517"><a name="en-us_topic_0000001062847941_p20332152582517"></a><a name="en-us_topic_0000001062847941_p20332152582517"></a>For details about the value range, refer to <strong id="en-us_topic_0000001062847941_b986482862513"><a name="en-us_topic_0000001062847941_b986482862513"></a><a name="en-us_topic_0000001062847941_b986482862513"></a>ISO 15924</strong> (codes for the representation of names of scripts).</p>
-</td>
-</tr>
-<tr id="row1888143616376"><td class="cellrowborder" valign="top" width="16.3%" headers="mcps1.2.3.1.1 "><p id="en-us_topic_0000001062847941_p18332825152513"><a name="en-us_topic_0000001062847941_p18332825152513"></a><a name="en-us_topic_0000001062847941_p18332825152513"></a>Country/Region</p>
-</td>
-<td class="cellrowborder" valign="top" width="83.7%" headers="mcps1.2.3.1.2 "><p id="en-us_topic_0000001062847941_p133212251255"><a name="en-us_topic_0000001062847941_p133212251255"></a><a name="en-us_topic_0000001062847941_p133212251255"></a>Indicates the country or region where a user is located. The value consists of two or three uppercase letters or three digits, for example, <strong id="en-us_topic_0000001062847941_b12684139103216"><a name="en-us_topic_0000001062847941_b12684139103216"></a><a name="en-us_topic_0000001062847941_b12684139103216"></a>CN</strong> indicates China and <strong id="en-us_topic_0000001062847941_b2349716183218"><a name="en-us_topic_0000001062847941_b2349716183218"></a><a name="en-us_topic_0000001062847941_b2349716183218"></a>GB</strong> indicates the United Kingdom.</p>
-<p id="en-us_topic_0000001062847941_p5332925172513"><a name="en-us_topic_0000001062847941_p5332925172513"></a><a name="en-us_topic_0000001062847941_p5332925172513"></a>For details about the value range, refer to <strong id="en-us_topic_0000001062847941_b633242532515"><a name="en-us_topic_0000001062847941_b633242532515"></a><a name="en-us_topic_0000001062847941_b633242532515"></a>ISO 3166-1</strong> (codes for the representation of names of countries and their subdivisions).</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-If there is no resource file of the locale that matches the system language, content in the  **en-US.json**  file will be used by default.
+  Table1 Requirements for qualifier values
+
+| Qualifier Type | Description and Value Range | 
+| -------- | -------- |
+| Language | Indicates the language used by the device. The value consists of two or three lowercase letters, for example, zh indicates Chinese, en indicates English, and mai indicates Maithili.<br/>For details about the value range, refer to ISO 639 (codes for the representation of names of languages). | 
+| Script | Indicates the script type used by the device. The value starts with one uppercase letter followed by three lowercase letters, for example, Hans indicates simplified Chinese and Hant indicates traditional Chinese.<br/>For details about the value range, refer to ISO 15924 (codes for the representation of names of scripts). | 
+| Country/Region | Indicates the country or region where a user is located. The value consists of two or three uppercase letters or three digits, for example, CN indicates China and GB indicates the United Kingdom.<br/>For details about the value range, refer to ISO 3166-1 (codes for the representation of names of countries and their subdivisions). | 
+
+If there is no resource file of the locale that matches the system language, content in the en-US.json file will be used by default.
 
 The format of the resource file content is as follows:
 
-en-US.json
+  en-US.json
 
 ```
 {
@@ -67,12 +49,16 @@ en-US.json
 }
 ```
 
-Different languages have different matching rules for singular and plural forms. In the resource file,  **zero**,  **one**,  **two**,  **few**,  **many**, and  **other**  are used to define the string content in different singular and plural forms. For example, there is only the  **other**  scenario in Chinese since the language does not have singular and plural forms.  **one**  and  **other**  scenarios are applicable to English. All six scenarios are needed for Arabic.
 
-The following example takes  **en-US.json**  and  **ar-AE.json**  as examples:
+Different languages have different matching rules for singular and plural forms. In the resource file, zero, one, two, few, many, and other are used to define the string content in different singular and plural forms. For example, there is only the other scenario in Chinese since the language does not have singular and plural forms. one and other scenarios are applicable to English. All six scenarios are needed for Arabic.
+
+
+The following example takes en-US.json and ar-AE.json as examples:
+
 
 en-US.json
 
+
 ```
 {
     "strings": {
@@ -84,8 +70,10 @@ en-US.json
 }
 ```
 
+
 ar-AE.json
 
+
 ```
 {
     "strings": {
@@ -101,77 +89,26 @@ ar-AE.json
 }
 ```
 
-## Resource Reference<a name="section522111116527"></a>
 
-Multi-language syntax used on application development pages \(including simple formatting and singular-plural formatting\) can be used in  **.hml**  or  **.js**  files.
+## Resource Reference
+
+Multi-language syntax used on application development pages (including simple formatting and singular-plural formatting) can be used in .hml or .js files.
 
 - Simple formatting
+  Use the $t function to reference to resources of different locales. The $t function is available for both .hml and .js files. The system displays content based on a resource file path specified via $t and the specified resource file whose locale matches the current system language.
+  
+    Table2 Simple formatting
+  
+  | Attribute | Type | Parameter | Mandatory | Description |
+  | -------- | -------- | -------- | -------- | -------- |
+  | $t | Function | See Table3 | Yes | Sets the parameters based on the system language, for example, this.$t('strings.hello'). |
 
-    Use the  **$t**  function to reference to resources of different locales. The  **$t**  function is available for both  **.hml**  and  **.js**  files. The system displays content based on a resource file path specified via  **$t**  and the specified resource file whose locale matches the current system language.
-
-    **Table  2**  Simple formatting
-
-    <a name="table10506333184710"></a>
-    <table><thead align="left"><tr id="row1250615336479"><th class="cellrowborder" valign="top" width="23.12%" id="mcps1.2.6.1.1"><p id="p14506163314479"><a name="p14506163314479"></a><a name="p14506163314479"></a>Attribute</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="23.12%" id="mcps1.2.6.1.2"><p id="p205076333474"><a name="p205076333474"></a><a name="p205076333474"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="20.85%" id="mcps1.2.6.1.3"><p id="p250773354718"><a name="p250773354718"></a><a name="p250773354718"></a>Parameter</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="9.790000000000001%" id="mcps1.2.6.1.4"><p id="p5742204362716"><a name="p5742204362716"></a><a name="p5742204362716"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="23.12%" id="mcps1.2.6.1.5"><p id="p105079331472"><a name="p105079331472"></a><a name="p105079331472"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1550713344719"><td class="cellrowborder" valign="top" width="23.12%" headers="mcps1.2.6.1.1 "><p id="p185071433174714"><a name="p185071433174714"></a><a name="p185071433174714"></a>$t</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="23.12%" headers="mcps1.2.6.1.2 "><p id="p10507193304718"><a name="p10507193304718"></a><a name="p10507193304718"></a>Function</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.85%" headers="mcps1.2.6.1.3 "><p id="p69461437131511"><a name="p69461437131511"></a><a name="p69461437131511"></a>See <a href="#table1161115496137">Table 3</a>.</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.790000000000001%" headers="mcps1.2.6.1.4 "><p id="p1991117447"><a name="p1991117447"></a><a name="p1991117447"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="23.12%" headers="mcps1.2.6.1.5 "><p id="p1150753310476"><a name="p1150753310476"></a><a name="p1150753310476"></a>Sets the parameters based on the system language, for example, <strong id="b15165861155"><a name="b15165861155"></a><a name="b15165861155"></a>this.$t('strings.hello')</strong>.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-    **Table  3**  $t function parameters
-
-    <a name="table1161115496137"></a>
-    <table><thead align="left"><tr id="row1061274917131"><th class="cellrowborder" valign="top" width="25%" id="mcps1.2.5.1.1"><p id="p166121249131312"><a name="p166121249131312"></a><a name="p166121249131312"></a>Parameter</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="25%" id="mcps1.2.5.1.2"><p id="p261213498139"><a name="p261213498139"></a><a name="p261213498139"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="25%" id="mcps1.2.5.1.3"><p id="p15612124910139"><a name="p15612124910139"></a><a name="p15612124910139"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="25%" id="mcps1.2.5.1.4"><p id="p1061274951318"><a name="p1061274951318"></a><a name="p1061274951318"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row15612749191317"><td class="cellrowborder" valign="top" width="25%" headers="mcps1.2.5.1.1 "><p id="p161215495131"><a name="p161215495131"></a><a name="p161215495131"></a>path</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.2.5.1.2 "><p id="p176121049101318"><a name="p176121049101318"></a><a name="p176121049101318"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.2.5.1.3 "><p id="p8612144917136"><a name="p8612144917136"></a><a name="p8612144917136"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.2.5.1.4 "><p id="p161254911314"><a name="p161254911314"></a><a name="p161254911314"></a>Path of the language resource key</p>
-    </td>
-    </tr>
-    <tr id="row861264931319"><td class="cellrowborder" valign="top" width="25%" headers="mcps1.2.5.1.1 "><p id="p15612449181316"><a name="p15612449181316"></a><a name="p15612449181316"></a>params</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.2.5.1.2 "><p id="p496164415306"><a name="p496164415306"></a><a name="p496164415306"></a>Array|Object</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.2.5.1.3 "><p id="p861284917131"><a name="p861284917131"></a><a name="p861284917131"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.2.5.1.4 "><p id="p20612194931313"><a name="p20612194931313"></a><a name="p20612194931313"></a>Content used to replace placeholders during runtime. There are two types of placeholders available:</p>
-    <a name="ul0124131652619"></a><a name="ul0124131652619"></a><ul id="ul0124131652619"><li>Named placeholder, for example, <strong id="b1393217204415"><a name="b1393217204415"></a><a name="b1393217204415"></a>{name}</strong>. The actual content must be of the object type, for example, <strong id="b1190152717414"><a name="b1190152717414"></a><a name="b1190152717414"></a>$t('strings.object', { name: 'Hello world' })</strong>.</li><li>Digit placeholder, for example, <strong id="b64091832204118"><a name="b64091832204118"></a><a name="b64091832204118"></a>{0}</strong>. The actual content must be of the array type, for example, <strong id="b18296193544116"><a name="b18296193544116"></a><a name="b18296193544116"></a>$t('strings.array', ['Hello world']</strong>.</li></ul>
-    </td>
-    </tr>
-    </tbody>
-    </table>
+    Table3 $t function parameters
+  
+  | Parameter | Type | Mandatory | Description | 
+  | -------- | -------- | -------- | -------- |
+  | path | string | Yes | Path of the language resource key | 
+  | params | Array\|Object | No | Content used to replace placeholders during runtime. There are two types of placeholders available:<br/>- Named placeholder, for example, {name}. The actual content must be of the object type, for example, $t('strings.object', { name: 'Hello world' }).<br/>- Digit placeholder, for example, {0}. The actual content must be of the array type, for example, $t('strings.array', ['Hello world']. | 
 
 - Example code for simple formatting
   
@@ -198,6 +135,7 @@ Multi-language syntax used on application development pages \(including simple f
   </div>
   ```
 
+  
   ```
   // xxx.js
   // The following example uses the $t function in the .js file.
@@ -218,71 +156,18 @@ Multi-language syntax used on application development pages \(including simple f
   ```
 
 - Singular-plural formatting
+    Table4 Singular-plural formatting
+  
+  | Attribute | Type | Parameter | Mandatory | Description |
+  | -------- | -------- | -------- | -------- | -------- |
+  | $tc | Function | See Table 5. | Yes | Converts between the singular and plural forms based on the system language, for example, this.$tc('strings.people').<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:<br/>> The resource content is distinguished by the following JSON keys: zero, one, two, few, many, and other. |
 
-    **Table  4**  Singular-plural formatting
-
-    <a name="table12722349115211"></a>
-    <table><thead align="left"><tr id="row11723204985215"><th class="cellrowborder" valign="top" width="23.12%" id="mcps1.2.6.1.1"><p id="p9723749145217"><a name="p9723749145217"></a><a name="p9723749145217"></a>Attribute</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="23.12%" id="mcps1.2.6.1.2"><p id="p1372374910528"><a name="p1372374910528"></a><a name="p1372374910528"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="18.790000000000003%" id="mcps1.2.6.1.3"><p id="p1272314496527"><a name="p1272314496527"></a><a name="p1272314496527"></a>Parameter</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="11.850000000000001%" id="mcps1.2.6.1.4"><p id="p39561320202915"><a name="p39561320202915"></a><a name="p39561320202915"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="23.12%" id="mcps1.2.6.1.5"><p id="p12723124915528"><a name="p12723124915528"></a><a name="p12723124915528"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row167231749155214"><td class="cellrowborder" valign="top" width="23.12%" headers="mcps1.2.6.1.1 "><p id="p15723184945217"><a name="p15723184945217"></a><a name="p15723184945217"></a>$tc</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="23.12%" headers="mcps1.2.6.1.2 "><p id="p1372310494525"><a name="p1372310494525"></a><a name="p1372310494525"></a>Function</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.790000000000003%" headers="mcps1.2.6.1.3 "><p id="p3645417495"><a name="p3645417495"></a><a name="p3645417495"></a>See <a href="#table1856962321614">Table 5</a>.</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="11.850000000000001%" headers="mcps1.2.6.1.4 "><p id="p1589916493474"><a name="p1589916493474"></a><a name="p1589916493474"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="23.12%" headers="mcps1.2.6.1.5 "><p id="p1080910112617"><a name="p1080910112617"></a><a name="p1080910112617"></a>Converts between the singular and plural forms based on the system language, for example, <strong id="b2975753182417"><a name="b2975753182417"></a><a name="b2975753182417"></a>this.$tc('strings.people')</strong>.</p>
-    <div class="note" id="note44962033184817"><a name="note44962033184817"></a><a name="note44962033184817"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="p1456045614402"><a name="p1456045614402"></a><a name="p1456045614402"></a>The resource content is distinguished by the following JSON keys: <strong id="b682311541227"><a name="b682311541227"></a><a name="b682311541227"></a>zero</strong>, <strong id="b6176092310"><a name="b6176092310"></a><a name="b6176092310"></a>one</strong>, <strong id="b6135846238"><a name="b6135846238"></a><a name="b6135846238"></a>two</strong>, <strong id="b83625772314"><a name="b83625772314"></a><a name="b83625772314"></a>few</strong>, <strong id="b06791310172315"><a name="b06791310172315"></a><a name="b06791310172315"></a>many</strong>, and <strong id="b31161315112320"><a name="b31161315112320"></a><a name="b31161315112320"></a>other</strong>.</p>
-    </div></div>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-    **Table  5**  $tc function parameters
-
-    <a name="table1856962321614"></a>
-    <table><thead align="left"><tr id="row13569122391616"><th class="cellrowborder" valign="top" width="25%" id="mcps1.2.5.1.1"><p id="p135698238163"><a name="p135698238163"></a><a name="p135698238163"></a>Parameter</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="25%" id="mcps1.2.5.1.2"><p id="p17569152311168"><a name="p17569152311168"></a><a name="p17569152311168"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="25%" id="mcps1.2.5.1.3"><p id="p1569523171613"><a name="p1569523171613"></a><a name="p1569523171613"></a>Mandatory</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="25%" id="mcps1.2.5.1.4"><p id="p2569192341613"><a name="p2569192341613"></a><a name="p2569192341613"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row056919234163"><td class="cellrowborder" valign="top" width="25%" headers="mcps1.2.5.1.1 "><p id="p175691923171610"><a name="p175691923171610"></a><a name="p175691923171610"></a>path</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.2.5.1.2 "><p id="p11569182319162"><a name="p11569182319162"></a><a name="p11569182319162"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.2.5.1.3 "><p id="p93611250151616"><a name="p93611250151616"></a><a name="p93611250151616"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.2.5.1.4 "><p id="p145691323171620"><a name="p145691323171620"></a><a name="p145691323171620"></a>Path of the language resource key</p>
-    </td>
-    </tr>
-    <tr id="row1569142351616"><td class="cellrowborder" valign="top" width="25%" headers="mcps1.2.5.1.1 "><p id="p956911235161"><a name="p956911235161"></a><a name="p956911235161"></a>count</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.2.5.1.2 "><p id="p7569182321618"><a name="p7569182321618"></a><a name="p7569182321618"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.2.5.1.3 "><p id="p6377550111614"><a name="p6377550111614"></a><a name="p6377550111614"></a>Yes</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25%" headers="mcps1.2.5.1.4 "><p id="p1556962371614"><a name="p1556962371614"></a><a name="p1556962371614"></a>Number</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
+    Table5 $tc function parameters
+  
+  | Parameter | Type | Mandatory | Description | 
+  | -------- | -------- | -------- | -------- |
+  | path | string | Yes | Path of the language resource key | 
+  | count | number | Yes | Number | 
 
 - Sample code for singular-plural formatting
   
@@ -305,7 +190,6 @@ Multi-language syntax used on application development pages \(including simple f
   ```
 
 
-## Language Acquisition<a name="section2872192475310"></a>
-
-For details about how to obtain the language, see the  [Application Configuration](../reference/apis/js-apis-basic-features-configuration.md)  section.
+## Language Acquisition
 
+For details about how to obtain the language, see the Application Configuration section.

en/application-dev/ui/js-framework-resource-restriction.md

-# Resource Limitations and Access<a name="EN-US_TOPIC_0000001173164731"></a>
+# Resource Limitations and Access
 
-## Resource Qualifiers<a name="section197802036142011"></a>
 
-The name of a resource qualifier consists of one or more qualifiers that represent the application scenarios or device characteristics, covering the screen density, and more. The qualifiers are separated using hyphens \(-\). When creating a qualifiers file under  **resources**, you need to understand the file naming conventions and the rules for matching qualifiers files and the device status.
+## Resource Qualifiers
 
-## Naming Conventions for Resource Qualifiers<a name="section550585117202"></a>
+The name of a resource qualifier consists of one or more qualifiers that represent the application scenarios or device characteristics, covering the screen density, and more. The qualifiers are separated using hyphens (-). When creating a qualifiers file under resources, you need to understand the file naming conventions and the rules for matching qualifiers files and the device status.
+
+
+## Naming Conventions for Resource Qualifiers
 
 - Qualifiers are ordered in the following sequence: screen density. You can select one or multiple qualifiers to name your file based on your application scenarios and device characteristics, while following the preceding sequence. 
--   The qualifiers are separated using hyphens \(-\), for example,  **res-dark-ldpi.json**.
--   Value range of qualifiers: The value of each qualifier must meet the requirements specified in the following table. Otherwise, the resource files in the  **resources**  directory cannot be matched. The qualifiers are case sensitive.
--   Qualifier prefix: The name of a qualifier file in the  **resources**  file has the prefix  **res**, for example,  **res-ldpi.json**.
--   Default resource qualifier file: By default, the resource qualifier file in  **resources**  is  **res-defaults.json**.
+
+- The qualifiers are separated using hyphens (-), for example, res-dark-ldpi.json.
+
+- Value range of qualifiers: The value of each qualifier must meet the requirements specified in the following table. Otherwise, the resource files in the resources directory cannot be matched. The qualifiers are case sensitive.
+
+- Qualifier prefix: The name of a qualifier file in the resources file has the prefix res, for example, res-ldpi.json.
+
+- Default resource qualifier file: By default, the resource qualifier file in resources is res-defaults.json.
+
 - In the resource qualifier file, color enumeration cannot be used to set resources.
 
-**Table  1**  Resource qualifiers
-
-<a name="table153971631192110"></a>
-<table><thead align="left"><tr id="row1397133152114"><th class="cellrowborder" valign="top" width="23.400000000000002%" id="mcps1.2.3.1.1"><p id="p7397331152114"><a name="p7397331152114"></a><a name="p7397331152114"></a>Data Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="76.6%" id="mcps1.2.3.1.2"><p id="p1139719318218"><a name="p1139719318218"></a><a name="p1139719318218"></a>Description and Value Range</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row1890413245238"><td class="cellrowborder" valign="top" width="23.400000000000002%" headers="mcps1.2.3.1.1 "><p id="p2090532442315"><a name="p2090532442315"></a><a name="p2090532442315"></a>Screen density</p>
-</td>
-<td class="cellrowborder" valign="top" width="76.6%" headers="mcps1.2.3.1.2 "><p id="p2389144311231"><a name="p2389144311231"></a><a name="p2389144311231"></a>Indicates the screen density of the device, in dpi. The value can be:</p>
-<a name="ul1311184562317"></a><a name="ul1311184562317"></a><ul id="ul1311184562317"><li><strong id="b199641873345"><a name="b199641873345"></a><a name="b199641873345"></a>ldpi</strong>: low-density screen (~120 dpi) (0.75 x Reference density)</li><li><strong id="b13727115783416"><a name="b13727115783416"></a><a name="b13727115783416"></a>mdpi</strong>: medium-density screen (~160 dpi) (reference density)</li><li><strong id="b4271212193512"><a name="b4271212193512"></a><a name="b4271212193512"></a>hdpi</strong>: high-density screen (~240 dpi) (1.5 x Reference density)</li><li><strong id="b2780515183515"><a name="b2780515183515"></a><a name="b2780515183515"></a>xhdpi</strong>: extra high-density screen (~320 dpi) (2.0 x Reference density)</li><li><strong id="b5206125518356"><a name="b5206125518356"></a><a name="b5206125518356"></a>xxhdpi</strong>: extra extra high-density screen (~480 dpi) (3.0 x Reference density)</li><li><strong id="b11485359103511"><a name="b11485359103511"></a><a name="b11485359103511"></a>xxxhdpi</strong>: extra extra extra high-density screen (~640 dpi) (4.0 x Reference density)</li></ul>
-</td>
-</tr>
-</tbody>
-</table>
-
-## **Rules for Matching Qualifiers Files and Device Resources**<a name="section59927387241"></a>
-
--   Qualifiers are matched with the device resources in the following priorities: MCC and MNC \> screen orientation \> dark mode \> device type \> screen density. If no matching resource qualifier file is found, the default resource qualifier file is used.
--   If a qualifier file contains resource qualifiers, their values must be consistent with the current device status so that the file can be used for matching the device status. For example, the  **res-hdpi.json**  qualifier file does not match the device density  **xhdpi**.
-
-## Referencing Resources in the JS Module<a name="section7516798256"></a>
-
-You can use the $r syntax in the application development files  **.hml**  and  **.js**  to format the JSON resources in the  **resources**  directory of the JS module and obtain the corresponding resources.
-
-<a name="table1595144416585"></a>
-<table><thead align="left"><tr id="row1295119445588"><th class="cellrowborder" valign="top" width="11.41114111411141%" id="mcps1.1.4.1.1"><p id="p18951844195815"><a name="p18951844195815"></a><a name="p18951844195815"></a>Attribute</p>
-</th>
-<th class="cellrowborder" valign="top" width="23.17231723172317%" id="mcps1.1.4.1.2"><p id="p16951044135813"><a name="p16951044135813"></a><a name="p16951044135813"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="65.41654165416541%" id="mcps1.1.4.1.3"><p id="p1795154417586"><a name="p1795154417586"></a><a name="p1795154417586"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row8951164435812"><td class="cellrowborder" valign="top" width="11.41114111411141%" headers="mcps1.1.4.1.1 "><p id="p195124495814"><a name="p195124495814"></a><a name="p195124495814"></a>$r</p>
-</td>
-<td class="cellrowborder" valign="top" width="23.17231723172317%" headers="mcps1.1.4.1.2 "><p id="p3952164418589"><a name="p3952164418589"></a><a name="p3952164418589"></a>(key: string) =&gt; string</p>
-</td>
-<td class="cellrowborder" valign="top" width="65.41654165416541%" headers="mcps1.1.4.1.3 "><p id="p204636815564"><a name="p204636815564"></a><a name="p204636815564"></a>Obtains the resource content that matches the specific qualifiers, for example, <strong id="b2031311443445"><a name="b2031311443445"></a><a name="b2031311443445"></a>this.$r('strings.hello loaded)</strong>.</p>
-<p id="p1146311815615"><a name="p1146311815615"></a><a name="p1146311815615"></a>Parameter description:</p>
-<a name="ul18463178185617"></a><a name="ul18463178185617"></a><ul id="ul18463178185617"><li><strong id="b19598205334413"><a name="b19598205334413"></a><a name="b19598205334413"></a>key</strong>: key value defined in the resource qualifier file, for example, <strong id="b2956165194511"><a name="b2956165194511"></a><a name="b2956165194511"></a>strings.hello</strong>.</li></ul>
-<p id="p174645835614"><a name="p174645835614"></a><a name="p174645835614"></a><strong id="b788814173455"><a name="b788814173455"></a><a name="b788814173455"></a>Example of res-defaults.json:</strong></p>
-<pre class="screen" id="screen8464178165613"><a name="screen8464178165613"></a><a name="screen8464178165613"></a>{
+
+  Table1 Resource qualifiers
+
+| Data Type | Description and Value Range | 
+| -------- | -------- |
+| Screen density | Indicates the screen density of the device, in dpi. The value can be:<br/>- ldpi: low-density screen (~120 dpi) (0.75 x Reference density)<br/>- mdpi: medium-density screen (~160 dpi) (reference density)<br/>- hdpi: high-density screen (~240 dpi) (1.5 x Reference density)<br/>- xhdpi: extra high-density screen (~320 dpi) (2.0 x Reference density)<br/>- xxhdpi: extra extra high-density screen (~480 dpi) (3.0 x Reference density)<br/>- xxxhdpi: extra extra extra high-density screen (~640 dpi) (4.0 x Reference density) | 
+
+
+## Rules for Matching Qualifiers Files and Device Resources
+
+- Qualifiers are matched with the device resources in the following priorities: screen orientation > dark mode > screen density. If no matching resource qualifier file is found, the default resource qualifier file is used.
+
+- If a qualifier file contains resource qualifiers, their values must be consistent with the current device status so that the file can be used for matching the device status. For example, the res-hdpi.json qualifier file does not match the device density xhdpi.
+
+
+## Referencing Resources in the JS Module
+
+You can use the $r syntax in the application development files .hml and .js to format the JSON resources in the resources directory of the JS module and obtain the corresponding resources.
+
+| Attribute | Type | Description |
+| -------- | -------- | -------- |
+| $r | (key: string) => string | Obtains the resource content that matches the specific qualifiers, for example, this.$r('strings.hello loaded).<br/>Parameter description:<br/>- key: key value defined in the resource qualifier file, for example, strings.hello.<br/> |
+
+Example of res-defaults.json:<br/>
+
+```
+{
     strings: {        
         hello: 'hello world'    
     }
-}</pre>
-</td>
-</tr>
-</tbody>
-</table>
+}
+```
 
-## Example<a name="section9710101017318"></a>
+## Example
 
 resources/res-dark.json:
 
+
 ```
 {
     "image": {
@@ -84,6 +71,7 @@ resources/res-dark.json:
 
 resources/res-defaults.json:
 
+
 ```
 {
     "image": {
@@ -95,6 +83,7 @@ resources/res-defaults.json:
 }
 ```
 
+
 ```
 <!-- xxx.hml -->
 <div style="background-color: {{ $r('colors.background') }}">
@@ -102,6 +91,5 @@ resources/res-defaults.json:
 </div>
 ```
 
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->The resource qualifier file does not support color enumeration.
-
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> The resource qualifier file does not support color enumeration.

en/application-dev/ui/js-framework-syntax-css.md

-# CSS<a name="EN-US_TOPIC_0000001127125112"></a>
+# CSS
 
-Cascading Style Sheets \(CSS\) is a language used to describe the HML page structure. All HML components have default styles. You can customize styles for these components using CSS to design various pages.
 
-## Size Unit<a name="section81638230913"></a>
+Cascading Style Sheets (CSS) is a language used to describe the HML page structure. All HML components have default styles. You can customize styles for these components using CSS to design various pages.
 
-1.  Logical px set by  **<length\>**:
-    1.  The default logical screen width is 720 px \(for details, see the  **"window"**  section in  [config.json](js-framework-js-tag.md)\). Your page will be scaled to fit the actual width of the screen. For example, on a screen with the actual width of 1440 physical px, 100 px is displayed on 200 physical px, with all sizes doubled from 720 px to 1440 px.
-    2.  If you set  **autoDesignWidth**  to  **true**  \(for details, see the  **"window"**  section in  [config.json](js-framework-js-tag.md)\), the logical px are scaled based on the screen density. For example, if the screen density is 3x, 100 px will be rendered on 300 physical px. This approach is recommended when your application needs to adapt to multiple devices.
+## Size Unit
 
-2.  Percentage set by  **<percentage\>**: The component size is represented by its percentage of the parent component size. For example, if the width  **<percentage\>**  of a component is set to  **50%**, the width of the component is half of its parent component's width.
+1. Logical px set by &lt;length&gt;:
+   1. The default logical screen width is 720 px (for details, see the "window" section in [config.json](js-framework-js-tag.md)). Your page will be scaled to fit the actual width of the screen. For example, on a screen with the actual width of 1440 physical px, 100 px is displayed on 200 physical px, with all sizes doubled from 720 px to 1440 px.
+   2. If you set autoDesignWidth to true (for details, see the "window" section in [config.json](js-framework-js-tag.md)), the logical px are scaled based on the screen density. For example, if the screen density is 3x, 100 px will be rendered on 300 physical px. This approach is recommended when your application needs to adapt to multiple devices.
 
-## Style Import<a name="section890312411592"></a>
+2. Percentage set by &lt;percentage&gt;: The component size is represented by its percentage of the parent component size. For example, if the width &lt;percentage&gt; of a component is set to 50%, the width of the component is half of its parent component's width.
 
-CSS files can be imported using the  **@import**  statement. This facilitates module management and code reuse.
 
-## Style Declaration<a name="section197695604215"></a>
+## Style Import
 
-The  **.css**  file with the same name as the  **.hml**  file in each page directory describes the styles of components on the HML page, determining how the components will be displayed.
+CSS files can be imported using the @import statement. This facilitates module management and code reuse.
 
-1.  Internal style: The  **style**  and  **class**  attributes can be used to specify the component style. Example:
+
+## Style Declaration
+
+The .css file with the same name as the .hml file in each page directory describes the styles of components on the HML page, determining how the components will be displayed.
+
+1. Internal style: The style and class attributes can be used to specify the component style. Example:
   
    ```
    <!-- index.hml -->
@@ -27,6 +30,7 @@ The  **.css**  file with the same name as the  **.hml**  file in each page direc
    </div>
    ```
 
+   
    ```
    /* index.css */
    .container {
@@ -34,7 +38,7 @@ The  **.css**  file with the same name as the  **.hml**  file in each page direc
    }
    ```
 
-2.  External style files: You need to import the files. For example, create a  **style.css**  file in the  **common**  directory and import the file at the beginning of  **index.css**.
+2. External style files: You need to import the files. For example, create a style.css file in the common directory and import the file at the beginning of index.css.
   
    ```
    /* style.css */
@@ -43,6 +47,7 @@ The  **.css**  file with the same name as the  **.hml**  file in each page direc
    }
    ```
 
+   
    ```
    /* index.css */
    @import '../../common/style.css';
@@ -52,59 +57,21 @@ The  **.css**  file with the same name as the  **.hml**  file in each page direc
    ```
 
 
-## Selectors<a name="section381741144310"></a>
+## Selectors
 
 A CSS selector is used to select elements for which styles need to be added to. The following table lists the supported selectors.
 
-<a name="table8917183413489"></a>
-<table><thead align="left"><tr id="row1291753412489"><th class="cellrowborder" valign="top" width="15.341534153415342%" id="mcps1.1.4.1.1"><p id="p291763474818"><a name="p291763474818"></a><a name="p291763474818"></a>Selector</p>
-</th>
-<th class="cellrowborder" valign="top" width="24.852485248524854%" id="mcps1.1.4.1.2"><p id="p1491783412488"><a name="p1491783412488"></a><a name="p1491783412488"></a>Example</p>
-</th>
-<th class="cellrowborder" valign="top" width="59.805980598059804%" id="mcps1.1.4.1.3"><p id="p10917173404818"><a name="p10917173404818"></a><a name="p10917173404818"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row2091743484810"><td class="cellrowborder" valign="top" width="15.341534153415342%" headers="mcps1.1.4.1.1 "><p id="p1891783411483"><a name="p1891783411483"></a><a name="p1891783411483"></a>.class</p>
-</td>
-<td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.2 "><p id="p169174348484"><a name="p169174348484"></a><a name="p169174348484"></a>.container</p>
-</td>
-<td class="cellrowborder" valign="top" width="59.805980598059804%" headers="mcps1.1.4.1.3 "><p id="p991733474814"><a name="p991733474814"></a><a name="p991733474814"></a>Selects all components whose <strong id="b266804373915"><a name="b266804373915"></a><a name="b266804373915"></a>class</strong> is <strong id="b13862113914395"><a name="b13862113914395"></a><a name="b13862113914395"></a>container</strong>.</p>
-</td>
-</tr>
-<tr id="row189178343481"><td class="cellrowborder" valign="top" width="15.341534153415342%" headers="mcps1.1.4.1.1 "><p id="p5917634124817"><a name="p5917634124817"></a><a name="p5917634124817"></a>#id</p>
-</td>
-<td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.2 "><p id="p89231120496"><a name="p89231120496"></a><a name="p89231120496"></a>#titleId</p>
-</td>
-<td class="cellrowborder" valign="top" width="59.805980598059804%" headers="mcps1.1.4.1.3 "><p id="p132391416144917"><a name="p132391416144917"></a><a name="p132391416144917"></a>Selects all components whose <strong id="b97491740201315"><a name="b97491740201315"></a><a name="b97491740201315"></a>id</strong> is <strong id="b620774121515"><a name="b620774121515"></a><a name="b620774121515"></a>titleId</strong>.</p>
-</td>
-</tr>
-<tr id="row12917934154811"><td class="cellrowborder" valign="top" width="15.341534153415342%" headers="mcps1.1.4.1.1 "><p id="p1041721913499"><a name="p1041721913499"></a><a name="p1041721913499"></a>tag</p>
-</td>
-<td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.2 "><p id="p4917203424816"><a name="p4917203424816"></a><a name="p4917203424816"></a>text</p>
-</td>
-<td class="cellrowborder" valign="top" width="59.805980598059804%" headers="mcps1.1.4.1.3 "><p id="p174847365491"><a name="p174847365491"></a><a name="p174847365491"></a>Selects all <strong id="b647149104015"><a name="b647149104015"></a><a name="b647149104015"></a>&lt;text&gt;</strong> components.</p>
-</td>
-</tr>
-<tr id="row99179340488"><td class="cellrowborder" valign="top" width="15.341534153415342%" headers="mcps1.1.4.1.1 "><p id="p19918123424819"><a name="p19918123424819"></a><a name="p19918123424819"></a>,</p>
-</td>
-<td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.2 "><p id="p7918734154817"><a name="p7918734154817"></a><a name="p7918734154817"></a>.title, .content</p>
-</td>
-<td class="cellrowborder" valign="top" width="59.805980598059804%" headers="mcps1.1.4.1.3 "><p id="p9240140154916"><a name="p9240140154916"></a><a name="p9240140154916"></a>Selects all components whose <strong id="b1792517381411"><a name="b1792517381411"></a><a name="b1792517381411"></a>class</strong> is <strong id="b123172282411"><a name="b123172282411"></a><a name="b123172282411"></a>title</strong> or <strong id="b13169142616410"><a name="b13169142616410"></a><a name="b13169142616410"></a>content</strong>.</p>
-</td>
-</tr>
-<tr id="row1091833418485"><td class="cellrowborder" valign="top" width="15.341534153415342%" headers="mcps1.1.4.1.1 "><p id="p27744448492"><a name="p27744448492"></a><a name="p27744448492"></a>#id .class tag</p>
-</td>
-<td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.2 "><p id="p0402948154911"><a name="p0402948154911"></a><a name="p0402948154911"></a>#containerId .content text</p>
-</td>
-<td class="cellrowborder" valign="top" width="59.805980598059804%" headers="mcps1.1.4.1.3 "><p id="p19830323135016"><a name="p19830323135016"></a><a name="p19830323135016"></a>Selects all grandchild <strong id="b912043612213"><a name="b912043612213"></a><a name="b912043612213"></a>&lt;text&gt;</strong> components whose grandparent components are identified as <strong id="b8266185815595"><a name="b8266185815595"></a><a name="b8266185815595"></a>containerId</strong> and whose parent components are of the <strong id="b1533612295015"><a name="b1533612295015"></a><a name="b1533612295015"></a>content</strong> class. To select child components, use <strong id="b1323417618"><a name="b1323417618"></a><a name="b1323417618"></a>&gt;</strong> to replace the space between <strong id="b123221349918"><a name="b123221349918"></a><a name="b123221349918"></a>#id</strong> and <strong id="b9863851313"><a name="b9863851313"></a><a name="b9863851313"></a>.class</strong>, for example, <strong id="b32921881723"><a name="b32921881723"></a><a name="b32921881723"></a>#containerId&gt;.content</strong>.</p>
-</td>
-</tr>
-</tbody>
-</table>
+| Selector | Example | Description |
+| -------- | -------- | -------- |
+| .class | .container | Selects all components whose class is container. |
+| \#id | \#titleId | Selects all components whose id is titleId. |
+| tag | text | Selects all  &lt;text&gt; components. |
+| , | .title, .content | Selects all components whose class is title or content. |
+| \#id .class tag | \#containerId .content text | Selects all grandchild  &lt;text&gt; components whose grandparent components are identified as containerId and whose parent components are of the content class. To select child components, use > to replace the space between \#id and .class, for example, \#containerId>.content. |
 
 The following is an example:
 
+
 ```
 <!-- Page layoutxxx.hml -->
 <div id="containerId" class="container">
@@ -115,6 +82,7 @@ The following is an example:
 </div>
 ```
 
+
 ```
 /* Page style xxx.css */
 /* Set the style for all <div> components. */
@@ -147,63 +115,34 @@ div {
 
 The above style works as follows:
 
-![](figures/sample_css.png)
-
-In the preceding example,  **.container text**  sets title and content to blue, and  **.container \> text**  sets title to red. The two styles have the same priority, but  **.container \> text**  declares the style later and overwrites the former style. \(For details about the priority, see  [Selector Specificity](#section1460102134415).\)
-
-## Selector Specificity<a name="section1460102134415"></a>
-
-The specificity rule of the selectors complies with the W3C rule, which is only available for inline styles,  **id**,  **class**,  **tag**, grandchild components, and child components. \(Inline styles are those declared in the  **style**  attribute.\)
-
-When multiple selectors point to the same element, their priorities are as follows \(in descending order\): inline style \>  **id**  \>  **class**  \>  **tag**.
-
-## Pseudo-classes<a name="section633010213458"></a>
-
-A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element\(s\). For example,  **:disabled**  can be used to select the element whose  **disabled**  attribute is  **true**.
-
-In addition to a single pseudo-class, a combination of pseudo-classes is supported. For example,  **:focus:checked**  selects the element whose  **focus**  and  **checked**  attributes are both set to  **true**. The following table lists the supported single pseudo-class in descending order of priority.
-
-<a name="table584491515455"></a>
-<table><thead align="left"><tr id="row3844171516452"><th class="cellrowborder" valign="top" width="11.42114211421142%" id="mcps1.1.4.1.1"><p id="p3844151594510"><a name="p3844151594510"></a><a name="p3844151594510"></a>Pseudo-class</p>
-</th>
-<th class="cellrowborder" valign="top" width="26.162616261626166%" id="mcps1.1.4.1.2"><p id="p11844131512458"><a name="p11844131512458"></a><a name="p11844131512458"></a>Available Components</p>
-</th>
-<th class="cellrowborder" valign="top" width="62.41624162416242%" id="mcps1.1.4.1.3"><p id="p78441615184511"><a name="p78441615184511"></a><a name="p78441615184511"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row104936528343"><td class="cellrowborder" valign="top" width="11.42114211421142%" headers="mcps1.1.4.1.1 "><p id="p2235059193413"><a name="p2235059193413"></a><a name="p2235059193413"></a>:disabled</p>
-</td>
-<td class="cellrowborder" valign="top" width="26.162616261626166%" headers="mcps1.1.4.1.2 "><p id="p1323545943417"><a name="p1323545943417"></a><a name="p1323545943417"></a>Components that support the <strong id="b774812224211"><a name="b774812224211"></a><a name="b774812224211"></a>disabled</strong> attribute</p>
-</td>
-<td class="cellrowborder" valign="top" width="62.41624162416242%" headers="mcps1.1.4.1.3 "><p id="p10235155912344"><a name="p10235155912344"></a><a name="p10235155912344"></a>Selects the element whose <strong id="b661616306815"><a name="b661616306815"></a><a name="b661616306815"></a>disabled</strong> attribute is changed to <strong id="b9301136081"><a name="b9301136081"></a><a name="b9301136081"></a>true</strong> (unavailable for animation attributes).</p>
-</td>
-</tr>
-<tr id="row0844121554510"><td class="cellrowborder" valign="top" width="11.42114211421142%" headers="mcps1.1.4.1.1 "><p id="p138441015144512"><a name="p138441015144512"></a><a name="p138441015144512"></a>:active</p>
-</td>
-<td class="cellrowborder" valign="top" width="26.162616261626166%" headers="mcps1.1.4.1.2 "><p id="p1184441511457"><a name="p1184441511457"></a><a name="p1184441511457"></a><span id="ph32264934610"><a name="ph32264934610"></a><a name="ph32264934610"></a>Components that support the click event</span></p>
-</td>
-<td class="cellrowborder" valign="top" width="62.41624162416242%" headers="mcps1.1.4.1.3 "><p id="p1384471516454"><a name="p1384471516454"></a><a name="p1384471516454"></a>Selects the element activated by a user. For example, a pressed button<span id="ph1265519710112"><a name="ph1265519710112"></a><a name="ph1265519710112"></a> or a selected <strong id="b1655321419203"><a name="b1655321419203"></a><a name="b1655321419203"></a>tab-bar</strong> (unavailable for animation attributes)</span>. </p>
-</td>
-</tr>
-<tr id="row12925340193519"><td class="cellrowborder" valign="top" width="11.42114211421142%" headers="mcps1.1.4.1.1 "><p id="p134731642153511"><a name="p134731642153511"></a><a name="p134731642153511"></a>:waiting</p>
-</td>
-<td class="cellrowborder" valign="top" width="26.162616261626166%" headers="mcps1.1.4.1.2 "><p id="p114732420358"><a name="p114732420358"></a><a name="p114732420358"></a>button</p>
-</td>
-<td class="cellrowborder" valign="top" width="62.41624162416242%" headers="mcps1.1.4.1.3 "><p id="p2473742143511"><a name="p2473742143511"></a><a name="p2473742143511"></a>Selects the element whose <strong id="b194051157192412"><a name="b194051157192412"></a><a name="b194051157192412"></a>waiting</strong> attribute is <strong id="b1621716112515"><a name="b1621716112515"></a><a name="b1621716112515"></a>true</strong><span id="ph3323185819110"><a name="ph3323185819110"></a><a name="ph3323185819110"></a> (unavailable for animation attributes)</span>.</p>
-</td>
-</tr>
-<tr id="row1884431514452"><td class="cellrowborder" valign="top" width="11.42114211421142%" headers="mcps1.1.4.1.1 "><p id="p7844161512452"><a name="p7844161512452"></a><a name="p7844161512452"></a>:checked</p>
-</td>
-<td class="cellrowborder" valign="top" width="26.162616261626166%" headers="mcps1.1.4.1.2 "><p id="p198451215174516"><a name="p198451215174516"></a><a name="p198451215174516"></a>input[type="checkbox", type="radio"]<span id="ph55837371112"><a name="ph55837371112"></a><a name="ph55837371112"></a>, and switch</span></p>
-</td>
-<td class="cellrowborder" valign="top" width="62.41624162416242%" headers="mcps1.1.4.1.3 "><p id="p9845415164512"><a name="p9845415164512"></a><a name="p9845415164512"></a>Selects the element whose <strong id="b23456295288"><a name="b23456295288"></a><a name="b23456295288"></a>checked</strong> attribute is <strong id="b734692962814"><a name="b734692962814"></a><a name="b734692962814"></a>true</strong><span id="ph879324710523"><a name="ph879324710523"></a><a name="ph879324710523"></a> (unavailable for animation attributes)</span>. </p>
-</td>
-</tr>
-</tbody>
-</table>
-
-The following is an example for you to use the  **:active**  pseudo-class to control the style when a user presses the button. 
+![en-us_image_0000001267607889](figures/en-us_image_0000001267607889.png)
+
+In the preceding example, .container text sets title and content to blue, and .container > text sets title to red. The two styles have the same priority, but .container > text declares the style later and overwrites the former style. (For details about the priority, see [Selector Specificity](#selector-specificity).)
+
+## Selector Specificity
+
+The specificity rule of the selectors complies with the W3C rule, which is only available for inline styles, id, class, tag, grandchild components, and child components. (Inline styles are those declared in the style attribute.)
+
+When multiple selectors point to the same element, their priorities are as follows (in descending order): inline style > id > class > tag.
+
+
+## Pseudo-classes
+
+A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, :disabled can be used to select the element whose disabled attribute is true.
+
+In addition to a single pseudo-class, a combination of pseudo-classes is supported. For example, :focus:checked selects the element whose focus and checked attributes are both set to true. The following table lists the supported single pseudo-class in descending order of priority.
+
+  | Pseudo-class | Available Components | Description | 
+| -------- | -------- | -------- |
+| :disabled | Components that support the disabled attribute | Selects the element whose disabled attribute is changed to true (unavailable for animation attributes). | 
+| :focus | Components that support the focusable attribute | Selects the element that takes focus (unavailable for animation attributes). | 
+| :active | Components that support the click event<br/> | Selects the element activated by a user. For example, a pressed button or a selected tab-bar (unavailable for animation attributes).  |
+| :waiting | button | Selects the element whose waiting attribute is true (unavailable for animation attributes). | 
+| :checked | input[type="checkbox", type="radio"], and switch | Selects the element whose checked attribute is true (unavailable for animation attributes).  |
+| :hover<sup>6+</sup> | Components that support the mouseover event | Selects the element that the cursor is on. | 
+
+The following is an example for you to use the :active pseudo-class to control the style when a user presses the button.
+
 
 ```
 <!-- index.hml -->
@@ -212,6 +151,7 @@ The following is an example for you to use the  **:active**  pseudo-class to con
 </div>
 ```
 
+
 ```
 /* index.css */
 .button:active {
@@ -219,14 +159,15 @@ The following is an example for you to use the  **:active**  pseudo-class to con
 }
 ```
 
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->Pseudo-classes are not supported for the  **<popup\>**  component and its child components, including,  **<dialog\>**,  **<menu\>**,  **<option\>**, and  **<picker\>**.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> Pseudo-classes are not supported for the <popup> component and its child components, including, <dialog>, <menu>, <option>, and <picker>.
+
 
-## Precompiled Styles<a name="section1690162216454"></a>
+## Precompiled Styles
 
-Precompilation is a program that uses specific syntax to generate CSS files. It provides variables and calculation, helping you define component styles more conveniently. Currently, Less, Sass, and Scss are supported. To use precompiled styles, change the suffix of the original  **.css**  file. For example, change  **index.css**  to  **index.less**,  **index.sass**, or  **index.scss**.
+Precompilation is a program that uses specific syntax to generate CSS files. It provides variables and calculation, helping you define component styles more conveniently. Currently, Less, Sass, and Scss are supported. To use precompiled styles, change the suffix of the original .css file. For example, change index.css to index.less, index.sass, or index.scss.
 
--   The following  **index.less**  file is changed from  **index.css**.
+- The following index.less file is changed from index.css.
   
   ```
   /* index.less */
@@ -237,8 +178,7 @@ Precompilation is a program that uses specific syntax to generate CSS files. It
   }
   ```
 
-
--   Reference a precompiled style file. For example, if the  **style.scss**  file is located in the  **common**  directory, change the original  **index.css**  file to  **index.scss**  and import  **style.scss**.
+- Reference a precompiled style file. For example, if the style.scss file is located in the common directory, change the original index.css file to index.scss and import style.scss.
   
   ```
   /* style.scss */
@@ -246,7 +186,8 @@ Precompilation is a program that uses specific syntax to generate CSS files. It
   $colorBackground: #000000;
   ```
 
-    Reference the precompiled style file in  **index.scss**:
+  Reference the precompiled style file in index.scss:
+
   
   ```
   /* index.scss */
@@ -257,21 +198,28 @@ Precompilation is a program that uses specific syntax to generate CSS files. It
   }
   ```
 
-    >![](../public_sys-resources/icon-note.gif) **NOTE:** 
-    >Place precompiled style files in the  **common**  directory.
   
+  > ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+  > Place precompiled style files in the common directory.
 
-## CSS Style Inheritance<sup>6+</sup><a name="section11758912154910"></a>
+## CSS Style Inheritance<sup>6+</sup>
 
 CSS style inheritance enables a child node to inherit the style of its parent node. The inherited style has the lowest priority when multiple style selectors are involved. Currently, the following styles can be inherited:
 
 - font-family
+
 - font-weight
+
 - font-size
+
 - font-style
+
 - text-align
+
 - line-height
+
 - letter-spacing
+
 - color
--   visibility
 
+- visibility

en/application-dev/ui/js-framework-syntax-hml.md

-# HML<a name="EN-US_TOPIC_0000001127284830"></a>
+# HML
 
-The OpenHarmony Markup Language \(HML\) is an HTML-like language that allows you to build pages based on components and events. Pages built using HML have advanced capabilities such as  logic control, data binding, event binding, loop rendering, and conditional rendering.
 
-## HML Page Structure<a name="section1062764791514"></a>
+The OpenHarmony Markup Language (HML) is an HTML-like language that allows you to build pages based on components and events. Pages built using HML have advanced capabilities such as logic control, data binding, event binding, loop rendering, and conditional rendering.
+
+
+## HML Page Structure
+
 
 ```
 <!-- xxx.hml -->
@@ -14,7 +17,9 @@ The OpenHarmony Markup Language \(HML\) is an HTML-like language that allows you
 </div>
 ```
 
-## Data Binding<a name="s8821c158917c48098219013e69129d1b"></a>
+
+## Data Binding
+
 
 ```
 <!-- xxx.hml -->
@@ -23,6 +28,7 @@ The OpenHarmony Markup Language \(HML\) is an HTML-like language that allows you
 </div>
 ```
 
+
 ```
 // xxx.js
 export default {
@@ -35,18 +41,21 @@ export default {
 }
 ```
 
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->-   To make the array data modification take effect, use the  **splice**  method to change array items.
->-   ECMAScript 6 \(ES6\) syntax is not supported in HML.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> - To make the array data modification take effect, use the splice method to change array items.
+> 
+> - ECMAScript 6 (ES6) syntax is not supported in HML.
 
-## Common Event Binding<a name="section193010312423"></a>
 
-Events are bound to components through  **'on'**  or  **'@'**. When a component triggers an event, the corresponding event processing function in the  **.js**  file is executed.
+## Common Event Binding
+
+Events are bound to components through 'on' or '@'. When a component triggers an event, the corresponding event processing function in the .js file is executed.
 
 Events can be written in the following formats:
 
--   **funcName**: name of the event callback, which is implemented by defining the corresponding function in the  **.js**  file.
--   **funcName\(a,b\)**: function parameters, such as  **a**  and  **b**, which can be constants, or variables defined in  **data**  in the  **.js**  file. Do not add the prefix  **this.**  to variables.
+- funcName: name of the event callback, which is implemented by defining the corresponding function in the .js file.
+
+- funcName(a,b): function parameters, such as a and b, which can be constants, or variables defined in data in the .js file. Do not add the prefix this. to variables.
 
 - Example
   
@@ -65,6 +74,7 @@ Events can be written in the following formats:
   </div>
   ```
 
+  
   ```
   // xxx.js
   export default {
@@ -83,6 +93,7 @@ Events can be written in the following formats:
   };
   ```
 
+  
   ```
   /* xxx.css */
   .container {
@@ -117,16 +128,15 @@ Events can be written in the following formats:
   ```
 
 
-## Bubbling Event Binding<sup>5+</sup><a name="section368561455815"></a>
+## Bubbling Event Binding<sup>5+</sup>
 
 Bubbling event binding covers the following:
 
--   Bind an event callback for event bubbling:  **on:\{event\}.bubble**.  **on:\{event\}**  is equivalent to  **on:\{event\}.bubble**.
--   Bind an event callback, but stop the event from bubbling upwards:  **grab:\{event\}.bubble**.  **grab:\{event\}**  is equivalent to  **grab:\{event\}.bubble**.
-
-    >![](../public_sys-resources/icon-note.gif) **NOTE:** 
-    >For details about bubbling events, see  [Universal Events](../reference/arkui-js/js-components-common-events.md).
+- Bind an event callback for event bubbling: on:{event}.bubble. on:{event} is equivalent to on:{event}.bubble.
 
+- Bind an event callback, but stop the event from bubbling upwards: grab:{event}.bubble. grab:{event} is equivalent to grab:{event}.bubble.
+  > ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+  > For details about bubbling events, see [Universal Events](../reference/arkui-js/js-components-common-events.md)
 
 - Example
   
@@ -148,6 +158,7 @@ Bubbling event binding covers the following:
   </div>
   ```
   
+  
   ```
   // xxx.js
   export default {
@@ -160,31 +171,31 @@ Bubbling event binding covers the following:
   }
   ```
 
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> Events bound using a traditional statement (such as onclick) will bubble only when the API version in use is 6 or later.
 
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->Events bound using a traditional statement \(such as  **onclick**\) will bubble only when the API version in use is 6 or later.
-
-## Capturing Event Binding<sup>5+</sup><a name="section5527539989"></a>
+## Capturing Event Binding<sup>5+</sup>
 
 Touch events can be captured. In the capture phase, which precedes the bubbling phase, an event starts from the parent component to the child component.
 
 Event capturing binding includes:
 
--   Bind an event callback for event capturing:  **on:\{event\}.capture**.
--   Bind an event callback, but stop the event from being captured during downward transfer:  **grab:\{event\}.capture**.
+- Bind an event callback for event capturing: on:{event}.capture.
+
+- Bind an event callback, but stop the event from being captured during downward transfer: grab:{event}.capture.
 
 - Example
   
   ```
   <!-- xxx.hml -->
   <div>
-        <!-- Bind an event callback for event capturing.5+ -->
-        <div on:touchstart.capture="touchstartfunc"></div>
+      <!-- Bind an event callback for event capturing.5+ -->    <div on:touchstart.capture="touchstartfunc"></div>
       <!-- Bind an event callback, but stop the event from being captured during downward transfer.5+ -->
       <div grab:touchstart.capture="touchstartfunc"></div>
   </div>
   ```
 
+  
   ```
   // xxx.js
   export default {
@@ -195,7 +206,8 @@ Event capturing binding includes:
   ```
 
 
-## Loop Rendering<a name="sb777d6d807fa43fea9be400b2600425b"></a>
+## Loop Rendering
+
 
 ```
 <!-- xxx.hml -->
@@ -216,6 +228,7 @@ Event capturing binding includes:
 </div>
 ```
 
+
 ```
 // xxx.js
 export default {
@@ -235,24 +248,30 @@ export default {
 }
 ```
 
-The  **tid**  attribute accelerates the  **for**  loop and improves the re-rendering efficiency when data in a loop changes.
+The tid attribute accelerates the for loop and improves the re-rendering efficiency when data in a loop changes.
+
+The tid attribute specifies the unique ID of each element in the array. If it is not specified, the index of each element in the array is used as the ID. For example, tid="id" indicates that the id attribute of each element is its unique ID.
+
+The for loop supports the following statements:
+
+- for="array": array is an array object, whose element variable is $item by default.
 
-The  **tid**  attribute specifies the unique ID of each element in the array. If it is not specified, the index of each element in the array is used as the ID. For example,  **tid="id"**  indicates that the  **id**  attribute of each element is its unique ID.
+- for="v in array": v is a custom element variable, whose index is $idx by default.
 
-The  **for**  loop supports the following statements:
+- for="(i, v) in array": i indicates the element index, and v indicates the element variable. All elements of the array object will be looped through.
 
--   for="array":  **array**  is an array object, whose element variable is  **$item**  by default.
--   for="v in array":  **v**  is a custom element variable, whose index is  **$idx**  by default.
--   for="\(i, v\) in array":  **i**  indicates the element index, and  **v**  indicates the element variable. All elements of the array object will be looped through.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> - Each element in the array must have the data attribute specified by tid. Otherwise, an exception may occur.
+> 
+> - The attribute specified by tid in the array must be unique. Otherwise, performance loss occurs. In the above example, only id and name can be used as tid because they are unique fields.
+> 
+> - The tid field does not support expressions.
 
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->-   Each element in the array must have the data attribute specified by  **tid**. Otherwise, an exception may occur.
->-   The attribute specified by  **tid**  in the array must be unique. Otherwise, performance loss occurs. In the above example, only  **id**  and  **name**  can be used as  **tid**  because they are unique fields.
->-   The  **tid**  field does not support expressions.
 
-## Conditional Rendering<a name="sf7f6eab2105a4030a1f34149417d6fc5"></a>
+## Conditional Rendering
+
+There are two ways to implement conditional rendering: if-elif-else or show. In if-elif-else, when the if statement evaluates to false, the component is not built in the VDOM and is not rendered. For show, when show is false, the component is not rendered but is built in the VDOM. In addition, the if-elif-else statements must be used in sibling nodes. Otherwise, the compilation fails. The following example uses both ways to implement conditional rendering:
 
-There are two ways to implement conditional rendering:  **if-elif-else**  or  **show**. In  **if-elif-else**, when the  **if**  statement evaluates to  **false**, the component is not built in the VDOM and is not rendered. For  **show**, when show is  **false**, the component is not rendered but is built in the VDOM. In addition, the  **if-elif-else**  statements must be used in sibling nodes. Otherwise, the compilation fails. The following example uses both ways to implement conditional rendering:
 
 ```
 <!-- xxx.hml -->
@@ -265,6 +284,7 @@ There are two ways to implement conditional rendering:  **if-elif-else**  or  **
 </div>
 ```
 
+
 ```
 /* xxx.css */
 .container{
@@ -278,6 +298,7 @@ There are two ways to implement conditional rendering:  **if-elif-else**  or  **
 }
 ```
 
+
 ```
 // xxx.js
 export default {
@@ -294,7 +315,8 @@ export default {
 }
 ```
 
-In the optimized rendering \(**show**\), if  **show**  is  **true**, the node is rendered properly; if it is  **false**, the display style will be  **none**.
+In the optimized rendering (show), if show is true, the node is rendered properly; if it is false, the display style will be none.
+
 
 ```
 <!-- xxx.hml -->
@@ -304,6 +326,7 @@ In the optimized rendering \(**show**\), if  **show**  is  **true**, the node is
 </div>
 ```
 
+
 ```
 /* xxx.css */
 .container{
@@ -317,6 +340,7 @@ In the optimized rendering \(**show**\), if  **show**  is  **true**, the node is
 }
 ```
 
+
 ```
 // xxx.js
 export default {
@@ -329,12 +353,13 @@ export default {
 }
 ```
 
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->Do not use  **for**  and  **if**  attributes at the same time in an element.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> Do not use for and if attributes at the same time in an element.
 
-## Logic Control Block<a name="s185169def14340fcbb12c3375cb0f0bb"></a>
+## Logic Control Block
+
+<block> makes loop rendering and conditional rendering more flexible. A <block> will not be compiled as a real component. **NOTE** that the <block> tag supports only the for and if attributes.
 
-**<block\>**  makes loop rendering and conditional rendering more flexible. A  **<block\>**  will not be compiled as a real component. Note that the  **<block\>**  tag supports only the  **for**  and  **if**  attributes.
 
 ```
 <!-- xxx.hml -->
@@ -352,6 +377,7 @@ export default {
 </list>
 ```
 
+
 ```
 // xxx.js
 export default {
@@ -364,9 +390,10 @@ export default {
 }
 ```
 
-## Template Reference<a name="section1388145672114"></a>
+## Template Reference
+
+HML supports using elements to reference template files. For details, see Custom Components.
 
-HML supports using elements to reference template files. For details, see  [Custom Components](../reference/arkui-js/js-components-custom.md).
 
 ```
 <!-- template.hml -->
@@ -376,6 +403,7 @@ HML supports using elements to reference template files. For details, see  [Cust
 </div>
 ```
 
+
 ```
 <!-- index.hml -->
 <element name='comp' src='../../common/template.hml'></element>
@@ -383,4 +411,3 @@ HML supports using elements to reference template files. For details, see  [Cust
   <comp name="Tony" age="18"></comp>
 </div>
 ```
-

en/application-dev/ui/js-framework-syntax-js.md

-# JavaScript<a name="EN-US_TOPIC_0000001173164729"></a>
+# JavaScript
 
-You can use a  **.js**  file to define the service logic of an HML page. The JS UI framework supports the JavaScript language that conforms to the ECMAScript specification. With dynamic typing, JavaScript can make your application more expressive with a flexible design. The following describes the JavaScript compilation and running.
 
-## Syntax<a name="s6ca2e99746664509961f65b82d11ab58"></a>
+You can use a .js file in the ECMAScript compliant JavaScript language to define the service logic of an HML page. With dynamic typing, JavaScript can make your application more expressive with a flexible design. The following describes the JavaScript compilation and running.
 
-The ES6 syntax is supported. 
 
--   **Module declaration**
+## Syntax
+
+The ES6 syntax is supported.
 
+- Module declaration
   Import functionality modules.
 
+  
   ```
   import router from '@system.router';
   ```
 
--   **Code reference**
-
+- Code reference
   Import JavaScript code.
 
+  
   ```
   import utils from '../../common/utils.js';
   ```
 
 
-## Objects<a name="s7493791622a248fbb2e03703149bb3b5"></a>
-
--   **Application Object**
-
-    <a name="tc5261f21b7014f6cbe17d3ef51b9e1a9"></a>
-    <table><thead align="left"><tr id="r03f71ea1fd1245fd80e907a22a315e99"><th class="cellrowborder" valign="top" width="8.63%" id="mcps1.1.4.1.1"><p id="ae816119c3e0143c892512012c7927037"><a name="ae816119c3e0143c892512012c7927037"></a><a name="ae816119c3e0143c892512012c7927037"></a>Attribute</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="9.370000000000001%" id="mcps1.1.4.1.2"><p id="ab72e901bb3ef4657b303513b8fa5ec1f"><a name="ab72e901bb3ef4657b303513b8fa5ec1f"></a><a name="ab72e901bb3ef4657b303513b8fa5ec1f"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="82%" id="mcps1.1.4.1.3"><p id="ae95f3df496fc41939ac6c1cf74aef9d8"><a name="ae95f3df496fc41939ac6c1cf74aef9d8"></a><a name="ae95f3df496fc41939ac6c1cf74aef9d8"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="r170881741fb347fa9bc5ac3a33382a9b"><td class="cellrowborder" valign="top" width="8.63%" headers="mcps1.1.4.1.1 "><p id="a9a70780b9fd8468d98a7c107ee67d8d8"><a name="a9a70780b9fd8468d98a7c107ee67d8d8"></a><a name="a9a70780b9fd8468d98a7c107ee67d8d8"></a>$def</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="9.370000000000001%" headers="mcps1.1.4.1.2 "><p id="ace202d9f2dd547c8ab8693954af5d616"><a name="ace202d9f2dd547c8ab8693954af5d616"></a><a name="ace202d9f2dd547c8ab8693954af5d616"></a>Object</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="82%" headers="mcps1.1.4.1.3 "><p id="a08a4d55b01864b2fa866f6431cd322de"><a name="a08a4d55b01864b2fa866f6431cd322de"></a><a name="a08a4d55b01864b2fa866f6431cd322de"></a>Object that is exposed in the <strong id="b1245054215141"><a name="b1245054215141"></a><a name="b1245054215141"></a>app.js</strong> file and obtained by <strong id="b466541113154"><a name="b466541113154"></a><a name="b466541113154"></a>this.$app.$def</strong>.</p>
-    <div class="note" id="note23038122918"><a name="note23038122918"></a><a name="note23038122918"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="p73038121790"><a name="p73038121790"></a><a name="p73038121790"></a>Application objects do not support data binding. Data update should be triggered on the UI.</p>
-    </div></div>
-    </td>
-    </tr>
-    </tbody>
-    </table>
+## Objects
+
+- Application Object
+    | Attribute | Type | Description | 
+  | -------- | -------- | -------- |
+  | $def | Object | Object that is exposed in the app.js file and obtained by this.$app.$def.<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:<br/>> Application objects do not support data binding. Data update should be triggered on the UI. | 
 
   Example Code
 
+  
   ```
   // app.js
   export default {
     onCreate() {
-        console.info('Application onCreate');
+      console.info('AceApplication onCreate');
     },
     onDestroy() {
-        console.info('Application onDestroy');
+      console.info('AceApplication onDestroy');
     },
     globalData: {
       appData: 'appData',
@@ -70,6 +55,7 @@ The ES6 syntax is supported.
   };
   ```
 
+  
   ```
   // index.js
   export default {
@@ -90,101 +76,29 @@ The ES6 syntax is supported.
   }
   ```
 
--   **Page objects**
-
-    <a name="table8514281151"></a>
-    <table><thead align="left"><tr id="row2511928359"><th class="cellrowborder" valign="top" width="8.63%" id="mcps1.1.4.1.1"><p id="p1951028754"><a name="p1951028754"></a><a name="p1951028754"></a>Attribute</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="10.71%" id="mcps1.1.4.1.2"><p id="p1351228252"><a name="p1351228252"></a><a name="p1351228252"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="80.66%" id="mcps1.1.4.1.3"><p id="p651112815519"><a name="p651112815519"></a><a name="p651112815519"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1651228855"><td class="cellrowborder" valign="top" width="8.63%" headers="mcps1.1.4.1.1 "><p id="p115421323762"><a name="p115421323762"></a><a name="p115421323762"></a>data</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.71%" headers="mcps1.1.4.1.2 "><p id="p05120283516"><a name="p05120283516"></a><a name="p05120283516"></a>Object/Function</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="80.66%" headers="mcps1.1.4.1.3 "><p id="p61056578507"><a name="p61056578507"></a><a name="p61056578507"></a>Data model of the page. If the attribute is of the function type, the return value must be of the object type. The attribute name cannot start with a dollar sign ($) or underscore (_). Do not use reserved words (<strong id="b430716571284"><a name="b430716571284"></a><a name="b430716571284"></a>for</strong>, <strong id="b1341785992814"><a name="b1341785992814"></a><a name="b1341785992814"></a>if</strong>, <strong id="b11287152152914"><a name="b11287152152914"></a><a name="b11287152152914"></a>show</strong>, and <strong id="b15341857297"><a name="b15341857297"></a><a name="b15341857297"></a>tid</strong>).</p>
-    <p id="p95116281350"><a name="p95116281350"></a><a name="p95116281350"></a>Do not use this attribute and <strong id="b166710411103"><a name="b166710411103"></a><a name="b166710411103"></a>private</strong> or <strong id="b3689175611101"><a name="b3689175611101"></a><a name="b3689175611101"></a>public</strong> at the same time.</p>
-    </td>
-    </tr>
-    <tr id="row2991343201512"><td class="cellrowborder" valign="top" width="8.63%" headers="mcps1.1.4.1.1 "><p id="p1873818536545"><a name="p1873818536545"></a><a name="p1873818536545"></a>$refs</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.71%" headers="mcps1.1.4.1.2 "><p id="p1073815318541"><a name="p1073815318541"></a><a name="p1073815318541"></a>Object</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="80.66%" headers="mcps1.1.4.1.3 "><p id="p7879941512"><a name="p7879941512"></a><a name="p7879941512"></a>DOM elements or child component instances that have registered the <strong id="b230018334315"><a name="b230018334315"></a><a name="b230018334315"></a>ref</strong> attribute. For example code, see <a href="#section1560185062215">Obtaining a DOM element</a>.</p>
-    </td>
-    </tr>
-    <tr id="row340610191094"><td class="cellrowborder" valign="top" width="8.63%" headers="mcps1.1.4.1.1 "><p id="p240712191998"><a name="p240712191998"></a><a name="p240712191998"></a>private</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.71%" headers="mcps1.1.4.1.2 "><p id="p1840710194916"><a name="p1840710194916"></a><a name="p1840710194916"></a>Object</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="80.66%" headers="mcps1.1.4.1.3 "><p id="p17407161911917"><a name="p17407161911917"></a><a name="p17407161911917"></a>Data model of the page. Private data attribute can be modified only on the current page.</p>
-    </td>
-    </tr>
-    <tr id="row594316386514"><td class="cellrowborder" valign="top" width="8.63%" headers="mcps1.1.4.1.1 "><p id="p99441138554"><a name="p99441138554"></a><a name="p99441138554"></a>public</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.71%" headers="mcps1.1.4.1.2 "><p id="p994419381151"><a name="p994419381151"></a><a name="p994419381151"></a>Object</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="80.66%" headers="mcps1.1.4.1.3 "><p id="p2094418381153"><a name="p2094418381153"></a><a name="p2094418381153"></a>Data model of the page. Behaviors of public data attributes are the same as those of the <strong id="b17852928193814"><a name="b17852928193814"></a><a name="b17852928193814"></a>data</strong> attribute.</p>
-    </td>
-    </tr>
-    <tr id="row638815278598"><td class="cellrowborder" valign="top" width="8.63%" headers="mcps1.1.4.1.1 "><p id="p139903755910"><a name="p139903755910"></a><a name="p139903755910"></a>props</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.71%" headers="mcps1.1.4.1.2 "><p id="p4258153555911"><a name="p4258153555911"></a><a name="p4258153555911"></a>Array/Object</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="80.66%" headers="mcps1.1.4.1.3 "><p id="p12388227105918"><a name="p12388227105918"></a><a name="p12388227105918"></a>Used for communication between components. This attribute can be transferred to components via <strong id="b1374684104018"><a name="b1374684104018"></a><a name="b1374684104018"></a>&lt;tag xxxx='value'&gt;</strong>. A <strong id="b967863454012"><a name="b967863454012"></a><a name="b967863454012"></a>props</strong> name must be in lowercase and cannot start with a dollar sign ($) or underscore (_). Do not use reserved words (<strong id="b36181719414"><a name="b36181719414"></a><a name="b36181719414"></a>for</strong>, <strong id="b18297336418"><a name="b18297336418"></a><a name="b18297336418"></a>if</strong>, <strong id="b350916444117"><a name="b350916444117"></a><a name="b350916444117"></a>show</strong>, and <strong id="b123692654113"><a name="b123692654113"></a><a name="b123692654113"></a>tid</strong>). Currently, <strong id="b1660371715416"><a name="b1660371715416"></a><a name="b1660371715416"></a>props</strong> does not support functions. For details, see <a href="../nottoctopics/en-us_topic_0000001173164675.md">Custom Components</a>.</p>
-    </td>
-    </tr>
-    <tr id="row14421201293417"><td class="cellrowborder" valign="top" width="8.63%" headers="mcps1.1.4.1.1 "><p id="p144221012173416"><a name="p144221012173416"></a><a name="p144221012173416"></a>computed</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="10.71%" headers="mcps1.1.4.1.2 "><p id="p164221412163412"><a name="p164221412163412"></a><a name="p164221412163412"></a>Object</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="80.66%" headers="mcps1.1.4.1.3 "><p id="p6422712153413"><a name="p6422712153413"></a><a name="p6422712153413"></a>Used for pre-processing an object for reading and setting. The result is cached. The name cannot start with a dollar sign ($) or underscore (_). Do not use reserved words. For details, see <a href="../nottoctopics/en-us_topic_0000001173164675.md">Custom Components</a>.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-
-## Functions<a name="s4e1ff24ec78e41948502d8977d24e44c"></a>
-
--   **Data functions**
-
-    <a name="td998a97f34c44c86876d2e1aee646bc6"></a>
-    <table><thead align="left"><tr id="r41906fbf818041e089ab60c9d410de72"><th class="cellrowborder" valign="top" width="11.361136113611362%" id="mcps1.1.4.1.1"><p id="a44385457c0224b7aa0af4b8aaa5fec41"><a name="a44385457c0224b7aa0af4b8aaa5fec41"></a><a name="a44385457c0224b7aa0af4b8aaa5fec41"></a>Function</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="16.53165316531653%" id="mcps1.1.4.1.2"><p id="a21e0645662414f9893af7ff3a6e24e92"><a name="a21e0645662414f9893af7ff3a6e24e92"></a><a name="a21e0645662414f9893af7ff3a6e24e92"></a>Parameter</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="72.10721072107211%" id="mcps1.1.4.1.3"><p id="add5a5e57df3a4d47a09a8f3ef2a28088"><a name="add5a5e57df3a4d47a09a8f3ef2a28088"></a><a name="add5a5e57df3a4d47a09a8f3ef2a28088"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="rcba2037b58704ed9bef75b912b96eb80"><td class="cellrowborder" valign="top" width="11.361136113611362%" headers="mcps1.1.4.1.1 "><p id="a75bccc07529343469aad71db98e70b1a"><a name="a75bccc07529343469aad71db98e70b1a"></a><a name="a75bccc07529343469aad71db98e70b1a"></a>$set</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.53165316531653%" headers="mcps1.1.4.1.2 "><p id="a53419b7e4fde4993b3ab35ad3312c4da"><a name="a53419b7e4fde4993b3ab35ad3312c4da"></a><a name="a53419b7e4fde4993b3ab35ad3312c4da"></a>key: string, value: any</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="72.10721072107211%" headers="mcps1.1.4.1.3 "><p id="p84781851442"><a name="p84781851442"></a><a name="p84781851442"></a>Adds an attribute or modifies an existing attribute.</p>
-    <p id="ae55e2b1d9401454c8555cbb419068829"><a name="ae55e2b1d9401454c8555cbb419068829"></a><a name="ae55e2b1d9401454c8555cbb419068829"></a>Usage:</p>
-    <p id="a266dfd3b1b384811b4e7d9a39350e3bc"><a name="a266dfd3b1b384811b4e7d9a39350e3bc"></a><a name="a266dfd3b1b384811b4e7d9a39350e3bc"></a><strong id="b102214303161"><a name="b102214303161"></a><a name="b102214303161"></a>this.$set('</strong><em id="i153502112176"><a name="i153502112176"></a><a name="i153502112176"></a>key</em><strong id="b4382163315169"><a name="b4382163315169"></a><a name="b4382163315169"></a>',</strong><em id="i1278985981612"><a name="i1278985981612"></a><a name="i1278985981612"></a>value</em><strong id="b14689536171618"><a name="b14689536171618"></a><a name="b14689536171618"></a>)</strong>: Add an attribute.</p>
-    </td>
-    </tr>
-    <tr id="r189d027189d842a1baf1a5d91a9af901"><td class="cellrowborder" valign="top" width="11.361136113611362%" headers="mcps1.1.4.1.1 "><p id="a4ee9a900fc454f66a628f210f2e50548"><a name="a4ee9a900fc454f66a628f210f2e50548"></a><a name="a4ee9a900fc454f66a628f210f2e50548"></a>$delete</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="16.53165316531653%" headers="mcps1.1.4.1.2 "><p id="a2e9d28b0f19d4cabbcc1b464bbd9993a"><a name="a2e9d28b0f19d4cabbcc1b464bbd9993a"></a><a name="a2e9d28b0f19d4cabbcc1b464bbd9993a"></a>key: string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="72.10721072107211%" headers="mcps1.1.4.1.3 "><p id="p18897453134313"><a name="p18897453134313"></a><a name="p18897453134313"></a>Deletes an attribute.</p>
-    <p id="a1e9c2271da5e4cd89dcd6b73c1b3b69d"><a name="a1e9c2271da5e4cd89dcd6b73c1b3b69d"></a><a name="a1e9c2271da5e4cd89dcd6b73c1b3b69d"></a>Usage:</p>
-    <p id="a628cc2f32b9247b091f5d37ab0a58fdb"><a name="a628cc2f32b9247b091f5d37ab0a58fdb"></a><a name="a628cc2f32b9247b091f5d37ab0a58fdb"></a><strong id="b14701107171715"><a name="b14701107171715"></a><a name="b14701107171715"></a>this.$delete('</strong><em id="i2460141971715"><a name="i2460141971715"></a><a name="i2460141971715"></a>key</em><strong id="b121011116141712"><a name="b121011116141712"></a><a name="b121011116141712"></a>')</strong>: Delete an attribute.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
+- Page objects
+    | Attribute | Type | Description |
+  | -------- | -------- | -------- |
+  | data | Object/Function | Data model of the page. If the attribute is of the function type, the return value must be of the object type. The attribute name cannot start with a dollar sign ($) or underscore (_). Do not use reserved words (for, if, show, and tid).<br/>Do not use this attribute and private or public at the same time. |
+  | $refs | Object | DOM elements or child component instances that have registered the ref attribute. For example code, see [Obtaining a DOM element](#obtaining-a-dom-element). |
+  | private | Object | Data model of the page. Private data attribute can be modified only on the current page. |
+  | public | Object | Data model of the page. Behaviors of public data attributes are the same as those of the data attribute. |
+  | props | Array/Object | Used for communication between components. This attribute can be transferred to components via &lt;tag xxxx='value'&gt;. A props name must be in lowercase and cannot start with a dollar sign ($) or underscore (_). Do not use reserved words (for, if, show, and tid). Currently, props does not support functions. For details, see [Custom Component](../reference/arkui-js/js-components-custom-props.md). |
+  | computed | Object | Used for pre-processing an object for reading and setting. The result is cached. The name cannot start with a dollar sign ($) or underscore (_). Do not use reserved words. For details, see [Custom Component](../reference/arkui-js/js-components-custom-props.md). |
+
+## Functions
+
+- Data functions
+    | Function | Parameter | Description | 
+  | -------- | -------- | -------- |
+  | $set | key: string, value: any | Adds an attribute or modifies an existing attribute.<br/>Usage:<br/>this.$set('_key_',_value_): Add an attribute. | 
+  | $delete | key: string | Deletes an attribute.<br/>Usage:<br/>this.$delete('_key_'): Delete an attribute. | 
 
   Example Code
 
+  
   ```
+  // index.js
   export default {
     data: {
       keyMap: {
@@ -202,178 +116,47 @@ The ES6 syntax is supported.
   }
   ```
 
--   **Public functions**
-
-    <a name="te12ef71dd85347738d3670aaa9934476"></a>
-    <table><thead align="left"><tr id="r7c071c236183461dbd8e78bce0073401"><th class="cellrowborder" valign="top" width="13.469999999999999%" id="mcps1.1.4.1.1"><p id="a4abb4994ac12403f88c36b8b34a739ec"><a name="a4abb4994ac12403f88c36b8b34a739ec"></a><a name="a4abb4994ac12403f88c36b8b34a739ec"></a>Function</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="18.91%" id="mcps1.1.4.1.2"><p id="aeac2f3bdee564731ace449ab67008c2c"><a name="aeac2f3bdee564731ace449ab67008c2c"></a><a name="aeac2f3bdee564731ace449ab67008c2c"></a>Parameter</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="67.62%" id="mcps1.1.4.1.3"><p id="af669c9f192954747ba61f011dcb6b1c7"><a name="af669c9f192954747ba61f011dcb6b1c7"></a><a name="af669c9f192954747ba61f011dcb6b1c7"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="r786add9633394d2f8d72020f28465c87"><td class="cellrowborder" valign="top" width="13.469999999999999%" headers="mcps1.1.4.1.1 "><p id="a6cce84705d514809ac0511d69f5605e1"><a name="a6cce84705d514809ac0511d69f5605e1"></a><a name="a6cce84705d514809ac0511d69f5605e1"></a>$element</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.91%" headers="mcps1.1.4.1.2 "><p id="ad13b3f17bec14af0859875ac75376e14"><a name="ad13b3f17bec14af0859875ac75376e14"></a><a name="ad13b3f17bec14af0859875ac75376e14"></a>id: string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="67.62%" headers="mcps1.1.4.1.3 "><p id="p103681425164412"><a name="p103681425164412"></a><a name="p103681425164412"></a>Obtains the component with a specified ID. If no ID is specified, the root component is returned. For example code, see <a href="#section1560185062215">Obtaining a DOM element</a>.</p>
-    <p id="a49e65fad6f094d049706c2514e8a47a9"><a name="a49e65fad6f094d049706c2514e8a47a9"></a><a name="a49e65fad6f094d049706c2514e8a47a9"></a>Usage:</p>
-    <p id="a7e59962ba3154456be9a71581364ce92"><a name="a7e59962ba3154456be9a71581364ce92"></a><a name="a7e59962ba3154456be9a71581364ce92"></a><strong id="b1778371312186"><a name="b1778371312186"></a><a name="b1778371312186"></a>&lt;div id='</strong><em id="i9616171712187"><a name="i9616171712187"></a><a name="i9616171712187"></a>xxx</em><strong id="b18768154181"><a name="b18768154181"></a><a name="b18768154181"></a>'&gt;&lt;/div&gt;</strong></p>
-    <a name="u338f4836774844dcbeba6ee5218a1151"></a><a name="u338f4836774844dcbeba6ee5218a1151"></a><ul id="u338f4836774844dcbeba6ee5218a1151"><li><strong id="b05751419837"><a name="b05751419837"></a><a name="b05751419837"></a>this.$element('</strong><em id="i189720245314"><a name="i189720245314"></a><a name="i189720245314"></a>xxx</em><strong id="b2658122119319"><a name="b2658122119319"></a><a name="b2658122119319"></a>')</strong>: Obtain the component whose ID is <em id="i195201110185318"><a name="i195201110185318"></a><a name="i195201110185318"></a>xxx</em>.</li><li><strong id="b1029113281236"><a name="b1029113281236"></a><a name="b1029113281236"></a>this.$element()</strong>: Obtain the root component.</li></ul>
-    </td>
-    </tr>
-    <tr id="row1276482485914"><td class="cellrowborder" valign="top" width="13.469999999999999%" headers="mcps1.1.4.1.1 "><p id="p476514248597"><a name="p476514248597"></a><a name="p476514248597"></a>$rootElement</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.91%" headers="mcps1.1.4.1.2 "><p id="p107653240596"><a name="p107653240596"></a><a name="p107653240596"></a>None</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="67.62%" headers="mcps1.1.4.1.3 "><p id="p137655241599"><a name="p137655241599"></a><a name="p137655241599"></a>Obtains the root element.</p>
-    <p id="p0499149904"><a name="p0499149904"></a><a name="p0499149904"></a>Usage: this.$rootElement().scrollTo({ duration: 500, position: 300 }), which scrolls the page by 300 px within 500 ms.</p>
-    </td>
-    </tr>
-    <tr id="re1d5191790fb423282a8c381b317e0e6"><td class="cellrowborder" valign="top" width="13.469999999999999%" headers="mcps1.1.4.1.1 "><p id="a87cad2551d564814a85a0459673a967c"><a name="a87cad2551d564814a85a0459673a967c"></a><a name="a87cad2551d564814a85a0459673a967c"></a>$root</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.91%" headers="mcps1.1.4.1.2 "><p id="aad1f4153e71544fb8b4e25d08e3787ca"><a name="aad1f4153e71544fb8b4e25d08e3787ca"></a><a name="aad1f4153e71544fb8b4e25d08e3787ca"></a>N/A</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="67.62%" headers="mcps1.1.4.1.3 "><p id="aff829908cf8d49948c1e736e4a88e3ac"><a name="aff829908cf8d49948c1e736e4a88e3ac"></a><a name="aff829908cf8d49948c1e736e4a88e3ac"></a>Obtains the root <strong id="b4935191919418"><a name="b4935191919418"></a><a name="b4935191919418"></a>ViewModel</strong> instance. For example code, see <a href="#section13798143717421">Obtaining the ViewModel</a>.</p>
-    </td>
-    </tr>
-    <tr id="rd577efbcfc104ac2b5bed88fc9dd0cfb"><td class="cellrowborder" valign="top" width="13.469999999999999%" headers="mcps1.1.4.1.1 "><p id="a680ff354c19f4d67a88b6eb45203b6d4"><a name="a680ff354c19f4d67a88b6eb45203b6d4"></a><a name="a680ff354c19f4d67a88b6eb45203b6d4"></a>$parent</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.91%" headers="mcps1.1.4.1.2 "><p id="aae2cc49b962347fba8f7dc43a1a6e072"><a name="aae2cc49b962347fba8f7dc43a1a6e072"></a><a name="aae2cc49b962347fba8f7dc43a1a6e072"></a>N/A</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="67.62%" headers="mcps1.1.4.1.3 "><p id="af3075c6896404f13a5c93929aa713125"><a name="af3075c6896404f13a5c93929aa713125"></a><a name="af3075c6896404f13a5c93929aa713125"></a>Obtains the parent <strong id="b11983132316413"><a name="b11983132316413"></a><a name="b11983132316413"></a>ViewModel</strong> instance. For example code, see <a href="#section13798143717421">Obtaining the ViewModel</a>.</p>
-    </td>
-    </tr>
-    <tr id="rb96318b2fb9e4e8ea74dfb280e8fb804"><td class="cellrowborder" valign="top" width="13.469999999999999%" headers="mcps1.1.4.1.1 "><p id="a31ac11bf6d6b477cbc1fb446d5207d0d"><a name="a31ac11bf6d6b477cbc1fb446d5207d0d"></a><a name="a31ac11bf6d6b477cbc1fb446d5207d0d"></a>$child</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.91%" headers="mcps1.1.4.1.2 "><p id="a7ea3339724db43a0b0ba574ac621f83e"><a name="a7ea3339724db43a0b0ba574ac621f83e"></a><a name="a7ea3339724db43a0b0ba574ac621f83e"></a>id: string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="67.62%" headers="mcps1.1.4.1.3 "><p id="p999210407446"><a name="p999210407446"></a><a name="p999210407446"></a>Obtains the <strong id="b39768121254"><a name="b39768121254"></a><a name="b39768121254"></a>ViewModel</strong> instance of a custom child component with a specified ID. For example code, see <a href="#section13798143717421">Obtaining the ViewModel</a>.</p>
-    <p id="p112537114516"><a name="p112537114516"></a><a name="p112537114516"></a>Usage:</p>
-    <p id="a39f9c0db073641e5bcbcfc824769ae61"><a name="a39f9c0db073641e5bcbcfc824769ae61"></a><a name="a39f9c0db073641e5bcbcfc824769ae61"></a><strong id="b1130414126616"><a name="b1130414126616"></a><a name="b1130414126616"></a>this.$child('</strong><em id="i19634170616"><a name="i19634170616"></a><a name="i19634170616"></a>xxx</em><strong id="b64849141767"><a name="b64849141767"></a><a name="b64849141767"></a>')</strong>: Obtain the <strong id="b378518252611"><a name="b378518252611"></a><a name="b378518252611"></a>ViewModel</strong> instance of a custom child component whose ID is <em id="i1521313124719"><a name="i1521313124719"></a><a name="i1521313124719"></a>xxx</em>.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   **Event function**
-
-    <a name="table106771249184219"></a>
-    <table><thead align="left"><tr id="row66781249104214"><th class="cellrowborder" valign="top" width="13.28%" id="mcps1.1.4.1.1"><p id="p15678249144218"><a name="p15678249144218"></a><a name="p15678249144218"></a>Function</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="35.29%" id="mcps1.1.4.1.2"><p id="p17678049114213"><a name="p17678049114213"></a><a name="p17678049114213"></a>Parameter</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="51.43%" id="mcps1.1.4.1.3"><p id="p26786495424"><a name="p26786495424"></a><a name="p26786495424"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row267864944212"><td class="cellrowborder" valign="top" width="13.28%" headers="mcps1.1.4.1.1 "><p id="p067834919421"><a name="p067834919421"></a><a name="p067834919421"></a>$watch</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="35.29%" headers="mcps1.1.4.1.2 "><p id="p11678194920424"><a name="p11678194920424"></a><a name="p11678194920424"></a>data: string, callback: string | Function</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="51.43%" headers="mcps1.1.4.1.3 "><p id="p1678104913426"><a name="p1678104913426"></a><a name="p1678104913426"></a>Listens for attribute changes. If the value of the <strong id="b102761759204314"><a name="b102761759204314"></a><a name="b102761759204314"></a>data</strong> attribute changes, the bound event is triggered. For details, see <a href="../nottoctopics/en-us_topic_0000001173164675.md">Custom Components</a>.</p>
-    <p id="p174621629124617"><a name="p174621629124617"></a><a name="p174621629124617"></a>Usage:</p>
-    <p id="p1173814312460"><a name="p1173814312460"></a><a name="p1173814312460"></a><strong id="b26791338201017"><a name="b26791338201017"></a><a name="b26791338201017"></a>this.$watch('</strong><em id="i1751741018116"><a name="i1751741018116"></a><a name="i1751741018116"></a>key</em><strong id="b111878516117"><a name="b111878516117"></a><a name="b111878516117"></a>',</strong> <em id="i38794851120"><a name="i38794851120"></a><a name="i38794851120"></a>callback</em><strong id="b13989360116"><a name="b13989360116"></a><a name="b13989360116"></a>)</strong></p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   **Page function**
-
-    <a name="table4927155523714"></a>
-    <table><thead align="left"><tr id="row4927255113714"><th class="cellrowborder" valign="top" width="13.28%" id="mcps1.1.4.1.1"><p id="p192765520376"><a name="p192765520376"></a><a name="p192765520376"></a>Function</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="35.29%" id="mcps1.1.4.1.2"><p id="p1192715550377"><a name="p1192715550377"></a><a name="p1192715550377"></a>Parameter</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="51.43%" id="mcps1.1.4.1.3"><p id="p49275555370"><a name="p49275555370"></a><a name="p49275555370"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1692716552379"><td class="cellrowborder" valign="top" width="13.28%" headers="mcps1.1.4.1.1 "><p id="p199274556371"><a name="p199274556371"></a><a name="p199274556371"></a>scrollTo<sup id="sup17224503390"><a name="sup17224503390"></a><a name="sup17224503390"></a>6+</sup></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="35.29%" headers="mcps1.1.4.1.2 "><p id="p792745512375"><a name="p792745512375"></a><a name="p792745512375"></a>scrollPageParam: <a href="#table131981833173916">ScrollPageParam</a></p>
-    </td>
-    <td class="cellrowborder" valign="top" width="51.43%" headers="mcps1.1.4.1.3 "><p id="p1292735517377"><a name="p1292735517377"></a><a name="p1292735517377"></a>Scrolls the page to the target position. You can specify the position using the ID selector or scrolling distance.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
-    **Table  1**  ScrollPageParam<sup>6+</sup>
-
-    <a name="table131981833173916"></a>
-    <table><thead align="left"><tr id="row31992331399"><th class="cellrowborder" valign="top" width="30.826917308269174%" id="mcps1.2.5.1.1"><p id="p16199113383917"><a name="p16199113383917"></a><a name="p16199113383917"></a>Name</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="25.45745425457454%" id="mcps1.2.5.1.2"><p id="p519953314398"><a name="p519953314398"></a><a name="p519953314398"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="12.88871112888711%" id="mcps1.2.5.1.3"><p id="p556391215143"><a name="p556391215143"></a><a name="p556391215143"></a>Default Value</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="30.826917308269174%" id="mcps1.2.5.1.4"><p id="p19199163393916"><a name="p19199163393916"></a><a name="p19199163393916"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row12199173303914"><td class="cellrowborder" valign="top" width="30.826917308269174%" headers="mcps1.2.5.1.1 "><p id="p8199203363916"><a name="p8199203363916"></a><a name="p8199203363916"></a>position</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25.45745425457454%" headers="mcps1.2.5.1.2 "><p id="p11991833133916"><a name="p11991833133916"></a><a name="p11991833133916"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.88871112888711%" headers="mcps1.2.5.1.3 "><p id="p115641312111410"><a name="p115641312111410"></a><a name="p115641312111410"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="30.826917308269174%" headers="mcps1.2.5.1.4 "><p id="p1319943319395"><a name="p1319943319395"></a><a name="p1319943319395"></a>Position to scroll to.</p>
-    </td>
-    </tr>
-    <tr id="row161991633143919"><td class="cellrowborder" valign="top" width="30.826917308269174%" headers="mcps1.2.5.1.1 "><p id="p41991333163919"><a name="p41991333163919"></a><a name="p41991333163919"></a>id</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25.45745425457454%" headers="mcps1.2.5.1.2 "><p id="p1619918334392"><a name="p1619918334392"></a><a name="p1619918334392"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.88871112888711%" headers="mcps1.2.5.1.3 "><p id="p756451219146"><a name="p756451219146"></a><a name="p756451219146"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="30.826917308269174%" headers="mcps1.2.5.1.4 "><p id="p1419943363915"><a name="p1419943363915"></a><a name="p1419943363915"></a>ID of the element to be scrolled to.</p>
-    </td>
-    </tr>
-    <tr id="row191992033183919"><td class="cellrowborder" valign="top" width="30.826917308269174%" headers="mcps1.2.5.1.1 "><p id="p1919993316390"><a name="p1919993316390"></a><a name="p1919993316390"></a>duration</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25.45745425457454%" headers="mcps1.2.5.1.2 "><p id="p9199183363916"><a name="p9199183363916"></a><a name="p9199183363916"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.88871112888711%" headers="mcps1.2.5.1.3 "><p id="p5564181218144"><a name="p5564181218144"></a><a name="p5564181218144"></a>300</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="30.826917308269174%" headers="mcps1.2.5.1.4 "><p id="p3199233133920"><a name="p3199233133920"></a><a name="p3199233133920"></a>Scrolling duration, in milliseconds.</p>
-    </td>
-    </tr>
-    <tr id="row2019933315396"><td class="cellrowborder" valign="top" width="30.826917308269174%" headers="mcps1.2.5.1.1 "><p id="p13199733133915"><a name="p13199733133915"></a><a name="p13199733133915"></a>timingFunction</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25.45745425457454%" headers="mcps1.2.5.1.2 "><p id="p0199173373919"><a name="p0199173373919"></a><a name="p0199173373919"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.88871112888711%" headers="mcps1.2.5.1.3 "><p id="p10564171212141"><a name="p10564171212141"></a><a name="p10564171212141"></a>ease</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="30.826917308269174%" headers="mcps1.2.5.1.4 "><p id="p1919903313394"><a name="p1919903313394"></a><a name="p1919903313394"></a>Animation curve for scrolling. Available option:</p>
-    <p id="p158650537712"><a name="p158650537712"></a><a name="p158650537712"></a><a href="../nottoctopics/en-us_topic_0000001173164765.md">animation-timing-function</a></p>
-    </td>
-    </tr>
-    <tr id="row110635616428"><td class="cellrowborder" valign="top" width="30.826917308269174%" headers="mcps1.2.5.1.1 "><p id="p6107856124211"><a name="p6107856124211"></a><a name="p6107856124211"></a>complete</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="25.45745425457454%" headers="mcps1.2.5.1.2 "><p id="p20107195674214"><a name="p20107195674214"></a><a name="p20107195674214"></a>() =&gt; void</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.88871112888711%" headers="mcps1.2.5.1.3 "><p id="p20564151211419"><a name="p20564151211419"></a><a name="p20564151211419"></a>-</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="30.826917308269174%" headers="mcps1.2.5.1.4 "><p id="p1107155694210"><a name="p1107155694210"></a><a name="p1107155694210"></a>Callback to be invoked when the scrolling is complete.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
+- Public functions
+    | Function | Parameter | Description |
+  | -------- | -------- | -------- |
+  | $element | id: string | Obtains the component with a specified ID. If no ID is specified, the root component is returned. For example code, see [Obtaining a DOM element](#obtaining-a-dom-element).<br/>Usage:<br/>```<div id='_xxx_'></div>```<br/>- this.$element('_xxx_'): Obtain the component whose ID is _xxx_.<br/>- this.$element(): Obtain the root component. |
+  | $rootElement | None | Obtains the root element.<br/>Usage: this.$rootElement().scrollTo({ duration: 500, position: 300 }), which scrolls the page by 300 px within 500 ms. |
+  | $root | N/A | Obtains the root ViewModel instance. For example code, see [Obtaining the ViewModel](#obtaining-the-viewmodel). |
+  | $parent | N/A | Obtains the parent ViewModel instance. For example code, see [Obtaining the ViewModel](#obtaining-the-viewmodel). |
+  | $child | id: string | Obtains the ViewModel instance of a custom child component with a specified ID. For example code, see [Obtaining the ViewModel](#obtaining-the-viewmodel).<br/>Usage:<br/>this.$child('_xxx_'): Obtain the ViewModel instance of a custom child component whose ID is _xxx_. |
+
+- Event function
+    | Function | Parameter | Description |
+  | -------- | -------- | -------- |
+  | $watch | data: string, callback: string \| Function | Listens for attribute changes. If the value of the data attribute changes, the bound event is triggered. For details, see [Custom Component](../reference/arkui-js/js-components-custom-props.md)<br/>Usage:<br/>this.$watch('_key_',_callback_) |
+
+- Page function
+    | Function | Parameter | Description |
+  | -------- | -------- | -------- |
+  | scrollTo<sup>6+</sup> | scrollPageParam:  ScrollPageParam | Scrolls the page to the target position. You can specify the position using the ID selector or scrolling distance. |
+
+    Table1 ScrollPageParam<sup>6+</sup>
+  
+  | Name | Type | Default Value | Description |
+  | -------- | -------- | -------- | -------- |
+  | position | number | - | Position to scroll to. |
+  | id | string | - | ID of the element to be scrolled to. |
+  | duration | number | 300 | Scrolling duration, in milliseconds. |
+  | timingFunction | string | ease | Animation curve for scrolling. Available option:<br/>[Animation Styles](../reference/arkui-js/js-components-common-animation.md) |
+  | complete | () => void | - | Callback to be invoked when the scrolling is complete. |
 
   Example:
 
+  
   ```
   this.$rootElement.scrollTo({position: 0})
   this.$rootElement.scrollTo({id: 'id', duration: 200, timingFunction: 'ease-in', complete: ()=>void})
   ```
 
 
-## Obtaining a DOM Element<a name="section1560185062215"></a>
+## Obtaining a DOM Element
 
-1.  Use  **$refs**  to obtain a DOM element.
+1. Use $refs to obtain a DOM element.
   
    ```
    <!-- index.hml -->
@@ -382,6 +165,7 @@ The ES6 syntax is supported.
    </div>
    ```
 
+   
    ```
    // index.js
    export default {
@@ -406,7 +190,7 @@ The ES6 syntax is supported.
    };
    ```
 
-2.  Call  **$element**  to obtain a DOM element.
+2. Call $element to obtain a DOM element.
   
    ```
    <!-- index.hml -->
@@ -415,6 +199,7 @@ The ES6 syntax is supported.
    </div>
    ```
 
+   
    ```
    // index.js
    export default {
@@ -439,11 +224,11 @@ The ES6 syntax is supported.
    };
    ```
 
-
-## Obtaining the ViewModel<a name="section13798143717421"></a>
+## Obtaining the ViewModel
 
 The following shows files of the root page:
 
+
 ```
 <!-- root.hml -->
 <element name='parentComp' src='../../common/component/parent/parent.hml'></element>
@@ -455,6 +240,7 @@ The following shows files of the root page:
 </div>
 ```
 
+
 ```
 // root.js
 export default {
@@ -466,6 +252,7 @@ export default {
 
 Customize the parent component.
 
+
 ```
 <!-- parent.hml -->
 <element name='childComp' src='../child/child.hml'></element>
@@ -476,6 +263,7 @@ Customize the parent component.
 </div>
 ```
 
+
 ```
 // parent.js
 export default {
@@ -495,6 +283,7 @@ export default {
 
 Customize the child component.
 
+
 ```
 <!-- child.hml -->
 <div class="item" onclick="textClicked">
@@ -503,6 +292,7 @@ Customize the child component.
 </div>
 ```
 
+
 ```
 // child.js
 export default {
@@ -519,4 +309,3 @@ export default {
   },
 }
 ```
-

en/application-dev/ui/js-framework-syntax.md

-# Syntax<a name="EN-US_TOPIC_0000001173324683"></a>
-
--   **[HML](js-framework-syntax-hml.md)**  
-
--   **[CSS](js-framework-syntax-css.md)**  
-
--   **[JavaScript](js-framework-syntax-js.md)**  
-
-

en/application-dev/ui/js-framework.md

-# Framework<a name="EN-US_TOPIC_0000001127284916"></a>
-
--   **[File Organization](js-framework-file.md)**  
-
--   **["js" Tag](js-framework-js-tag.md)**  
-
--   **[app.js](js-framework-js-file.md)**  
-
--   **[Syntax](js-framework-syntax.md)**  
-
--   **[Lifecycle](js-framework-lifecycle.md)**  
-
--   **[Resource Limitations and Access](js-framework-resource-restriction.md)**  
-
--   **[Multi-Language Capability](js-framework-multiple-languages.md)**  
-
-

en/application-dev/ui/ts-a-deep-dive-into-component.md

-# About @Component<a name="EN-US_TOPIC_0000001157388845"></a>
-
--   **[build Function](ts-function-build.md)**  
-
--   **[Custom Component Initialization](ts-custom-component-initialization.md)**  
-
--   **[Custom Component Lifecycle Callbacks](ts-custom-component-lifecycle-callbacks.md)**  
-
--   **[Example: Component Creation and Re-Initialization](ts-component-creation-re-initialization.md)**  
-
-

en/application-dev/ui/ts-application-resource-access.md

@@ -3,35 +3,35 @@
 
 ## Resource Definition
 
-Application resources are defined by in the project's **resources** directory, which is organized as follows:
+Application resources are defined by in the project's resources directory, which is organized as follows:
 
-- Level-1: **base** sub-directory, qualifiers sub-directories, and **rawfile** sub-directory
-  - The **base** sub-directory is a default directory. If no qualifiers sub-directories in the **resources** directory of the application match the device status, the resource file in the **base** sub-directory will be automatically referenced.
+- Level-1: base sub-directory, qualifiers sub-directories, and rawfile sub-directory
+  - The base sub-directory is a default directory. If no qualifiers sub-directories in the resources directory of the application match the device status, the resource file in the base sub-directory will be automatically referenced.
   - You need to create qualifiers sub-directories on your own. The name of a qualifiers sub-directory consists of one or more qualifiers that represent the application scenarios or device characteristics, covering the mobile country code (MCC), mobile network code (MNC), language, script, country or region, screen orientation, device type, color mode, and screen density. The qualifiers are separated using underscores (_) or hyphens (-).
-  - When the resources in the **rawfile** sub-directory are referenced, resource files will not be matched based on the device status. You can directly store resource files in the **rawfile** sub-directory.
+  - When the resources in the rawfile sub-directory are referenced, resource files will not be matched based on the device status. You can directly store resource files in the rawfile sub-directory.
 
 - Level-2: resource sub-directories
   - Resource sub-directories store basic elements such as character strings, colors, and floating point numbers, and resource files such as media files.
   - Supported files and resource types are listed in the table below:
-       | File Name | Resource Type | 
+       | File Name | Resource Type | 
      | -------- | -------- |
-     | color.json | Color resource. | 
-     | float.json | Resources such as spacing, rounded corners, and fonts. | 
-     | string.json | String resource. | 
-     | plural.json | String resource. | 
-     | media directory | Image resource. | 
+     | color.json | Color resource. | 
+     | float.json | Resources such as spacing, rounded corners, and fonts. | 
+     | string.json | String resource. | 
+     | plural.json | String resource. | 
+     | media directory | Image resource. | 
 
 
 ## Referencing Resources
 
-To reference an application resource in a project, use the **"$r('app.type.name')"** format. **app** indicates the resource defined in the **resources** directory of the application. **type** indicates the resource type (or the location where the resource is stored). The value can be **color**, **float**, **string**, **plural**, or **media**. **name** indicates the resource name, which you set when defining the resource.
+To reference an application resource in a project, use the "$r('app.type.name')" format. app indicates the resource defined in the resources directory of the application. type indicates the resource type (or the location where the resource is stored). The value can be color, float, string, plural, or media. name indicates the resource name, which you set when defining the resource.
 
-When referencing resources in the **rawfile** sub-directory, use the **"$rawfile('filename')"** format. Currently, **$rawfile** allows only the **<Image>** component to reference image resources. In the format, **filename** indicates the relative path of a file in the **rawfile** directory, and the file name must contain the file name extension. Note that the relative path cannot start with a slash (/).
+When referencing resources in the rawfile sub-directory, use the "$rawfile('filename')" format. Currently, $rawfile allows only the <Image> component to reference image resources. In the format, filename indicates the relative path of a file in the rawfile directory, and the file name must contain the file name extension. **NOTE** that the relative path cannot start with a slash (/).
 
 
 ## Example
 
-Some custom resources in the **base** sub-directory are as follows:
+Some custom resources in the base sub-directory are as follows:
 
 
 ```
@@ -49,7 +49,7 @@ Some custom resources in the **base** sub-directory are as follows:
                └─ newTest.png  
 ```
 
-The content of the **color.json** file is as follows:
+The content of the color.json file is as follows:
 
 
 ```
@@ -67,7 +67,7 @@ The content of the **color.json** file is as follows:
 }
 ```
 
-The content of the **float.json** file is as follows:
+The content of the float.json file is as follows:
 
 
 ```
@@ -85,7 +85,7 @@ The content of the **float.json** file is as follows:
 }
 ```
 
-The content of the **string.json** file is as follows:
+The content of the string.json file is as follows:
 
 
 ```
@@ -107,7 +107,7 @@ The content of the **string.json** file is as follows:
 }
 ```
 
-The content of the **plural.json** file is as follows:
+The content of the plural.json file is as follows:
 
 
 ```
@@ -130,7 +130,7 @@ The content of the **plural.json** file is as follows:
 }
 ```
 
-  In the **ets** file, you can use the resources defined in the **resources** directory.
+  In the ets file, you can use the resources defined in the resources directory.
 
 ```
 Text($r('app.string.string_hello'))

en/application-dev/ui/ts-application-states-apis-environment.md

-# Environment<a name="EN-US_TOPIC_0000001129032930"></a>
+# Environment
+
+
+Environment is a singleton object created by the framework when the application is started. It provides the AppStorage with a series of environment state attributes required by the application. These attributes describe the device environment where the application runs. Environment and its attributes are immutable, and all attribute values are of the simple type. The following example shows how to obtain the semantic environment from Environment:
 
-**Environment**  is a singleton object created by the framework when the application is started. It provides the  **AppStorage**  with a series of environment state attributes required by the application. These attributes describe the device environment where the application runs.  **Environment**  and its attributes are immutable, and all attribute values are of the simple type.
 
-The following example shows how to obtain the voice environment from  **Environment**:
 
 ```
 Environment.EnvProp("accessibilityEnabled", "default");
-var enable = AppStorageGet("accessibilityEnabled");
+var enable = AppStorage.Get("accessibilityEnabled");
 ```
 
-**accessibilityEnabled**  is the default system variable identifier provided by  **Environment**. You need to bind the corresponding system attribute to the  **AppStorage**. Then, you can use the methods or decorators in the  **AppStorage**  to access the corresponding system attribute data.
 
-## Environment APIs<a name="section12843192134"></a>
+accessibilityEnabled is the default system variable identifier provided by Environment. You need to bind the corresponding system attribute to the AppStorage. Then, you can use the methods or decorators in the AppStorage to access the corresponding system attribute data.
+
+
+## Environment APIs
 
-<a name="table384419171310"></a>
-<table><thead align="left"><tr id="row284141915136"><th class="cellrowborder" valign="top" width="14.26%" id="mcps1.1.5.1.1"><p id="p1784419191310"><a name="p1784419191310"></a><a name="p1784419191310"></a><strong id="b88541913130"><a name="b88541913130"></a><a name="b88541913130"></a>key</strong></p>
-</th>
-<th class="cellrowborder" valign="top" width="25.330000000000002%" id="mcps1.1.5.1.2"><p id="p168921384172"><a name="p168921384172"></a><a name="p168921384172"></a>Parameter</p>
-</th>
-<th class="cellrowborder" valign="top" width="8.82%" id="mcps1.1.5.1.3"><p id="p12851119141312"><a name="p12851119141312"></a><a name="p12851119141312"></a>Return Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="51.59%" id="mcps1.1.5.1.4"><p id="p885719141315"><a name="p885719141315"></a><a name="p885719141315"></a><strong id="b7724111610402"><a name="b7724111610402"></a><a name="b7724111610402"></a>Description</strong></p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row6857197134"><td class="cellrowborder" valign="top" width="14.26%" headers="mcps1.1.5.1.1 "><p id="p1385101911130"><a name="p1385101911130"></a><a name="p1385101911130"></a>EnvProp</p>
-</td>
-<td class="cellrowborder" valign="top" width="25.330000000000002%" headers="mcps1.1.5.1.2 "><p id="p5663204012204"><a name="p5663204012204"></a><a name="p5663204012204"></a>key : string</p>
-<p id="p566354016203"><a name="p566354016203"></a><a name="p566354016203"></a>defaultValue: any</p>
-</td>
-<td class="cellrowborder" valign="top" width="8.82%" headers="mcps1.1.5.1.3 "><p id="p1585019161319"><a name="p1585019161319"></a><a name="p1585019161319"></a>boolean</p>
-</td>
-<td class="cellrowborder" valign="top" width="51.59%" headers="mcps1.1.5.1.4 "><p id="p385151931313"><a name="p385151931313"></a><a name="p385151931313"></a>Associates this system variable to the <strong id="b133309266408"><a name="b133309266408"></a><a name="b133309266408"></a>Appstorage</strong>. You are advised to use this API during application startup. If the attribute already exists in the <strong id="b1445964684012"><a name="b1445964684012"></a><a name="b1445964684012"></a>Appstorage</strong>, <strong id="b597684864017"><a name="b597684864017"></a><a name="b597684864017"></a>false</strong> is returned. Do not use the variables in the <strong id="b1363175314401"><a name="b1363175314401"></a><a name="b1363175314401"></a>AppStorage</strong>. Instead, call this method to bind environment variables.</p>
-</td>
-</tr>
-<tr id="row685121921320"><td class="cellrowborder" valign="top" width="14.26%" headers="mcps1.1.5.1.1 "><p id="p89412247562"><a name="p89412247562"></a><a name="p89412247562"></a>EnvProps</p>
-</td>
-<td class="cellrowborder" valign="top" width="25.330000000000002%" headers="mcps1.1.5.1.2 "><p id="p16911327112814"><a name="p16911327112814"></a><a name="p16911327112814"></a>keys: {</p>
-<p id="p260853217289"><a name="p260853217289"></a><a name="p260853217289"></a>key: string,</p>
-<p id="p2084673414282"><a name="p2084673414282"></a><a name="p2084673414282"></a>defaultValue: any</p>
-<p id="p1989210821720"><a name="p1989210821720"></a><a name="p1989210821720"></a>}[]</p>
-</td>
-<td class="cellrowborder" valign="top" width="8.82%" headers="mcps1.1.5.1.3 "><p id="p19487625142016"><a name="p19487625142016"></a><a name="p19487625142016"></a>void</p>
-</td>
-<td class="cellrowborder" valign="top" width="51.59%" headers="mcps1.1.5.1.4 "><p id="p2029419733518"><a name="p2029419733518"></a><a name="p2029419733518"></a>Associates this system item array with the <strong id="b18508171615413"><a name="b18508171615413"></a><a name="b18508171615413"></a>Appstorage</strong>.</p>
-</td>
-</tr>
-<tr id="row198581961319"><td class="cellrowborder" valign="top" width="14.26%" headers="mcps1.1.5.1.1 "><p id="p1685319131316"><a name="p1685319131316"></a><a name="p1685319131316"></a>Keys</p>
-</td>
-<td class="cellrowborder" valign="top" width="25.330000000000002%" headers="mcps1.1.5.1.2 "><p id="p1282319383561"><a name="p1282319383561"></a><a name="p1282319383561"></a>Array&lt;string&gt;</p>
-</td>
-<td class="cellrowborder" valign="top" width="8.82%" headers="mcps1.1.5.1.3 "><p id="p128511951310"><a name="p128511951310"></a><a name="p128511951310"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="51.59%" headers="mcps1.1.5.1.4 "><p id="p138551931318"><a name="p138551931318"></a><a name="p138551931318"></a>Returns the associated system item array.</p>
-</td>
-</tr>
-</tbody>
-</table>
+| key | Parameter | Return Value | Description |
+| -------- | -------- | -------- | -------- |
+| EnvProp | key: string,<br/>defaultValue: any | boolean | Binds this system attribute to the AppStorage. You are advised to use this API during application startup. If the attribute already exists in the AppStorage, false is returned. Do not use the variables in the AppStorage. Instead, call this method to bind environment variables. |
+| EnvProps | keys: {<br/>key: string,<br/>defaultValue: any<br/>}[] | void | Associates this system item array with the AppStorage. |
+| Keys | Array&lt;string&gt; | number | Returns the associated system item array. |
 
-## Built-in Environment Variables<a name="section76906244255"></a>
 
-<a name="table367mcpsimp"></a>
-<table><thead align="left"><tr id="row373mcpsimp"><th class="cellrowborder" valign="top" width="15.42%" id="mcps1.1.4.1.1"><p id="p375mcpsimp"><a name="p375mcpsimp"></a><a name="p375mcpsimp"></a><strong id="b1320314815620"><a name="b1320314815620"></a><a name="b1320314815620"></a>key</strong></p>
-</th>
-<th class="cellrowborder" valign="top" width="12.83%" id="mcps1.1.4.1.2"><p id="p377mcpsimp"><a name="p377mcpsimp"></a><a name="p377mcpsimp"></a><strong id="b17897537411"><a name="b17897537411"></a><a name="b17897537411"></a>Type</strong></p>
-</th>
-<th class="cellrowborder" valign="top" width="71.75%" id="mcps1.1.4.1.3"><p id="p379mcpsimp"><a name="p379mcpsimp"></a><a name="p379mcpsimp"></a><strong id="b78735539419"><a name="b78735539419"></a><a name="b78735539419"></a>Description</strong></p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row380mcpsimp"><td class="cellrowborder" valign="top" width="15.42%" headers="mcps1.1.4.1.1 "><p id="p7162853112520"><a name="p7162853112520"></a><a name="p7162853112520"></a>accessibilityEnabled</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.83%" headers="mcps1.1.4.1.2 "><p id="p384mcpsimp"><a name="p384mcpsimp"></a><a name="p384mcpsimp"></a>boolean</p>
-</td>
-<td class="cellrowborder" valign="top" width="71.75%" headers="mcps1.1.4.1.3 "><p id="p386mcpsimp"><a name="p386mcpsimp"></a><a name="p386mcpsimp"></a>Whether to enable accessibility.</p>
-</td>
-</tr>
-<tr id="row387mcpsimp"><td class="cellrowborder" valign="top" width="15.42%" headers="mcps1.1.4.1.1 "><p id="p389mcpsimp"><a name="p389mcpsimp"></a><a name="p389mcpsimp"></a>colorMode</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.83%" headers="mcps1.1.4.1.2 "><p id="p391mcpsimp"><a name="p391mcpsimp"></a><a name="p391mcpsimp"></a>ColorMode</p>
-</td>
-<td class="cellrowborder" valign="top" width="71.75%" headers="mcps1.1.4.1.3 "><p id="p897319423383"><a name="p897319423383"></a><a name="p897319423383"></a>Color mode. The options are as follows:</p>
-<a name="ul11210147183818"></a><a name="ul11210147183818"></a><ul id="ul11210147183818"><li><strong id="b66184249423"><a name="b66184249423"></a><a name="b66184249423"></a>ColorMode.LIGHT</strong>: light mode.</li><li><strong id="b624204315422"><a name="b624204315422"></a><a name="b624204315422"></a>ColorMode.DARK</strong>: dark mode.</li></ul>
-</td>
-</tr>
-<tr id="row394mcpsimp"><td class="cellrowborder" valign="top" width="15.42%" headers="mcps1.1.4.1.1 "><p id="p396mcpsimp"><a name="p396mcpsimp"></a><a name="p396mcpsimp"></a>fontScale</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.83%" headers="mcps1.1.4.1.2 "><p id="p398mcpsimp"><a name="p398mcpsimp"></a><a name="p398mcpsimp"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="71.75%" headers="mcps1.1.4.1.3 "><p id="p400mcpsimp"><a name="p400mcpsimp"></a><a name="p400mcpsimp"></a>Font scale. The value range is [0.85, 1.45].</p>
-</td>
-</tr>
-<tr id="row401mcpsimp"><td class="cellrowborder" valign="top" width="15.42%" headers="mcps1.1.4.1.1 "><p id="p778417357267"><a name="p778417357267"></a><a name="p778417357267"></a>fontWeightScale</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.83%" headers="mcps1.1.4.1.2 "><p id="p405mcpsimp"><a name="p405mcpsimp"></a><a name="p405mcpsimp"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="71.75%" headers="mcps1.1.4.1.3 "><p id="p407mcpsimp"><a name="p407mcpsimp"></a><a name="p407mcpsimp"></a>Font weight scale. The value range is [0.6, 1.6].</p>
-</td>
-</tr>
-<tr id="row408mcpsimp"><td class="cellrowborder" valign="top" width="15.42%" headers="mcps1.1.4.1.1 "><p id="p410mcpsimp"><a name="p410mcpsimp"></a><a name="p410mcpsimp"></a>layoutDirection</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.83%" headers="mcps1.1.4.1.2 "><p id="p412mcpsimp"><a name="p412mcpsimp"></a><a name="p412mcpsimp"></a>LayoutDirection</p>
-</td>
-<td class="cellrowborder" valign="top" width="71.75%" headers="mcps1.1.4.1.3 "><p id="p549615347406"><a name="p549615347406"></a><a name="p549615347406"></a>Layout direction. The options are as follows:</p>
-<a name="ul370513428408"></a><a name="ul370513428408"></a><ul id="ul370513428408"><li><strong id="b10904132124313"><a name="b10904132124313"></a><a name="b10904132124313"></a>LayoutDirection.LTR</strong>: The direction is from left to right.</li><li><strong id="b66711929174317"><a name="b66711929174317"></a><a name="b66711929174317"></a>LayoutDirection.RTL</strong>: The direction is from right to left.</li></ul>
-</td>
-</tr>
-<tr id="row415mcpsimp"><td class="cellrowborder" valign="top" width="15.42%" headers="mcps1.1.4.1.1 "><p id="p417mcpsimp"><a name="p417mcpsimp"></a><a name="p417mcpsimp"></a>languageCode</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.83%" headers="mcps1.1.4.1.2 "><p id="p419mcpsimp"><a name="p419mcpsimp"></a><a name="p419mcpsimp"></a>string</p>
-</td>
-<td class="cellrowborder" valign="top" width="71.75%" headers="mcps1.1.4.1.3 "><p id="p421mcpsimp"><a name="p421mcpsimp"></a><a name="p421mcpsimp"></a>Current system language. The value is in lowercase, for example, <strong id="b1455024519431"><a name="b1455024519431"></a><a name="b1455024519431"></a>zh</strong>.</p>
-</td>
-</tr>
-</tbody>
-</table>
+## Built-in Environment Variables
 
+  | key | Type | Description | 
+| -------- | -------- | -------- |
+| accessibilityEnabled | boolean | Whether to enable accessibility. | 
+| colorMode | ColorMode | Color mode. The options are as follows:<br/>- ColorMode.LIGHT: light mode.<br/>- ColorMode.DARK: dark mode. | 
+| fontScale | number | Font scale. The value range is [0.85, 1.45]. | 
+| fontWeightScale | number | Font weight scale. The value range is [0.6, 1.6]. | 
+| layoutDirection | LayoutDirection | Layout direction. The options are as follows:<br/>- LayoutDirection.LTR: The direction is from left to right.<br/>- LayoutDirection.RTL: The direction is from right to left. | 
+| languageCode | string | Current system language. The value is in lowercase, for example, zh. | 

en/application-dev/ui/ts-application-states-apis-persistentstorage.md

-# PersistentStorage<a name="EN-US_TOPIC_0000001175152427"></a>
+# PersistentStorage
 
-**PersistentStorage**  is used to manage persistent data of applications. This object can link the persistent data of a specific flag to the  **AppStorage**  and access the persistent data through the  **AppStorage**  APIs or access the variable of the corresponding key through the  **@StorageLink**  decorator.
 
-## PersistentStorage APIs<a name="section959123213514"></a>
+ArkUI provides some static methods in the PersistentStorage class for managing persistent data of applications. Persistent data with specific tags can be linked to the AppStorage, and then the persistent data can be accessed through the AppStorage APIs. Alternatively, the @StorageLink decorator can be used to access the variable of the specific key.
+
+
+| Name | Type | Return Value | Definition |
+| -------- | -------- | -------- | -------- |
+| PersistProp | key : string<br/>defaultValue: T | void | Changes the associated named attribute to persistent data in the AppStorage. The value overwriting sequence is as follows:<br/>- If the attribute exists in the AppStorage, use it to overwrite the value in Persistent.<br/>- If Persistent contains the specified attribute, use the attribute value in Persistent.<br/>- If the preceding conditions are not met, use defaultValue. The values null and undefined are not supported. |
+| DeleteProp | key: string | void | Cancels two-way binding. The value of this attribute will be deleted from the persistent storage. |
+| PersistProps | keys: {<br/>key: string,<br/>defaultValue: any<br/>}[] | void | Associates multiple named attribute bindings. |
+| Keys | void | Array &lt;string&gt; | Returns the flags of all persistent attributes. |
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> - When using PersistProp, ensure that the input key exists in the AppStorage.
+> 
+> - DeleteProp takes effect only for the data that has been linked during the current startup.
 
-<a name="table311mcpsimp"></a>
-<table><thead align="left"><tr id="row317mcpsimp"><th class="cellrowborder" valign="top" width="15.02%" id="mcps1.1.5.1.1"><p id="p319mcpsimp"><a name="p319mcpsimp"></a><a name="p319mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="11.540000000000001%" id="mcps1.1.5.1.2"><p id="p321mcpsimp"><a name="p321mcpsimp"></a><a name="p321mcpsimp"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="9.5%" id="mcps1.1.5.1.3"><p id="p136621139145019"><a name="p136621139145019"></a><a name="p136621139145019"></a>Return Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="63.94%" id="mcps1.1.5.1.4"><p id="p323mcpsimp"><a name="p323mcpsimp"></a><a name="p323mcpsimp"></a>Definition</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row324mcpsimp"><td class="cellrowborder" valign="top" width="15.02%" headers="mcps1.1.5.1.1 "><p id="p326mcpsimp"><a name="p326mcpsimp"></a><a name="p326mcpsimp"></a>PersistProp</p>
-</td>
-<td class="cellrowborder" valign="top" width="11.540000000000001%" headers="mcps1.1.5.1.2 "><p id="p328mcpsimp"><a name="p328mcpsimp"></a><a name="p328mcpsimp"></a>key : string</p>
-<p id="p269635419439"><a name="p269635419439"></a><a name="p269635419439"></a>defaultValue: T</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.5%" headers="mcps1.1.5.1.3 "><p id="p266216399501"><a name="p266216399501"></a><a name="p266216399501"></a>void</p>
-</td>
-<td class="cellrowborder" valign="top" width="63.94%" headers="mcps1.1.5.1.4 "><p id="p115337540440"><a name="p115337540440"></a><a name="p115337540440"></a>Changes associated named attribute to persistent data in the <strong id="b798274517339"><a name="b798274517339"></a><a name="b798274517339"></a>AppStorage</strong>. Value overwriting sequence:</p>
-<p id="p1097811294611"><a name="p1097811294611"></a><a name="p1097811294611"></a>If the attribute exists in the <strong id="b15266175917330"><a name="b15266175917330"></a><a name="b15266175917330"></a>AppStorage</strong>, overwrite its value with the attribute value in <strong id="b344612783413"><a name="b344612783413"></a><a name="b344612783413"></a>Persistent</strong>.</p>
-<p id="p29609684715"><a name="p29609684715"></a><a name="p29609684715"></a>If <strong id="b12915121853416"><a name="b12915121853416"></a><a name="b12915121853416"></a>Persistent</strong> contains the specified attribute, use the attribute value in <strong id="b1578284213414"><a name="b1578284213414"></a><a name="b1578284213414"></a>Persistent</strong>.</p>
-<p id="p1738263104810"><a name="p1738263104810"></a><a name="p1738263104810"></a>If the preceding conditions are not met, use <strong id="b6526155416348"><a name="b6526155416348"></a><a name="b6526155416348"></a>defaultValue</strong>. The <strong id="b993917517358"><a name="b993917517358"></a><a name="b993917517358"></a>null</strong> and <strong id="b252811983513"><a name="b252811983513"></a><a name="b252811983513"></a>undefined</strong> values are not supported.</p>
-</td>
-</tr>
-<tr id="row331mcpsimp"><td class="cellrowborder" valign="top" width="15.02%" headers="mcps1.1.5.1.1 "><p id="p333mcpsimp"><a name="p333mcpsimp"></a><a name="p333mcpsimp"></a>DeleteProp</p>
-</td>
-<td class="cellrowborder" valign="top" width="11.540000000000001%" headers="mcps1.1.5.1.2 "><p id="p335mcpsimp"><a name="p335mcpsimp"></a><a name="p335mcpsimp"></a>key: string</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.5%" headers="mcps1.1.5.1.3 "><p id="p866233965012"><a name="p866233965012"></a><a name="p866233965012"></a>void</p>
-</td>
-<td class="cellrowborder" valign="top" width="63.94%" headers="mcps1.1.5.1.4 "><p id="p337mcpsimp"><a name="p337mcpsimp"></a><a name="p337mcpsimp"></a>Cancels two-way binding. The value of this attribute will be deleted from the persistent storage.</p>
-</td>
-</tr>
-<tr id="row94321195117"><td class="cellrowborder" valign="top" width="15.02%" headers="mcps1.1.5.1.1 "><p id="p651421105116"><a name="p651421105116"></a><a name="p651421105116"></a>PersistProps</p>
-</td>
-<td class="cellrowborder" valign="top" width="11.540000000000001%" headers="mcps1.1.5.1.2 "><p id="p69911746282"><a name="p69911746282"></a><a name="p69911746282"></a>keys: {</p>
-<p id="p52741115112813"><a name="p52741115112813"></a><a name="p52741115112813"></a>key: string,</p>
-<p id="p1414372092813"><a name="p1414372092813"></a><a name="p1414372092813"></a>defaultValue: any</p>
-<p id="p11542175114"><a name="p11542175114"></a><a name="p11542175114"></a>}[]</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.5%" headers="mcps1.1.5.1.3 "><p id="p1451721115111"><a name="p1451721115111"></a><a name="p1451721115111"></a>void</p>
-</td>
-<td class="cellrowborder" valign="top" width="63.94%" headers="mcps1.1.5.1.4 "><p id="p8512119518"><a name="p8512119518"></a><a name="p8512119518"></a>Associates multiple named attribute bindings.</p>
-</td>
-</tr>
-<tr id="row338mcpsimp"><td class="cellrowborder" valign="top" width="15.02%" headers="mcps1.1.5.1.1 "><p id="p340mcpsimp"><a name="p340mcpsimp"></a><a name="p340mcpsimp"></a>Keys</p>
-</td>
-<td class="cellrowborder" valign="top" width="11.540000000000001%" headers="mcps1.1.5.1.2 "><p id="p342mcpsimp"><a name="p342mcpsimp"></a><a name="p342mcpsimp"></a>void</p>
-</td>
-<td class="cellrowborder" valign="top" width="9.5%" headers="mcps1.1.5.1.3 "><p id="p16662163915015"><a name="p16662163915015"></a><a name="p16662163915015"></a>Array&lt;string&gt;</p>
-</td>
-<td class="cellrowborder" valign="top" width="63.94%" headers="mcps1.1.5.1.4 "><p id="p344mcpsimp"><a name="p344mcpsimp"></a><a name="p344mcpsimp"></a>Returns the flags of all persistent attributes.</p>
-</td>
-</tr>
-</tbody>
-</table>
 
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->-   When using  **PersistProp**, ensure that the input key exists in the  **Appstorage**.
->-   **DeleteProp**  takes effect only for the data that has been linked during the current startup.
 
 ```
 PersistentStorage.PersistProp("highScore", "0");
@@ -91,4 +45,3 @@ struct PersistentComponent {
     }
 }
 ```
-

en/application-dev/ui/ts-application-states-appstorage.md

-# AppStorage<a name="EN-US_TOPIC_0000001119929480"></a>
-
-**AppStorage**  is a singleton object in an application and is created by the UI framework when the application is started. It is designed to provide central storage for changing application state attributes.  **AppStorage**  contains all the state attributes that need to be accessed throughout the application. The  **AppStorage**  retains all attributes and their values as long as the application remains running, and the attribute values can be accessed through unique key values.
-
-The UI component can synchronize the application state data with the  **AppStorage**  through the decorators. The application service logic can also be implemented by accessing the  **AppStorage**  through APIs.
-
-The selection state attribute of the  **AppStorage**  can be synchronized with different data sources or data sinks. These data sources and data sinks can be local or remote devices and provide different functions, such as data persistence. Such data sources and data sinks can be implemented independently of the UI in the service logic.
-
-By default, the attributes in the  **AppStorage**  are changeable. If needed,  **AppStorage**  can also use immutable \(read-only\) attributes.
-
-## AppStorage APIs<a name="en-us_topic_0000001103218748_section89909382526"></a>
-
-<a name="en-us_topic_0000001103218748_table109mcpsimp"></a>
-<table><thead align="left"><tr id="en-us_topic_0000001103218748_row115mcpsimp"><th class="cellrowborder" valign="top" width="11.700000000000001%" id="mcps1.1.5.1.1"><p id="en-us_topic_0000001103218748_p117mcpsimp"><a name="en-us_topic_0000001103218748_p117mcpsimp"></a><a name="en-us_topic_0000001103218748_p117mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="13.96%" id="mcps1.1.5.1.2"><p id="en-us_topic_0000001103218748_p119mcpsimp"><a name="en-us_topic_0000001103218748_p119mcpsimp"></a><a name="en-us_topic_0000001103218748_p119mcpsimp"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="12.379999999999999%" id="mcps1.1.5.1.3"><p id="p1566112607"><a name="p1566112607"></a><a name="p1566112607"></a>Return Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="61.96%" id="mcps1.1.5.1.4"><p id="en-us_topic_0000001103218748_p121mcpsimp"><a name="en-us_topic_0000001103218748_p121mcpsimp"></a><a name="en-us_topic_0000001103218748_p121mcpsimp"></a>Definition</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="en-us_topic_0000001103218748_row122mcpsimp"><td class="cellrowborder" valign="top" width="11.700000000000001%" headers="mcps1.1.5.1.1 "><p id="en-us_topic_0000001103218748_p124mcpsimp"><a name="en-us_topic_0000001103218748_p124mcpsimp"></a><a name="en-us_topic_0000001103218748_p124mcpsimp"></a>Link</p>
-</td>
-<td class="cellrowborder" valign="top" width="13.96%" headers="mcps1.1.5.1.2 "><p id="en-us_topic_0000001103218748_p126mcpsimp"><a name="en-us_topic_0000001103218748_p126mcpsimp"></a><a name="en-us_topic_0000001103218748_p126mcpsimp"></a>key: string</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.379999999999999%" headers="mcps1.1.5.1.3 "><p id="p185664215018"><a name="p185664215018"></a><a name="p185664215018"></a>@Link</p>
-</td>
-<td class="cellrowborder" valign="top" width="61.96%" headers="mcps1.1.5.1.4 "><p id="en-us_topic_0000001103218748_p128mcpsimp"><a name="en-us_topic_0000001103218748_p128mcpsimp"></a><a name="en-us_topic_0000001103218748_p128mcpsimp"></a>Returns the two-way binding to this attribute if there is data with a given key. This means that changes made to the data by a variable or component will be synchronized to the <strong id="b256152252519"><a name="b256152252519"></a><a name="b256152252519"></a>AppStorage</strong>, and changes made to the data by the <strong id="b2044815293254"><a name="b2044815293254"></a><a name="b2044815293254"></a>AppStorage</strong> will be synchronized to the variable or component. If the attribute with this key does not exist or is read-only, <strong id="b105824492514"><a name="b105824492514"></a><a name="b105824492514"></a>undefined</strong> is returned.</p>
-</td>
-</tr>
-<tr id="row327610512417"><td class="cellrowborder" valign="top" width="11.700000000000001%" headers="mcps1.1.5.1.1 "><p id="p142761957415"><a name="p142761957415"></a><a name="p142761957415"></a>SetAndLink</p>
-</td>
-<td class="cellrowborder" valign="top" width="13.96%" headers="mcps1.1.5.1.2 "><p id="p240416172411"><a name="p240416172411"></a><a name="p240416172411"></a>key : String</p>
-<p id="p540414171943"><a name="p540414171943"></a><a name="p540414171943"></a>defaultValue: T</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.379999999999999%" headers="mcps1.1.5.1.3 "><p id="p96661522744"><a name="p96661522744"></a><a name="p96661522744"></a>@Link</p>
-</td>
-<td class="cellrowborder" valign="top" width="61.96%" headers="mcps1.1.5.1.4 "><p id="p13277851841"><a name="p13277851841"></a><a name="p13277851841"></a>Works in a way similar to the <strong id="b673182616"><a name="b673182616"></a><a name="b673182616"></a>Link</strong> API. If the current key is stored in the <strong id="b117871016261"><a name="b117871016261"></a><a name="b117871016261"></a>AppStorage</strong>, the value corresponding to the key is returned. If the key has not been created, a <strong id="b1132564213289"><a name="b1132564213289"></a><a name="b1132564213289"></a>Link</strong> instance corresponding to the default value is created and returned.</p>
-</td>
-</tr>
-<tr id="en-us_topic_0000001103218748_row129mcpsimp"><td class="cellrowborder" valign="top" width="11.700000000000001%" headers="mcps1.1.5.1.1 "><p id="en-us_topic_0000001103218748_p131mcpsimp"><a name="en-us_topic_0000001103218748_p131mcpsimp"></a><a name="en-us_topic_0000001103218748_p131mcpsimp"></a>Prop</p>
-</td>
-<td class="cellrowborder" valign="top" width="13.96%" headers="mcps1.1.5.1.2 "><p id="en-us_topic_0000001103218748_p133mcpsimp"><a name="en-us_topic_0000001103218748_p133mcpsimp"></a><a name="en-us_topic_0000001103218748_p133mcpsimp"></a>key: string</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.379999999999999%" headers="mcps1.1.5.1.3 "><p id="p55660211014"><a name="p55660211014"></a><a name="p55660211014"></a>@Prop</p>
-</td>
-<td class="cellrowborder" valign="top" width="61.96%" headers="mcps1.1.5.1.4 "><p id="en-us_topic_0000001103218748_p135mcpsimp"><a name="en-us_topic_0000001103218748_p135mcpsimp"></a><a name="en-us_topic_0000001103218748_p135mcpsimp"></a>Returns one-way binding to an attribute with a given key if the attribute exists. This one-way binding means that changes to the attribute can only be synchronized to variables or components through <strong id="b1983822114277"><a name="b1983822114277"></a><a name="b1983822114277"></a>AppStorage</strong>. The variable returned by this method is an immutable one, which is applicable both to the variable and immutable state attributes. If the attribute with this key does not exist, <strong id="b1420194122713"><a name="b1420194122713"></a><a name="b1420194122713"></a>undefined</strong> is returned.</p>
-<div class="note" id="en-us_topic_0000001103218748_note1886831124618"><a name="en-us_topic_0000001103218748_note1886831124618"></a><a name="en-us_topic_0000001103218748_note1886831124618"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="p522015411452"><a name="p522015411452"></a><a name="p522015411452"></a>The attribute value type used in the <strong id="b131815112279"><a name="b131815112279"></a><a name="b131815112279"></a>prop</strong> method must be of a simple type.</p>
-</div></div>
-</td>
-</tr>
-<tr id="row13351212193"><td class="cellrowborder" valign="top" width="11.700000000000001%" headers="mcps1.1.5.1.1 "><p id="p835812194"><a name="p835812194"></a><a name="p835812194"></a>SetAndProp</p>
-</td>
-<td class="cellrowborder" valign="top" width="13.96%" headers="mcps1.1.5.1.2 "><p id="p1228852918920"><a name="p1228852918920"></a><a name="p1228852918920"></a>key : string</p>
-<p id="p132888294919"><a name="p132888294919"></a><a name="p132888294919"></a>defaultValue: S</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.379999999999999%" headers="mcps1.1.5.1.3 "><p id="p035712792"><a name="p035712792"></a><a name="p035712792"></a>@Prop</p>
-</td>
-<td class="cellrowborder" valign="top" width="61.96%" headers="mcps1.1.5.1.4 "><p id="p18161144416910"><a name="p18161144416910"></a><a name="p18161144416910"></a>Works in a way similar to the <strong id="b129457583275"><a name="b129457583275"></a><a name="b129457583275"></a>Prop</strong> API. If the current key is stored in the <strong id="b12291153112817"><a name="b12291153112817"></a><a name="b12291153112817"></a>AppStorage</strong>, the value corresponding to the key is returned. If the key has not been created, a <strong id="b19872518172815"><a name="b19872518172815"></a><a name="b19872518172815"></a>Prop</strong> instance corresponding to the default value is created and returned.</p>
-</td>
-</tr>
-<tr id="en-us_topic_0000001103218748_row136mcpsimp"><td class="cellrowborder" valign="top" width="11.700000000000001%" headers="mcps1.1.5.1.1 "><p id="en-us_topic_0000001103218748_p138mcpsimp"><a name="en-us_topic_0000001103218748_p138mcpsimp"></a><a name="en-us_topic_0000001103218748_p138mcpsimp"></a>Has</p>
-</td>
-<td class="cellrowborder" valign="top" width="13.96%" headers="mcps1.1.5.1.2 "><p id="en-us_topic_0000001103218748_p140mcpsimp"><a name="en-us_topic_0000001103218748_p140mcpsimp"></a><a name="en-us_topic_0000001103218748_p140mcpsimp"></a>key: string</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.379999999999999%" headers="mcps1.1.5.1.3 "><p id="p125661627019"><a name="p125661627019"></a><a name="p125661627019"></a>boolean</p>
-</td>
-<td class="cellrowborder" valign="top" width="61.96%" headers="mcps1.1.5.1.4 "><p id="en-us_topic_0000001103218748_p142mcpsimp"><a name="en-us_topic_0000001103218748_p142mcpsimp"></a><a name="en-us_topic_0000001103218748_p142mcpsimp"></a>Checks whether the attribute corresponding to the key value exists.</p>
-</td>
-</tr>
-<tr id="en-us_topic_0000001103218748_row150mcpsimp"><td class="cellrowborder" valign="top" width="11.700000000000001%" headers="mcps1.1.5.1.1 "><p id="en-us_topic_0000001103218748_p1363415429353"><a name="en-us_topic_0000001103218748_p1363415429353"></a><a name="en-us_topic_0000001103218748_p1363415429353"></a>Keys</p>
-</td>
-<td class="cellrowborder" valign="top" width="13.96%" headers="mcps1.1.5.1.2 "><p id="en-us_topic_0000001103218748_p154mcpsimp"><a name="en-us_topic_0000001103218748_p154mcpsimp"></a><a name="en-us_topic_0000001103218748_p154mcpsimp"></a>void</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.379999999999999%" headers="mcps1.1.5.1.3 "><p id="p19566522014"><a name="p19566522014"></a><a name="p19566522014"></a>array&lt;string&gt;</p>
-</td>
-<td class="cellrowborder" valign="top" width="61.96%" headers="mcps1.1.5.1.4 "><p id="en-us_topic_0000001103218748_p156mcpsimp"><a name="en-us_topic_0000001103218748_p156mcpsimp"></a><a name="en-us_topic_0000001103218748_p156mcpsimp"></a>Returns an array of strings containing all keys.</p>
-</td>
-</tr>
-<tr id="row3460194012589"><td class="cellrowborder" valign="top" width="11.700000000000001%" headers="mcps1.1.5.1.1 "><p id="p1846mcpsimp"><a name="p1846mcpsimp"></a><a name="p1846mcpsimp"></a>Get</p>
-</td>
-<td class="cellrowborder" valign="top" width="13.96%" headers="mcps1.1.5.1.2 "><p id="p263019299243"><a name="p263019299243"></a><a name="p263019299243"></a>string</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.379999999999999%" headers="mcps1.1.5.1.3 "><p id="p14566921105"><a name="p14566921105"></a><a name="p14566921105"></a>T or undefined</p>
-</td>
-<td class="cellrowborder" valign="top" width="61.96%" headers="mcps1.1.5.1.4 "><p id="p1850mcpsimp"><a name="p1850mcpsimp"></a><a name="p1850mcpsimp"></a>Obtains the value of the key.</p>
-</td>
-</tr>
-<tr id="row4460184019583"><td class="cellrowborder" valign="top" width="11.700000000000001%" headers="mcps1.1.5.1.1 "><p id="p4826171212519"><a name="p4826171212519"></a><a name="p4826171212519"></a>Set</p>
-</td>
-<td class="cellrowborder" valign="top" width="13.96%" headers="mcps1.1.5.1.2 "><p id="p11826512152517"><a name="p11826512152517"></a><a name="p11826512152517"></a>string, newValue : T</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.379999999999999%" headers="mcps1.1.5.1.3 "><p id="p185671321506"><a name="p185671321506"></a><a name="p185671321506"></a>void</p>
-</td>
-<td class="cellrowborder" valign="top" width="61.96%" headers="mcps1.1.5.1.4 "><p id="p1982671202510"><a name="p1982671202510"></a><a name="p1982671202510"></a>Replaces the value of a saved key.</p>
-</td>
-</tr>
-<tr id="row546074014585"><td class="cellrowborder" valign="top" width="11.700000000000001%" headers="mcps1.1.5.1.1 "><p id="p1799852316279"><a name="p1799852316279"></a><a name="p1799852316279"></a>SetOrCreate</p>
-</td>
-<td class="cellrowborder" valign="top" width="13.96%" headers="mcps1.1.5.1.2 "><p id="p146505413272"><a name="p146505413272"></a><a name="p146505413272"></a>string, newValue : T</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.379999999999999%" headers="mcps1.1.5.1.3 "><p id="p168731437917"><a name="p168731437917"></a><a name="p168731437917"></a>boolean</p>
-</td>
-<td class="cellrowborder" valign="top" width="61.96%" headers="mcps1.1.5.1.4 "><p id="p639717522815"><a name="p639717522815"></a><a name="p639717522815"></a>Returns <strong id="b28651779307"><a name="b28651779307"></a><a name="b28651779307"></a>true</strong> if an attribute with the same name exists and the attribute can be modified; returns <strong id="b57431415123013"><a name="b57431415123013"></a><a name="b57431415123013"></a>false</strong> otherwise.</p>
-<p id="p17541322112611"><a name="p17541322112611"></a><a name="p17541322112611"></a>If the attribute with the same name does not exist: the first attribute whose value is the <strong id="b13513114214300"><a name="b13513114214300"></a><a name="b13513114214300"></a>defaultValue</strong> is created and returned. The <strong id="b3232681318"><a name="b3232681318"></a><a name="b3232681318"></a>null</strong> and <strong id="b17924171163110"><a name="b17924171163110"></a><a name="b17924171163110"></a>undefined</strong> values are not supported.</p>
-</td>
-</tr>
-<tr id="row350321491214"><td class="cellrowborder" valign="top" width="11.700000000000001%" headers="mcps1.1.5.1.1 "><p id="p17503121481216"><a name="p17503121481216"></a><a name="p17503121481216"></a>Delete</p>
-</td>
-<td class="cellrowborder" valign="top" width="13.96%" headers="mcps1.1.5.1.2 "><p id="p6503161417122"><a name="p6503161417122"></a><a name="p6503161417122"></a>key : string</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.379999999999999%" headers="mcps1.1.5.1.3 "><p id="p205031814191212"><a name="p205031814191212"></a><a name="p205031814191212"></a>boolean</p>
-</td>
-<td class="cellrowborder" valign="top" width="61.96%" headers="mcps1.1.5.1.4 "><p id="p05031014141211"><a name="p05031014141211"></a><a name="p05031014141211"></a>Deletes an attribute. If the attribute exists, <strong id="b1920473013116"><a name="b1920473013116"></a><a name="b1920473013116"></a>true</strong> is returned. Otherwise, <strong id="b98112040193114"><a name="b98112040193114"></a><a name="b98112040193114"></a>false</strong> is returned.</p>
-</td>
-</tr>
-<tr id="row12261203911401"><td class="cellrowborder" valign="top" width="11.700000000000001%" headers="mcps1.1.5.1.1 "><p id="p202611739204016"><a name="p202611739204016"></a><a name="p202611739204016"></a>Clear</p>
-</td>
-<td class="cellrowborder" valign="top" width="13.96%" headers="mcps1.1.5.1.2 "><p id="p526118395407"><a name="p526118395407"></a><a name="p526118395407"></a>none</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.379999999999999%" headers="mcps1.1.5.1.3 "><p id="p326173910400"><a name="p326173910400"></a><a name="p326173910400"></a>boolean</p>
-</td>
-<td class="cellrowborder" valign="top" width="61.96%" headers="mcps1.1.5.1.4 "><p id="p22611139114012"><a name="p22611139114012"></a><a name="p22611139114012"></a>Deletes all attributes. If any of the attributes is being referenced by a state variable, <strong id="b15300751153119"><a name="b15300751153119"></a><a name="b15300751153119"></a>false</strong> is returned.</p>
-</td>
-</tr>
-<tr id="row14209473411"><td class="cellrowborder" valign="top" width="11.700000000000001%" headers="mcps1.1.5.1.1 "><p id="p12420347194115"><a name="p12420347194115"></a><a name="p12420347194115"></a>IsMutable</p>
-</td>
-<td class="cellrowborder" valign="top" width="13.96%" headers="mcps1.1.5.1.2 "><p id="p10420174754114"><a name="p10420174754114"></a><a name="p10420174754114"></a>key: string</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.379999999999999%" headers="mcps1.1.5.1.3 ">&nbsp;&nbsp;</td>
-<td class="cellrowborder" valign="top" width="61.96%" headers="mcps1.1.5.1.4 "><p id="p1942074711417"><a name="p1942074711417"></a><a name="p1942074711417"></a>Specifies whether the attribute exists and can be changed.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->Currently, the API can process only basic data and cannot modify a value in an object.
-
-## Example<a name="en-us_topic_0000001103218748_section195112274815"></a>
+# AppStorage
+
+
+AppStorage is a singleton object in an application, which is created by the UI framework when the application is started and destroyed when the application exits. It is used to provide central storage for changing state attributes of an application. AppStorage contains all the state attributes that need to be accessed throughout the application. The AppStorage retains all attributes and their values as long as the application remains running, and the attribute values can be accessed through unique key values.
+
+
+The UI component can synchronize the application state data with the AppStorage through the decorators. The application service logic can also be implemented by accessing the AppStorage through APIs.
+
+
+The selection state attribute of the AppStorage can be synchronized with different data sources or data sinks. These data sources and data sinks can be local or remote devices and provide different functions, such as data persistence. Such data sources and data sinks can be implemented independently of the UI in the service logic.
+
+
+By default, the attributes in the AppStorage are changeable. If needed, AppStorage can also use immutable (read-only) attributes.
+
+
+## AppStorage APIs
+
+| Name | Type | Return Value | Definition |
+| -------- | -------- | -------- | -------- |
+| SetAndLink | key: string,<br/>defaultValue: T | @Link | Works in a way similar to the Link API. If the current key is stored in the AppStorage, the value corresponding to the key is returned. If the key has not been created, a Link instance corresponding to the default value is created and returned. |
+| Set | key: string,<br/>newValue: T | void | Replaces the value of a saved key. |
+| Link | key: string | @Link | Returns two-way binding to this attribute if there is data with a given key. This means that attribute changes made by a variable or component will be synchronized to the AppStorage, and attribute changes made through the AppStorage will be synchronized to the variable or component. If the attribute with this key does not exist or is read-only, undefined is returned. |
+| SetAndProp | propName: string,<br/>defaultValue: S | @Prop | Works in a way similar to the Prop API. If the current key is stored in the AppStorage, the value corresponding to the key is returned. If the key has not been created, a Prop instance corresponding to the default value is created and returned. |
+| Prop | key: string | @Prop | Returns one-way binding to an attribute with a given key if the attribute exists. This means that attribute changes made through the AppStorage will be synchronized to the variable or component, but attribute changes made by the variable or component will be synchronized to the AppStorage. The variable returned by this method is an immutable one, which is applicable both to the variable and immutable state attributes. If the attribute with the specified key does not exist, undefined is returned.<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:<br/>> The attribute value used in the prop method must be of a simple type. |
+| SetOrCreate | key: string,<br/>newValue: T | boolean | If an attribute that has the same name as the specified key exists: replaces the value of the attribute and returns true when the attribute can be modified; retains the original value of the attribute and returns false otherwise.<br/>If an attribute that has the same name as the specified key does not exist: creates an attribute whose key is key and value is newValue. The values null and undefined are not supported. |
+| Get | key: string | T or undefined | Obtains the value of the specified key. |
+| Has | propName: string | boolean | Checks whether the attribute corresponding to the specified key value exists. |
+| Keys | void | array&lt;string&gt; | Returns an array of strings containing all keys. |
+| Delete | key: string | boolean | Deletes the key-value pair for the specified key. Returns true if the key-value pair exists and is successfully deleted; returns false otherwise. |
+| Clear | void | boolean | Deletes all attributes. If any of the attributes is being referenced by a state variable, false is returned. |
+| IsMutable | key: string | boolean | Specifies whether the attribute exists and can be changed. |
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> Currently, the API can process only basic data and cannot modify a value in an object.
+
+
+## Synchronization Between AppStorage and Components
+
+In [Managing Component States](ts-component-states-state.md), we have defined how to synchronize the state variables of child components with the @State decorated variables in the parent component or ancestor component, including @Prop, @Link, and @Consume.
+
+In this section, we'll describe how to synchronize component variables with the AppStorage through the @StorageLink and @StorageProp decorators.
+
+
+### @StorageLink Decorator
+
+Two-way data binding can be established between components and the AppStorage through state variables decorated by @StorageLink(_key_). Wherein, key is the attribute key value in the AppStorage. When a component containing the @StorageLink decorated variable is created, the variable is initialized using the value in the AppStorage. Changes made to this variable in the component will be first synchronized to the AppStorage, and then to other bound instances, such as PersistentStorage or other bound UI components.
+
+
+### @StorageProp Decorator
+
+One-way data binding can be established between components and the AppStorage through state variables decorated by @StorageProp(_key_). Wherein, key is the attribute key value in the AppStorage. When a component containing the @StorageProp decorated variable is created, the variable is initialized using the value in the AppStorage. Changes made to the value in the AppStorage will cause the bound UI component to update the state.
+
+
+## Example
+
 
 ```
-let link1 = AppStorage.Link('PropA')
-let link2 = AppStorage.Link('PropA')
-let prop = AppStorage.Prop('PropA')
+let varA = AppStorage.Link('varA')
+let envLang = AppStorage.Prop('languageCode')
+
+@Entry
+@Component
+struct ComponentA {
+  @StorageLink('varA') varA: number = 2
+  @StorageProp('languageCode') lang: string = 'en'
+  private label: string = 'count'
+
+  private aboutToAppear() {
+    this.label = (this.lang === 'en') ? 'Number' : 'Count'
+  }
+
+  build() {
+    Row({ space: 20 }) {
 
-link1 = 47  // causes link1 == link2 == prop == 47
-link2 = link1 + prop  // causes link1 == link2 == prop == 94
-prop = 1  // error, prop is immutable
+      Button(`${this.label}: ${this.varA}`)
+        .onClick(() => {
+          AppStorage.Set<number>('varA', AppStorage.Get<number>('varA') + 1)
+        })
+      Button(`lang: ${this.lang}`)
+        .onClick(() => {
+          if (this.lang === 'zh') {
+            AppStorage.Set<string>('languageCode', 'en')
+          } else {
+            AppStorage.Set<string>('languageCode', 'en')
+          }
+          this.label = (this.lang === 'en') ? 'Number' : 'Count'
+        })
+    }
+  }
+}
 ```
 
+Each time the user clicks the Count button, the value of this.varA will increase by 1. This variable is synchronized with varA in the AppStorage. Each time the user clicks the language icon, the value of languageCode in the AppStorage will be changed, and the change will be synchronized to the this.lang variable.

en/application-dev/ui/ts-attribution-configuration.md

-# Attribution Configuration<a name="EN-US_TOPIC_0000001157228865"></a>
+# Attribute Configuration
 
-Use attribute methods to configure component attributes. An attribute method follows the corresponding component and is bound to the component using the "**.**" operator.
 
-The following is an example of configuring the  **fontsize**  attribute of the  **<Text\>**  component:
+Use attribute methods to configure component attributes. An attribute method follows the corresponding component and is bound to the component using the "." operator.
 
-```
-Text('123')
+
+- The following is an example of configuring the font size attribute of the Text component:
+    
+  ```
+  Text('123')
       .fontSize(12)
-```
+  ```
 
-You can also use the "**.**" operation to implement chain call to configure multiple attributes at the same time.
 
-Below is the sample code for configuring the  **width**  and  **height**  attributes of the  **<Image\>**  component at the same time:
+- Use the "." operator to implement chain call to configure multiple attributes at the same time, as shown below:
     
-```
-Image('a.jpg')
-    .alt('error.jpg')
-    .width(100)
-    .height(100)
-```
+  ```
+  Image('a.jpg')
+      .alt('error.jpg')    .width(100)    .height(100)
+  ```
 
-In addition to constants, you can also pass variables or expressions, as shown below:
 
-```
-// Size, count, and offset are private variables defined in the component.
-Text('hello')
-    .fontSize(this.size)
-Image('a.jpg')
-    .width(this.count % 2 === 0 ? 100 : 200)
-    .height(this.offset + 100)
-```
+- In addition to constants, you can also pass variables or expressions, as shown below:
     
-For attributes of preset components, the framework also provides some predefined enumeration types, which you can pass as parameters to methods.
+  ```
+  // Size, count, and offset are private variables defined in the component.
+  Text('hello')
+      .fontSize(this.size)
+  Image('a.jpg')
+      .width(this.count % 2 === 0 ? 100 : 200)    .height(this.offset + 100)
+  ```
 
-Enumeration types must meet the parameter type requirements on the enumeration type definitions for specific attributes.
 
-You can configure the font color and weight attributes of the  **<Text\>**  component as follows:
+- For attributes of preset components, the framework also provides some predefined enumeration types, which you can pass as parameters to methods. Enumeration types must meet the parameter type requirements on the enumeration type definitions for specific attributes. You can configure the font color and weight attributes of the Text component as follows:
     
-```
-Text('hello')
+  ```
+  Text('hello')
       .fontSize(20)
       .fontColor(Color.Red)
       .fontWeight(FontWeight.Bold)
-```
-
+  ```

en/application-dev/ui/ts-basic-components-loadingprogress.md

-# LoadingProgress
-
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
-> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
-
-The **<LoadingProgress>** component is used to display the loading progress.
-
-## Required Permissions
-
-None
-
-## Child Components
-
-None
-
-## APIs
-
-LoadingProgress()
-
-Creates a **LoadingProgress** instance.
-
-## Attributes
-
-| Name  | Type  | Default Value | Description                              |
-| ----- | ----- | ------------- | ---------------------------------------- |
-| color | Color | -             | Foreground color of the loading progress bar. |
-
-## Example
-
-```
-@Entry
-@Component
-struct LoadingProgressExample {
-  build() {
-    Column({ space: 5 }) {
-      Text('Orbital LoadingProgress ').fontSize(9).fontColor(0xCCCCCC).width('90%')
-      LoadingProgress()
-        .color(Color.Blue)
-    }.width('100%').margin({ top: 5 })
-  }
-}
-```
-
-![zh-cn_image_0000001198839004](figures/loadingProgress.png)
\ No newline at end of file

en/application-dev/ui/ts-child-component-configuration.md

-# Child Component Configuration<a name="EN-US_TOPIC_0000001157228875"></a>
+# Child Component Configuration
 
-For a component that supports child components, for example, a container component, add the UI descriptions of the child components inside "**\{ ... \}**". The  **<Column\>**,  **<Row\>**,  **<Stack\>**,  **<Button\>**,  **<Grid\>**, and  **<List\>**  components are container components.
 
-The following is a simple example of the  **<Column\>**  component:
+For a component that supports child components, for example, a container component, add the UI descriptions of the child components inside "{ ... }". The &lt;Column&gt;, &lt;Row&gt;, &lt;Stack&gt;, &lt;Button&gt;, &lt;Grid&gt;, and &lt;List&gt; components are container components.
 
-```
-Column() {
+
+- The following is a simple example of the &lt;Column&gt; component:
+  
+  ```
+  Column() {
       Text('Hello')
           .fontSize(100)
       Divider()
       Text(this.myText)
           .fontSize(100)
           .fontColor(Color.Red)
-}
-```
+  }
+  ```
 
-Multiple child components can be nested in the  **<Column\>**  component, as shown below:
 
-```
-Column() {
+- Multiple child components can be nested in the &lt;Column&gt; component, as shown below:
+  
+  ```
+  Column() {
       Column() {
           Button() {
               Text('+ 1')
           }.type(ButtonType.Capsule)
-        .onClick(() => console.log ('+1 clicked!'))
+          .onClick(() =&gt; console.log ('+1 clicked!'))
           Image('1.jpg')
       }
       Divider()
@@ -31,7 +34,7 @@ Column() {
           Button() {
               Text('+ 2')
           }.type(ButtonType.Capsule)
-        .onClick(() => console.log ('+2 clicked!'))
+          .onClick(() =&gt; console.log ('+2 clicked!'))
           Image('2.jpg')
       }
       Divider()
@@ -39,9 +42,8 @@ Column() {
           Button() {
               Text('+ 3')
           }.type(ButtonType.Capsule)
-        .onClick(() => console.log('+3 clicked!'))
+          .onClick(() =&gt; console.log('+3 clicked!'))
           Image('3.jpg')
       }
-}.alignItems(HorizontalAlign.Center) // center align components inside Column
-```
-
+  }.alignItems(HorizontalAlign.Center) // center align components inside Column
+  ```

en/application-dev/ui/ts-component-based-builder.md

-# @Builder<a name="EN-US_TOPIC_0000001134858596"></a>
+# @Builder
+
+
+The @Builder decorated method is used to define the declarative UI description of a component and quickly generate multiple layouts in a custom component. The functionality and syntax of the @Builder decorator are the same as those of the [build Function](ts-function-build.md).
 
-The  **@Builder**  decorator defines a method for rendering custom components It allows a method to work in the same way as the  [build](ts-function-build.md)  function. The syntax of methods decorated by  **@Builder**  is the same as that of the  **build**  function.
 
-You can use the  **@Builder**  decorator to quickly generate multiple layouts within a custom component.
 
 ```
 @Entry
@@ -42,3 +43,99 @@ struct CompA {
 }
 ```
 
+## @BuilderParam<sup>8+</sup>
+
+The @BuilderParam decorator is used to modify the function type attributes (for example, @BuilderParam content: () => any) in a custom component. When the custom component is initialized, the attributes modified by the @BuilderParam decorator must be assigned values.
+
+### Background
+
+In certain circumstances, you may need to add a specific function, such as a click-to-jump action, to a custom component. However, embedding an event method directly inside of the component can add the function to all places where the component is initialized. This is where the @BuilderParam decorator come into the picture. When initializing a custom component, you can assign a @Builder decorated method to the @BuilderParam decorated attribute, thereby adding the specific function to the custom component.
+
+### Component Initialization Through Parameters
+
+When initializing a custom component through parameters, assign a @Builder decorated method to the @BuilderParam decorated attribute —content, and call the value of content in the custom component.
+
+```
+@Component
+struct CustomContainer {
+  header: string = "";
+  @BuilderParam content: () => any;
+  footer: string = "";
+  build() {
+    Column() {
+      Text(this.header)
+        .fontSize(50)
+      this.content()
+      Text(this.footer)
+        .fontSize(50)
+    }
+  }
+}
+
+@Entry
+@Component
+struct CustomContainerUser {
+  @Builder specificParam(label: string) {
+    Column() {
+      Text(label).fontSize(50)
+    }
+  }
+
+  build() {
+    Column() {
+      CustomContainer({
+        header: "Header",
+        content: this.specificParam("111")
+        footer: "Footer",
+      })
+    }
+  }
+}
+```
+
+### Component Initialization Through Trailing Closure
+
+In a custom component, use the @BuilderParam decorated attribute to receive a trailing closure. When the custom component is initialized, the component name is followed by a pair of braces ({}) to form a trailing closure (CustomComponent(){}). You can consider a trailing closure as a container and add content to it. For example, you can add a component ({Column(){Text("content")}) to the closure. The syntax of the closure is the same as that of [build](ts-function-build.md). In this scenario, the custom component has one and only one @BuilderParam decorated attribute.
+
+Example: Add a &lt;Column> component and a click event to the closure, and call the specificParam method decorated by @Builder in the new &lt;Column&gt; component. After the &lt;Column&gt; component is clicked, the value of the component's header attribute will be changed to changeHeader. In addition, when the component is initialized, the content of the trailing closure will be assigned to the closer attribute decorated by @BuilderParam.
+
+```
+@Component
+struct CustomContainer {
+  header: string = "";
+  @BuilderParam closer: () => any;
+  build() {
+    Column() {
+      Text(this.header)
+        .fontSize(50)
+      this.closer()
+    }
+  }
+}
+@Builder function specificParam(label1: string, label2: string) {
+  Column() {
+    Text(label1)
+      .fontSize(50)
+    Text(label2)
+      .fontSize(50)
+  }
+}
+@Entry
+@Component
+struct CustomContainerUser {
+  @State text: string = "header"
+  build() {
+    Column() {
+      CustomContainer({
+        header: this.text,
+      }){
+        Column(){
+          specificParam("111", "22")
+        }.onClick(()=>{
+          this.text = "changeHeader"
+        })
+      }
+    }
+  }
+}
+```

en/application-dev/ui/ts-component-based-component.md

-# @Component<a name="EN-US_TOPIC_0000001157388849"></a>
+# @Component
 
-A struct decorated by  **@Component**  has the component-based capability and can serve as an independent component. This type of component is also called a custom component.
 
-This component can be combined with other components. It describes the UI structure by implementing the  **build**  method, which must comply with the  **Builder**  API constraints. The API definition is as follows:
+A struct decorated by @Component has the componentization capability and can serve as an independent component. This type of component is also called a custom component, and its UI structure is described in the build method. Custom components have the following features:
 
-```
-interface Builder {
-    build: () => void
-}
-```
 
-Custom components have the following features:
+- Composability: Custom components can be used with preset or other components, as well as common attributes and methods.
+
+- Reusable: Custom components can be reused by other components and used as different instances in different parent components or containers.
+
+- Lifecycle: Custom components provide callbacks for service logic processing throughout the lifecycle.
+
+- Data-driven update: The UI of custom components can be automatically updated based on the data of state variables.
 
--   **Composability:**  Custom components can be used with preset or other components, as well as common attributes and methods.
--   **Reusable:**  Custom components can be reused by other components and used as different instances in different parent components or containers.
--   **Lifecycle:**  Custom components provide callbacks for service logic processing throughout the lifecycle.
--   **Data-driven update:**  The UI of custom components can be automatically updated based on the status data.
 
-The component lifecycle mainly involves two callbacks,  **aboutToAppear**  and  **aboutToDisappear**  . For details, see  [Custom Component Lifecycle Callbacks](ts-custom-component-lifecycle-callbacks.md).
+For details about componentization, see [About @Component](ts-function-build.md).
 
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->-   Components must comply with the preceding  **Builder**  API constraints. Other components are combined in declarative mode in the internal  **build**  method. The  **build**  method is called when a component is created or updated for the first time.
->-   Custom constructors are prohibited for components.
 
-## Example<a name="section84921442616"></a>
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> - The build method must be defined for a custom component.
+> 
+> - Custom constructors are prohibited for custom components.
 
-The following code illustrates how to create a custom component named  **MyComponent**:
+
+The following code illustrates how to create a custom component named MyComponent:
 
 ```
 @Component
@@ -39,9 +36,11 @@ struct MyComponent {
 }
 ```
 
-The  **build**  method of  **MyComponent**  is executed during initial rendering. When the component status changes, the  **build**  method will be executed again.
 
-The following code illustrates how to use  **MyComponent**:
+The build method of MyComponent is executed during initial rendering. When the component status changes, the build method will be executed again.
+
+
+The following code illustrates how to use MyComponent:
 
 ```
 @Component
@@ -56,7 +55,8 @@ struct ParentComponent {
 }
 ```
 
-**MyComponent**  can be embedded multiple times and can be nested in different components, as shown in the code below:
+
+MyComponent can be applied multiple times and reused in different components, as shown in the code below:
 
 ```
 @Component
@@ -85,4 +85,3 @@ struct ParentComponent {
     }
 }
 ```
-

en/application-dev/ui/ts-component-based-customdialog.md

-# @CustomDialog<a name="EN-US_TOPIC_0000001192355895"></a>
+# @CustomDialog
+
+
+The @CustomDialog decorator is used to decorate custom pop-up dialog boxes.
+
 
-The  **@CustomDialog**  decorator is used to decorate custom pop-up dialog boxes.
   
 ```
 // custom-dialog-demo.ets
@@ -46,4 +49,3 @@ struct CustomDialogUser {
     }
 }
 ```
-

en/application-dev/ui/ts-component-based-entry.md

-# @Entry<a name="EN-US_TOPIC_0000001110788998"></a>
+# @Entry
 
-The custom component decorated by  **@Entry**  functions as the default entry component of the respective page. When the page is loaded, the custom component decorated by  **@Entry**  is created and displayed first.
 
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->A source file can contain at most one custom component decorated by  **@Entry**.
+The custom component decorated by @Entry functions as the default entry component of the respective page. When the page is loaded, the custom component decorated by @Entry is created and displayed first.
 
-## Example<a name="section0615954173414"></a>
 
-Example of using  **@Entry**:
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> A source file can contain at most one custom component decorated by @Entry.
+
+
+Example of using @Entry:
 
 ```
 // Only MyComponent decorated by @Entry is rendered and displayed. "hello world" is displayed, but "goodbye" is not displayed.
@@ -32,4 +33,3 @@ struct HideComponent {
     }
 }
 ```
-

en/application-dev/ui/ts-component-based-extend.md

-# @Extend<a name="EN-US_TOPIC_0000001134698822"></a>
+#  @Extend
 
-The  **@Extend**  decorator adds new attribute functions to preset components, such as  **<Text\>**,  **<Column\>**, and  **<Button\>**. You can use the  **@Extend**  decorator to quickly define and reuse the custom styles of a component.
+The @Extend decorator adds new attribute functions to preset components, such as &lt;Text&gt;, &lt;Column&gt;, and &lt;Button&gt;. You can use the @Extend decorator to quickly define and reuse the custom styles of a component.
 
 ```
 @Extend(Text) function fancy(fontSize: number) {
@@ -23,6 +23,4 @@ struct FancyUse {
 }
 ```
 
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->The  **@Extend**  decorator cannot be used in the struct definition of a custom component.
+> ![img](public_sys-resources/icon-note.gif) **NOTE**: The @Extend decorator cannot be used in the struct definition of a custom component.
\ No newline at end of file
-

en/application-dev/ui/ts-component-based-preview.md

-# @Preview<a name="EN-US_TOPIC_0000001124516048"></a>
+# @Preview
 
-Custom components decorated by  **@Preview**  can be previewed in the Previewer of DevEco Studio. When the page is loaded, the custom components decorated by  **@Preview**  are created and displayed.
 
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->In a source file, at most one custom component can be decorated by  **@Preview**.
+Custom components decorated by @Preview can be previewed in the Previewer of DevEco Studio. When the page is loaded, the custom components decorated by @Preview are created and displayed.
 
-## Example<a name="section2270154810523"></a>
 
-Example of using  **@Preview**:
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> In a source file, at most one custom component can be decorated by @Preview.
+
+
+Example of using @Preview:
 
 ```
 // Display only Hello Component1 on the PC preview. The content under MyComponent is displayed on the real device.
@@ -57,4 +58,3 @@ struct Component2 {
     }
 }
 ```
-

en/application-dev/ui/ts-component-based-styles.md

+# @Styles
+
+
+The @Styles decorator adds new attribute functions to basic components, such as <Text>, <Column>, and <Button>. Currently, @Styles supports only universal attributes. You can use the @Styles decorator to quickly define and reuse the custom styles of a component.
+
+
+@Styles can be defined inside or outside a component. When it is defined outside a component, the keyword function must be included.
+
+
+
+```
+@Styles function globalFancy() {
+  .backgroundColor(Color.Red)
+}
+
+@Entry
+@Component
+struct FancyUse {
+  @Styles componentFancy() {
+    .backgroundColor(Color.Blue)
+  }
+  build() {
+    Column({ space: 10 }) {
+      Text("Fancy")
+        .globalFancy()
+        .width(100)
+        .height(100)
+        .fontSize(30)
+      Text("Fancy")
+        .componentFancy()
+        .width(100)
+        .height(100)
+        .fontSize(30)
+    }
+  }
+}
+```
+
+
+@Styles can also be used inside the StateStyles attribute to assign state-specific attributes to components.
+
+
+In StateStyles, styles defined outside the component can be directly called. However, the keyword this must be used to call styles defined in the component.
+
+
+
+```
+@Styles function globalFancy() {
+  .width(100)
+  .height(100)
+}
+
+@Entry
+@Component
+struct FancyUse {
+  @Styles function componentFancy() {
+    .width(50)
+    .height(50)
+  }
+  build() {
+    Row({ space: 10 }) {
+      Button() {
+	Text("Fancy")
+      }
+      .stateStyles({
+	normal: {
+	  .width(80)
+	  .height(80)
+	},
+	disabled: this.componentFancy,
+	pressed: globalFancy
+      })
+    }
+  }
+}
+```

en/application-dev/ui/ts-component-based.md

-# Componentization<a name="EN-US_TOPIC_0000001110948890"></a>
-
--   **[@Component](ts-component-based-component.md)**  
-
--   **[@Entry](ts-component-based-entry.md)**  
-
--   **[@Preview](ts-component-based-preview.md)**  
-
--   **[@Builder](ts-component-based-builder.md)**  
-
--   **[@Extend](ts-component-based-extend.md)**  
-
--   **[@CustomDialog](ts-component-based-customdialog.md)**  
-
-

en/application-dev/ui/ts-component-creation-re-initialization.md

-# Example: Component Creation and Re-Initialization<a name="EN-US_TOPIC_0000001110788992"></a>
+# Component Creation and Re-initialization
+
+
+## Initial Creation and Rendering
+
+1. Create the parent component ParentComp.
+
+2. Locally initialize the state variable isCountDown of ParentComp.
+
+3. Execute the build function of ParentComp.
+
+4. Create a preset &lt;Column&gt; component.
+   1. Create a preset &lt;Text&gt; component, set the text content to be displayed, and add the &lt;Text&gt; component instance to the &lt;Column&gt; component.
+   2. Create the component on the true branch based on the if condition.
+       1. Create a preset &lt;Image&gt; component and set the image source address.
+       2. Create a TimerComponent using the given constructor.
+           1. Create a TimerComponent object.
+           2. Initialize the values of member variables locally.
+           3. Use the parameters provided by the TimerComponent constructor to update the values of member variables.
+           4. Execute the aboutToAppear function of TimerComponent.
+           5. Execute the build function of TimerComponent to create the corresponding UI description structure.
+   3. Create a preset &lt;Button&gt; component and set the corresponding content.
+
+
+## Status Update
+
+When a user clicks a button:
+
+1. The value of the isCountDown state variable of ParentComp is changed to false.
+
+2. The build function of ParentComp is executed.
+
+3. The preset &lt;Column&gt; component is reused by the framework and reinitialized.
+
+4. The child components of &lt;Column&gt; reuse and reinitialize the objects in the memory.
+   1. Reuse the preset &lt;Text&gt; component after re-initializing the component using new text content.
+   2. Reuse the component on the false branch based on the if condition.
+       1. Destroy the components on the original true branch as these components are no longer used.
+           1. Destroy the created preset &lt;image&gt; component instance.
+           2. Destroy the TimerComponent component instance, and call the aboutToDisappear function.
+       2. Create components on the false branch.
+           1. Create a preset &lt;Image&gt; component and set the image source address.
+           2. Create a TimerComponent again using the given constructor.
+           3. Initialize the newly created TimerComponent and call the aboutToAppear and build functions.
+   3. Reuse the preset &lt;Button&gt; component, with the new image source address.
+
+
+## Example
+
 
 ```
 @Entry
@@ -16,7 +64,7 @@ struct ParentComp {
                 TimerComponent({counter: 0, changePerSec: +1, showInColor: Color.Black })
             }
             Button(this.isCountDown ? 'Swtich to Stopwatch' : 'Switch to Count Down')
-                .onClick(() => {this.isCountDown = !this.isCountDown})
+                .onClick(() =&gt; {this.isCountDown = !this.isCountDown})
         }
     }
 }
@@ -35,56 +83,14 @@ struct TimerComponent {
     }
 
     aboutToAppear() {
-        this.timerId = setInterval(() => {this.counter += this.changePerSec}, 1000)
+        this.timerId = setInterval(() =&gt; {this.counter += this.changePerSec}, 1000)
     }
 
     aboutToDisappear() {
-        if (this.timerId > 0) {
+        if (this.timerId &gt; 0) {
             clearTimeout(this.timerId)
             this.timerId = -1
         }
     }
 }   
 ```
-
-## Initial Creation and Rendering<a name="section136047306160"></a>
-
-1.  Create the parent component  **ParentComp**.
-2.  Locally initialize the state variable  **isCountDown**  of  **ParentComp**.
-3.  Execute the  **build**  function of  **ParentComp**.
-4.  Create a preset  **<Column\>**  component.
-    1.  Create a preset  **<Text\>**  component, set the text content to be displayed, and add the  **<Text\>**  component instance to the  **<Column\>**  component.
-    2.  Create the component on the  **true**  branch based on the  **if**  condition.
-        1.  Create a preset  **<Image\>**  component and set the image source address.
-        2.  Create a  **TimerComponent**  using the given constructor.
-            1.  Create a  **TimerComponent**  object.
-            2.  Initialize the values of member variables locally.
-            3.  Use the parameters provided by the  **TimerComponent**  constructor to update the values of member variables.
-            4.  Execute the  **aboutToAppear**  function of  **TimerComponent**.
-            5.  Execute the  **build**  function of  **TimerComponent**  to create the corresponding UI description structure.
-
-    3.  Create a preset  **<Button\>**  component and set the corresponding content.
-
-
-## Status Update<a name="section157507235171"></a>
-
-When a user clicks a button:
-
-1.  The value of the  **isCountDown**  state variable of  **ParentComp**  is changed to  **false**.
-2.  The  **build**  function of  **ParentComp**  is executed.
-3.  The preset  **<Column\>**  component is reused by the framework and reinitialized.
-4.  The child components of  **<Column\>**  reuse and reinitialize the objects in the memory.
-    1.  Reuse the preset  **<Text\>**  component after re-initializing the component using new text content.
-    2.  Reuse the component on the  **false**  branch based on the  **if**  condition.
-        1.  Destroy the components on the original  **true**  branch as these components are no longer used.
-            1.  Destroy the created preset  **<image\>**  component instance.
-            2.  Destroy the  **TimerComponent**  component instance, and call the  **aboutToDisappear**  function.
-
-        2.  Create components on the  **false**  branch.
-            1.  Create a preset  **<Image\>**  component and set the image source address.
-            2.  Create a  **TimerComponent**  again using the given constructor.
-            3.  Initialize the newly created  **TimerComponent**  and call the  **aboutToAppear**  and  **build**  functions.
-
-    3.  Reuse the preset  **<Button\>**  component, with the new image source address.
-
-

en/application-dev/ui/ts-component-states-link.md

-# @Link<a name="EN-US_TOPIC_0000001110948894"></a>
+# @Link
 
-Two-way binding can be established between the  **@Link**  decorated variable and the  **@State**  decorated variable of the parent component. The  **@Link**  data has the following features:
 
--   **Support for multiple types**: The value of the  **@Link**  decorated variable can be of the same type as the  **@State**  decorated variable; that is, the value can be of the following types:  **class**,  **number**,  **string**,  **boolean**, or arrays of these types.
--   **Private**: Data is accessed only within the component.
--   **Single data source**: The variable of the parent component for initializing the  **@Link**  decorated variable must be the  **@State**  decorated variable.
--   **Two-way binding**: When a child component changes the  **@Link**  decorated variable, the  **@State**  decorated variable of its parent component is also changed.
--   **Support for initialization with the variable reference passed to the @Link decorated variable**: When creating a new instance of the component, you must use the naming parameter to initialize all  **@Link**  decorated variables. The  **@Link**  decorated variable can be initialized by using the reference of the  **@State**  or  **@Link**  decorated variable. Wherein, the  **@State**  decorated variable can be referenced using the '**$**' operator.
+Two-way binding can be established between the @Link decorated variable and the @State decorated variable of the parent component. The @Link data has the following features:
 
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->The  **@Link**  decorated variable cannot be initialized within the component.
 
-## Simple Type Example<a name="section19793192619582"></a>
+- Support for multiple types: The value of the @Link decorated variable can be of the same type as the @State decorated variable; that is, the value can be of the following types: class, number, string, boolean, or arrays of these types.
+
+- Private: Data is accessed only within the component.
+
+- Single data source: The variable of the parent component for initializing the @Link decorated variable must be the @State decorated variable.
+
+- Two-way binding: When a child component changes the @Link decorated variable, the @State decorated variable of its parent component is also changed.
+
+- Support for initialization with the variable reference passed to the @Link decorated variable: When creating a new instance of the component, you must use the naming parameter to initialize all @Link decorated variables. The @Link decorated variable can be initialized by using the reference of the @State or @Link decorated variable. Wherein, the @State decorated variable can be referenced using the '$' operator.
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> The @Link decorated variable cannot be initialized within the component.
+
+
+## Simple Type Example
+
 
 ```
 @Entry
@@ -41,9 +50,11 @@ struct PlayButton {
 }
 ```
 
-The  **@Link**  semantics are derived from the '**$**' operator. In other words,  **$isPlaying**  is the two-way binding of the internal state  **this.isPlaying**. When you click  **PlayButton**, the  **<Image\>**  and  **<Text\>**  components of  **PlayButton**  are refreshed at the same time.
+The @Link semantics are derived from the '$' operator. In other words, $isPlaying is the two-way binding of the internal state this.isPlaying. When you click PlayButton, the &lt;Image&gt; and &lt;Text&gt; components of PlayButton are refreshed at the same time.
+
+
+## Complex Type Example
 
-## Complex Type Example<a name="section2921131712010"></a>
 
 ```
 @Entry
@@ -80,9 +91,11 @@ struct Child {
 }
 ```
 
-In the example above, click  **Button1**  and  **Button2**  to change the list of text items displayed in the parent component.
+In the example above, click Button1 and Button2 to change the list of text items displayed in the parent component.
+
+
+## Example of Using @Link, @State, and @Prop Together
 
-## Example of Using @Link, @State, and @Prop Together<a name="section17490315415"></a>
 
 ```
 @Entry
@@ -118,8 +131,8 @@ struct ChildB {
 }
 ```
 
-In the preceding example,  **ParentView**  contains two child components:  **ChildA**  and  **ChildB**. They are initialized by the state variable  **counter**  of  **ParentView**.
+In the preceding example, ParentView contains two child components: ChildA and ChildB. They are initialized by the state variable counter of ParentView.
 
--   **ChildB**  uses  **@Link**  to establish two-way state binding. When the value of the  **counterRef**  state variable is changed in  **ChildB**, the change is synchronized to  **ParentView**  and  **ChildA**.
--   **ChildA**  uses  **@Prop**  to establish one-way state binding from  **ParentView**  to itself. When  **ChildA**  changes the state, it is re-rendered, but the change is not updated to  **ParentView**  or  **ChildB**.
+- ChildB uses @Link to establish two-way state binding. When the value of the counterRef state variable is changed in ChildB, the change is synchronized to ParentView and ChildA.
 
+- ChildA uses @Prop to establish one-way state binding from ParentView to itself. When ChildA changes the state, it is re-rendered, but the change is not updated to ParentView or ChildB.

en/application-dev/ui/ts-component-states-prop.md

-# @Prop<a name="EN-US_TOPIC_0000001157388853"></a>
+# @Prop
 
-**@Prop**  and  **@State**  have the same semantics but different initialization modes. Variables decorated by  **@Prop**  must be initialized using the  **@State**  decorated variable provided by their parent components. The  **@Prop**  decorated variable can be modified in the component, but the modification is not updated to the parent component; that is,  **@Prop**  uses unidirectional data binding.
 
-The  **@Prop**  state data has the following features:
+@Prop and @State have the same semantics but different initialization modes. Variables decorated by @Prop must be initialized using the @State decorated variable provided by their parent components. The @Prop decorated variable can be modified in the component, but the modification is not updated to the parent component; that is, @Prop uses one-way data binding.
 
--   **Support for simple types**: Only the following simple types are supported:  **number**,  **string**, and  **boolean**.
--   **Private**: Data is accessed only within the component.
--   **Support for multiple instances**: A component can have multiple attributes decorated by  **@Prop**.
--   **Support for initialization with a value passed to the @Prop decorated variable**: When a new instance of the component is created, all  **@Prop**  decorated variables must be initialized. Initialization inside the component is not supported.
 
-## Example<a name="section599175705019"></a>
+The @Prop state data has the following features:
+
+
+- Support for simple types: The number, string, and boolean types are supported.
+
+- Private: Data is accessed only within the component.
+
+- Support for multiple instances: A component can have multiple attributes decorated by @Prop.
+
+- Support for initialization with a value passed to the @Prop decorated variable: When a new instance of the component is created, all @Prop decorated variables must be initialized. Initialization inside the component is not supported.
+
+
+## Example
+
   
 ```
 @Entry
@@ -29,10 +37,7 @@ struct ParentComponent {
             }.onClick(() => {
                 this.countDownStartValue -= 1
             })
-
-            // when creatng ChildComponent, the initial value of its @Prop variable must be supplied
-            // in a named constructor parameter
-            // also regular costOfOneAttempt (non-Prop) variable is initialied
+            // When creating a child component, you must provide the initial value of its @Prop decorated variable in the constructor parameter and initialize the regular variable CostOfOneAttump (not Prop).
             CountDownComponent({ count: this.countDownStartValue, costOfOneAttempt: 2})
         }
     }
@@ -61,8 +66,7 @@ struct CountDownComponent {
 }
 ```
 
-In the preceding example, when you press  **+1**  or  **-1**, the status of the parent component changes and the  **build**  method is executed again. In this case, a new  **CountDownComponent**  is created. The  **countDownStartValue**  property of the parent component is used to initialize the  **@Prop**  decorated variable of the child component. When you touch the  **Try again**  button of the child component, the value of the  **count**  variable decorated by  **@Prop**  is changed. As a result, the  **CountDownComponent**  is rendered again. However, the change of the  **count**  value does not affect the  **countDownStartValue**  value of the parent component.
-
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->When a new component instance is created, all its  **@Prop**  decorated variables must be initialized.
+In the preceding example, when you press +1 or -1, the status of the parent component changes and the build method is executed again. In this case, a new CountDownComponent is created. The countDownStartValue property of the parent component is used to initialize the @Prop decorated variable of the child component. When you tap the Try again button of the child component, the value of the @Prop decorated variable count is changed. As a result, the CountDownComponent is rendered again. However, the change of the count value does not affect the countDownStartValue value of the parent component.
 
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> When a new component instance is created, all its @Prop decorated variables must be initialized.

en/application-dev/ui/ts-component-states-state.md

-# @State<a name="EN-US_TOPIC_0000001157228861"></a>
+# @State
 
-The  **@State**  decorated variable is the internal state data of the component. When the state data is modified, the** build**  method of the component is called to refresh the UI.
 
-The  **@State**  data has the following features:
+The @State decorated variable is the internal state data of the component. When the state data is modified, the build method of the component is called to refresh the UI.
 
--   **Support for multiple types**: The following types are supported: strong types by value and by reference, including  **class**,  **number**,  **boolean**,  **string**, as well as arrays of these types, that is,  **Array<class\>**,  **Array<string\>**,  **Array<boolean\>**, and  **Array<number\>**.  **object**  and  **any**  are not allowed.
--   **Support for multiple instances**: Multiple instances can coexist in a component. The internal state data of different instances is independent.
--   **Internal private**: An attribute marked with  **@State**  cannot be directly modified outside the component. Its lifecycle depends on the component where it is located.
--   **Local initialization required**: Initial values must be allocated to all  **@State**  decorated variables through the initialization process. Otherwise, they may become undefined in the framework.
--   **Support for setting of initial attribute values based on the state variable name**: When creating a component instance, you can explicitly specify the initial value of the  **@State**  decorated attribute based on the variable name.
 
-## Simple Example of @State Decorated Attribute<a name="section1943814324316"></a>
+The @State data has the following features:
+
+
+- Support for multiple types: The following types are supported: strong types by value and by reference, including class, number, boolean, string, as well as arrays of these types, that is, Array&lt;class&gt;, Array&lt;string&gt;, Array&lt;boolean&gt;, and Array&lt;number>. object and any are not allowed.
+
+- Support for multiple instances: Multiple instances can coexist in a component. The internal state data of different instances is independent.
+
+- Private: An attribute marked with @State can only be accessed within the component.
+
+- Local initialization required: Initial values must be allocated to all @State decorated variables through the initialization process. Otherwise, they may become undefined in the framework.
+
+- Support for setting of initial attribute values based on the state variable name: When creating a component instance, you can explicitly specify the initial value of the @State decorated attribute based on the variable name.
+
+
+## Simple Example of @State Decorated Attribute
+
 
 ```
 @Entry
@@ -33,7 +42,9 @@ struct MyComponent {
 }
 ```
 
-## Complex Example of @State Decorated Variable<a name="section17881156184313"></a>
+
+## Complex Example of @State Decorated Variable
+
 
 ```
 // Customize the status data class.
@@ -81,14 +92,16 @@ struct MyComponent {
 }
 ```
 
+
 In the preceding example:
 
--   Two  **@State**  decorated variables,  **count**  and  **title**, have been defined for  **MyComponent**. If the value of  **count**  or  **title**  changes, the  **build**  method of  **MyComponent**  needs to be called to render the component again.
--   The  **EntryComponent**  has multiple  **MyComponent**  instances. The internal status change of the first  **MyComponent**  does not affect the second  **MyComponent**.
--   When creating a  **MyComponent**  instance, initialize the variables in the component based on the variable name. For example:
+
+- Two @State decorated variables, count and title, have been defined for MyComponent. If the value of count or title changes, the build method of MyComponent needs to be called to render the component again.
+
+- The EntryComponent has multiple MyComponent instances. The internal status change of the first MyComponent does not affect the second MyComponent.
+
+- When creating a MyComponent instance, initialize the variables in the component based on the variable name. For example:
   
   ```
   MyComponent({title: {value: 'Hello, World 2'}, count: 7})
   ```
-
-

en/application-dev/ui/ts-configuration-with-mandatory-parameters.md

-# Configuration with Mandatory Parameters<a name="EN-US_TOPIC_0000001110948900"></a>
+# Configuration with Mandatory Parameters
+
+
+If the API definition of a component contains any mandatory parameter, set the parameters in the parentheses next to the component. Use constants to assign values to the parameters.
 
-If the API definition of a component contains mandatory construction parameters, the parameters must be configured in the brackets  **\(\)**  next to the component. You can use constants to assign values to parameters.
 
 Examples:
 
-Set the mandatory parameter  **src**  of the  **<Image\>**  component as follows:
 
-```
-Image('http://xyz/a.jpg')
-```
+- Set the mandatory parameter src of the &lt;Image&gt; component as follows:
   
-Set the mandatory parameter  **content**  of the  **<Text\>**  component as follows:
+  ```
+  Image('http://xyz/a.jpg')
+  ```
 
-```
-Text('123')
-```
 
-You can also use variables or expressions to assign values to parameters. The result type returned by an expression must meet the parameter type requirements.
+- Set the mandatory parameter content of the &lt;Text&gt; component as follows:
+  
+  ```
+  Text('123')
+  ```
 
-To pass a variable or expression to construct the  **Image**  and  **Text**  components:
+
+You can also use variables or expressions to assign values to parameters. The result type returned by an expression must meet the parameter type requirements. For example, to pass a variable or expression to construct the Image and Text components:
 
 ```
 // imagePath, where imageUrl is a private data variable defined in the component.
@@ -29,4 +32,3 @@ Image('http://' + this.imageUrl)
 // features of the corresponding language. This specification is not limited.
 Text(`count: ${this.count}`)
 ```
-

en/application-dev/ui/ts-custom-component-initialization.md

-# Custom Component Initialization<a name="EN-US_TOPIC_0000001110948904"></a>
+# Initialization of Custom Components' Member Variables
 
-This section describes the rules for initializing component state variables.
 
 The member variables of a component can be initialized in either of the following ways:
 
+
 - Local initialization. For example:
     
   ```
@@ -19,180 +19,59 @@ The member variables of a component can be initialized in either of the followin
 
 The allowed method depends on the decorator of the state variable, as shown in the following table.
 
-<a name="table1130mcpsimp"></a>
-<table><thead align="left"><tr id="row1136mcpsimp"><th class="cellrowborder" valign="top" width="27%" id="mcps1.1.4.1.1"><p id="p1138mcpsimp"><a name="p1138mcpsimp"></a><a name="p1138mcpsimp"></a>Decorator Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="20%" id="mcps1.1.4.1.2"><p id="p1140mcpsimp"><a name="p1140mcpsimp"></a><a name="p1140mcpsimp"></a>Local Initialization</p>
-</th>
-<th class="cellrowborder" valign="top" width="53%" id="mcps1.1.4.1.3"><p id="p1142mcpsimp"><a name="p1142mcpsimp"></a><a name="p1142mcpsimp"></a>Initialization Using Constructor Parameters</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row1143mcpsimp"><td class="cellrowborder" valign="top" width="27%" headers="mcps1.1.4.1.1 "><p id="p1145mcpsimp"><a name="p1145mcpsimp"></a><a name="p1145mcpsimp"></a>@State</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.4.1.2 "><p id="p1147mcpsimp"><a name="p1147mcpsimp"></a><a name="p1147mcpsimp"></a>Mandatory</p>
-</td>
-<td class="cellrowborder" valign="top" width="53%" headers="mcps1.1.4.1.3 "><p id="p1149mcpsimp"><a name="p1149mcpsimp"></a><a name="p1149mcpsimp"></a>Optional</p>
-</td>
-</tr>
-<tr id="row1150mcpsimp"><td class="cellrowborder" valign="top" width="27%" headers="mcps1.1.4.1.1 "><p id="p1152mcpsimp"><a name="p1152mcpsimp"></a><a name="p1152mcpsimp"></a>@Prop</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.4.1.2 "><p id="p1154mcpsimp"><a name="p1154mcpsimp"></a><a name="p1154mcpsimp"></a>Forbidden</p>
-</td>
-<td class="cellrowborder" valign="top" width="53%" headers="mcps1.1.4.1.3 "><p id="p1156mcpsimp"><a name="p1156mcpsimp"></a><a name="p1156mcpsimp"></a>Mandatory</p>
-</td>
-</tr>
-<tr id="row1157mcpsimp"><td class="cellrowborder" valign="top" width="27%" headers="mcps1.1.4.1.1 "><p id="p1159mcpsimp"><a name="p1159mcpsimp"></a><a name="p1159mcpsimp"></a>@Link</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.4.1.2 "><p id="p1161mcpsimp"><a name="p1161mcpsimp"></a><a name="p1161mcpsimp"></a>Forbidden</p>
-</td>
-<td class="cellrowborder" valign="top" width="53%" headers="mcps1.1.4.1.3 "><p id="p1163mcpsimp"><a name="p1163mcpsimp"></a><a name="p1163mcpsimp"></a>Mandatory</p>
-</td>
-</tr>
-<tr id="row1368143713213"><td class="cellrowborder" valign="top" width="27%" headers="mcps1.1.4.1.1 "><p id="p668183713214"><a name="p668183713214"></a><a name="p668183713214"></a>@StorageLink</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.4.1.2 "><p id="p13685378329"><a name="p13685378329"></a><a name="p13685378329"></a>Mandatory</p>
-</td>
-<td class="cellrowborder" valign="top" width="53%" headers="mcps1.1.4.1.3 "><p id="p4681437173219"><a name="p4681437173219"></a><a name="p4681437173219"></a>Forbidden</p>
-</td>
-</tr>
-<tr id="row147015402328"><td class="cellrowborder" valign="top" width="27%" headers="mcps1.1.4.1.1 "><p id="p8471134011327"><a name="p8471134011327"></a><a name="p8471134011327"></a>@StorageProp</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.4.1.2 "><p id="p164711040143213"><a name="p164711040143213"></a><a name="p164711040143213"></a>Mandatory</p>
-</td>
-<td class="cellrowborder" valign="top" width="53%" headers="mcps1.1.4.1.3 "><p id="p11471740133216"><a name="p11471740133216"></a><a name="p11471740133216"></a>Forbidden</p>
-</td>
-</tr>
-<tr id="row134917432323"><td class="cellrowborder" valign="top" width="27%" headers="mcps1.1.4.1.1 "><p id="p8349843183215"><a name="p8349843183215"></a><a name="p8349843183215"></a>@Provide</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.4.1.2 "><p id="p4349114315324"><a name="p4349114315324"></a><a name="p4349114315324"></a>Mandatory</p>
-</td>
-<td class="cellrowborder" valign="top" width="53%" headers="mcps1.1.4.1.3 "><p id="p19349743143218"><a name="p19349743143218"></a><a name="p19349743143218"></a>Optional</p>
-</td>
-</tr>
-<tr id="row121451446173219"><td class="cellrowborder" valign="top" width="27%" headers="mcps1.1.4.1.1 "><p id="p141451046113211"><a name="p141451046113211"></a><a name="p141451046113211"></a>@Consume</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.4.1.2 "><p id="p1514564683212"><a name="p1514564683212"></a><a name="p1514564683212"></a>Forbidden</p>
-</td>
-<td class="cellrowborder" valign="top" width="53%" headers="mcps1.1.4.1.3 "><p id="p1145346183214"><a name="p1145346183214"></a><a name="p1145346183214"></a>Forbidden</p>
-</td>
-</tr>
-<tr id="row1489554183914"><td class="cellrowborder" valign="top" width="27%" headers="mcps1.1.4.1.1 "><p id="p1789513415395"><a name="p1789513415395"></a><a name="p1789513415395"></a>@ObjectLink</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.4.1.2 "><p id="p489594133916"><a name="p489594133916"></a><a name="p489594133916"></a>Forbidden</p>
-</td>
-<td class="cellrowborder" valign="top" width="53%" headers="mcps1.1.4.1.3 "><p id="p1389504123918"><a name="p1389504123918"></a><a name="p1389504123918"></a>Mandatory</p>
-</td>
-</tr>
-<tr id="row1164mcpsimp"><td class="cellrowborder" valign="top" width="27%" headers="mcps1.1.4.1.1 "><p id="p1166mcpsimp"><a name="p1166mcpsimp"></a><a name="p1166mcpsimp"></a>Normal member variable</p>
-</td>
-<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.4.1.2 "><p id="p1168mcpsimp"><a name="p1168mcpsimp"></a><a name="p1168mcpsimp"></a>Recommended</p>
-</td>
-<td class="cellrowborder" valign="top" width="53%" headers="mcps1.1.4.1.3 "><p id="p1170mcpsimp"><a name="p1170mcpsimp"></a><a name="p1170mcpsimp"></a>Optional</p>
-</td>
-</tr>
-</tbody>
-</table>
+
+  | Decorator Type | Local Initialization | Initialization Using Constructor Parameters | 
+| -------- | -------- | -------- |
+| @State | Mandatory | Optional | 
+| @Prop | Forbidden | Mandatory | 
+| @Link | Forbidden | Mandatory | 
+| @StorageLink | Mandatory | Forbidden | 
+| @StorageProp | Mandatory | Forbidden | 
+| @Provide | Mandatory | Optional | 
+| @Consume | Forbidden | Forbidden | 
+| @ObjectLink | Forbidden | Mandatory | 
+| Normal member variable | Recommended | Optional | 
+
 
 As indicated by the preceding table:
 
--   The  **@State**  decorated variable needs to be initialized locally. The initial value can be overwritten by the constructor parameter.
--   The  **@Prop**  and  **@Link**  decorated variables must be initialized only by constructor parameters.
+
+- The @State decorated variables need to be initialized locally. The initial value can be overwritten by the constructor parameter.
+
+- The @Prop and @Link decorated variables must be initialized only by constructor parameters.
+
 
 Comply with the following rules when using constructors to initialize member variables:
 
-<a name="table1176mcpsimp"></a>
-<table><thead align="left"><tr id="row1184mcpsimp"><th class="cellrowborder" valign="top" width="47.47474747474748%" id="mcps1.1.6.1.1"><p id="p1186mcpsimp"><a name="p1186mcpsimp"></a><a name="p1186mcpsimp"></a>From the Variable in the Parent Component (Below) to the Variable in the Child Component (Right)</p>
-</th>
-<th class="cellrowborder" valign="top" width="11.111111111111112%" id="mcps1.1.6.1.2"><p id="p1188mcpsimp"><a name="p1188mcpsimp"></a><a name="p1188mcpsimp"></a>@State</p>
-</th>
-<th class="cellrowborder" valign="top" width="12.121212121212123%" id="mcps1.1.6.1.3"><p id="p1190mcpsimp"><a name="p1190mcpsimp"></a><a name="p1190mcpsimp"></a>@Link</p>
-</th>
-<th class="cellrowborder" valign="top" width="12.121212121212123%" id="mcps1.1.6.1.4"><p id="p1192mcpsimp"><a name="p1192mcpsimp"></a><a name="p1192mcpsimp"></a>@Prop</p>
-</th>
-<th class="cellrowborder" valign="top" width="17.17171717171717%" id="mcps1.1.6.1.5"><p id="p1194mcpsimp"><a name="p1194mcpsimp"></a><a name="p1194mcpsimp"></a>Normal Variable</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row1195mcpsimp"><td class="cellrowborder" valign="top" width="47.47474747474748%" headers="mcps1.1.6.1.1 "><p id="p1197mcpsimp"><a name="p1197mcpsimp"></a><a name="p1197mcpsimp"></a>@State</p>
-</td>
-<td class="cellrowborder" valign="top" width="11.111111111111112%" headers="mcps1.1.6.1.2 "><p id="p1199mcpsimp"><a name="p1199mcpsimp"></a><a name="p1199mcpsimp"></a>Not allowed</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.121212121212123%" headers="mcps1.1.6.1.3 "><p id="p1201mcpsimp"><a name="p1201mcpsimp"></a><a name="p1201mcpsimp"></a>Allowed</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.121212121212123%" headers="mcps1.1.6.1.4 "><p id="p1203mcpsimp"><a name="p1203mcpsimp"></a><a name="p1203mcpsimp"></a>Allowed</p>
-</td>
-<td class="cellrowborder" valign="top" width="17.17171717171717%" headers="mcps1.1.6.1.5 "><p id="p1205mcpsimp"><a name="p1205mcpsimp"></a><a name="p1205mcpsimp"></a>Allowed</p>
-</td>
-</tr>
-<tr id="row1206mcpsimp"><td class="cellrowborder" valign="top" width="47.47474747474748%" headers="mcps1.1.6.1.1 "><p id="p1208mcpsimp"><a name="p1208mcpsimp"></a><a name="p1208mcpsimp"></a>@Link</p>
-</td>
-<td class="cellrowborder" valign="top" width="11.111111111111112%" headers="mcps1.1.6.1.2 "><p id="p1210mcpsimp"><a name="p1210mcpsimp"></a><a name="p1210mcpsimp"></a>Not allowed</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.121212121212123%" headers="mcps1.1.6.1.3 "><p id="p1212mcpsimp"><a name="p1212mcpsimp"></a><a name="p1212mcpsimp"></a>Allowed</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.121212121212123%" headers="mcps1.1.6.1.4 "><p id="p1214mcpsimp"><a name="p1214mcpsimp"></a><a name="p1214mcpsimp"></a>Not recommended</p>
-</td>
-<td class="cellrowborder" valign="top" width="17.17171717171717%" headers="mcps1.1.6.1.5 "><p id="p1216mcpsimp"><a name="p1216mcpsimp"></a><a name="p1216mcpsimp"></a>Allowed</p>
-</td>
-</tr>
-<tr id="row1217mcpsimp"><td class="cellrowborder" valign="top" width="47.47474747474748%" headers="mcps1.1.6.1.1 "><p id="p1219mcpsimp"><a name="p1219mcpsimp"></a><a name="p1219mcpsimp"></a>@Prop</p>
-</td>
-<td class="cellrowborder" valign="top" width="11.111111111111112%" headers="mcps1.1.6.1.2 "><p id="p1221mcpsimp"><a name="p1221mcpsimp"></a><a name="p1221mcpsimp"></a>Not allowed</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.121212121212123%" headers="mcps1.1.6.1.3 "><p id="p1223mcpsimp"><a name="p1223mcpsimp"></a><a name="p1223mcpsimp"></a>Not allowed</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.121212121212123%" headers="mcps1.1.6.1.4 "><p id="p1225mcpsimp"><a name="p1225mcpsimp"></a><a name="p1225mcpsimp"></a>Allowed</p>
-</td>
-<td class="cellrowborder" valign="top" width="17.17171717171717%" headers="mcps1.1.6.1.5 "><p id="p1227mcpsimp"><a name="p1227mcpsimp"></a><a name="p1227mcpsimp"></a>Allowed</p>
-</td>
-</tr>
-<tr id="row240501152412"><td class="cellrowborder" valign="top" width="47.47474747474748%" headers="mcps1.1.6.1.1 "><p id="p54063122418"><a name="p54063122418"></a><a name="p54063122418"></a>@StorageLink</p>
-</td>
-<td class="cellrowborder" valign="top" width="11.111111111111112%" headers="mcps1.1.6.1.2 "><p id="p8406161132415"><a name="p8406161132415"></a><a name="p8406161132415"></a>Not allowed</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.121212121212123%" headers="mcps1.1.6.1.3 "><p id="p440651122418"><a name="p440651122418"></a><a name="p440651122418"></a>Allowed</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.121212121212123%" headers="mcps1.1.6.1.4 "><p id="p13406111162416"><a name="p13406111162416"></a><a name="p13406111162416"></a>Not allowed</p>
-</td>
-<td class="cellrowborder" valign="top" width="17.17171717171717%" headers="mcps1.1.6.1.5 "><p id="p124067118242"><a name="p124067118242"></a><a name="p124067118242"></a>Allowed</p>
-</td>
-</tr>
-<tr id="row88861156245"><td class="cellrowborder" valign="top" width="47.47474747474748%" headers="mcps1.1.6.1.1 "><p id="p98861853246"><a name="p98861853246"></a><a name="p98861853246"></a>@StorageProp</p>
-</td>
-<td class="cellrowborder" valign="top" width="11.111111111111112%" headers="mcps1.1.6.1.2 "><p id="p588635122419"><a name="p588635122419"></a><a name="p588635122419"></a>Not allowed</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.121212121212123%" headers="mcps1.1.6.1.3 "><p id="p18886353244"><a name="p18886353244"></a><a name="p18886353244"></a>Not allowed</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.121212121212123%" headers="mcps1.1.6.1.4 "><p id="p15887557248"><a name="p15887557248"></a><a name="p15887557248"></a>Not allowed</p>
-</td>
-<td class="cellrowborder" valign="top" width="17.17171717171717%" headers="mcps1.1.6.1.5 "><p id="p5887185182418"><a name="p5887185182418"></a><a name="p5887185182418"></a>Allowed</p>
-</td>
-</tr>
-<tr id="row1228mcpsimp"><td class="cellrowborder" valign="top" width="47.47474747474748%" headers="mcps1.1.6.1.1 "><p id="p1230mcpsimp"><a name="p1230mcpsimp"></a><a name="p1230mcpsimp"></a>Normal variable</p>
-</td>
-<td class="cellrowborder" valign="top" width="11.111111111111112%" headers="mcps1.1.6.1.2 "><p id="p1232mcpsimp"><a name="p1232mcpsimp"></a><a name="p1232mcpsimp"></a>Allowed</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.121212121212123%" headers="mcps1.1.6.1.3 "><p id="p1234mcpsimp"><a name="p1234mcpsimp"></a><a name="p1234mcpsimp"></a>Not allowed</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.121212121212123%" headers="mcps1.1.6.1.4 "><p id="p1236mcpsimp"><a name="p1236mcpsimp"></a><a name="p1236mcpsimp"></a>Not allowed</p>
-</td>
-<td class="cellrowborder" valign="top" width="17.17171717171717%" headers="mcps1.1.6.1.5 "><p id="p1238mcpsimp"><a name="p1238mcpsimp"></a><a name="p1238mcpsimp"></a>Allowed</p>
-</td>
-</tr>
-</tbody>
-</table>
+
+  | From the Variable in the Parent Component (Below) to the Variable in the Child Component (Right) | @State | @Link | @Prop | Normal Variable | 
+| -------- | -------- | -------- | -------- | -------- |
+| @State | Not allowed | Allowed | Allowed | Allowed | 
+| @Link | Not allowed | Allowed | Not recommended | Allowed | 
+| @Prop | Not allowed | Not allowed | Allowed | Allowed | 
+| @StorageLink | Not allowed | Allowed | Not allowed | Allowed | 
+| @StorageProp | Not allowed | Not allowed | Not allowed | Allowed | 
+| Normal variable | Allowed | Not allowed | Not allowed | Allowed | 
+
 
 As indicated by the preceding table:
 
--   The normal variable of the parent component can be used to initialize the  **@State**  decorated variable of the child component, but not the  **@Link**  or  **@Prop**  decorated variable.
--   The  **@State**  decorated variable of the parent component can be used to initialize the  **@Prop**,  **@Link**  \(using  **$**\), or normal variables of the child component, but cannot initialize the  **@State**  decorated variable of the child component.
--   The  **@Link**  decorated variable of the parent component can initialize the  **@Link**  decorated or normal variables of the child component. However, initializing the  **@State**  decorated member of the child component can result in a syntax error. In addition, initializing the  **@Prop**  decorated variable is not recommended.
--   The  **@Prop**  decorated variable of the parent component can be used to initialize the normal variables or  **@Prop**  decorated variables of the child component, but not the  **@State**  or  **@Link**  decorated variables.
--   Passing  **@StorageLink**  and  **@StorageProp**  from the parent component to the child component is prohibited.
+
+- The normal variables of the parent component can be used to initialize the @State decorated variables of the child component, but not the @Link or @Prop decorated variables.
+
+- The @State decorated variable of the parent component can be used to initialize the @Prop, @Link (using $), or normal variables of the child component, but not the @State decorated variables of the child component.
+
+- The @Link decorated variables of the parent component can be used to initialize the @Link decorated or normal variables of the child component. However, initializing the @State decorated members of the child component can result in a syntax error. In addition, initializing the @Prop decorated variables is not recommended.
+
+- The @Prop decorated variables of the parent component can be used to initialize the normal variables or @Prop decorated variables of the child component, but not the @State or @Link decorated variables.
+
+- Passing @StorageLink and @StorageProp from the parent component to the child component is prohibited.
+
 - In addition to the preceding rules, the TypeScript strong type rules need to be followed.
 
-## Example<a name="section1184926392"></a>
+
+## Example
+
   
 ```
 @Entry
@@ -218,7 +97,7 @@ struct CompA {
         Row() {
             CompB({bLink: $aLink,         // valid init a @Link with reference of another @Link,
                 bProp: this.aState})    // valid init a @Prop with value of a @State
-            CompB({aLink: $aState,  // invalid: type mismatch expected ref to ClassA, provided reference to boolean
+            CompB({aLink: $aState,  // invalid: type missmatch expected ref to ClassA, provided reference to boolean
                 bProp: false})           // valid init a @Prop by constants value
         }
     }
@@ -234,4 +113,3 @@ struct CompB {
     }
 }
 ```
-

en/application-dev/ui/ts-custom-component-lifecycle-callbacks.md

-# Custom Component Lifecycle Callbacks<a name="EN-US_TOPIC_0000001110948896"></a>
+# Custom Component Lifecycle Callbacks
+
 
 The lifecycle callbacks of a custom component are used to notify users of the lifecycle of the component. These callbacks are private and are invoked by the development framework at a specified time at runtime. They cannot be manually invoked from applications.
 
-## Lifecycle Callback Definition<a name="section1597015432486"></a>
 
-<a name="table56583904911"></a>
-<table><thead align="left"><tr id="row146581198495"><th class="cellrowborder" valign="top" width="14.84%" id="mcps1.1.3.1.1"><p id="p19658139114912"><a name="p19658139114912"></a><a name="p19658139114912"></a>Function</p>
-</th>
-<th class="cellrowborder" valign="top" width="85.16%" id="mcps1.1.3.1.2"><p id="p06581592499"><a name="p06581592499"></a><a name="p06581592499"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row11658109194919"><td class="cellrowborder" valign="top" width="14.84%" headers="mcps1.1.3.1.1 "><p id="p9658109154912"><a name="p9658109154912"></a><a name="p9658109154912"></a>aboutToAppear</p>
-</td>
-<td class="cellrowborder" valign="top" width="85.16%" headers="mcps1.1.3.1.2 "><p id="p17851645015"><a name="p17851645015"></a><a name="p17851645015"></a>Invoked after a new instance of the custom component is created and before its <strong id="b5869734121610"><a name="b5869734121610"></a><a name="b5869734121610"></a>build</strong> function is executed.</p>
-<p id="p7658596490"><a name="p7658596490"></a><a name="p7658596490"></a>You can change state variables in the <strong id="b99359017178"><a name="b99359017178"></a><a name="b99359017178"></a>aboutToAppear</strong> function. The change will take effect when you execute the <strong id="b157198921719"><a name="b157198921719"></a><a name="b157198921719"></a>build</strong> function next time.</p>
-</td>
-</tr>
-<tr id="row1465811913499"><td class="cellrowborder" valign="top" width="14.84%" headers="mcps1.1.3.1.1 "><p id="p1665939124911"><a name="p1665939124911"></a><a name="p1665939124911"></a>aboutToDisappear</p>
-</td>
-<td class="cellrowborder" valign="top" width="85.16%" headers="mcps1.1.3.1.2 "><p id="p182511622115113"><a name="p182511622115113"></a><a name="p182511622115113"></a>Invoked before the destructor of the custom component is consumed.</p>
-<p id="p15659199144918"><a name="p15659199144918"></a><a name="p15659199144918"></a>Do not change state variables in the <strong id="b113997361170"><a name="b113997361170"></a><a name="b113997361170"></a>aboutToDisappear</strong> function as doing this can cause unexpected errors. For example, the modification of the <strong id="b1438344751717"><a name="b1438344751717"></a><a name="b1438344751717"></a>@Link</strong> decorated variable may cause unstable application running.</p>
-</td>
-</tr>
-<tr id="row1930416179282"><td class="cellrowborder" valign="top" width="14.84%" headers="mcps1.1.3.1.1 "><p id="p1430441792819"><a name="p1430441792819"></a><a name="p1430441792819"></a>onPageShow</p>
-</td>
-<td class="cellrowborder" valign="top" width="85.16%" headers="mcps1.1.3.1.2 "><p id="p16304131722812"><a name="p16304131722812"></a><a name="p16304131722812"></a>Invoked when a page is displayed. This callback is used in the routing process or scenarios where the application is switched to the foreground or background. Only the custom components decorated by <strong id="b1464282018197"><a name="b1464282018197"></a><a name="b1464282018197"></a>@Entry</strong> take effect.</p>
-</td>
-</tr>
-<tr id="row124040130281"><td class="cellrowborder" valign="top" width="14.84%" headers="mcps1.1.3.1.1 "><p id="p5404191372818"><a name="p5404191372818"></a><a name="p5404191372818"></a>onPageHide</p>
-</td>
-<td class="cellrowborder" valign="top" width="85.16%" headers="mcps1.1.3.1.2 "><p id="p1740410136287"><a name="p1740410136287"></a><a name="p1740410136287"></a>Invoked when a page is hidden. This callback is used in the routing process or scenarios where the application is switched to the foreground or background. Only the custom components decorated by <strong id="b86916375193"><a name="b86916375193"></a><a name="b86916375193"></a>@Entry</strong> take effect.</p>
-</td>
-</tr>
-<tr id="row914614415143"><td class="cellrowborder" valign="top" width="14.84%" headers="mcps1.1.3.1.1 "><p id="p1420710493489"><a name="p1420710493489"></a><a name="p1420710493489"></a>onBackPress</p>
-</td>
-<td class="cellrowborder" valign="top" width="85.16%" headers="mcps1.1.3.1.2 "><p id="p1020714916483"><a name="p1020714916483"></a><a name="p1020714916483"></a>Invoked when a user clicks the back button. Only the custom components decorated by <strong id="b117484422012"><a name="b117484422012"></a><a name="b117484422012"></a>@Entry</strong> take effect.</p>
-<a name="ul02081949144816"></a><a name="ul02081949144816"></a><ul id="ul02081949144816"><li>The value <strong id="b15338151114203"><a name="b15338151114203"></a><a name="b15338151114203"></a>true</strong> is returned if the page processes the return logic instead of performing page routing.</li><li>The value <strong id="b186911429200"><a name="b186911429200"></a><a name="b186911429200"></a>false</strong> is returned if the default return logic is used.</li><li>If no value is returned, the default return logic is used.</li></ul>
-</td>
-</tr>
-</tbody>
-</table>
+## Lifecycle Callback Definition
+
+  | Function | Description | 
+| -------- | -------- |
+| aboutToAppear | Invoked after a new instance of the custom component is created and before its build function is executed. You can change state variables in the aboutToAppear function. The change will take effect when you execute the build function next time. | 
+| aboutToDisappear | Invoked before the destructor of the custom component is consumed. Do not change state variables in the aboutToDisappear function as doing this can cause unexpected errors. For example, the modification of the @Link decorated variable may cause unstable application running. | 
+| onPageShow | Invoked when a page is displayed. This callback is used in the routing process or scenarios where the application is switched to the foreground or background. Only the custom components decorated by @Entry take effect. | 
+| onPageHide | Invoked when a page is hidden. This callback is used in the routing process or scenarios where the application is switched to the foreground or background. Only the custom components decorated by @Entry take effect. | 
+| onBackPress | Invoked when a user clicks the back button. Only the custom components decorated by @Entry take effect.<br/>- The value true is returned if the page processes the return logic instead of performing page routing.<br/>- The value false is returned if the default return logic is used.<br/>- If no value is returned, the default return logic is used. | 
+
+
+## Example
 
-## Example<a name="section462551935217"></a>
   
 ```
 @Component
@@ -72,9 +46,10 @@ struct CountDownTimerComponent {
 }
 ```
 
-The example above shows that lifecycle functions are critical for  **CountDownTimerComponent**  to manage its timer resources. Similar functions include loading resources asynchronously from the network.
+The example above shows that lifecycle functions are critical for CountDownTimerComponent to manage its timer resources. Similar functions include loading resources asynchronously from the network.
 
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->-   Promise and asynchronous callback functions can be used in lifecycle functions, for example, network resource getters and timer setters.
->-   Do not use  **async await**  in lifecycle functions.
 
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> - Promise and asynchronous callback functions can be used in lifecycle functions, for example, network resource getters and timer setters.
+> 
+> - Do not use async await in lifecycle functions.

en/application-dev/ui/ts-declarative-syntax.md

-# Declarative Syntax<a name="EN-US_TOPIC_0000001187113070"></a>
-
--   **[Overview](ts-syntax-intro.md)**  
-
--   **[General UI Description Specifications](ts-general-ui-description-specifications.md)**  
-
--   **[About UI State Management](ts-ui-state-management.md)**  
-
--   **[About Rendering Control Syntax](ts-rending-control-syntax.md)**  
-
--   **[About @Component](ts-a-deep-dive-into-component.md)**  
-
--   **[About Syntactic Sugar](ts-syntactic-sugar.md)**  
-
-

en/application-dev/ui/ts-declarative-ui-description-specifications.md

-# Declarative UI Description Specifications<a name="EN-US_TOPIC_0000001157388851"></a>
-
--   **[Parameterless Configuration](ts-parameterless-configuration.md)**  
-
--   **[Configuration with Mandatory Parameters](ts-configuration-with-mandatory-parameters.md)**  
-
--   **[Attribution Configuration](ts-attribution-configuration.md)**  
-
--   **[Event Configuration](ts-event-configuration.md)**  
-
--   **[Child Component Configuration](ts-child-component-configuration.md)**  
-
-

en/application-dev/ui/ts-event-configuration.md

-# Event Configuration<a name="EN-US_TOPIC_0000001157388863"></a>
+# Event Configuration
+
 
 You can use event methods to configure events supported by components.
 
+
 - Example of using a lambda expression to configure the event of a component:
     
   ```
@@ -13,9 +15,7 @@ You can use event methods to configure events supported by components.
   ```
 
 
--   Example of using an anonymous function expression to configure the event of a component:
-
-    In this case,  **bind**  must be used to ensure that the contained components are referenced by  **this**  in the function body.
+- When using an anonymous function expression to configure the event of a component, bind must be used to ensure that the contained components are referenced by this in the function body.
     
   ```
   // Counter is a private data variable defined in the component.
@@ -38,5 +38,3 @@ You can use event methods to configure events supported by components.
   Button('add counter')
     .onClick(this.myClickHandler)
   ```
-
-

en/application-dev/ui/ts-framework-directory.md

-# Directory Structure<a name="EN-US_TOPIC_0000001111581264"></a>
+# Directory Structure
 
-The following figure shows the typical directory structure of the  **eTS**  module \(**entry/src/main**\) for an application with feature abilities \(FAs\).
 
-![](figures/en-us_image_0000001251421931.png)
+The following figure shows the typical directory structure of the eTS module (entry/src/main) for an application with feature abilities (FAs).
+
+
+![en-us_image_0000001222967752](figures/en-us_image_0000001222967752.png)
+
 
 Functions of the files are as follows:
 
--   The Extended TypeScript \(eTS\) files that end with the  **.ets**  extension describe the UI layouts, styles, event interactions, and page logics.
+
+- The Extended TypeScript (eTS) files that end with the .ets extension describe the UI layouts, styles, event interactions, and page logics.
+
 
 Functions of the folders and files are as follows:
 
--   The  **app.ets**  file manages global application logics and lifecycles.
--   The  **pages**  directory stores all component pages.
--   The  **common**  directory stores common code files, such as custom components and public methods.
 
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->-   TypeScript and JavaScript files can be imported as page files.
+- The app.ets file manages global application logics and lifecycles.
+
+- The pages directory stores all component pages.
+
+- The common directory stores common code files, such as custom components and public methods.
+
 
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+>
+> TypeScript and JavaScript files can be imported as page files.

en/application-dev/ui/ts-framework-file-access-rules.md

-# Rules for Accessing Application Code Files<a name="EN-US_TOPIC_0000001158261215"></a>
+# Rules for Accessing Application Code Files
+
 
 The application code files can be accessed in the following ways:
 
--   Use a relative path to reference the code file. For example, if the upper-level directory is  **../common/utils/utils.ets**, use  **./common/utils/utils.ets**  for the current directory.
--   Use the root path of the current module to reference the code file, for example,  **common/utils/utils.ets**.
--   Store common code files in the  **common**  directory.
 
-## Example<a name="section14151172218568"></a>
+- Use a relative path to reference the code file. For example, if the upper-level directory is ../common/utils/utils.ets, use ./common/utils/utils.ets for the current directory.
+
+- Use the root path of the current module to reference the code file, for example, common/utils/utils.ets.
+
+- Store common code files in the common directory.
+
+
+## Example
+
   
 ```
 import { FoodData, FoodList } from "../common/utils/utils.ets";
@@ -29,6 +35,7 @@ struct FoodCategoryList {
 
 Example for importing a code file:
 
+  
 ```
 //common/utils/utils.ets
 
@@ -64,4 +71,3 @@ export struct FoodList {
   }
 }
 ```
-

en/application-dev/ui/ts-framework-file.md

-# File Organization<a name="EN-US_TOPIC_0000001158141245"></a>
-
--   **[Directory Structure](ts-framework-directory.md)**  
-
--   **[Rules for Accessing Application Code Files](ts-framework-file-access-rules.md)**  
-
-

en/application-dev/ui/ts-framework-js-tag.md

-# "js" Tag<a name="EN-US_TOPIC_0000001158141247"></a>
-
-Configure the  **"js"**  tag in the  [config.json](https://developer.harmonyos.com/en/docs/documentation/doc-guides/basic-config-file-overview-0000000000011951)  file of your application. The  **"js"**  tag contains the instance name, page route, and window configuration information.
-
-<a name="table155mcpsimp"></a>
-<table><thead align="left"><tr id="row163mcpsimp"><th class="cellrowborder" valign="top" width="16.831683168316832%" id="mcps1.1.6.1.1"><p id="p165mcpsimp"><a name="p165mcpsimp"></a><a name="p165mcpsimp"></a>Tag</p>
-</th>
-<th class="cellrowborder" valign="top" width="16.831683168316832%" id="mcps1.1.6.1.2"><p id="p167mcpsimp"><a name="p167mcpsimp"></a><a name="p167mcpsimp"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="14.52145214521452%" id="mcps1.1.6.1.3"><p id="p169mcpsimp"><a name="p169mcpsimp"></a><a name="p169mcpsimp"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="14.19141914191419%" id="mcps1.1.6.1.4"><p id="p171mcpsimp"><a name="p171mcpsimp"></a><a name="p171mcpsimp"></a>Mandatory</p>
-</th>
-<th class="cellrowborder" valign="top" width="37.62376237623762%" id="mcps1.1.6.1.5"><p id="p173mcpsimp"><a name="p173mcpsimp"></a><a name="p173mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row174mcpsimp"><td class="cellrowborder" valign="top" width="16.831683168316832%" headers="mcps1.1.6.1.1 "><p id="p176mcpsimp"><a name="p176mcpsimp"></a><a name="p176mcpsimp"></a>name</p>
-</td>
-<td class="cellrowborder" valign="top" width="16.831683168316832%" headers="mcps1.1.6.1.2 "><p id="p178mcpsimp"><a name="p178mcpsimp"></a><a name="p178mcpsimp"></a>string</p>
-</td>
-<td class="cellrowborder" valign="top" width="14.52145214521452%" headers="mcps1.1.6.1.3 "><p id="p180mcpsimp"><a name="p180mcpsimp"></a><a name="p180mcpsimp"></a>default</p>
-</td>
-<td class="cellrowborder" valign="top" width="14.19141914191419%" headers="mcps1.1.6.1.4 "><p id="p182mcpsimp"><a name="p182mcpsimp"></a><a name="p182mcpsimp"></a>Yes</p>
-</td>
-<td class="cellrowborder" valign="top" width="37.62376237623762%" headers="mcps1.1.6.1.5 "><p id="p184mcpsimp"><a name="p184mcpsimp"></a><a name="p184mcpsimp"></a>Name of the eTS instance.</p>
-</td>
-</tr>
-<tr id="row185mcpsimp"><td class="cellrowborder" valign="top" width="16.831683168316832%" headers="mcps1.1.6.1.1 "><p id="p187mcpsimp"><a name="p187mcpsimp"></a><a name="p187mcpsimp"></a>pages</p>
-</td>
-<td class="cellrowborder" valign="top" width="16.831683168316832%" headers="mcps1.1.6.1.2 "><p id="p189mcpsimp"><a name="p189mcpsimp"></a><a name="p189mcpsimp"></a>Array</p>
-</td>
-<td class="cellrowborder" valign="top" width="14.52145214521452%" headers="mcps1.1.6.1.3 "><p id="p191mcpsimp"><a name="p191mcpsimp"></a><a name="p191mcpsimp"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="14.19141914191419%" headers="mcps1.1.6.1.4 "><p id="p193mcpsimp"><a name="p193mcpsimp"></a><a name="p193mcpsimp"></a>Yes</p>
-</td>
-<td class="cellrowborder" valign="top" width="37.62376237623762%" headers="mcps1.1.6.1.5 "><p id="p195mcpsimp"><a name="p195mcpsimp"></a><a name="p195mcpsimp"></a>Page route information. For details, see <a href="#section58191020141212">"pages"</a>.</p>
-</td>
-</tr>
-<tr id="row1470193511315"><td class="cellrowborder" valign="top" width="16.831683168316832%" headers="mcps1.1.6.1.1 "><p id="p8471103518319"><a name="p8471103518319"></a><a name="p8471103518319"></a>window</p>
-</td>
-<td class="cellrowborder" valign="top" width="16.831683168316832%" headers="mcps1.1.6.1.2 "><p id="p8471163515311"><a name="p8471163515311"></a><a name="p8471163515311"></a>Object</p>
-</td>
-<td class="cellrowborder" valign="top" width="14.52145214521452%" headers="mcps1.1.6.1.3 "><p id="p194719356314"><a name="p194719356314"></a><a name="p194719356314"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="14.19141914191419%" headers="mcps1.1.6.1.4 "><p id="p13471193511316"><a name="p13471193511316"></a><a name="p13471193511316"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="37.62376237623762%" headers="mcps1.1.6.1.5 "><p id="p2047153583114"><a name="p2047153583114"></a><a name="p2047153583114"></a>Window configuration information. For details, see <a href="#section051216429126">"window"</a>.</p>
-</td>
-</tr>
-<tr id="row9971103313451"><td class="cellrowborder" valign="top" width="16.831683168316832%" headers="mcps1.1.6.1.1 "><p id="p397173317458"><a name="p397173317458"></a><a name="p397173317458"></a>mode</p>
-</td>
-<td class="cellrowborder" valign="top" width="16.831683168316832%" headers="mcps1.1.6.1.2 "><p id="p18971183318456"><a name="p18971183318456"></a><a name="p18971183318456"></a>Object</p>
-</td>
-<td class="cellrowborder" valign="top" width="14.52145214521452%" headers="mcps1.1.6.1.3 "><p id="p497283354510"><a name="p497283354510"></a><a name="p497283354510"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="14.19141914191419%" headers="mcps1.1.6.1.4 "><p id="p597212332456"><a name="p597212332456"></a><a name="p597212332456"></a>No</p>
-</td>
-<td class="cellrowborder" valign="top" width="37.62376237623762%" headers="mcps1.1.6.1.5 "><p id="p19555836124"><a name="p19555836124"></a><a name="p19555836124"></a>Running type and syntax style of the JS component. For details, see <a href="#section187397018139">"mode"</a>.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## pages<a name="section58191020141212"></a>
-
-The  **"pages"**  defines the route information of each page's entry component. Each page consists of the page path and page name. The following is an example:
+# "js" Tag
+
+
+Configure the "js" tag in the config.json file of your application. The "js" tag contains the instance name, page route, and window configuration information.
+
+
+  | Tag | Type | Default Value | Mandatory | Description | 
+| -------- | -------- | -------- | -------- | -------- |
+| name | string | default | Yes | Name of the eTS instance. | 
+| pages | Array | - | Yes | Page route information. For details, see ["pages"](#pages). | 
+| window | Object | - | No | Window configuration information. For details, see ["window"](#window). | 
+| mode | Object | - | No | Running type and syntax style of the JS component. For details, see ["mode"](#mode). | 
+
+
+## pages
+
+The "pages" defines the route information of each page's entry component. Each page consists of the page path and page name. The following is an example:
+
 
 ```
 {
@@ -75,33 +26,22 @@ The  **"pages"**  defines the route information of each page's entry component.
 }
 ```
 
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->-   The first page in the  **"pages"**  list is the home page of the application.
->-   The page name must not be a component name, for example,  **Text.ets**  or  **Button.ets**.
->-   Each page file must contain the  [page entry component](ts-component-based-entry.md)  \(with the @Entry decoration\).
-
-## window<a name="section051216429126"></a>
-
-The  **"window"**  configures the view window. The following attributes can be configured:
-
-<a name="table12744175911317"></a>
-<table><thead align="left"><tr id="row13744259131317"><th class="cellrowborder" valign="top" width="15.4015401540154%" id="mcps1.1.4.1.1"><p id="p574413592132"><a name="p574413592132"></a><a name="p574413592132"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="12.56125612561256%" id="mcps1.1.4.1.2"><p id="p11745115916131"><a name="p11745115916131"></a><a name="p11745115916131"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="72.03720372037205%" id="mcps1.1.4.1.3"><p id="p874513594137"><a name="p874513594137"></a><a name="p874513594137"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row157461359131320"><td class="cellrowborder" valign="top" width="15.4015401540154%" headers="mcps1.1.4.1.1 "><p id="p774614598137"><a name="p774614598137"></a><a name="p774614598137"></a>designWidth</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.56125612561256%" headers="mcps1.1.4.1.2 "><p id="p77461359141312"><a name="p77461359141312"></a><a name="p77461359141312"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="72.03720372037205%" headers="mcps1.1.4.1.3 "><p id="p3740171951611"><a name="p3740171951611"></a><a name="p3740171951611"></a>Logical width of the view. The default value is <strong id="b171419193421"><a name="b171419193421"></a><a name="b171419193421"></a>720</strong>. (The default value is <strong id="b7750142412424"><a name="b7750142412424"></a><a name="b7750142412424"></a>454</strong> for wearables.) The logical width of the view determines the unit size of lpx. For example, if <strong id="b170015367467"><a name="b170015367467"></a><a name="b170015367467"></a>designWidth</strong> is <strong id="b1985740184615"><a name="b1985740184615"></a><a name="b1985740184615"></a>720</strong> and the view width is 1440 physical pixels, 1 lpx is 2 physical pixels. For details, see <a href="ts-pixel-units.md">lpx</a>.</p>
-</td>
-</tr>
-</tbody>
-</table>
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> - The first page in the "pages" list is the home page of the application.
+>
+> - The page name must not be a component name, for example, Text.ets or Button.ets.
+>
+> - Each page file must contain the [page entry component](ts-component-based-entry.md) (with the @Entry decoration).
+
+
+## window
+
+The "window" configures the view window. The following attributes can be configured:
+
+  | Type | Default Value | Description | 
+| -------- | -------- | -------- |
+| designWidth | - | Logical width of the view. The default value is 720. (The default value is 454 for wearables.) The logical width of the view determines the unit size of lpx. For example, if designWidth is 720 and the view width is 1440 physical pixels, 1 lpx is 2 physical pixels. For details, see [lpx](ts-pixel-units.md). | 
+
 
 ```
 {
@@ -113,45 +53,25 @@ The  **"window"**  configures the view window. The following attributes can be c
 }
 ```
 
-## mode<a name="section187397018139"></a>
-
-The  **"mode"**  configures the running type and syntax style of a JS component. The following attributes are supported:
-
-<a name="table0991613141319"></a>
-<table><thead align="left"><tr id="row399151341313"><th class="cellrowborder" valign="top" width="14.041404140414041%" id="mcps1.1.4.1.1"><p id="p599171361314"><a name="p599171361314"></a><a name="p599171361314"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="8.700870087008699%" id="mcps1.1.4.1.2"><p id="p16991313151310"><a name="p16991313151310"></a><a name="p16991313151310"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="77.25772577257726%" id="mcps1.1.4.1.3"><p id="p14991813151318"><a name="p14991813151318"></a><a name="p14991813151318"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row1799112131130"><td class="cellrowborder" valign="top" width="14.041404140414041%" headers="mcps1.1.4.1.1 "><p id="p4991191321313"><a name="p4991191321313"></a><a name="p4991191321313"></a>type</p>
-</td>
-<td class="cellrowborder" valign="top" width="8.700870087008699%" headers="mcps1.1.4.1.2 "><p id="p299261331320"><a name="p299261331320"></a><a name="p299261331320"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="77.25772577257726%" headers="mcps1.1.4.1.3 "><p id="p3992121312135"><a name="p3992121312135"></a><a name="p3992121312135"></a>Running type of the JS component. The options are as follows:</p>
-<a name="ul1937861914577"></a><a name="ul1937861914577"></a><ul id="ul1937861914577"><li><strong id="b75081241041"><a name="b75081241041"></a><a name="b75081241041"></a>pageAbility</strong>: Run the JS component in ability mode.</li><li><strong id="b168910358411"><a name="b168910358411"></a><a name="b168910358411"></a>form</strong>: Run the JS component as a service widget.</li></ul>
-</td>
-</tr>
-<tr id="row123561551181712"><td class="cellrowborder" valign="top" width="14.041404140414041%" headers="mcps1.1.4.1.1 "><p id="p335605114177"><a name="p335605114177"></a><a name="p335605114177"></a>syntax</p>
-</td>
-<td class="cellrowborder" valign="top" width="8.700870087008699%" headers="mcps1.1.4.1.2 "><p id="p2356951151718"><a name="p2356951151718"></a><a name="p2356951151718"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="77.25772577257726%" headers="mcps1.1.4.1.3 "><p id="p435617515178"><a name="p435617515178"></a><a name="p435617515178"></a>Syntax type of the JS component. The options are as follows:</p>
-<a name="ul12256182612583"></a><a name="ul12256182612583"></a><ul id="ul12256182612583"><li><strong id="b2366192115510"><a name="b2366192115510"></a><a name="b2366192115510"></a>hml</strong>: compiled in the .hml, .css, or .js style.</li><li><strong id="b144835462511"><a name="b144835462511"></a><a name="b144835462511"></a>ets</strong>: compiled in the declarative syntax style.</li></ul>
-</td>
-</tr>
-</tbody>
-</table>
-
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->If  **type**  is set to  **form**,  **syntax**  cannot be  **ets**.
-
-## Example<a name="section5306141614133"></a>
+
+## mode
+
+The "mode" configures the running type and syntax style of a JS component. The following attributes are supported:
+
+  | Type | Default Value | Description | 
+| -------- | -------- | -------- |
+| type | - | Running type of the JS component. The options are as follows:<br/>- pageAbility: Run the JS component in ability mode.<br/>- form: Run the JS component as a service widget. | 
+| syntax | - | Syntax type of the JS component. The options are as follows:<br/>- hml: compiled in the .hml, .css, or .js style.<br/>- ets: compiled in the declarative syntax style. | 
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> If type is set to form, syntax cannot be ets.
+
+
+## Example
 
 config.json:
 
+
 ```
 {
     "app": {
@@ -183,4 +103,3 @@ config.json:
     }
 }
 ```
-

en/application-dev/ui/ts-framework.md

-# Framework Overview<a name="EN-US_TOPIC_0000001111421382"></a>
-
--   **[File Organization](ts-framework-file.md)**  
-
--   **["js" Tag](ts-framework-js-tag.md)**  
-
--   **[Resource Access](ts-resource-access.md)**  
-
--   **[Pixel Units](ts-pixel-units.md)**  
-
--   **[Types](ts-types.md)**  
-
-

en/application-dev/ui/ts-function-build.md

-# build Function<a name="EN-US_TOPIC_0000001157228879"></a>
+# build Function
+
+
+The build function meets the definition of the Builder API and is used to define the declarative UI description of components. Components must comply with the preceding Builder API constraints. Custom or preset components are combined in declarative mode in the build method. The build method is called when a component is created or updated.
+
 
-The  **build**  function meets the definition of the  **Builder**  API and is used to define the declarative UI description of components.
   
 ```
 interface Builder {
@@ -8,3 +11,6 @@ interface Builder {
 }
 ```
 
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> The build method supports only composite components and uses the rendering control syntax.

en/application-dev/ui/ts-general-ui-concepts.md

-# Basic Concepts<a name="EN-US_TOPIC_0000001215268053"></a>
+# Basic Concepts
+
 
 The TypeScript-based declarative development paradigm provides a wide array of basic components, which can be combined and extended in a declarative manner to describe the UI of an application. It also provides basic data binding and event processing mechanisms to help you implement the application interaction logic.
 
-## HelloWorld Example<a name="section7816125610596"></a>
+
+## HelloWorld Example
+
 
 ```
 // An example of displaying Hello World. After you click the button, Hello UI is displayed.
@@ -20,7 +23,7 @@ struct Hello {
             Button() {
                 Text('Click me')
                 .fontColor(Color.Red)
-            }.onClick(() => {
+            }.onClick(() =&gt; {
                 this.myText = 'UI'
             })
             .width(500)
@@ -30,14 +33,19 @@ struct Hello {
 }
 ```
 
-## Basic Concepts<a name="section1163410619"></a>
+
+## Basic Concepts
 
 The preceding sample code shows the structure of a simple page. It involves the following basic concepts:
 
--   **Decorator**: a special kind of declaration that can be applied to classes, structures, methods, and variables, and assigns special meanings to them. In the sample code,  **@Entry**,  **@Component**, and  **@State**  are decorators.
--   **Custom component**: a reusable UI unit, which can be combined with other components. In the sample code,  **struct Hello**  decorated by  **@Component**  is a custom component.
--   **UI description**: declaratively describes the UI structure. In the sample code, the block of code in the  **build\(\)**  method provides the UI description.
--   **Built-in component**: the default basic or layout component preset in the framework. You can directly invoke these components, such as  **<Column\>**,  **<Text\>**,  **<Divider\>**, and  **<Button\>**  components in the sample code.
--   **Attribute method**: a method used to configure component attributes, such as  **fontSize\(\)**,  **width\(\)**,  **height\(\)**, and  **color\(\)**.
--   **Event method**: a method used to add the component response logic to an event. The logic is set through an event method, such as  **onClick\(\)**  for a button.
+- Decorator: a special kind of declaration that can be applied to classes, structures, methods, and variables. In the sample code, @Entry, @Component, and @State are decorators.
+
+- Custom component: a reusable UI unit, which can be combined with other components. In the sample code, struct Hello decorated by @Component is a custom component.
+
+- UI description: declaratively describes the UI structure. In the sample code, the block of code in the build() method provides the UI description.
+
+- Built-in component: the default basic or layout component preset in the framework. You can directly invoke these components, such as &lt;Column&gt;, &lt;Text&gt;, &lt;Divider&gt;, and &lt;Button&gt; components in the sample code.
+
+- Attribute method: a method used to configure component attributes, such as fontSize(), width(), height(), and color().
 
+- Event method: a method used to add the component response logic to an event. In the sample code, the onClick method is added for the Button component for defining the click response logic.

en/application-dev/ui/ts-general-ui-description-specifications.md

-# General UI Description Specifications<a name="EN-US_TOPIC_0000001157388843"></a>
-
--   **[Basic Concepts](ts-general-ui-concepts.md)**  
-
--   **[Declarative UI Description Specifications](ts-declarative-ui-description-specifications.md)**  
-
--   **[Componentization](ts-component-based.md)**  
-
-

en/application-dev/ui/ts-instantiating-a-struct-without-new-keyword.md

-# Instantiating a struct Without the new Keyword<a name="EN-US_TOPIC_0000001110788984"></a>
-
-You can omit the  **new**  keyword when instantiating a  **struct**.
-
-```
-// Definition
-@Component
-struct MyComponent {
-    build() {
-    }
-}
-
-// Use
-Column() {
-    MyComponent()
-}
-
-// Equivalent to
-new Column() {
-    new MyComponent()
-}
-```
-

en/application-dev/ui/ts-managing-application-states-apis.md

-# APIs<a name="EN-US_TOPIC_0000001166729297"></a>
-
--   **[AppStorage](ts-application-states-appstorage.md)**  
-
--   **[PersistentStorage](ts-application-states-apis-persistentstorage.md)**  
-
--   **[Environment](ts-application-states-apis-environment.md)**  
-
-

en/application-dev/ui/ts-managing-application-states.md

-# Managing Application States<a name="EN-US_TOPIC_0000001119769576"></a>
-
--   **[APIs](ts-managing-application-states-apis.md)**  
-
--   **[Synchronization Between AppStorage and Components](ts-application-states-storagelink-storageprop.md)**  
-
-

en/application-dev/ui/ts-managing-component-states.md

-# Managing Component States<a name="EN-US_TOPIC_0000001157388859"></a>
-
--   **[@State](ts-component-states-state.md)**  
-
--   **[@Prop](ts-component-states-prop.md)**  
-
--   **[@Link](ts-component-states-link.md)**  
-
-

en/application-dev/ui/ts-managing-other-states.md

-# Managing Other States<a name="EN-US_TOPIC_0000001131511284"></a>
-
--   **[@observed and @objectLink](ts-other-states-observed-objectlink.md)**  
-
--   **[@Consume and @Provide](ts-other-states-consume-provide.md)**  
-
--   **[@Watch](ts-other-states-watch.md)**  
-
-

en/application-dev/ui/ts-media-resource-type.md

-# Media Resource Types<a name="EN-US_TOPIC_0000001111421384"></a>
-
--   The following table describes the image resource types supported by the development framework.
-
-    <a name="table74561214415"></a>
-    <table><thead align="left"><tr id="row9455121042"><th class="cellrowborder" valign="top" width="54%" id="mcps1.1.3.1.1"><p id="p74514120420"><a name="p74514120420"></a><a name="p74514120420"></a>Image Format</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="46%" id="mcps1.1.3.1.2"><p id="p9453121840"><a name="p9453121840"></a><a name="p9453121840"></a>File Name Extension</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="row1445612145"><td class="cellrowborder" valign="top" width="54%" headers="mcps1.1.3.1.1 "><p id="p1445712547"><a name="p1445712547"></a><a name="p1445712547"></a>JPEG</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="46%" headers="mcps1.1.3.1.2 "><p id="p184512121747"><a name="p184512121747"></a><a name="p184512121747"></a>.jpg</p>
-    </td>
-    </tr>
-    <tr id="row104516123419"><td class="cellrowborder" valign="top" width="54%" headers="mcps1.1.3.1.1 "><p id="p9452120419"><a name="p9452120419"></a><a name="p9452120419"></a>PNG</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="46%" headers="mcps1.1.3.1.2 "><p id="p1945171215415"><a name="p1945171215415"></a><a name="p1945171215415"></a>.png</p>
-    </td>
-    </tr>
-    <tr id="row204512121146"><td class="cellrowborder" valign="top" width="54%" headers="mcps1.1.3.1.1 "><p id="p1745171215413"><a name="p1745171215413"></a><a name="p1745171215413"></a>GIF</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="46%" headers="mcps1.1.3.1.2 "><p id="p34512121047"><a name="p34512121047"></a><a name="p34512121047"></a>.gif</p>
-    </td>
-    </tr>
-    <tr id="row1628915301042"><td class="cellrowborder" valign="top" width="54%" headers="mcps1.1.3.1.1 "><p id="p52901630247"><a name="p52901630247"></a><a name="p52901630247"></a>SVG</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="46%" headers="mcps1.1.3.1.2 "><p id="p1229020304417"><a name="p1229020304417"></a><a name="p1229020304417"></a>.svg</p>
-    </td>
-    </tr>
-    <tr id="row1157118321548"><td class="cellrowborder" valign="top" width="54%" headers="mcps1.1.3.1.1 "><p id="p18571113210419"><a name="p18571113210419"></a><a name="p18571113210419"></a>WEBP</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="46%" headers="mcps1.1.3.1.2 "><p id="p125712321046"><a name="p125712321046"></a><a name="p125712321046"></a>.webp</p>
-    </td>
-    </tr>
-    <tr id="row193603571342"><td class="cellrowborder" valign="top" width="54%" headers="mcps1.1.3.1.1 "><p id="p1336055717420"><a name="p1336055717420"></a><a name="p1336055717420"></a>BMP</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="46%" headers="mcps1.1.3.1.2 "><p id="p536055715412"><a name="p536055715412"></a><a name="p536055715412"></a>.bmp</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
+# Media Resource Types
 
 
+- The following table describes the image resource types supported by the development framework.
+    | Image Format | File Name Extension | 
+  | -------- | -------- |
+  | JPEG | .jpg | 
+  | PNG | .png | 
+  | GIF | .gif | 
+  | SVG | .svg | 
+  | WEBP | .webp | 
+  | BMP | .bmp |

en/application-dev/ui/ts-other-states-consume-provide.md

-# @Consume and @Provide<a name="EN-US_TOPIC_0000001177510803"></a>
-
-As the data provider,  **Provide**  can update the data of child nodes and trigger page rendering. After  **Consume**  detects that the  **Provide**  data is updated, it will initiate re-rendering of the current view.
-
-**Table  1**  @Provide
-
-<a name="table657684923115"></a>
-<table><thead align="left"><tr id="row15576204917311"><th class="cellrowborder" valign="top" width="11.76%" id="mcps1.2.3.1.1"><p id="p1432545513219"><a name="p1432545513219"></a><a name="p1432545513219"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="88.24%" id="mcps1.2.3.1.2"><p id="p35771495314"><a name="p35771495314"></a><a name="p35771495314"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row17577164993114"><td class="cellrowborder" valign="top" width="11.76%" headers="mcps1.2.3.1.1 "><p id="p175774498318"><a name="p175774498318"></a><a name="p175774498318"></a>Decorator parameters</p>
-</td>
-<td class="cellrowborder" valign="top" width="88.24%" headers="mcps1.2.3.1.2 "><p id="p1057724983115"><a name="p1057724983115"></a><a name="p1057724983115"></a>Alias: a constant of the string type. If an alias is specified, implement the data update for this alias. If there is no alias, use the variable name as the alias. <strong id="b6361102517296"><a name="b6361102517296"></a><a name="b6361102517296"></a>@Provide("<em id="i111131278293"><a name="i111131278293"></a><a name="i111131278293"></a>alias</em>")</strong> is recommended.</p>
-</td>
-</tr>
-<tr id="row176181053377"><td class="cellrowborder" valign="top" width="11.76%" headers="mcps1.2.3.1.1 "><p id="p1261945143714"><a name="p1261945143714"></a><a name="p1261945143714"></a>Synchronization mechanism</p>
-</td>
-<td class="cellrowborder" valign="top" width="88.24%" headers="mcps1.2.3.1.2 "><p id="p361955173715"><a name="p361955173715"></a><a name="p361955173715"></a>The <strong id="b180161543014"><a name="b180161543014"></a><a name="b180161543014"></a>@Provide</strong> decorated variable is similar to the <strong id="b1520118579306"><a name="b1520118579306"></a><a name="b1520118579306"></a>@state</strong> variable. You can modify the variable to re-render the page. You can also modify the <strong id="b5329423183117"><a name="b5329423183117"></a><a name="b5329423183117"></a>@Consume</strong> decorated variable to modify the <strong id="b137201734193116"><a name="b137201734193116"></a><a name="b137201734193116"></a>@State</strong> decorated variable reversely.</p>
-</td>
-</tr>
-<tr id="row103140354219"><td class="cellrowborder" valign="top" width="11.76%" headers="mcps1.2.3.1.1 "><p id="p531412324219"><a name="p531412324219"></a><a name="p531412324219"></a>Initial value</p>
-</td>
-<td class="cellrowborder" valign="top" width="88.24%" headers="mcps1.2.3.1.2 "><p id="p331412394220"><a name="p331412394220"></a><a name="p331412394220"></a>The initial value must be set.</p>
-</td>
-</tr>
-<tr id="row171522344211"><td class="cellrowborder" valign="top" width="11.76%" headers="mcps1.2.3.1.1 "><p id="p22941739134411"><a name="p22941739134411"></a><a name="p22941739134411"></a>Page re-rendering scenarios</p>
-</td>
-<td class="cellrowborder" valign="top" width="88.24%" headers="mcps1.2.3.1.2 "><p id="p61513237423"><a name="p61513237423"></a><a name="p61513237423"></a>1. Primitive types: boolean, string, and number</p>
-<p id="p118613561460"><a name="p118613561460"></a><a name="p118613561460"></a>2. <strong id="b464654743215"><a name="b464654743215"></a><a name="b464654743215"></a>@observed</strong>: used to modify the attributes of the <strong id="b8138554192417"><a name="b8138554192417"></a><a name="b8138554192417"></a>@observed</strong> decorated class.</p>
-<p id="p232173614475"><a name="p232173614475"></a><a name="p232173614475"></a>3. Array: Add, delete, or update elements in an array.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-**Table  2**  @Consume
-
-<a name="table11965192012493"></a>
-<table><thead align="left"><tr id="row1796552012496"><th class="cellrowborder" valign="top" width="11.76%" id="mcps1.2.3.1.1"><p id="p7965182054914"><a name="p7965182054914"></a><a name="p7965182054914"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="88.24%" id="mcps1.2.3.1.2"><p id="p2965220174910"><a name="p2965220174910"></a><a name="p2965220174910"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row1965182013493"><td class="cellrowborder" valign="top" width="11.76%" headers="mcps1.2.3.1.1 "><p id="p1496582020496"><a name="p1496582020496"></a><a name="p1496582020496"></a>Initial value</p>
-</td>
-<td class="cellrowborder" valign="top" width="88.24%" headers="mcps1.2.3.1.2 "><p id="p15965132044919"><a name="p15965132044919"></a><a name="p15965132044919"></a>No default value can be set.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->To avoid infinite loops caused by circular reference, exercise caution when using  **@Provide**  and  **@Consume**.
-
-The description of other attributes is the same as that of  **@Provide**.
+# @Consume and @Provide
+
+
+As the data provider, @Provide can update the data of child nodes and trigger page rendering. After @Consume detects that the @Provide data is updated, it will initiate re-rendering of the current view.
+
+
+  Table1 @Provide
+
+| Name | Description | 
+| -------- | -------- |
+| Decorator parameter | A constant of the string type, which is used to set an alias for a decorated variable. If an alias is specified, implement the data update for this alias. If there is no alias, use the variable name as the alias. @Provide("_alias_") is recommended. | 
+| Synchronization mechanism | The @Provide decorated variable is similar to the @state variable. You can modify the variable to re-render the page. You can also modify the @Consume decorated variable to modify the @State decorated variable reversely. | 
+| Initial value | The initial value must be set. | 
+| Page re-rendering scenarios | The following will trigger page re-rendering:<br/>- Changes of variables in primitive types (boolean, string, and number)<br/>- Changes of the @Observed decorated classes or their attributes<br/>- Adding, deleting, or updatingelements in an array | 
+
+
+  Table2 @Consume
+
+| Type | Description | 
+| -------- | -------- |
+| Initial value | No default value can be set. | 
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> To avoid infinite loops caused by circular reference, exercise caution when using @Provide and @Consume.
+
+
+The description of other attributes is the same as that of @Provide.
+
+
   
 ```
 @Entry
@@ -103,4 +74,3 @@ struct CompC {
     }
 }
 ```
-

en/application-dev/ui/ts-other-states-observed-objectlink.md

-# @observed and @objectLink<a name="EN-US_TOPIC_0000001131671052"></a>
+# @Observed and @ObjectLink
+
+
+This section introduces to you two new decorators: @Observed and @ObjectLink.
+
+
+- @Observed applies to a class, indicating that the data changes in the class are managed by the UI page, for example, @Observed class ClassA {}.
+
+- @ObjectLink applies to an object decorated by @Observed, for example, @ObjectLink a: ClassA.
+
+
+## Background
+
+When you need to set bidirectional synchronization in a child component for a variable (parent_a) of its parent component, you can use @State to decorate the variable (parent_a) in the parent component and use @Link to decorate the corresponding variable (child_a) in the child component. In this way, data can be synchronized between the parent component and the specific child component, and between the parent component and its other child components. As shown below, bidirectional synchronization is configured for variables of ClassA in the parent and child components. If attribute c of the variable in child component 1 has its value changed, the parent component will be notified to synchronize the change. If attribute c in the parent component has its value changed, all child components will be notified to synchronize the change.
+
+![en-us_image_0000001267647861](figures/en-us_image_0000001267647861.png)
+
+In the preceding example, full synchronization is performed for a data object. If you want to synchronize partial information of a data object in a parent component, and if the information is a class object, use @ObjectLink and @Observed instead, as shown below.
+
+![en-us_image_0000001267607881](figures/en-us_image_0000001267607881.png)
+
+
+## Configuration Requirement
+
+- @Observed applies to classes, and @ObjectLink applies to variables.
+
+- The variables decorated by @ObjectLink must be of the class type.
+  - The classes must be decorated by @Observed.
+  - Parameters of the primitive types are not supported. You can use @Prop to perform unidirectional synchronization.
+
+- @ObjectLink decorated variables are immutable.
+  - Attribute changes are allowed. If an object is referenced by multiple @ObjectLink decorated variables, all custom components that have these variables will be notified for re-rendering.
+
+- Default values cannot be set for @ObjectLink decorated variables.
+  - The parent component must be initialized with a TypeScript expression that involves variables decorated by @State, @Link, @StorageLink, @Provide, or @Consume.
+
+- @ObjectLink decorated variables are private variables and can be accessed only within the component.
+
+
+## Examples
+
+
+### Example 1
 
-**@observed**  is a decorator used for classes, indicating that the data changes in the object will be managed by the UI page.  **@objectLink**  is used to decorate the variables that are decorated by  **@observed**.
   
 ```
-// Object to be observed
-@Observed class ClassA {
-    static nextID : number = 0;
-    public id : number;
+@Observed
+class ClassA {
+  public name : string;
   public c: number;
-
-    constructor(c: number) {
-        this.id = ClassA.nextID++;
+  constructor(c: number, name: string = 'OK') {
+    this.name = name;
     this.c = c;
   }
 }
 
-@Observed class ClassB {
+class ClassB {
   public a: ClassA;
-
   constructor(a: ClassA) {
     this.a = a;
   }
 }
-```
 
-```
 @Component
 struct ViewA {
+  label : string = "ep1";
   @ObjectLink a : ClassA;
-  label : string = "ViewA1";
   build() {
-     Row() {
-        Button(`ViewA [${this.label}] this.a.c=${this.a.c} +1`)
+    Column() {
+      Text(`ViewA [${this.label}]: a.c=${this.a.c}`)
+        .fontSize(20)
+      Button(`+1`)
+        .width(100)
+        .margin(2)
         .onClick(() => {
           this.a.c += 1;
         })
-        Button(`ViewA [${this.label}] reset this.a =new ClassA(0)`)
+      Button(`reset`)
+        .width(100)
+        .margin(2)
         .onClick(() => {
           this.a = new ClassA(0); // ERROR, this.a is immutable
         })
@@ -46,18 +88,27 @@ struct ViewA {
 @Entry
 @Component
 struct ViewB {
-  @State b : ClassB = new ClassB(new ClassA(0));
-
+  @State b : ClassB = new ClassB(new ClassA(10));
   build() {
-     Column() {
+    Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center}) {
       ViewA({label: "ViewA #1", a: this.b.a})
       ViewA({label: "ViewA #2", a: this.b.a})
 
+      Button(`ViewB: this.b.a.c += 1` )
+        .width(320)
+        .margin(4)
+        .onClick(() => {
+          this.b.a.c += 1;
+        })
       Button(`ViewB: this.b.a = new ClassA(0)`)
+        .width(240)
+        .margin(4)
         .onClick(() => {
           this.b.a = new ClassA(0);
         })
       Button(`ViewB: this.b = new ClassB(ClassA(0))`)
+        .width(240)
+        .margin(4)
         .onClick(() => {
           this.b = new ClassB(new ClassA(0));
         })
@@ -66,6 +117,65 @@ struct ViewB {
 }
 ```
 
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->**@ObjectLink**  is used to decorate variables and cannot be initialized.  **@Observed**  is used to decorate a class.
 
+### Example 2
+
+  
+```
+var nextID: number = 0;
+@Observed
+class ClassA {
+  public name : string;
+  public c: number;
+  public id : number;
+  constructor(c: number, name: string = 'OK') {
+    this.name = name;
+    this.c = c;
+    this.id = nextID++;
+  }
+}
+
+@Component
+struct ViewA {
+  label : string = "ViewA1";
+  @ObjectLink a: ClassA;
+  build() {
+    Row() {
+      Button(`ViewA [${this.label}] this.a.c= ${this.a.c} +1`)
+        .onClick(() => {
+          this.a.c += 1;
+        })
+    }
+  }
+}
+
+@Entry
+@Component
+struct ViewB {
+  @State arrA : ClassA[] = [ new ClassA(0), new ClassA(0) ];
+  build() {
+    Column() {
+      ForEach (this.arrA, (item) => {
+          ViewA({label: `#${item.id}`, a: item})
+        },
+        (item) => item.id.toString()
+      )
+      ViewA({label: `ViewA this.arrA[first]`, a: this.arrA[0]})
+      ViewA({label: `ViewA this.arrA[last]`, a: this.arrA[this.arrA.length-1]})
+
+      Button(`ViewB: reset array`)
+        .onClick(() => {
+            this.arrA = [ new ClassA(0), new ClassA(0) ];
+        })
+      Button(`ViewB: push`)
+        .onClick(() => {
+            this.arrA.push(new ClassA(0))
+        })
+      Button(`ViewB: shift`)
+        .onClick(() => {
+            this.arrA.shift()
+        })
+    }
+  }
+}
+```

en/application-dev/ui/ts-other-states-watch.md

-# @Watch<a name="EN-US_TOPIC_0000001177658253"></a>
+# @Watch
+
+
+@Watch is used to listen for changes of state variables. The syntax structure is as follows:
+
+
+  
+```
+@State @Watch("onChanged") count : number = 0
+```
+
+
+As shown above, add an @Watch decorator to the target state variable to register an onChanged callback. When the state variable count is changed, the onChanged callback will be triggered.
+
+
+@Watch can be used to listen for changes of variables decorated by @State, @Prop, @Link, @ObjectLink, @Provide, @Consume, @StorageProp, or @StorageLink.
+
 
-The application can register a callback through  **@Watch**. This callback is triggered when a variable decorated by any of the following decorators changes:  **@State**,  **@Prop**,  **@Link**,  **@ObjectLink**,  **@Provide**,  **@Consume**,  **@StorageProp**, and  **@StorageLink**. The variables in  **@Watch**  must be enclosed in  **""**.
   
 ```
 @Entry
@@ -12,7 +27,7 @@ struct CompA {
     updateTotal() : number {
         let sum = 0;
         this.shopBasket.forEach((i) => { sum += i; });
-        // calculate new total shop basket value and apply discount if over 100RMB
+        // Calculate the total amount of items in the shopping basket. If the amount exceeds CNY100, the specified discount will be applied.
         this.totalPurchase = (sum < 100) ? sum : 0.9 * sum;
         return this.totalPurchase;
     }
@@ -31,4 +46,3 @@ struct CompA {
     }
 }
 ```
-

en/application-dev/ui/ts-parameterless-configuration.md

-# Parameterless Configuration<a name="EN-US_TOPIC_0000001157228859"></a>
+# Configuration Without Parameters
 
-If the API definition of a component does not contain mandatory parameters, you do not need to configure any content in the parentheses next to the component.
 
-For example, the following  **Divider**  component does not contain parameters:
+If the API definition of a component does not contain mandatory parameters, you do not need to configure any content in the parentheses next to the component. For example, the Divider component does not contain parameters:
 
 ```
 Column() {
@@ -11,4 +10,3 @@ Column() {
     Text('item 2')
 }
 ```
-

en/application-dev/ui/ts-pixel-units.md

-# Pixel Units<a name="EN-US_TOPIC_0000001111581268"></a>
+# Pixel Units
+
 
 The framework provides four pixel units, with vp as the reference data unit.
 
-<a name="table230mcpsimp"></a>
-<table><thead align="left"><tr id="row235mcpsimp"><th class="cellrowborder" valign="top" width="13%" id="mcps1.1.3.1.1"><p id="p237mcpsimp"><a name="p237mcpsimp"></a><a name="p237mcpsimp"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="87%" id="mcps1.1.3.1.2"><p id="p239mcpsimp"><a name="p239mcpsimp"></a><a name="p239mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row240mcpsimp"><td class="cellrowborder" valign="top" width="13%" headers="mcps1.1.3.1.1 "><p id="p242mcpsimp"><a name="p242mcpsimp"></a><a name="p242mcpsimp"></a>px</p>
-</td>
-<td class="cellrowborder" valign="top" width="87%" headers="mcps1.1.3.1.2 "><p id="p244mcpsimp"><a name="p244mcpsimp"></a><a name="p244mcpsimp"></a>Physical pixel unit of the screen.</p>
-</td>
-</tr>
-<tr id="row245mcpsimp"><td class="cellrowborder" valign="top" width="13%" headers="mcps1.1.3.1.1 "><p id="p247mcpsimp"><a name="p247mcpsimp"></a><a name="p247mcpsimp"></a>vp</p>
-</td>
-<td class="cellrowborder" valign="top" width="87%" headers="mcps1.1.3.1.2 "><p id="p249mcpsimp"><a name="p249mcpsimp"></a><a name="p249mcpsimp"></a>Pixels specific to the screen density, which are converted into physical pixels of the screen based on the screen pixel density.</p>
-</td>
-</tr>
-<tr id="row250mcpsimp"><td class="cellrowborder" valign="top" width="13%" headers="mcps1.1.3.1.1 "><p id="p252mcpsimp"><a name="p252mcpsimp"></a><a name="p252mcpsimp"></a>fp</p>
-</td>
-<td class="cellrowborder" valign="top" width="87%" headers="mcps1.1.3.1.2 "><p id="p254mcpsimp"><a name="p254mcpsimp"></a><a name="p254mcpsimp"></a>Font pixel, which is similar to vp and varies according to the system font size.</p>
-</td>
-</tr>
-<tr id="row920003123018"><td class="cellrowborder" valign="top" width="13%" headers="mcps1.1.3.1.1 "><p id="p1020016393011"><a name="p1020016393011"></a><a name="p1020016393011"></a>lpx</p>
-</td>
-<td class="cellrowborder" valign="top" width="87%" headers="mcps1.1.3.1.2 "><p id="p1120043183010"><a name="p1120043183010"></a><a name="p1120043183010"></a>Logical pixel unit of the window. It is the ratio of the actual screen width to the logical width (configured by <a href="ts-framework-js-tag.md#table12744175911317">designWidth</a>). For example, if <strong id="b2423202212551"><a name="b2423202212551"></a><a name="b2423202212551"></a>designWidth</strong> is set to <strong id="b20172226195518"><a name="b20172226195518"></a><a name="b20172226195518"></a>720</strong>, then 1lpx is equal to 2px for a screen with an actual width of 1440 physical pixels.</p>
-</td>
-</tr>
-</tbody>
-</table>
 
-## Pixel Unit Conversion<a name="section43478451141"></a>
+  | Name | Description | 
+| -------- | -------- |
+| px | Physical pixel unit of the screen. | 
+| vp | Pixels specific to the screen density, which are converted into physical pixels of the screen based on the screen pixel density. | 
+| 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](ts-framework-js-tag.md)). For example, if designWidth is set to 720, then 1lpx is equal to 2px for a screen with an actual width of 1440 physical pixels. | 
+
+
+## Pixel Unit Conversion
 
 Conversion from other pixel units to px is supported.
 
-<a name="table16548143615916"></a>
-<table><thead align="left"><tr id="row175481036794"><th class="cellrowborder" valign="top" width="35.69%" id="mcps1.1.3.1.1"><p id="p14548123614910"><a name="p14548123614910"></a><a name="p14548123614910"></a>API</p>
-</th>
-<th class="cellrowborder" valign="top" width="64.31%" id="mcps1.1.3.1.2"><p id="p11548183618912"><a name="p11548183618912"></a><a name="p11548183618912"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row75487361090"><td class="cellrowborder" valign="top" width="35.69%" headers="mcps1.1.3.1.1 "><p id="p05483367914"><a name="p05483367914"></a><a name="p05483367914"></a>vp2px(value : number) : number</p>
-</td>
-<td class="cellrowborder" valign="top" width="64.31%" headers="mcps1.1.3.1.2 "><p id="p6239203321019"><a name="p6239203321019"></a><a name="p6239203321019"></a>Converts a value in units of vp to a value in units of px.</p>
-</td>
-</tr>
-<tr id="row0770112219335"><td class="cellrowborder" valign="top" width="35.69%" headers="mcps1.1.3.1.1 "><p id="p177017220331"><a name="p177017220331"></a><a name="p177017220331"></a>px2vp(value : number) : number</p>
-</td>
-<td class="cellrowborder" valign="top" width="64.31%" headers="mcps1.1.3.1.2 "><p id="p8770192212335"><a name="p8770192212335"></a><a name="p8770192212335"></a>Converts a value in units of px to a value in units of vp.</p>
-</td>
-</tr>
-<tr id="row15951172693314"><td class="cellrowborder" valign="top" width="35.69%" headers="mcps1.1.3.1.1 "><p id="p15951102643316"><a name="p15951102643316"></a><a name="p15951102643316"></a>fp2px(value : number) : number</p>
-</td>
-<td class="cellrowborder" valign="top" width="64.31%" headers="mcps1.1.3.1.2 "><p id="p995152643319"><a name="p995152643319"></a><a name="p995152643319"></a>Converts a value in units of fp to a value in units of px.</p>
-</td>
-</tr>
-<tr id="row83152033153314"><td class="cellrowborder" valign="top" width="35.69%" headers="mcps1.1.3.1.1 "><p id="p231503317331"><a name="p231503317331"></a><a name="p231503317331"></a>px2fp(value : number) : number</p>
-</td>
-<td class="cellrowborder" valign="top" width="64.31%" headers="mcps1.1.3.1.2 "><p id="p143158337338"><a name="p143158337338"></a><a name="p143158337338"></a>Converts a value in units of px to a value in units of fp.</p>
-</td>
-</tr>
-<tr id="row1619816394331"><td class="cellrowborder" valign="top" width="35.69%" headers="mcps1.1.3.1.1 "><p id="p121981939173310"><a name="p121981939173310"></a><a name="p121981939173310"></a>lpx2px(value : number) : number</p>
-</td>
-<td class="cellrowborder" valign="top" width="64.31%" headers="mcps1.1.3.1.2 "><p id="p819843963311"><a name="p819843963311"></a><a name="p819843963311"></a>Converts a value in units of lpx to a value in units of px.</p>
-</td>
-</tr>
-<tr id="row955964320338"><td class="cellrowborder" valign="top" width="35.69%" headers="mcps1.1.3.1.1 "><p id="p35591243143310"><a name="p35591243143310"></a><a name="p35591243143310"></a>px2lpx(value : number) : number</p>
-</td>
-<td class="cellrowborder" valign="top" width="64.31%" headers="mcps1.1.3.1.2 "><p id="p14559343153314"><a name="p14559343153314"></a><a name="p14559343153314"></a>Converts a value in units of px to a value in units of lpx.</p>
-</td>
-</tr>
-</tbody>
-</table>
+  | API | Description | 
+| -------- | -------- |
+| vp2px(value : number) : number | Converts a value in units of vp to a value in units of px. | 
+| px2vp(value : number) : number | Converts a value in units of px to a value in units of vp. | 
+| fp2px(value : number) : number | Converts a value in units of fp to a value in units of px. | 
+| px2fp(value : number) : number | Converts a value in units of px to a value in units of fp. | 
+| lpx2px(value : number) : number | Converts a value in units of lpx to a value in units of px. | 
+| px2lpx(value : number) : number | Converts a value in units of px to a value in units of lpx. | 
+
+
+## Example
 
-## Example<a name="section208264919153"></a>
   
 ```
 @Entry
@@ -121,5 +72,4 @@ struct Example {
 }
 ```
 
-![](figures/pixel-unit.gif)
-
+![en-us_image_0000001267607893](figures/en-us_image_0000001267607893.gif)

en/application-dev/ui/ts-rending-control-syntax-foreach.md

-# ForEach<a name="EN-US_TOPIC_0000001110788996"></a>
+# ForEach
+
+
+The development framework provides ForEach to iterate arrays and create components for each array item. ForEach is defined as follows:
+
 
-The development framework provides  **ForEach**  to iterate arrays and create components for each array item.  **ForEach**  is defined as follows:
   
 ```
 ForEach(
@@ -10,28 +13,48 @@ ForEach(
 )
 ```
 
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->-   Loop rendering uses  **ForEach**  to automatically generate child components from the provided array.
->-   **ForEach**  must be used in container components.
->-   The first parameter must be an array. An empty array is allowed. If an array is empty, no child component is created. You can set the functions whose return values are of the array type, for example,  **arr.slice \(1, 3\)**. The set functions cannot change any state variables including the array itself, such as  **Array.splice**,  **Array.sort**, and  **Array.reverse**.
->-   The second parameter is used to generate the lambda function of the child components. It generates one or more child components for a given array item. A single component and its child component list must be contained in the braces \(\{...\}\).
->-   The third parameter is optional and used as an anonymous function for key value generation. It generates a unique and stable key value for a given array item. When the position of a subitem in the array is changed, the key value of the subitem cannot be changed. When a subitem in the array is replaced with a new item, the key value of the current item must be different from the key value of the new item. The key-value generator is optional. However, for performance reasons, it is strongly recommended that the generator be provided, so that the development framework can better identify array changes. If the array is reversed while no key-value generator is provided, all nodes in  **ForEach**  will be rebuilt.
->-   The generated child components must be allowed in the parent container component of  **ForEach**. The child component generator function can contain the  **if/else**  conditional statement. In addition,  **ForEach**  can be contained in the  **if/else**  conditional statement.
->-   The calling sequence of subitem generator functions may be different from that of the data items in the array. During the development, do not assume whether the subitem generator and key value generator functions are executed and the execution sequence. The following is an example of incorrect usage:
+
+## ForEach
+
+
+ForEach(arr: any[],itemGenerator: (item: any, index?: number) => void, keyGenerator?: (item: any, index?: number) => string):void
+
+
+  Table1 Parameters
+
+| Name | Type | Mandatory | Default Value | Description | 
+| -------- | -------- | -------- | -------- | -------- |
+| arr | any[] | Yes | - | Must be an array. An empty array is allowed. If an array is empty, no child component is created. You can set the functions whose return values are of the array type, for example, arr.slice (1, 3). The set functions cannot change any state variables including the array itself, such as Array.splice, Array.sort, and Array.reverse. | 
+| itemGenerator | (item: any, index?: number) => void | Yes | - | Used to generate the lambda function of the child components. It generates one or more child components for a given array item. A single component and its child component list must be contained in braces ({...}) | 
+| keyGenerator | (item: any, index?: number) => string | No | - | Used as an anonymous parameter for generating a unique and stable key value for a given array item. When the position of a subitem in the array is changed, the key value of the subitem cannot be changed. When a subitem in the array is replaced with a new item, the key value of the current item must be different from that of the new item. This key-value generator is optional. However, for performance reasons, it is strongly recommended that the key-value generator be provided, so that the development framework can better identify array changes. If the array is reversed while no key-value generator is provided, all nodes in ForEach will be rebuilt. | 
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> - ForEach must be used in container components.
+> 
+> - The generated child components are allowed in the parent container component of ForEach. The child component generator function can contain the if/else conditional statement, and the if/else conditional statement can contain ForEach.
+> 
+> - The calling sequence of subitem generator functions may be different from that of the data items in the array. During the development, do not assume whether the subitem generator and key value generator functions are executed and the execution sequence. The following is an example of incorrect usage:
+>     
 >   ```
 >   ForEach(anArray, item => {Text(`${++counter}. item.label`)})
 >   ```
+> 
 >   Below is an example of correct usage:
+> 
+>     
 >   ```
 >   ForEach(anArray.map((item1, index1) => { return { i: index1 + 1, data: item1 }; }), 
 >           item => Text(`${item.i}. item.data.label`),
 >           item => item.data.id.toString())
 >   ```
 
-## Example<a name="section155489126613"></a>
+
+## Example
 
 The following is an example of a simple-type array:
 
+  
 ```
 @Entry
 @Component
@@ -57,7 +80,7 @@ struct MyComponent {
 }
 ```
 
-The following is an example of a complex-type array:
+  The following is an example of a complex-type array:
   
 ```
 class Month {
@@ -121,4 +144,3 @@ struct Calendar1 {
   }
 }
 ```
-

en/application-dev/ui/ts-rending-control-syntax-if-else.md

-# if/else<a name="EN-US_TOPIC_0000001110948888"></a>
+# if/else
 
-Use  **if/else**  for conditional rendering.
 
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->-   State variables can be used in the  **if**  conditional statement.
->-   You can use the  **if**  conditional statement to implement rendering of child components.
->-   The  **if**  conditional statement must be used in container components.
->-   Some container components limit the type or number of child components. When  **if**  is placed in these components, the limitation applies to components created in  **if**  and  **else**  statements. For example, when  **if**  is used in the  **<Grid\>**  component, only the  **<GridItem\>**  component can be used in the  **if**  conditional statement, and only the  **<ListItem\>**  component can be used in the  **<List\>**  component.
+Use if/else for conditional rendering.
 
-## Example<a name="section917781203210"></a>
 
-Example of using the  **if**  conditional statement:
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> - State variables can be used in the if conditional statement.
+> 
+> - You can use the if conditional statement to implement rendering of child components.
+> 
+> - The if conditional statement must be used in container components.
+> 
+> - Some container components limit the type or number of child components. When if is placed in these components, the limitation applies to components created in if and else statements. For example, when if is used in the &lt;Grid&gt; component, whose child components can only be &lt;GridItem&gt;, only the &lt;GridItem> component can be used in the if conditional statement.
+
+
+## Example
+
+Example of using the if conditional statement:
+
 
 ```
 Column() {
@@ -20,7 +27,10 @@ Column() {
 }
 ```
 
-Example of using the  **if**,  **else if**, and  **else**  conditional statements:
+
+Example of using the if, else if, and else conditional statements:
+
+
 
 ```
 Column() {
@@ -35,4 +45,3 @@ Column() {
     }
 }
 ```
-

en/application-dev/ui/ts-rending-control-syntax-lazyforeach.md

-# LazyForEach<a name="EN-US_TOPIC_0000001136122422"></a>
+# LazyForEach
+
+
+The development framework provides LazyForEach to iterate data from provided data sources and create corresponding components during each iteration. LazyForEach is defined as follows:
+
 
-The development framework provides the  **LazyForEach**  component to iterate data as required and create corresponding components during each iteration.  **LazyForEach**  is defined as follows:
 
 ```
+LazyForEach(
+    dataSource: IDataSource,             // Data source to be iterated 
+    itemGenerator: (item: any) => void,  // child component generator
+    keyGenerator?: (item: any) => string // (optional) Unique key generator, which is recommended.
+): void
+
+interface IDataSource {
+    totalCount(): number;                                             // Get total count of data
+    getData(index: number): any;                                      // Get single data by index
+    registerDataChangeListener(listener: DataChangeListener): void;   // Register listener to listening data changes
+    unregisterDataChangeListener(listener: DataChangeListener): void; // Unregister listener
+}
+
 interface DataChangeListener {
     onDataReloaded(): void;                      // Called while data reloaded
     onDataAdded(index: number): void;            // Called while single data added
@@ -10,42 +26,75 @@ interface DataChangeListener {
     onDataDeleted(index: number): void;          // Called while single data deleted
     onDataChanged(index: number): void;          // Called while single data changed
 }
-interface IDataSource {
-    totalCount(): number;                                             // Get total count of data
-    getData(index: number): any;                                      // Get single data by index
-    registerDataChangeListener(listener: DataChangeListener): void;   // Register listener to listening data changes
-    unregisterDataChangeListener(listener: DataChangeListener): void; // Unregister listener
-}
-LazyForEach(
-    dataSource: IDataSource,             // Data source to be iterated 
-    itemGenerator: (item: any) => void,  // child component generator
-    keyGenerator?: (item: any) => string // (optional) Unique key generator, which is recommended.
-): void
 ```
 
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->-   When data is updated through  **onDataChanged**  of  **LazyForEach**, if  **itemGenerator**  contains a fully static view \(that is, the view does not contain state variables\), the view will not be updated.
->-   **LazyForEach**  is used to automatically generate child components from the provided data source.
->-   **LazyForEach**  must be used in the container component. Only the  **<List\>**,  **<Grid\>**, and  **<Swiper\>**  components support on-demand data loading \(that is, only the visible part and a small amount of data before and after the visible part are loaded for caching\). For other components, all data is loaded at a time.
->-   The first parameter must be an object inherited from  **IDataSource**. You need to implement related APIs.
->-   The second parameter is used to generate the lambda function of the child components. It generates one or more child components for a given array item. A single component and its child component list must be contained in the braces \(\{...\}\).
->-   The third parameter is optional and used as an anonymous function for key value generation. It generates a unique and stable key value for a given array item. When the position of a subitem in the array is changed, the key value of the subitem cannot be changed. When a subitem in the array is replaced with a new item, the key value of the current item must be different from the key value of the new item. The key-value generator is optional. However, for performance reasons, it is strongly recommended that the generator be provided, so that the development framework can better identify array changes. If the array is reversed while no key-value generator is provided, all nodes in  **ForEach**  will be rebuilt.
->-   The generated child component must be allowed in the parent container component of  **LazyForEach**, so that  **LazyForEach**  can be included in the  **if/else**  conditional statement.
->-   **LazyForEach**  must create one and only one child component in each iteration.
->-   **ForEach**  cannot be used as a child component of  **LazyForEach**, and  **LazyForEach**  does not support nesting.
->-   The  **if/else**  conditional statement is not allowed in  **LazyForEach**.
->-   The calling sequence of the subitem generator function may be different from that of the data items in the data source. During the development, do not assume whether the subitem generator and key value generator functions are executed and the execution sequence. The following is an example of incorrect usage:
+
+## APIs
+
+
+### LazyForEach
+
+LazyForEach(dataSource: IDataSource, itemGenerator: (item: any) => void, keyGenerator?: (item: any) => string):void
+
+  Table1 Parameters
+
+| Name | Type | Mandatory | Default Value | Description |
+| -------- | -------- | -------- | -------- | -------- |
+| dataSource | IDataSource | Yes | - | Object used to implement the IDataSource API. You need to implement related APIs. |
+| itemGenerator | (item: any) => void | Yes | - | Used to generate the lambda function of the child components. It generates one or more child components for a given array item. A single component and its child component list must be contained in the braces ({...}) |
+| keyGenerator | (item: any) => string | No | - | Used as an anonymous parameter for generating a unique and stable key value for a given array item. When the position of a subitem in the array is changed, the key value of the subitem cannot be changed. When a subitem in the array is replaced with a new item, the key value of the current item must be different from that of the new item. This key-value generator is optional. However, for performance reasons, it is strongly recommended that the key-value generator be provided, so that the development framework can better identify array changes. If the array is reversed while no key-value generator is provided, all nodes in LazyForEach will be rebuilt. |
+
+
+  Table2 Description of IDataSource
+
+| Name | Description |
+| -------- | -------- |
+| totalCount(): number | Obtains the total number of data records. |
+| getData(index: number): any | Obtains the data corresponding to the specified index. |
+| registerDataChangeListener(listener: DataChangeListener): void | Registers the data change listener. |
+| unregisterDataChangeListener(listener: DataChangeListener): void | Unregisters the data change listener. |
+
+
+  Table3 Description of DataChangeListener
+
+| Name | Description | 
+| -------- | -------- |
+| onDataReloaded(): void | Reloads all data. | 
+| onDataAdded(index: number): void | Notifies the component that data is added to the position indicated by the specified index. | 
+| onDataMoved(from: number, to: number): void | Notifies the component that data is moved from the from position to the to position. | 
+| onDataDeleted(index: number): void | Notifies the component that data is deleted from the position indicated by the specified index. | 
+| onDataChanged(index: number): void | Notifies the component that data in the position indicated by the specified index is changed. | 
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> - LazyForEach must be used in the container component. Only the &lt;List&gt;, &lt;Grid&gt;, and &lt;Swiper&gt; components support LazyForEach (that is, only the visible part and a small amount of data before and after the visible part are loaded for caching). For other components, all data is loaded at a time.
+> 
+> - LazyForEach must create one and only one child component in each iteration.
+> 
+> - The generated child component must be in the parent container component of LazyForEach.
+> 
+> - LazyForEach can be included in an if/else conditional statement, but cannot contain an if/else conditional statement.
+> 
+> - For the purpose of high-performance rendering, when the onDataChanged method of the DataChangeListener object is used to update the UI, the component update is triggered only when the state variable is used in the component specified in the UI description of itemGenerator.
+> 
+> - The calling sequence of the subitem generator function may be different from that of the data items in the data source. During the development, do not assume whether the subitem generator and key value generator functions are executed and the execution sequence. The following is an example of incorrect usage:
+>     
 >   ```
->    ForEach(dataSource, item => {Text(`${++counter}. item.label`)})
+>   LazyForEach(dataSource, item => {Text(`${++counter}. item.label`)})
 >   ```
+> 
 >   Below is an example of correct usage:
+> 
+>     
 >   ```
->    ForEach(dataSource, 
+>   LazyForEach(dataSource, 
 >           item => Text(`${item.i}. item.data.label`)),
 >           item => item.data.id.toString())
 >   ```
 
-## Example<a name="section155489126613"></a>
+
+## Example
+
 
 ```
 // Basic implementation of IDataSource to handle data listener
@@ -141,4 +190,3 @@ struct MyComponent {
     }
 }
 ```
-

en/application-dev/ui/ts-rending-control-syntax.md

-# About Rendering Control Syntax<a name="EN-US_TOPIC_0000001110788982"></a>
-
--   **[if/else](ts-rending-control-syntax-if-else.md)**  
-
--   **[ForEach](ts-rending-control-syntax-foreach.md)**  
-
--   **[LazyForEach](ts-rending-control-syntax-lazyforeach.md)**  
-
-

en/application-dev/ui/ts-resource-access.md

-# Resource Access<a name="EN-US_TOPIC_0000001135683834"></a>
-
--   **[Accessing Application Resources](ts-application-resource-access.md)**  
-
--   **[Media Resource Types](ts-media-resource-type.md)**  
-
-

en/application-dev/ui/ts-restrictions-for-generators.md

-# Restrictions on Using TypeScript for Generators<a name="EN-US_TOPIC_0000001110789000"></a>
-
-TypeScript has the following restrictions on generators:
-
--   Expressions can be used only in character strings \($\{expression\}\),  **if**  conditions,  **ForEach**  parameters, and component parameters.
--   No expressions should cause any application state variables \(**@State**,  **@Link**, and  **@Prop**\) to change. Otherwise, undefined and potentially unstable framework behavior may occur.
--   You can use  **console.log**  in the first line of the generator function body so that you can track component re-rendering more easily. Expressions in the log character strings also comply with the preceding restrictions.
--   The generator function cannot contain local variables.
-
-None of the above restrictions apply to anonymous function implementations of event-handling functions \(such as  **onClick**\) and to the rest of the UI component description.
-
-Incorrect:
-
-```
-build() {
-    let a: number = 1 // invalid: variable declaration not allowed
-    console.log(`a: ${a}`) // invalid: console.log only allowed in first line of build
-    Column() {
-        Text('Hello ${this.myName.toUpperCase()}') // ok.
-        ForEach(this.arr.reverse(), ..., ...) // invalid: Array.reverse modifies the @State array varible in place
-    }
-    buildSpecial()  // invalid: no function calls
-    Text(this.calcTextValue()) // this function call is ok.
-}
-```
-

en/application-dev/ui/ts-syntactic-sugar-chaining.md

-# Chain Call<a name="EN-US_TOPIC_0000001110788988"></a>
-
-You can configure the UI structure and its attributes and events and separate them with a dot\(.\) to implement chain call.
-
-```
-Column() {
-    Image('1.jpg')
-        .alt('error.jpg')
-        .width(100)
-        .height(100)
-}.padding(10)
-```
-

en/application-dev/ui/ts-syntactic-sugar-decorator.md

-# @Decorator<a name="EN-US_TOPIC_0000001110948902"></a>
-
-**@Decorator**  can be applied to variable declarations, class definitions, structure definitions, or method definitions.
-
-Multiple decorator implementations can be superimposed on the target element and written on the same line or multiple lines. It is recommended that the implementation be written on multiple lines.
-
-In the example below, the elements decorated by  **@Component**  take on the form of a component, and the variables decorated by  **@State**  have the meaning of state data.
-
-```
-@Component
-struct MyComponent {
-    @State count: number = 0
-}
-```
-
-Multiple decorator implementations can be written on the same line.
-
-```
-@Entry @Component struct MyComponent {
-}
-```
-
-However, you are advised to write the decorator implementations on multiple lines.
-
-```
-@Entry
-@Component
-struct MyComponent {
-}
-```
-
-## Supported Decorators<a name="section5500155514324"></a>
-
-<a name="table1571mcpsimp"></a>
-<table><thead align="left"><tr id="row1577mcpsimp"><th class="cellrowborder" valign="top" width="13.16%" id="mcps1.1.4.1.1"><p id="p1579mcpsimp"><a name="p1579mcpsimp"></a><a name="p1579mcpsimp"></a>Decorator</p>
-</th>
-<th class="cellrowborder" valign="top" width="23.96%" id="mcps1.1.4.1.2"><p id="p1581mcpsimp"><a name="p1581mcpsimp"></a><a name="p1581mcpsimp"></a>Decorates...</p>
-</th>
-<th class="cellrowborder" valign="top" width="62.88%" id="mcps1.1.4.1.3"><p id="p1583mcpsimp"><a name="p1583mcpsimp"></a><a name="p1583mcpsimp"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row1584mcpsimp"><td class="cellrowborder" valign="top" width="13.16%" headers="mcps1.1.4.1.1 "><p id="p1586mcpsimp"><a name="p1586mcpsimp"></a><a name="p1586mcpsimp"></a>@Component</p>
-</td>
-<td class="cellrowborder" valign="top" width="23.96%" headers="mcps1.1.4.1.2 "><p id="p1588mcpsimp"><a name="p1588mcpsimp"></a><a name="p1588mcpsimp"></a>struct</p>
-</td>
-<td class="cellrowborder" valign="top" width="62.88%" headers="mcps1.1.4.1.3 "><p id="p1590mcpsimp"><a name="p1590mcpsimp"></a><a name="p1590mcpsimp"></a>The decorated structure has the component-based capability. The <strong id="b151410144016"><a name="b151410144016"></a><a name="b151410144016"></a>build</strong> method must be implemented to update the UI.</p>
-</td>
-</tr>
-<tr id="row1591mcpsimp"><td class="cellrowborder" valign="top" width="13.16%" headers="mcps1.1.4.1.1 "><p id="p1593mcpsimp"><a name="p1593mcpsimp"></a><a name="p1593mcpsimp"></a>@Entry</p>
-</td>
-<td class="cellrowborder" valign="top" width="23.96%" headers="mcps1.1.4.1.2 "><p id="p12728164243518"><a name="p12728164243518"></a><a name="p12728164243518"></a>struct</p>
-</td>
-<td class="cellrowborder" valign="top" width="62.88%" headers="mcps1.1.4.1.3 "><p id="p1597mcpsimp"><a name="p1597mcpsimp"></a><a name="p1597mcpsimp"></a>The decorated component is used as the entry of a page. The component is rendered and displayed when the page is loaded.</p>
-</td>
-</tr>
-<tr id="row1598mcpsimp"><td class="cellrowborder" valign="top" width="13.16%" headers="mcps1.1.4.1.1 "><p id="p1600mcpsimp"><a name="p1600mcpsimp"></a><a name="p1600mcpsimp"></a>@State</p>
-</td>
-<td class="cellrowborder" valign="top" width="23.96%" headers="mcps1.1.4.1.2 "><p id="p1602mcpsimp"><a name="p1602mcpsimp"></a><a name="p1602mcpsimp"></a>Primitive types, classes, and arrays</p>
-</td>
-<td class="cellrowborder" valign="top" width="62.88%" headers="mcps1.1.4.1.3 "><p id="p1604mcpsimp"><a name="p1604mcpsimp"></a><a name="p1604mcpsimp"></a>If the decorated state data is modified, the <strong id="b9877114516116"><a name="b9877114516116"></a><a name="b9877114516116"></a>build</strong> method of the component will be called to update the UI.</p>
-</td>
-</tr>
-<tr id="row1605mcpsimp"><td class="cellrowborder" valign="top" width="13.16%" headers="mcps1.1.4.1.1 "><p id="p1607mcpsimp"><a name="p1607mcpsimp"></a><a name="p1607mcpsimp"></a>@Prop</p>
-</td>
-<td class="cellrowborder" valign="top" width="23.96%" headers="mcps1.1.4.1.2 "><p id="p1609mcpsimp"><a name="p1609mcpsimp"></a><a name="p1609mcpsimp"></a>Primitive types</p>
-</td>
-<td class="cellrowborder" valign="top" width="62.88%" headers="mcps1.1.4.1.3 "><p id="p1611mcpsimp"><a name="p1611mcpsimp"></a><a name="p1611mcpsimp"></a>The modified state data is used to establish a unidirectional data dependency between the parent component and the child component. When the data associated with the parent component is modified, the UI of the current component is updated.</p>
-</td>
-</tr>
-<tr id="row1612mcpsimp"><td class="cellrowborder" valign="top" width="13.16%" headers="mcps1.1.4.1.1 "><p id="p1614mcpsimp"><a name="p1614mcpsimp"></a><a name="p1614mcpsimp"></a>@Link</p>
-</td>
-<td class="cellrowborder" valign="top" width="23.96%" headers="mcps1.1.4.1.2 "><p id="p1616mcpsimp"><a name="p1616mcpsimp"></a><a name="p1616mcpsimp"></a>Primitive types, classes, and arrays</p>
-</td>
-<td class="cellrowborder" valign="top" width="62.88%" headers="mcps1.1.4.1.3 "><p id="p1618mcpsimp"><a name="p1618mcpsimp"></a><a name="p1618mcpsimp"></a>This decorator is used for two-way binding between the parent component and the child component. The internal state data of the parent component is used as the data source. Any changes made to one component will be reflected to the other.</p>
-</td>
-</tr>
-</tbody>
-</table>
-

en/application-dev/ui/ts-syntactic-sugar-struct.md

-# struct<a name="EN-US_TOPIC_0000001157388847"></a>
-
-Components can be implemented based on  **struct**s. Components cannot inherit from each other. The  **struct**s implemented components can be created and destroyed more quickly than  **class**  implemented components.
-
-```
-@Component
-struct MyComponent {
-    @State data: string = ''
-
-    build() {
-    }
-}
-```
-

en/application-dev/ui/ts-syntactic-sugar.md

-# About Syntactic Sugar<a name="EN-US_TOPIC_0000001157228877"></a>
+# About Syntactic Sugar
 
--   **[@Decorator](ts-syntactic-sugar-decorator.md)**  
 
--   **[Chain Call](ts-syntactic-sugar-chaining.md)**  
+## Decorators
 
--   **[struct](ts-syntactic-sugar-struct.md)**  
+A decorator @Decorator can decorate a class, structure, or class attribute. Multiple decorators can be applied to the same target element and defined on a single line or multiple lines. It is recommended that the decorators be defined on multiple lines.
 
--   **[Instantiating a struct Without the new Keyword](ts-instantiating-a-struct-without-new-keyword.md)**  
+In the example below, the elements decorated by @Component take on the form of a component, and the variables decorated by @State can be used to represent states.
 
--   **[Using a Separate Line for New Component](ts-using-a-separate-line-for-new-component.md)**  
 
--   **[Restrictions on Using TypeScript for Generators](ts-restrictions-for-generators.md)**  
+```
+@Component
+struct MyComponent {
+    @State count: number = 0
+}
+```
 
+Multiple decorators can be defined on a single line, as shown below:
+
+
+```
+@Entry @Component struct MyComponent {
+}
+```
+
+However, you are advised to define the decorators on multiple lines, as shown below:
+
+
+```
+@Entry
+@Component
+struct MyComponent {
+}
+```
+
+
+### Supported Decorators
+
+  | Decorator | Decorates... | Description | 
+| -------- | -------- | -------- |
+| @Component | struct | The decorated structure has the component-based capability. The build method must be implemented to update the UI. | 
+| @Entry | struct | The decorated component is used as the entry of a page. The component is rendered and displayed when the page is loaded. | 
+| @Preview | struct | Custom components decorated by @Preview can be previewed in the Previewer of DevEco Studio. When the page is loaded, the custom components decorated by @Preview are created and displayed. | 
+| @Builder | Methods | In the decorated method, you can use the declarative UI description to quickly generate multiple layouts in a custom component. | 
+| @Extend | Methods | This decorator adds new attribute functions to a preset component, allowing you to quickly define and reuse the custom style of the component. | 
+| @CustomDialog | struct | This decorator is used to decorate custom pop-up dialog boxes. | 
+| @State | Primitive data types, classes, and arrays | If the decorated state data is modified, the build method of the component will be called to update the UI. | 
+| @Prop | Primitive data types | This decorator is used to establish one-way data binding between the parent and child components. When the data associated with the parent component is modified, the UI of the current component is updated. | 
+| @Link | Primitive data types, classes, and arrays | This decorator is used to establish two-way data binding between the parent and child components. The internal state data of the parent component is used as the data source. Any changes made to one component will be reflected to the other. | 
+| @Observed | Classes | This decorator is used to indicate that the data changes in the class will be managed by the UI page. | 
+| @ObjectLink | Objects of @Observed decorated classes | When the decorated state variable is modified, the parent and sibling components that have the state variable will be notified for UI re-rendering. | 
+| @Consume | Primitive data types, classes, and arrays | When the @Consume decorated variable detects the update of the @Provide decorated variable, the re-rendering of the current custom component is triggered. | 
+| @Provide | Primitive data types, classes, and arrays | As the data provider, @Provide can update the data of child nodes and trigger page rendering. | 
+| @Watch | Variables decorated by @State, @Prop, @Link, @ObjectLink, @Provide, @Consume, @StorageProp, or @StorageLink | This decorator is used to listen for the changes of the state variables. The application can register a callback method through @Watch. | 
+
+
+## Chain Call
+
+You can configure the UI structure and its attributes and events and separate them with a dot(.) to implement chain call.
+
+
+```
+Column() {
+    Image('1.jpg')
+        .alt('error.jpg')
+        .width(100)
+        .height(100)
+}.padding(10)
+```
+
+
+## struct
+
+Components can be implemented based on structs. Components cannot inherit from each other. The structs implemented components can be created and destroyed more quickly than class implemented components.
+
+
+```
+@Component
+struct MyComponent {
+    @State data: string = ''
+
+    build() {
+    }
+}
+```
+
+
+## Instantiating a struct Without the new Keyword
+
+You can omit the new keyword when instantiating a struct.
+
+
+```
+// Definition
+@Component
+struct MyComponent {
+    build() {
+    }
+}
+
+// Use
+Column() {
+    MyComponent()
+}
+
+// Equivalent to
+new Column() {
+    new MyComponent()
+}
+```
+
+
+## Restrictions on Using TypeScript in Generators
+
+TypeScript has the following restrictions on generators:
+
+- Expressions can be used only in character strings (${expression}), if conditions, ForEach parameters, and component parameters.
+
+- No expressions should cause any application state variables (@State, @Link, and @Prop) to change. Otherwise, undefined and potentially unstable framework behavior may occur.
+
+- The generator function cannot contain local variables.
+
+None of the above restrictions apply to anonymous function implementations of event-handling functions (such as onClick)
+
+Incorrect:
+
+
+```
+build() {
+    let a: number = 1 // invalid: variable declaration not allowed
+    Column() {
+        Text('Hello ${this.myName.toUpperCase()}') // ok.
+        ForEach(this.arr.reverse(), ..., ...) // invalid: Array.reverse modifies the @State array varible in place
+    }
+    buildSpecial()  // invalid: no function calls
+    Text(this.calcTextValue()) // this function call is ok.
+}
+```
+
+## $$
+
+$$ supports two-way binding for simple variables and @State, @Link, and @Prop decorated variables.
+
+Currently, $$ supports only the rendering between the show parameter of the bindPopup attribute and the @State decorated variable, and the checked attribute of the <Radio> component.
+
+```
+@Entry
+@Component
+struct bindPopup {
+	@State customPopup: boolean = false
+	build() {
+		Column() {
+			Button(){
+				Text('Popup')
+			}
+			.onClick(()=>{
+				this.customPopup = !this.customPopup
+			})
+			.bindPopup(
+				$$this.customPopup, {
+					message: "showPopup"
+				}
+			)
+		}
+	}
+}
+```
 

en/application-dev/ui/ts-syntax-intro.md

-# Overview<a name="EN-US_TOPIC_0000001110948892"></a>
+# Overview
+
 
 This section defines the core mechanism and functions of the TypeScript-based declarative development paradigm. It acquaints you with the declarative UI descriptions, componentization mechanisms, UI state management, rendering control syntax, and syntactic sugar.
 
-Follow the provided guidelines for UI development. For details about the components, see  [Components](../reference/arkui-js/js-components.md).
 
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->-   All examples use the TypeScript \(TS\) language. If you are using another language, comply with the syntax requirements for that language.
->-   The components used in the examples are preset in the UI framework and are used only to explain the UI description specifications.
->-   Universal attribute and event methods generally apply to all components, and the attribute and event methods within a component apply only to this component.
+Follow the provided guidelines for UI development. For details about the components, see components.
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> - All examples use the TypeScript (TS) language. If you are using another language, comply with the syntax requirements for that language.
+> 
+> - The components used in the examples are preset in the UI framework and are used only to explain the UI description specifications.
+> 
+> - Universal attribute and event methods generally apply to all components, and the attribute and event methods within a component apply only to this component.
 

en/application-dev/ui/ts-system-resource-access.md

@@ -4,7 +4,7 @@
 System resources include colors, rounded corners, fonts, spacing, character strings, and images. By using system resources, you can develop different applications with the same visual style.
 
 
-To reference a system resource, use the **"$r('sys.type.resource_id')"** format. Wherein: **sys** indicates a system resource; **type** indicates the resource type, which can be **color**, **float**, **string**, or **media**; **resource_id** indicates the resource ID, which is determined when the system resource is provided. For details about available system resource IDs.
+To reference a system resource, use the "$r('sys.type.resource_id')" format. Wherein: sys indicates a system resource; type indicates the resource type, which can be color, float, string, or media; resource_id indicates the resource ID, which is determined when the system resource is provided. For details about available system resource IDs.
 
 ```
 Text('Hello')

en/application-dev/ui/ts-types.md

@@ -4,33 +4,33 @@
 
 | Name| Type| Description|
 | -------- | -------- | -------- |
-| Length | string \| number | Length unit. If the input is a number, use **vp**. If the input is a string, explicitly specify the unit, for example, **'10px'**, or specify the length in percentage, for example, **'100%'**.|
+| Length | string \| number | Length unit. If the input is a number, use vp. If the input is a string, explicitly specify the unit, for example, '10px', or specify the length in percentage, for example, '100%'.|
 
 
 ## Angle Type
 
 | Name| Type| Description|
 | -------- | -------- | -------- |
-| Angle | string&nbsp;\|&nbsp;number | Angle unit. If the input is a number, use **deg**. If the input is a string, use either of the following angle units:<br>-&nbsp;**deg**: for example, **'100deg'**<br>-&nbsp;**rad**: for example, **'3.14rad'** |
+| Angle | string \| number | Angle unit. If the input is a number, use deg. If the input is a string, use either of the following angle units:<br>- deg: for example, '100deg'<br>- rad: for example, '3.14rad' |
 
 
 ## Point Type
 
 | Name| Type| Description|
 | -------- | -------- | -------- |
-| Point | [Length,&nbsp;Length] | Coordinates of a point. The first value is the x-axis coordinate, and the second value is the y-axis coordinate.|
+| Point | [Length, Length] | Coordinates of a point. The first value is the x-axis coordinate, and the second value is the y-axis coordinate.|
 
 
 ## Color Type
 
-The **Color** type used by component attribute methods is described as follows:
+The Color type used by component attribute methods is described as follows:
 
 | Name| Type| Description|
 | -------- | -------- | -------- |
-| Color | string&nbsp;\|&nbsp;number&nbsp;\|&nbsp;Color | Color information. If the input is a string, use **rgb** or **rgba** to specify the color. If the input is a number, use Hex format to specify the color. If the input is a **Color** enum, use a color value to specify the color.<br>-&nbsp;'rgb(255,&nbsp;255,&nbsp;255)'<br>-&nbsp;'rgba(255,&nbsp;255,&nbsp;255,&nbsp;1.0)'<br>-&nbsp;Hex format: 0xrrggbb, 0xaarrggbb, '\#FFFFFF'<br>-&nbsp;Enum: Color.Black, Color.White |
+| Color | string \| number \| Color | Color information. If the input is a string, use rgb or rgba to specify the color. If the input is a number, use Hex format to specify the color. If the input is a Color enum, use a color value to specify the color.<br>- 'rgb(255, 255, 255)'<br>- 'rgba(255, 255, 255, 1.0)'<br>- Hex format: 0xrrggbb, 0xaarrggbb, '\#FFFFFF'<br>- Enum: Color.Black, Color.White |
 
 
-The supported **Color** enums are described as follows:
+The supported Color enums are described as follows:
 
 
 | Color| Value| Illustration|
@@ -49,60 +49,60 @@ The supported **Color** enums are described as follows:
 
 ## ColorStop Type
 
-**ColorStop** is used to describe the progressive color stop.
+ColorStop is used to describe the progressive color stop.
 
 | Name| Type| Description|
 | -------- | -------- | -------- |
-| ColorStop | [Color,&nbsp;number] | Type of the progressive color stop. The first parameter specifies the color value, and the second parameter specifies the ratio of 0 to 1.|
+| ColorStop | [Color, number] | Type of the progressive color stop. The first parameter specifies the color value, and the second parameter specifies the ratio of 0 to 1.|
 
 
 ## Resource Type
 
-The **Resource** type is used to reference resources for setting the value of a component attribute.
+The Resource type is used to reference resources for setting the value of a component attribute.
 
-You can use **$r** or **$rawfile** to create a **Resource** object. For details, see [Resource Access](ts-application-resource-access.md).
+You can use $r or $rawfile to create a Resource object. For details, see [Resource Access](ts-application-resource-access.md).
 
 - $r('belonging.type.name')
-  **belonging**: system or application resource. The value can be **'sys'** or **'app'**.
+  belonging: system or application resource. The value can be 'sys' or 'app'.
 
-  **type**: resource type, which can be **'color'**, **'float'**, **'string'**, or **'media'**.
+  type: resource type, which can be 'color', 'float', 'string', or 'media'.
 
-  **name**: resource name, which is determined during resource definition.
+  name: resource name, which is determined during resource definition.
 
 - $rawfile('filename')
-  **filename**: name of the file in **resources/rawfile** of the project.
+  filename: name of the file in resources/rawfile of the project.
 
 | Name| Type| Description|
 | -------- | -------- | -------- |
-| Resource | {<br>readonly&nbsp;id:&nbsp;[number];<br>readonly&nbsp;type:&nbsp;[number];<br>readonly&nbsp;params?:&nbsp;any[];<br>} | **id**: resource ID.<br>**type**: resource type (enumerated value).<br>**params**: optional parameters.<br>After a **Resource** object is created using **$r** or **$rawfile**, modifying attribute values of the object is prohibited.|
+| Resource | {<br>readonly id: [number];<br>readonly type: [number];<br>readonly params?: any[];<br>} | id: resource ID.<br>type: resource type (enumerated value).<br>params: optional parameters.<br>After a Resource object is created using $r or $rawfile, modifying attribute values of the object is prohibited.|
 
 
 ## ResourceStr Type<sup>8+</sup>
 
 | Name| Type| Description|
 | -------- | -------- | -------- |
-| ResourceStr | string&nbsp;\|&nbsp;Resource| Resource string.|
+| ResourceStr | string \| Resource| Resource string.|
 
 
 ## ResourceColor Type<sup>8+</sup>
 
 | Name| Type| Description|
 | -------- | -------- | -------- |
-| ResourceColor | Color&nbsp;\|&nbsp;number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;Resource | Resource color.|
+| ResourceColor | Color \| number \| string \| Resource | Resource color.|
 
 ## Font Type<sup>8+</sup>
 
 | Name| Type| Description|
 | -------- | -------- | -------- |
-| Font | {<br>size?: Length;<br>weight?: <a href="https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md#li24391125115311">FontWeight</a> &nbsp;\| number &nbsp;\| string;<br>family?: string &nbsp;\| <a href="ts-types.md#Resource">Resource</a>;<br>style?: <a href="https://gitee.com/superFat/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md#li6906111945316">FontStyle</a>;<br>} | Text style.<br>**size**: font size. For the number type, use the unit fp.<br>**weight**: 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.<br>**family**: font family. Use commas (,) to separate multiple fonts. The priority of the fonts is the sequence in which they are placed. An example value is **'Arial, sans-serif'**.<br>**style**: font style.|
+| Font | {<br>size?: Length;<br>weight?: FontWeight \| number  \| string;<br>family?: string  \| Resource;<br>style?: FontStyle;<br>} | Text style.<br>size: font size. For the number type, use the unit fp.<br>weight: 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.<br>family: font family. Use commas (,) to separate multiple fonts. The priority of the fonts is the sequence in which they are placed. An example value is 'Arial, sans-serif'.<br>style: font style.|
 
 ## CustomBuilder Type<sup>8+</sup>
 
-You can use **CustomBuilder** to define custom UI descriptions in component attribute methods.
+You can use CustomBuilder to define custom UI descriptions in component attribute methods.
 
 | Name| Type| Description|
 | -------- | -------- | -------- |
-| CustomBuilder | ()&nbsp;=&gt;&nbsp;any | Builder of component attribute methods for defining custom UI descriptions. This type of method must be decorated by **@Builder**. For details, see [@Builder](ts-component-based-builder.md).|
+| CustomBuilder | () => any | Builder of component attribute methods for defining custom UI descriptions. This type of method must be decorated by @Builder. For details, see [@Builder](ts-component-based-builder.md).|
 
 
 ## Example

en/application-dev/ui/ts-ui-state-management.md

-# About UI State Management<a name="EN-US_TOPIC_0000001157388855"></a>
-
--   **[Basic Concepts](ts-ui-state-mgmt-concepts.md)**  
-
--   **[Managing Component States](ts-managing-component-states.md)**  
-
--   **[Managing Application States](ts-managing-application-states.md)**  
-
--   **[Managing Other States](ts-managing-other-states.md)**  
-
-

en/application-dev/ui/ts-ui-state-mgmt-concepts.md

-# Basic Concepts<a name="EN-US_TOPIC_0000001169868220"></a>
+# Basic Concepts
 
-In the declarative UI programming paradigm, the UI is a function in the specific application state, and you update a UI by modifying the current application state.
 
-The development framework provides comprehensive application state management capabilities, as shown in the figure below.
+In the declarative UI programming paradigm, the UI is a function in the specific application state, and you update a UI by modifying the current application state. The development framework provides comprehensive application state management capabilities, as shown in the figure below.
 
-![](figures/corespec_figures_state-mgmt-overview.png)
 
-## State Variable Decorators<a name="section13236174803615"></a>
+![en-us_image_0000001222967768](figures/en-us_image_0000001222967768.png)
 
-- **@State**: grants a component the state attribute. Each time the  **@State**  decorated variable changes, the component re-renders and updates the UI.
 
-- **@Link**: allows a component to depend on some state attributes of its parent component. Each time the data in one component is updated, the state of the other component is updated, and the parent and child components are rendered again.
+## State Variable Decorators
 
-- **@Prop**: works in a way similar to that of  **@Link**. The only difference is that the changes made by a child component are not synchronized to the parent component.
+- @State: state attribute of the component. Each time the @State decorated variable changes, the component re-renders and updates the UI.
 
-  > ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
-  > The state variable name cannot be **id**, for example, **@Prop id:number**.  
+- @Link: allows a component to depend on some state attributes of its parent component. Each time the data in one component is updated, the state of the other component is updated, and the parent and child components are rendered again.
 
-## Application State Data<a name="section16386143212559"></a>
+- @Prop: works in a way similar to that of @Link. The difference is that the changes made by a child component are not synchronized to the parent component.
 
-**AppStorage**  is the central store of the application states used in the entire UI. The UI framework creates a singleton  **AppStorage**  object for the application and provides the corresponding decorators and APIs for the application.
 
--   **@StorageLink**: works in a way similar to that of  **@Consume**. The difference is that the link object with the specified name is obtained from the  **AppStorage**. It establishes two-way binding between the UI component and  **AppStorage**  to synchronize data.
--   **@StorageProp**: synchronizes UI component attributes with the  **AppStorage**  unidirectionally. The value change in the  **AppStorage**  will trigger an update of the attribute value in the UI component, but the attribute value of the UI component will not cause an update of the attribute value in the  **AppStorage**.
--   Service logic implementation API: adds, reads, modifies, or deletes the state attributes of applications. The changes made by this API will be synchronized to the UI component for UI update.
+## Application State Data
+
+AppStorage is the central store of the application states in the entire UI. The UI framework creates a singleton AppStorage object for the application and provides the corresponding decorators and APIs for the application.
+
+- @StorageLink: works in a way similar to that of @Consume. The difference is that the link object with the specified name is obtained from the AppStorage. It establishes two-way binding between the UI component and AppStorage to synchronize data.
 
+- @StorageProp: synchronizes UI component attributes with the AppStorage unidirectionally. That is, the value change in the AppStorage will trigger an update of the corresponding UI component, but the change of the UI component will not cause an update of the attribute value in the AppStorage.
+
+- Service logic implementation API: adds, reads, modifies, or deletes the state attributes of applications. The changes made by this API will be synchronized to the UI component for UI update.

en/application-dev/ui/ts-using-a-separate-line-for-new-component.md

-# Using a Separate Line for New Component<a name="EN-US_TOPIC_0000001110788994"></a>
-
-**Semicolons \(;\) can be omitted at the end of each line of code.**
-
-```
-Column() {
-    Image('icon.png')
-    Text('text')
-}
-```
-
-It is equivalent to:
-
-```
-Column() {
-    Image('icon.png');
-    Text('text');
-}
-```
-
-**Only one component can be created in a line. An if, else, else if, or ForEach statement must also be in a separate line.**
-
-Incorrect:
-
-```
-Column() {
-    Image('icon.png') Text('text') // invalid, creation of two components in same line
-}
-
-if (this.condi) {Image('icon.png')} // invalid, if and creation a components in same line
-```
-
-**Built-in container components, if, and ForEach item generator functions must use closed parentheses \(\{\}\) in the case of a single subitem.**
-
-Incorrect:
-
-```
-if (this.condi)
-Image('icon.png'), // invalid, missing {}
-else
-    Text('text');
-```
-
-```
-ForEach(this.arr,
-    (item) => Image('icon.png'), // invalid, missing {}
-    (item) => item.id.toString()
-}
-```
-

en/application-dev/ui/ui-arkui-js.md

-# JavaScript-based Web-Like Development Paradigm<a name="EN-US_TOPIC_0000001214730071"></a>
-
--   **[Overview](ui-js-overview.md)**  
-
--   **[Framework](js-framework.md)**  
-
--   **[Building the UI](ui-js-building-ui.md)**  
-
--   **[Common Component Development Guidelines](ui-js-common-components.md)**  
-
--   **[Animation Development Guidelines](ui-js-animate.md)**  
-
--   **[Custom Components](ui-js-custom-components.md)**  
-
-

en/application-dev/ui/ui-arkui-ts.md

-# TypeScript-based Declarative Development Paradigm<a name="EN-US_TOPIC_0000001169328728"></a>
-
--   **[Overview](ui-ts-overview.md)**  
-
--   **[Framework Overview](ts-framework.md)**  
-
--   **[Declarative Syntax](ts-declarative-syntax.md)**  
-
--   **[Experiencing the Declarative UI](ui-ts-experiencing-declarative-ui.md)**  
-
--   **[Defining Page Layout and Connection](ui-ts-page-layout-connections.md)**  
-
-

en/application-dev/ui/ui-arkui.md

-#  ArkUI<a name="EN-US_TOPIC_0000001065103332"></a>
-
--   **[JavaScript-based Web-Like Development Paradigm](ui-arkui-js.md)**  
-
--   **[TypeScript-based Declarative Development Paradigm](ui-arkui-ts.md)**  
-
-

en/application-dev/ui/ui-js-animate-attribute-style.md

-# Defining Attribute Style Animations<a name="EN-US_TOPIC_0000001172005058"></a>
+# Defining Attribute Style Animations
 
-Keyframes  is used to scale a component by dynamically setting the width and height of its parent component. Set the  **scale**  attribute for child components to scale the child and parent components at the same time. Then, set the  **opacity**  attribute to display or hide the child and parent components.
+
+Keyframes is used to scale a component by dynamically setting the width and height of its parent component. Set the scale attribute for child components to scale the child and parent components at the same time. Then, set the opacity attribute to display or hide the child and parent components.
 
 ```
 <!-- xxx.hml -->
@@ -78,9 +79,11 @@ text{
 }
 ```
 
-![](figures/d1.gif)
 
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->1.  The values of  **animation**  attributes are not sequenced. However, the values of  **duration**  and  **delay**  are parsed based on the sequence in which they are displayed.
->2.  The  **animation-duration**  attribute must be set. Otherwise, the duration is 0, which means there is no animation effect. When  **animation-fill-mode**  is set to  **forwards**, the component directly displays the style of the last frame.
+![en-us_image_0000001267647889](figures/en-us_image_0000001267647889.gif)
+
 
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> 1. The values of animation attributes are not sequenced. However, the values of duration and delay are parsed based on the sequence in which they are displayed.
+> 
+> 2. The animation-duration attribute must be set. Otherwise, the duration is 0, which means there is no animation effect. When animation-fill-mode is set to forwards, the component directly displays the style of the last frame.

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

-# Defining Animations with the background-position Attribute<a name="EN-US_TOPIC_0000001172006248"></a>
+# Defining Animations with the background-position Attribute
 
-By changing the  **background-position**  attribute \(where the first value is the position on the x-axis and the second value is the position on the y-axis\), you move a background image. If the background image goes beyond the respective component boundaries, the excess parts will not be displayed.
+
+By changing the background-position attribute (where the first value is the position on the x-axis and the second value is the position on the y-axis), you move a background image. If the background image goes beyond the respective component boundaries, the excess parts will not be displayed.
 
 ```
 <!-- xxx.hml -->
@@ -74,8 +75,9 @@ By changing the  **background-position**  attribute \(where the first value is t
 }
 ```
 
-![](figures/q8.gif)
 
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->The  **background-position**  attribute can only be used to move background images, but not the background color \(**background-color**\).
+![en-us_image_0000001267607873](figures/en-us_image_0000001267607873.gif)
+
 
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> The background-position attribute can only be used to move background images, but not the background color (background-color).

en/application-dev/ui/ui-js-animate-component.md

-# Component Animation<a name="EN-US_TOPIC_0000001171528146"></a>
+# Component Animation
+
 
 Create and run an animation shortcut on the component. For details, see [Universal Methods](../reference/arkui-js/js-components-common-methods.md).
 
-## Obtaining an Animation Object<a name="section662542112713"></a>
 
-Call the  **animate**  method to obtain an  **animation**  object, which supports animation attributes, methods, and events.
+## Obtaining an Animation Object
+
+Call the animate method to obtain an animation object, which supports animation attributes, methods, and events.
+
 
 ```
 <!-- xxx.hml -->
@@ -13,6 +16,7 @@ Call the  **animate**  method to obtain an  **animation**  object, which support
 </div>
 ```
 
+
 ```
 /* xxx.css */
 .container {
@@ -29,6 +33,7 @@ Call the  **animate**  method to obtain an  **animation**  object, which support
 }
 ```
 
+
 ```
 /* xxx.js */
 export default {
@@ -57,15 +62,17 @@ export default {
 }
 ```
 
-![](figures/1-14.gif)
+![en-us_image_0000001222807812](figures/en-us_image_0000001222807812.gif)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> - When using the animate method, you must pass the keyframes and options parameters.
+> - If animate is called multiple times and the replace policy is used, parameters passed to the last call will take effect.
 
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->-   When using the  **animate**  method, you must pass the  keyframes  and  options  parameters.
->-   If  **animate**  is called multiple times and the  **replace**  policy is used, parameters passed to the last call will take effect.
 
-## Setting Animation Parameters<a name="section36079502817"></a>
+## Setting Animation Parameters
+
+After obtaining an animation object, you can set its style working on the component by using the keyframes parameter.
 
-After obtaining an  **animation**  object, you can set its style working on the component by using the  keyframes  parameter.
 
 ```
 <!-- xxx.hml -->
@@ -74,6 +81,7 @@ After obtaining an  **animation**  object, you can set its style working on the
 </div>
 ```
 
+
 ```
 /* xxx.css */
 .container {
@@ -90,6 +98,7 @@ After obtaining an  **animation**  object, you can set its style working on the
 }
 ```
 
+
 ```
 /* xxx.js */
 export default {
@@ -134,14 +143,16 @@ export default {
 }
 ```
 
-![](figures/1-15.gif)
+![en-us_image_0000001267647897](figures/en-us_image_0000001267647897.gif)
 
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->-   The sequence of  **translate**,  **scale**, and  **rotate**  affects the animation effect.
->-   **transformOrigin**  works only for  **scale**  and  **rotate**.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> - The sequence of translate, scale, and rotate affects the animation effect.
+> 
+> - transformOrigin works only for scale and rotate.
 
 Set the animation attributes by using the options parameter.
 
+
 ```
 <!-- xxx.hml -->
 <div class="container">
@@ -149,6 +160,7 @@ Set the animation attributes by using the options parameter.
 </div>
 ```
 
+
 ```
 /* xxx.css */
 .container {
@@ -165,6 +177,7 @@ Set the animation attributes by using the options parameter.
 }
 ```
 
+
 ```
 /* xxx.js */
 export default {
@@ -174,13 +187,7 @@ export default {
   onInit() {
   },
   onShow() {
-    var options = {
-      duration: 1500,
-      easing: 'ease-in',
-      delay: 5,
-      iterations: 2,
-      direction: 'normal',
-    };
+    var options = {      duration: 1500,      easing: 'ease-in',      delay: 5,      iterations: 2,      direction: 'normal',    };
     var frames = [
       {
         transform: {
@@ -201,18 +208,24 @@ export default {
 }
 ```
 
-![](figures/3-16.gif)
+![en-us_image_0000001222967796](figures/en-us_image_0000001222967796.gif)
 
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->**direction**: mode of playing the animation.
->**normal**: plays the animation in forward loop mode.
->**reverse**: plays the animation in reverse loop mode.
->**alternate**: plays the animation in alternating loop mode. When the animation is played for an odd number of times, the playback is in forward direction. When the animation is played for an even number of times, the playback is in reverse direction.
->**alternate-reverse**: plays the animation in reverse alternating loop mode. When the animation is played for an odd number of times, the playback is in reverse direction. When the animation is played for an even number of times, the playback is in forward direction.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> direction: mode of playing the animation.
+> 
+> normal: plays the animation in forward loop mode.
+> 
+> reverse: plays the animation in reverse loop mode.
+> 
+> alternate: plays the animation in alternating loop mode. When the animation is played for an odd number of times, the playback is in forward direction. When the animation is played for an even number of times, the playback is in reverse direction.
+> 
+> alternate-reverse: plays the animation in reverse alternating loop mode. When the animation is played for an odd number of times, the playback is in reverse direction. When the animation is played for an even number of times, the playback is in forward direction.
 
-## Adding an Event and Calling a Method<a name="section950105162810"></a>
 
-Animation objects support animation events and methods. You can achieve the intended animation by adding  **start**  and  **cancel**  events and calling the  **play**,  **pause**,  **rewind**, and  **stop**  methods.
+## Adding an Event and Calling a Method
+
+Animation objects support animation events and methods. You can achieve the intended animation by adding start and cancel events and calling the play, pause, rewind, and stop methods.
+
 
 ```
 <!-- xxx.hml -->
@@ -230,6 +243,7 @@ Animation objects support animation events and methods. You can achieve the inte
 </div>
 ```
 
+
 ```
 /* xxx.css */
 .container {
@@ -262,6 +276,7 @@ button{
 }
 ```
 
+
 ```
 /* xxx.js */
 import prompt from '@system.prompt';
@@ -336,9 +351,10 @@ export default {
 }
 ```
 
-![](figures/111-17.gif)
+![en-us_image_0000001223127752](figures/en-us_image_0000001223127752.gif)
+
+Change the animation status by changing the playStat attribute.
 
-Change the animation status by changing the  **playStat**  attribute.
 
 ```
 <!-- xxx.hml -->
@@ -354,6 +370,7 @@ Change the animation status by changing the  **playStat**  attribute.
 </div>
 ```
 
+
 ```
 /* xxx.css */
 .container {
@@ -386,6 +403,7 @@ button{
 }
 ```
 
+
 ```
 /* xxx.js */
 import prompt from '@system.prompt';
@@ -463,5 +481,4 @@ export default {
 }
 ```
 
-![](figures/1111.gif)
-
+![en-us_image_0000001267607921](figures/en-us_image_0000001267607921.gif)

en/application-dev/ui/ui-js-animate-css.md

-# CSS Animation<a name="EN-US_TOPIC_0000001211008759"></a>
-
--   **[Defining Attribute Style Animations](ui-js-animate-attribute-style.md)**  
-
--   **[Defining Animations with the transform Attribute](ui-js-animate-transform.md)**  
-
--   **[Defining Animations with the background-position Attribute](ui-js-animate-background-position-style.md)**  
-
-

en/application-dev/ui/ui-js-animate-dynamic-effects.md

-# Animation Effect<a name="EN-US_TOPIC_0000001217007973"></a>
+# Animation Effect
+
 
 You can set the interpolator to implement the animation effect. For details, see [Animation](../reference/apis/js-apis-basic-features-animator.md).
 
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->This feature is supported since API version 6.
 
-## Creating an Animation Object<a name="section2124172032912"></a>
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> This feature is supported since API version 6.
+
+
+## Creating an Animation Object
+
+Use createAnimator to create an animation object and set the animation attributes by using the options parameter.
 
-Use  **createAnimator**  to create an  **animation**  object and set the  **animation**  attributes by using the  options parameter.
 
 ```
 <!-- xxx.hml -->
@@ -20,6 +24,7 @@ Use  **createAnimator**  to create an  **animation**  object and set the  **anim
 </div>
 ```
 
+
 ```
 /* xxx.css */
 .container {
@@ -40,6 +45,7 @@ button{
 }
 ```
 
+
 ```
 /* xxx.js */
 import animator from '@ohos.animator';
@@ -72,16 +78,20 @@ export default {
 }
 ```
 
-![](figures/22.gif)
+![en-us_image_0000001267887885](figures/en-us_image_0000001267887885.gif)
 
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->-   When you use  **createAnimator**  to create an animation object, you must pass the  **options**  parameter.
->-   **begin**  indicates the start point of the animation interpolation. If it is not set, the default value  **0**  is used.
->-   **end**  indicates the end point of the animation interpolation. If it is not set, the default value  **1**  is used.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> - When you use createAnimator to create an animation object, you must pass the options parameter.
+> 
+> - begin indicates the start point of the animation interpolation. If it is not set, the default value 0 is used.
+> 
+> - end indicates the end point of the animation interpolation. If it is not set, the default value 1 is used.
 
-## Adding Animation Events and Calling Methods<a name="section123951438112912"></a>
 
-The  **animator**  supports events and methods, which you can use to customize the animation effect. Events include  **frame**,  **cancel**,  **repeat**, and  **finish**. Methods include  **update**,  **play**,  **pause**,  **cancel**,  **reverse**, and  **finish**. For details about the supported events and methods, see  [animator supported events and  animator supported APIs](../reference/apis/js-apis-basic-features-animator.md).
+## Adding Animation Events and Calling Methods
+
+The animator supports events and methods, which you can use to customize the animation effect. Events include frame, cancel, repeat, and finish. Methods include update, play, pause, cancel, reverse, and finish. For details about the supported events and methods, see [animator supported events and animator supported APIs](../reference/apis/js-apis-basic-features-animator.md).
+
 
 ```
 <!-- xxx.hml -->
@@ -106,6 +116,7 @@ The  **animator**  supports events and methods, which you can use to customize t
 </div>
 ```
 
+
 ```
 /* xxx.css */
 .container {
@@ -148,6 +159,7 @@ button{
 }
 ```
 
+
 ```
 /* xxx.js */
 import animator from '@ohos.animator';
@@ -230,8 +242,7 @@ export default {
 }
 ```
 
-![](figures/1-18.gif)
-
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->When calling the  **update**  method, you can use it to update the animation parameters. The input parameters are the same as those of  **createAnimator**.
+![en-us_image_0000001223287724](figures/en-us_image_0000001223287724.gif)
 
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> When calling the update method, you can use it to update the animation parameters. The input parameters are the same as those of createAnimator.

en/application-dev/ui/ui-js-animate-frame.md

-# Animation Frame<a name="EN-US_TOPIC_0000001217286541"></a>
+# Animation Frame
 
-## Requesting an Animation Frame<a name="section1280411399304"></a>
 
-Use the  **requestAnimationFrame**  method to request frames on a one-by-one basis. This method accepts a callback as an argument.
+## Requesting an Animation Frame
+
+Use the requestAnimationFrame method to request frames on a one-by-one basis. This method accepts a callback as an argument.
+
+When runframe calls requestAnimationFrame, the step callback with the timestamp parameter is passed, and this timestamp iss assigned to startTime. When the difference between the timestamp and startTime is less than the specified value, requestAnimationFrame is called again, and the animation stops.
 
-When  **runframe**  calls  **requestAnimationFrame**, the  **step**  callback with the  **timestamp**  parameter is passed, and this  **timestamp**  iss assigned to  **startTime**. When the difference between the  **timestamp**  and  **startTime**  is less than the specified value,  **requestAnimationFrame**  is called again, and the animation stops.
   
 ```
 <!-- xxx.hml -->
@@ -25,6 +27,7 @@ When  **runframe**  calls  **requestAnimationFrame**, the  **step**  callback wi
 </div>
 ```
 
+  
 ```
 /* xxx.css */
 .container {
@@ -39,6 +42,7 @@ button{
 }
 ```
 
+  
 ```
 /* xxx.js */
 export default {
@@ -93,14 +97,16 @@ export default {
 }
 ```
 
-![](figures/3333.gif)
+![en-us_image_0000001267767877](figures/en-us_image_0000001267767877.gif)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> When invoking the callback, the requestAnimationFrame method passes the timestamp as the first parameter, which indicates the time when requestAnimationFrame starts to execute the callback.
 
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->When invoking the callback, the  **requestAnimationFrame**  method passes the timestamp as the first parameter, which indicates the time when  **requestAnimationFrame**  starts to execute the callback.
 
-## Canceling an Animation Frame<a name="section13657493110"></a>
+## Canceling an Animation Frame
+
+Use the cancelAnimationFrame method to cancel frames on a one-by-one basis. When this method is called, the animation frame request sent through requestAnimationFrame will be canceled.
 
-Use the  **cancelAnimationFrame**  method to cancel frames on a one-by-one basis. When this method is called, the animation frame request sent through  **requestAnimationFrame**  will be canceled.
   
 ```
 <!-- xxx.hml -->
@@ -121,6 +127,7 @@ Use the  **cancelAnimationFrame**  method to cancel frames on a one-by-one basis
 </div>
 ```
 
+  
 ```
 /* xxx.css */
 .container {
@@ -135,6 +142,7 @@ button{
 }
 ```
 
+  
 ```
 /* xxx.js */
 export default {
@@ -181,8 +189,7 @@ export default {
 }
 ```
 
-![](figures/4444.gif)
-
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->When  **cancelAnimationFrame**  is called, a parameter that indicates an ID must be passed.
+![en-us_image_0000001223127740](figures/en-us_image_0000001223127740.gif)
 
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> When cancelAnimationFrame is called, a parameter that indicates an ID must be passed.

en/application-dev/ui/ui-js-animate-interpolator.md

-# Interpolator Animation<a name="EN-US_TOPIC_0000001171846694"></a>
-
--   **[Animation Effect](ui-js-animate-dynamic-effects.md)**  
-
--   **[Animation Frame](ui-js-animate-frame.md)**  
-
-

en/application-dev/ui/ui-js-animate-javascript.md

-# JS Animation<a name="EN-US_TOPIC_0000001165728844"></a>
-
--   **[Component Animation](ui-js-animate-component.md)**  
-
--   **[Interpolator Animation](ui-js-animate-interpolator.md)**  
-
-

en/application-dev/ui/ui-js-animate-svg.md

+# Defining Animations for SVG Components
+
+You can use child components in the <svg> component to animate attributes over time.
+
+#### Attribute Style Animation
+
+In the [animate](../reference/arkui-js/js-components-svg-animate.md) child component of the <svg> component, set attributeName to the attribute you want to animate, set from to the animation start value, and set to to the animation end value.
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <svg>
+    <text x="300" y="300" fill="blue">
+      Hello
+      <animate attributeName="font-size" from="30" to="60" dur="3s" repeatCount="indefinite">
+      </animate>
+      <animate attributeName="fill" from="red" to="blue" dur="3s" repeatCount="indefinite">
+      </animate>
+      <animate attributeName="opacity" from="1" to="0.3" dur="3s" repeatCount="indefinite">
+      </animate>
+    </text>
+    <text x="300" y="600" fill="blue">
+      World
+      <animate attributeName="font-size" from="30" to="60" values="30;80" dur="3s" repeatCount="indefinite">
+      </animate>
+      <animate attributeName="fill" from="red" to="blue"  dur="3s" repeatCount="indefinite">
+      </animate>
+      <animate attributeName="opacity" from="0.3" to="1" dur="3s" repeatCount="indefinite">
+      </animate>
+    </text>
+  </svg>
+</div>
+```
+
+![en-us_image_0000001183871404.gif](figures/en-us_image_0000001183871404.gif)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) NOTE:
+> When values is also set, the from and to settings do not take effect.
+
+#### Motion Path Animation
+
+In the [animateMotion](../reference/arkui-js/js-components-svg-animatemotion.md) child component of the &lt;svg&gt; component, set path to define a shape for the animation.
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <svg fill="white" width="800" height="900">
+    <path d="M300,200 h-150 a150 150 0 1 0 150 -150 z" fill="white" stroke="blue" stroke-width="5" >
+    </path>
+    <path fill="red" d="M-5,-5 L10,0 L-5,5 L0,0 Z"  >
+      <animateMotion dur="2000" repeatCount="indefinite" rotate="auto-reverse"path="M300,200 h-150 a150 150 0 1 0 150 -150 z">
+      </animateMotion>
+    </path>
+  </svg>
+</div>
+```
+
+![en-us_image_0000001229510983.gif](figures/en-us_image_0000001229510983.gif)
+
+#### animateTransform Animation
+
+In the [animateTransform](../reference/arkui-js/js-components-svg-animatetransform.md) child component of the &lt;svg&gt; component, set attributeName to bind the corresponding attribute to the transform attribute, and set type to the animation type, from to the start value, and to to the end value.
+
+```
+<!-- xxx.hml -->
+<div class="container" style="">
+  <svg>
+    <line x1="90" y1="300" x2="90" y2="730" stroke-width="10" stroke="black" stroke-linecap="round">
+      <animateTransform attributeName="transform" attributeType="XML" type="translate"  dur="3s" values="0;30;10;30;20;30;25;30" keyTimes="0;0.3;0.5;0.7;0.8;0.9;1.0;1.1" 
+      fill="freeze">
+      </animateTransform>
+    </line>
+    <circle cx="500" cy="500" r="50" stroke-width="15" fill="red" stroke="#e70d0d">
+      <animateTransform attributeName="transform" attributeType="XML" type="rotate"  dur="3s" values="0;30;10;30;20;30;25;30" keyTimes="0;0.3;0.5;0.7;0.8;0.9;1.0;1.1" fill="freeze">
+      </animateTransform>
+      <animateTransform attributeName="transform" attributeType="XML" type="scale"  dur="6s" values="1;1;1.3" keyTimes="0;0.5;1" fill="freeze"></animateTransform>
+      <animateTransform attributeName="transform" attributeType="XML" type="translate"  dur="9s" values="0;0;300 7" keyTimes="0;0.6;0.9" fill="freeze"></animateTransform>
+    </circle>
+    <rect width="500" height="200" x="90" y="840">
+      <animateTransform attributeName="transform" attributeType="XML" type="skewY"  dur="6s" values="0;0;30" keyTimes="0;0.5;1" fill="freeze"></animateTransform>
+    </rect>
+    <line x1="650" y1="300" x2="650" y2="600" stroke-width="20" stroke="blue" stroke-linecap="round">
+      <animateTransform attributeName="transform" attributeType="XML" type="translate"  dur="9s" values="0;0;0 800" keyTimes="0;0.6;1" fill="freeze"></animateTransform>
+    </line>
+  </svg>
+</div>
+```
+
+```
+/* xxx.css */
+.container {
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background-color: #F1F3F5;
+}
+```
+
+![en-us_image_0000001182832088.gif](figures/en-us_image_0000001182832088.gif)
\ No newline at end of file

en/application-dev/ui/ui-js-animate-transform.md

-# Defining Animations with the transform Attribute<a name="EN-US_TOPIC_0000001171687726"></a>
+# Defining Animations with the transform Attribute
 
-Set the  **transform**  attribute for component rotation, scaling, translation, and skewing.
 
-## Designing Static Animation<a name="section82321901242"></a>
+Set the transform attribute for component rotation, scaling, translation, and skewing.
+
+
+## Designing Static Animation
+
+Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower part of the rhombus with a rectangle to form a roof. Set the translate attribute of the rectangle to the coordinate (150px, -150px) to form a door, use the position attribute to translate the horizontal and vertical axes to the specified coordinates of the parent component (square), set the scale attribute to scale up the parent and child components together to determine the window size, and use the skewX attribute to skew the component and set the coordinate translate(200px,-830px) to form a chimney.
 
-Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower part of the rhombus with a rectangle to form a roof. Set the  **translate**  attribute of the rectangle to the coordinate \(150px, -150px\) to form a door, use the  **position**  attribute to translate the horizontal and vertical axes to the specified coordinates of the parent component \(square\), set the  **scale**  attribute to scale up the parent and child components together to determine the window size, and use the  **skewX**  attribute to skew the component and set the coordinate  **translate\(200px,-830px\)**  to form a chimney.
   
 ```
 <!-- xxx.hml -->
@@ -21,6 +24,7 @@ Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower p
 </div>
 ```
 
+  
 ```
 /* xxx.css */
 .container {
@@ -86,12 +90,14 @@ Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower p
 }
 ```
 
-![](figures/111-13.png)
+![en-us_image_0000001267887841](figures/en-us_image_0000001267887841.png)
+
 
-## Designing Translation Animation<a name="section1212234417247"></a>
+## Designing Translation Animation
 
 Decrease the y-coordinate over a time frame to make the ball bounce back. Gradually decrease the bounce height until it drops to 0. An animation where the ball falls is hereby created.
 
+  
 ```
 <!-- xxx.hml -->
 <div class="container">
@@ -100,6 +106,7 @@ Decrease the y-coordinate over a time frame to make the ball bounce back. Gradua
 </div>
 ```
 
+  
 ```
 /* xxx.css */
 .container {
@@ -162,11 +169,13 @@ Decrease the y-coordinate over a time frame to make the ball bounce back. Gradua
 }
 ```
 
-![](figures/q2.gif)
+![en-us_image_0000001222967760](figures/en-us_image_0000001222967760.gif)
+
+
+## Designing Rotation Animation
 
-## Designing Rotation Animation<a name="section74101411112517"></a>
+Set the rotation center around an element in different transform-origin positions. Of the rotate3d values, the first three values are the rotation vectors of the x-axis, y-axis, and z-axis, respectively; the fourth value is the rotation angle, which can be a negative value to indicate that the rotation is performed counterclockwise.
 
-Set the rotation center around an element in different  **transform-origin**  positions. Of the  **rotate3d**  values, the first three values are the rotation vectors of the x-axis, y-axis, and z-axis, respectively; the fourth value is the rotation angle, which can be a negative value to indicate that the rotation is performed counterclockwise.
   
 ```
 <!-- xxx.hml -->
@@ -187,6 +196,7 @@ Set the rotation center around an element in different  **transform-origin**  po
 </div>
 ```
 
+  
 ```
 /* xxx.css */
 .container {
@@ -292,16 +302,18 @@ Set the rotation center around an element in different  **transform-origin**  po
 }
 ```
 
-![](figures/d2.gif)
+![en-us_image_0000001222807776](figures/en-us_image_0000001222807776.gif)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> transform-origin specifies the origin of an element's transformation. If only one value is set, the other value is 50%. If both values are set, the first value indicates the position on the x-axis, and the second value indicates the position on the y-axis.
+
 
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->**transform-origin**  specifies the origin of an element's transformation. If only one value is set, the other value is  **50%**. If both values are set, the first value indicates the position on the x-axis, and the second value indicates the position on the y-axis.
+## Designing Scaling Animation
 
-## Designing Scaling Animation<a name="section137551633132519"></a>
+This example implements a ripple animation with the scale attribute. Here is the overall procedure: First, use the positioning function to determine the coordinates of the element's position. Then, create multiple components to achieve the overlapping effect. After that, set the opacity attribute to hide or display the components. To scale and hide/display a component at the same time, set both the scale and opacity attributes. Finally, set different animation durations for different components to achieve the diffusion effect.
 
-This example implements a ripple animation with the  **scale**  attribute. Here is the overall procedure: First, use the positioning function to determine the coordinates of the element's position. Then, create multiple components to achieve the overlapping effect. After that, set the  **opacity**  attribute to hide or display the components. To scale and hide/display a component at the same time, set both the  **scale**  and  **opacity**  attributes. Finally, set different animation durations for different components to achieve the diffusion effect.
+Set the scaling values for the x-axis, y-axis, and z-axis in scale3d to implement the animation.
 
-Set the scaling values for the x-axis, y-axis, and z-axis in  **scale3d**  to implement the animation.
   
 ```
 <!-- xxx.hml -->
@@ -318,6 +330,7 @@ Set the scaling values for the x-axis, y-axis, and z-axis in  **scale3d**  to im
 </div>
 ```
 
+  
 ```
 /* xxx.css */
 .container {
@@ -333,14 +346,12 @@ Set the scaling values for the x-axis, y-axis, and z-axis in  **scale3d**  to im
   height: 100px;
   border-radius: 50px;
   background:linear-gradient(#dcaec1, #d3a8e3);
-  z-index: 1;
-  position: absolute;
+  z-index: 1;  position: absolute;
 }
 .ripple{
   margin-top: 400px;
   margin-left: 40%;
-  position: absolute;
-  z-index: 0;
+  position: absolute;  z-index: 0;
   width: 100px;
   height: 100px;
   border-radius: 50px;
@@ -406,14 +417,16 @@ text{
 }
 ```
 
-![](figures/d3.gif)
+![en-us_image_0000001267887837](figures/en-us_image_0000001267887837.gif)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> After the transform attributes are set, the child element changes with the parent element. Value changing of other attributes (such as height and width) of the parent element will not affect the child element.
+
 
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->After the  **transform**  attributes are set, the child element changes with the parent element. Value changing of other attributes \(such as  **height**  and  **width**\) of the parent element will not affect the child element.
+## Setting matrix
 
-## Setting matrix<a name="section114961910132614"></a>
+The matrix attribute defines a transformation matrix with six input parameters: scaleX, skewY, skewX, scaleY, translateX, and translateY. In the following example, matrix is set to matrix(1,0,0,1,0,200) to skew and translate the component.
 
-The  **matrix**  attribute defines a transformation matrix with six input parameters:  **scaleX**,  **skewY**,  **skewX**,  **scaleY**,  **translateX**, and  **translateY**. In the following example,  **matrix**  is set to  **matrix\(1,0,0,1,0,200\)**  to skew and translate the component.
   
 ```
 <!-- xxx.hml -->
@@ -422,6 +435,7 @@ The  **matrix**  attribute defines a transformation matrix with six input parame
 </div>
 ```
 
+  
 ```
 /* xxx.css */
 .container{
@@ -451,11 +465,13 @@ The  **matrix**  attribute defines a transformation matrix with six input parame
 }
 ```
 
-![](figures/q3.gif)
+![en-us_image_0000001267767853](figures/en-us_image_0000001267767853.gif)
+
+
+## Integrating transform Attributes
 
-## Integrating transform Attributes<a name="section20503152610"></a>
+You can set multiple transform attributes at the same time to apply different transformations to a component. The following example applies the scale, translate, and rotate attributes simultaneously.
 
-You can set multiple  **transform**  attributes at the same time to apply different transformations to a component. The following example applies the  **scale**,  **translate**, and  **rotate**  attributes simultaneously.
   
 ```
 <!-- xxx.hml -->
@@ -468,6 +484,7 @@ You can set multiple  **transform**  attributes at the same time to apply differ
 </div>
 ```
 
+  
 ```
 /* xxx.css */
 .container{
@@ -514,8 +531,7 @@ You can set multiple  **transform**  attributes at the same time to apply differ
 /* Use change1 and change2 for comparison. */
 @keyframes change1{
   0%{
-    transform: translate(0,0);
-    transform: rotate(0deg)
+    transform: translate(0,0);    transform: rotate(0deg)
   }
   100%{
     transform: translate(0,500px);
@@ -559,10 +575,11 @@ You can set multiple  **transform**  attributes at the same time to apply differ
 }
 ```
 
-![](figures/d4.gif)
-
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->1.  When multiple  **transform**  attributes are set, the later one overwrites the previous one. To apply multiple transform styles at the same time, use the shorthand notation; that is, write multiple style values in one  **transform**, for example,  **transform: scale\(1\) rotate\(0\) translate\(0,0\)**.
->2.  When using the shorthand notion, note that the animation effect varies according to the sequence of the style values.
->3.  The style values in the  **transform**  attribute used when the animation starts and ends must be in one-to-one mapping. Only the styles that have value mappings are played.
+![en-us_image_0000001223127712](figures/en-us_image_0000001223127712.gif)
 
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> 1. When multiple transform attributes are set, the later one overwrites the previous one. To apply multiple transform styles at the same time, use the shorthand notation; that is, write multiple style values in one transform, for example, transform: scale(1) rotate(0) translate(0,0).
+> 
+> 2. When using the shorthand notion, **NOTE** that the animation effect varies according to the sequence of the style values.
+> 
+> 3. The style values in the transform attribute used when the animation starts and ends must be in one-to-one mapping. Only the styles that have value mappings are played.

en/application-dev/ui/ui-js-animate.md

-# Animation Development Guidelines<a name="EN-US_TOPIC_0000001164217296"></a>
-
--   **[CSS Animation](ui-js-animate-css.md)**  
-
--   **[JS Animation](ui-js-animate-javascript.md)**  
-
-

en/application-dev/ui/ui-js-building-ui-animation.md

-# Developing Animations<a name="EN-US_TOPIC_0000001063908646"></a>
+# Developing Animations
 
-Animations are classified into  [Static Animation](#section456613911492)  and  [Continuous Animation](#section17836125204914).
 
-## Static Animation<a name="section456613911492"></a>
+Animations are classified into [Static Animation](#static-animation) and [Continuous Animation](#continuous-animation).
+
+
+## Static Animation
 
 The transform attributes are the core of the static animation. A static animation can transform in the following three ways and only once in each way at a time:
 
--   **translate**: Moves a specified component horizontally or vertically.
--   **scale**: Scales a specified component horizontally or vertically to the required scale.
--   **rotate**: Rotates a specified component by a specified angle along the horizontal axis, vertical axis, or center point.
+- translate: Moves a specified component horizontally or vertically.
+
+- scale: Scales a specified component horizontally or vertically to the required scale.
+
+- rotate: Rotates a specified component by a specified angle along the horizontal axis, vertical axis, or center point.
 
 For more information, see [Component Methods](../reference/arkui-js/js-components-common-methods.md). The following is an example:
 
+
 ```
 <!-- xxx.hml -->
 <div class="container">
@@ -21,6 +26,7 @@ For more information, see  [Component Methods](../reference/arkui-js/js-componen
 </div>
 ```
 
+
 ```
 /* xxx.css */
 .container {
@@ -51,22 +57,30 @@ For more information, see  [Component Methods](../reference/arkui-js/js-componen
 }
 ```
 
-**Figure  1**  Static animation<a name="fig454415020219"></a>  
-![](figures/static-animation.png "static-animation")
 
-## Continuous Animation<a name="section17836125204914"></a>
+  figure1 Static animation
+  
+  ![en-us_image_0000001223127724](figures/en-us_image_0000001223127724.png)
+
+
+## Continuous Animation
 
 The static animation has only the start and end states. To set the transition state and conversion effect, use continuous animations.
 
 The core of a continuous animation is animation attributes, which define the start and end states of the animation and the curve of time and speed. Animation attributes can implement the following effects:
 
--   **animation-name**: Background color, opacity, width, height, and transformation type applied to the element after the animation is executed
--   **animation-delay**  and  **animation-duration**: Element delay and duration after the animation is executed
--   **animation-timing-function**: Speed curve of an animation, which makes the animation more fluent
--   **animation-iteration-count**: Number of animation playback times
--   **animation-fill-mode**: Whether to restore the initial state after the animation is executed
+- animation-name: Background color, opacity, width, height, and transformation type applied to the element after the animation is executed
+
+- animation-delay and animation-duration: Element delay and duration after the animation is executed
+
+- animation-timing-function: Speed curve of an animation, which makes the animation more fluent
+
+- animation-iteration-count: Number of animation playback times
+
+- animation-fill-mode: Whether to restore the initial state after the animation is executed
+
+To use the animation attributes, you need to define a @keyframes rule in the .css file, set the animation transition effect in @keyframes, and invoke the effect through a style class in the .hml file. The following is an example for animation-name:
 
-To use the animation attributes, you need to define a @keyframes rule in the  **.css**  file, set the animation transition effect in @keyframes, and invoke the effect through a style class in the  **.hml**  file. The following is an example for  **animation-name**:
 
 ```
 <!-- xxx.hml -->
@@ -82,6 +96,7 @@ To use the animation attributes, you need to define a @keyframes rule in the  **
 </div>
 ```
 
+
 ```
 /* xxx.css */
 .item-container {
@@ -131,6 +146,7 @@ To use the animation attributes, you need to define a @keyframes rule in the  **
 }
 ```
 
+
 ```
 // xxx.js
 export default {
@@ -147,6 +163,6 @@ export default {
 }
 ```
 
-**Figure  2**  Continuous animation effect<a name="fig1173091112515"></a>  
-![](figures/continuous-animation-effect.gif "continuous-animation-effect")
+  figure2 Continuous animation effect
   
+  ![en-us_image_0000001223287696](figures/en-us_image_0000001223287696.gif)

en/application-dev/ui/ui-js-building-ui-component.md

-# Component Overview<a name="EN-US_TOPIC_0000001063340551"></a>
+# Component Overview
+
+
+Components are the core of a UI page. Each component can provide visible and interactive functional units that are independent from each other. This is achieved by data and method encapsulation. You can use and reuse any component anywhere as needed. For details about how to use the components, see [Universal Attributes](../reference/arkui-js/js-components-common-attributes.md).
 
-Components are the core of a UI page. Each component can provide visible and interactive functional units that are independent from each other. This is achieved by data and method encapsulation. You can use and reuse any component anywhere as needed. For details about how to use the components, see  [Components](../reference/arkui-js/js-components-common-attributes.md).
 
 You can also customize a new component through proper combination of components to make the development simple and easy. For details about how to customize components, see [Custom Components](ui-js-custom-components.md).
 
-## Classification<a name="section154381954142018"></a>
 
-Components can be classified into the following types based on their functions.
+## Classification
 
-<a name="table5353044132913"></a>
-<table><thead align="left"><tr id="row18353134417291"><th class="cellrowborder" valign="top" width="33.23%" id="mcps1.1.3.1.1"><p id="p9353844172910"><a name="p9353844172910"></a><a name="p9353844172910"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="66.77%" id="mcps1.1.3.1.2"><p id="p17353194412910"><a name="p17353194412910"></a><a name="p17353194412910"></a>Components</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row735474422917"><td class="cellrowborder" valign="top" width="33.23%" headers="mcps1.1.3.1.1 "><p id="p135464414291"><a name="p135464414291"></a><a name="p135464414291"></a>Container</p>
-</td>
-<td class="cellrowborder" valign="top" width="66.77%" headers="mcps1.1.3.1.2 "><p id="p163541544152914"><a name="p163541544152914"></a><a name="p163541544152914"></a>badge, dialog, div, form, list, list-item, list-item-group, panel, popup, refresh, stack, stepper, stepper-item, swiper, tabs, tab-bar, tab-content</p>
-</td>
-</tr>
-<tr id="row5354124411297"><td class="cellrowborder" valign="top" width="33.23%" headers="mcps1.1.3.1.1 "><p id="p33541644182911"><a name="p33541644182911"></a><a name="p33541644182911"></a>Basic</p>
-</td>
-<td class="cellrowborder" valign="top" width="66.77%" headers="mcps1.1.3.1.2 "><p id="p171418529304"><a name="p171418529304"></a><a name="p171418529304"></a>button, chart, divider, image, image-animator, input, label, marquee, menu, option, picker, picker-view, piece, progress, qrcode, rating, richtext, search, select, slider, span, switch, text, textarea, toolbar, toolbar-item, toggle</p>
-</td>
-</tr>
-<tr id="row1235411446292"><td class="cellrowborder" valign="top" width="33.23%" headers="mcps1.1.3.1.1 "><p id="p535419445292"><a name="p535419445292"></a><a name="p535419445292"></a>Media</p>
-</td>
-<td class="cellrowborder" valign="top" width="66.77%" headers="mcps1.1.3.1.2 "><p id="p113542443298"><a name="p113542443298"></a><a name="p113542443298"></a>video</p>
-</td>
-</tr>
-<tr id="row1935454413298"><td class="cellrowborder" valign="top" width="33.23%" headers="mcps1.1.3.1.1 "><p id="p14354184402911"><a name="p14354184402911"></a><a name="p14354184402911"></a>Canvas</p>
-</td>
-<td class="cellrowborder" valign="top" width="66.77%" headers="mcps1.1.3.1.2 "><p id="p435484419292"><a name="p435484419292"></a><a name="p435484419292"></a>canvas</p>
-</td>
-</tr>
-<tr id="row138471514133011"><td class="cellrowborder" valign="top" width="33.23%" headers="mcps1.1.3.1.1 "><p id="p2848141417309"><a name="p2848141417309"></a><a name="p2848141417309"></a>Grid</p>
-</td>
-<td class="cellrowborder" valign="top" width="66.77%" headers="mcps1.1.3.1.2 "><p id="p1824219411343"><a name="p1824219411343"></a><a name="p1824219411343"></a>grid-container, grid-row, grid-col</p>
-</td>
-</tr>
-<tr id="row1199452616306"><td class="cellrowborder" valign="top" width="33.23%" headers="mcps1.1.3.1.1 "><p id="p99943266305"><a name="p99943266305"></a><a name="p99943266305"></a>SVG</p>
-</td>
-<td class="cellrowborder" valign="top" width="66.77%" headers="mcps1.1.3.1.2 "><p id="p129949269305"><a name="p129949269305"></a><a name="p129949269305"></a>svg, rect, circle, ellipse, path, line, polyline, polygon, text, tspan, textPath, animate, animateMotion, animateTransform</p>
-</td>
-</tr>
-</tbody>
-</table>
+Components can be classified into the following types based on their functions.
 
+  | Type | Components | 
+| -------- | -------- |
+| Container | badge, dialog, div, form, list, list-item, list-item-group, panel, popup, refresh, stack, stepper, stepper-item, swiper, tabs, tab-bar, tab-content | 
+| Basic | button, chart, divider, image, image-animator, input, label, marquee, menu, option, picker, picker-view, piece, progress, qrcode, rating, richtext, search, select, slider, span, switch, text, textarea, toolbar, toolbar-item, toggle | 
+| Media | video | 
+| Canvas | canvas | 
+| Grid | grid-container, grid-row, grid-col | 
+| SVG | svg, rect, circle, ellipse, path, line, polyline, polygon, text, tspan, textPath, animate, animateMotion, animateTransform |

en/application-dev/ui/ui-js-building-ui-event.md

-# Defining Events<a name="EN-US_TOPIC_0000001063300566"></a>
+# Defining Events
+
 
 Events mainly include gesture events for touchscreen devices.
 
-## Gesture Events<a name="section21104561094"></a>
 
-A gesture represents a semantic action \(for example, tap, drag, or longpress\) that can trigger one or more events. A gesture lifecycle may consist of multiple events from the start to the end of the gesture. Supported events:
+## Gesture Events
+
+A gesture represents a semantic action (for example, tap, drag, or longpress) that can trigger one or more events. A gesture lifecycle may consist of multiple events from the start to the end of the gesture. Supported events:
+
+  Touch
+- touchstart: Triggered when the touch starts
+
+- touchmove: Triggered when the touch moves
 
-**Touch**
+- touchcancel: Triggered when the touch is interrupted, for example, by an incoming call notification or pop-up message
 
--   **touchstart**: Triggered when the touch starts
--   **touchmove**: Triggered when the touch moves
--   **touchcancel**: Triggered when the touch is interrupted, for example, by an incoming call notification or pop-up message
--   **touchend**: Triggered when the touch ends
+- touchend: Triggered when the touch ends
 
-**Click**
+Click
 
-**click**: Triggered when a user taps the screen quickly.
+click: Triggered when a user taps the screen quickly.
 
-**Longpress**
+Longpress
 
-**longpress**: Triggered when a user keeps tapping the screen at the same position for a while.
+longpress: Triggered when a user keeps tapping the screen at the same position for a while.
 
 The following is an example:
 
+
 ```
 <!-- xxx.hml -->
 <div class="container">
@@ -47,6 +52,7 @@ The following is an example:
 </div>
 ```
 
+
 ```
 /* xxx.css */
 .container {
@@ -70,6 +76,7 @@ The following is an example:
 }
 ```
 
+
 ```
 // xxx.js
 export default {
@@ -101,4 +108,3 @@ export default {
   },
 }
 ```
-

en/application-dev/ui/ui-js-building-ui-interactions.md

-# Adding Interactions<a name="EN-US_TOPIC_0000001064068636"></a>
+# Adding Interactions
 
-You can make the UI interactive by binding events to components. This section describes how to bind  **<div\>**,  **<text\>**, and  **<image\>**  components to click events to build a thumb up button, as shown in the following figure.
+  You can make the UI interactive by binding events to components. This section describes how to bind &lt;div&gt;, &lt;text&gt;, and &lt;image&gt; components to click events to build a thumb up button, as shown in the following figure.
+  figure1 Thumb up button effect
 
-**Figure  1**  Thumb up button effect<a name="fig071716222515"></a>  
+![en-us_image_0000001267647901](figures/en-us_image_0000001267647901.gif)
 
 
-![](figures/zan.gif)
+The thumb up button is implemented by binding a click event to a &lt;div&gt; component. The &lt;div&gt; component contains an &lt;image&gt; component and a &lt;text&gt; component.
 
-The thumb up button is implemented by binding a click event to a  **<div\>**  component. The  **<div\>**  component contains an  **<image\>**  component and a  **<text\>**  component.
 
--   The  **<image\>**  component is used to display unselected and selected \(highlighted\) thumbs up images. The click event function alternately updates the paths of the images that are liked and not liked.
--   The  **<text\>**  component is used to display the number of thumbs up. The number is updated in the function of the click event.
+- The &lt;image&gt; component is used to display unselected and selected (highlighted) thumbs up images. The click event function alternately updates the paths of the images that are liked and not liked.
 
-The click event calls the  **likeClick\(\)**  function defined in the  **.js**  file. You can change the value of  **isPressed**  to update the image component. If the value of  **isPressed**  is  **true**, the number of thumbs up is incremented by 1. The  **likeClick\(\)**  function takes effect on the  **<div\>**  component in the  **.hml**  file. The style of each child component for the thumbs up button is set in the  **.css**  file. The following is an example:
+- The &lt;text&gt; component is used to display the number of thumbs up. The number is updated in the function of the click event.
+
+
+The click event calls the likeClick() function defined in the .js file. You can change the value of isPressed to update the image component. If the value of isPressed is true, the number of thumbs up is incremented by 1. The likeClick() function takes effect on the &lt;div&gt; component in the .hml file. The style of each child component for the thumbs up button is set in the .css file. The following is an example:
 
 ```
 <!-- xxx.hml -->
@@ -71,5 +73,5 @@ export default {
 }
 ```
 
- ArkUI also provides many form components, such as switches, tags, and pickers, for you to flexibly lay out pages and improve their interactions with users. For details, see  [Container Components](../reference/arkui-js/js-components-container.md).
 
+ArkUI also provides many form components, such as switches, tags, and pickers, for you to flexibly lay out pages and improve their interactions with users. For details, see Container Components.

en/application-dev/ui/ui-js-building-ui-layout-comment.md

-# Adding a Comment<a name="EN-US_TOPIC_0000001063470826"></a>
+# Adding a Comment
+
 
 After a user enters a comment and clicks the submit button, the content is displayed in the comment area. The user can click the delete button to delete the current comment and enter another comment again.
 
-To set such a comment area on a page, you need to associate a click event with  **<div\>**,  **<text\>**, and  **<input\>**. You can use the  **<input\>**  component to obtain the comment entered by a user, use the  **<text\>**  component to display the comment, and use  **commentText**  to mark the  **<text\>**  component \(controlled by the  **if**  attribute\). Associate the click event with the  **<text\>**  component that contains  **Done**  and  **Delete**  to update the  **commentText**  and  **inputValue**. The following is an example:
+
+To set such a comment area on a page, you need to associate a click event with &lt;div&gt;, &lt;text&gt;, and &lt;input&gt;. You can use the &lt;input&gt; component to obtain the comment entered by a user, use the &lt;text&gt; component to display the comment, and use commentText to mark the &lt;text&gt; component (controlled by the if attribute). Associate the click event with the &lt;text&gt; component that contains Done and Delete to update the commentText and inputValue. The following is an example:
 
 ```
 <!-- xxx.hml -->
@@ -19,6 +21,8 @@ To set such a comment area on a page, you need to associate a click event with
 </div>
 ```
 
+
+
 ```
 /* xxx.css */
 .container {
@@ -60,6 +64,8 @@ To set such a comment area on a page, you need to associate a click event with
 }
 ```
 
+
+
 ```
 // xxx.js
 export default {
@@ -75,4 +81,3 @@ export default {
   },
 }
 ```
-

en/application-dev/ui/ui-js-building-ui-layout-external-container.md

-# Adding a Container<a name="EN-US_TOPIC_0000001062990841"></a>
+# Adding a Container
 
-To assemble the basic elements of a page, you need a container component. The  **<div\>**,  **<list\>**, and  **<tabs\>**  components are commonly used for laying out page elements. You can use  **<div\>**  as the container in a page with simple layout.  **<div\>**  supports a variety of child components required to build the page.
 
-## <List\><a name="section1875054932714"></a>
+To assemble the basic elements of a page, you need a container component. The &lt;div&gt;, &lt;list&gt;, and &lt;tabs&gt; components are commonly used for laying out page elements. You can use &lt;div&gt; as the container in a page with simple layout. &lt;div&gt; supports a variety of child components required to build the page.
+
+
+## &lt;List&gt;
+
+If you use &lt;div&gt; repeatedly to render a complex page, frame freezing may occur. In this case, use the &lt;list&gt; component instead of &lt;div&gt; to lay out list items, which provides a smooth list scrolling. **NOTE** that &lt;list&gt; supports only &lt;list-item&gt; as it child components. The following is an example:
 
-If you use  **<div\>**  repeatedly to render a complex page, frame freezing may occur. In this case, use the  **<list\>**  component instead of  **<div\>**  to lay out list items, which provides a smooth list scrolling. Note that  **<list\>**  supports only  **<list-item\>**  as it child components. The following is an example:
 
 ```
 <!-- xxx.hml -->
@@ -15,6 +18,7 @@ If you use  **<div\>**  repeatedly to render a complex page, frame freezing may
 </list>
 ```
 
+
 ```
 /* xxx.css */
 .desc-text {
@@ -23,6 +27,7 @@ If you use  **<div\>**  repeatedly to render a complex page, frame freezing may
 }
 ```
 
+
 ```
 // xxx.js
 export default {
@@ -32,11 +37,13 @@ export default {
 }
 ```
 
-To shorten the sample code, the list contains only one  **<list-item\>**  component that holds only one  **<text\>**  component. In practice, a  **<list\>**  has multiple  **<list-item\>**  components, and a  **<list-item\>**  has multiple child components.
+To shorten the sample code, the list contains only one &lt;list-item&gt; component that holds only one &lt;text&gt; component. In practice, a &lt;list&gt; has multiple &lt;list-item&gt; components, and a &lt;list-item&gt; has multiple child components.
 
-## <Tabs\><a name="section91861363535"></a>
 
-If your page needs to be dynamically loaded, use the  **<tabs\>**  component. This component supports the change event, which is triggered after tab switching. A  **<tabs\>**  component can hold only one  **<tab-bar\>**  and one  **<tab-content\>**. The following is an example:
+## &lt;Tabs&gt;
+
+If your page needs to be dynamically loaded, use the &lt;tabs&gt; component. This component supports the change event, which is triggered after tab switching. A &lt;tabs&gt; component can hold only one &lt;tab-bar&gt; and one &lt;tab-content&gt;. The following is an example:
+
 
 ```
 <!-- xxx.hml -->
@@ -54,6 +61,7 @@ If your page needs to be dynamically loaded, use the  **<tabs\>**  component. Th
 </tabs>
 ```
 
+
 ```
 // xxx.js
 export default {
@@ -65,5 +73,4 @@ export default {
 }
 ```
 
-The  **<tab-content\>**  component is used to display the tab content, which vertically fills the remaining space of the  **<tabs\>**  component by default. 
-
+The &lt;tab-content&gt; component is used to display the tab content, which vertically fills the remaining space of the &lt;tabs&gt; component by default. 

en/application-dev/ui/ui-js-building-ui-layout-image.md

-# Adding an Image<a name="EN-US_TOPIC_0000001063590816"></a>
+# Adding an Image
 
-Generally, the  [**<image\>**](../reference/arkui-js/js-components-basic-image.md)  component is used to add images on a page. The method of using this component is similar to that of using the  **<text\>**  component.
 
-To reference images via the  **<image\>**  component, you must create the  **common**  directory under  **js**  \>  **default**, and then store the image files in the  **common**  directory. For details about the directory structure, see  [Directory Structure](js-framework-file.md). The following sample code shows you how to add an image and set its style.
+Generally, the [&lt;image&gt;](../reference/arkui-js/js-components-basic-image.md)component is used to add images on a page. The method of using this component is similar to that of using the &lt;text&gt; component.
+
+
+To reference images via the &lt;image&gt; component, you must create the common directory under jsdefault, and then store the image files in the common directory. For details about the directory structure, see [Directory Structure](js-framework-file.md). The following sample code shows you how to add an image and set its style.
 
 ```
 <!-- xxx.hml -->
@@ -26,4 +28,3 @@ export default {
   },
 }
 ```
-

en/application-dev/ui/ui-js-building-ui-layout-intro.md

-# Layout Description<a name="EN-US_TOPIC_0000001063230905"></a>
+# Layout Description
+
 
 The baseline width for page design is 720 logical pixels. The display width of a page element depends on the ratio of the screen width to the baseline width.
 
+
 For example, when the width of a component is 100 px, its display width is converted as follows:
 
+
 On a screen with the width of 720 physical pixels, the display width is 100 physical pixels. On a screen with the width of 1440 physical pixels, the display width is 200 physical pixels.
 
 Basic page elements include title, text, and image areas. Each basic element may contain multiple sub-elements. You can add components, such as buttons, switches, and progress bars, to these elements and sub-elements as required. When setting the layout, you need to consider the following for each basic element:
 
+
 - Size and arrangement
+
 - Overlapping with other elements
+
 - Alignment, padding, and margin
--   Sub-elements and their positions
--   Container components and their types
 
-You can disassemble elements on the page first and then implement them in sequence. This reduces visual confusion and logical conflicts caused by element nesting and improves code readability for easier modification. For example, as shown below, you disassemble the page elements and elements in the comment area.
+- Sub-elements and their positions
 
-**Figure  1**  Page layout<a name="fig11335192315417"></a>  
-![](figures/page-layout.png "page-layout")
+- Container components and their types
 
-**Figure  2**  Layout of the comment area<a name="fig186911810182717"></a>  
+  You can disassemble elements on the page first and then implement them in sequence. This reduces visual confusion and logical conflicts caused by element nesting and improves code readability for easier modification. For example, as shown below, you disassemble the page elements and elements in the comment area.
+  figure1 Page layout
 
+  ![en-us_image_0000001222967792](figures/en-us_image_0000001222967792.png)
 
-![](figures/figures3.png)
+  figure2 Layout of the comment area
 
+![en-us_image_0000001267767889](figures/en-us_image_0000001267767889.png)

en/application-dev/ui/ui-js-building-ui-layout-text.md

-# Adding Title and Paragraph Text<a name="EN-US_TOPIC_0000001063749052"></a>
+# Adding Title and Paragraph Text
+
+
+The &lt;text&gt; component is most commonly used to display text in title and paragraph areas. You can set attributes and styles for a &lt;text&gt; component and add the text to be displayed between the &lt;text&gt; and &lt;/text&gt; tags. For details about the attributes and styles, see [text](../reference/arkui-js/js-components-basic-text.md). The following is an example of adding title and paragraph text on a page:
+
 
-The  **<text\>**  component is most commonly used to display text in title and paragraph areas. You can set attributes and styles for a  **<text\>**  component and add the text to be displayed between the  **<text\>**  and  **</text\>**  tags. For details about the attributes and styles, see  [text](../reference/arkui-js/js-components-basic-text.md). The following is an example of adding title and paragraph text on a page:
 
 ```
 <!-- xxx.hml -->
@@ -11,6 +14,8 @@ The  **<text\>**  component is most commonly used to display text in title and p
 </div>
 ```
 
+
+
 ```
 /* xxx.css */
 .container {
@@ -31,6 +36,8 @@ The  **<text\>**  component is most commonly used to display text in title and p
 }
 ```
 
+
+
 ```
 // xxx.js
 export default {
@@ -41,4 +48,3 @@ export default {
   },
 }
 ```
-

en/application-dev/ui/ui-js-building-ui-layout.md

-# Building the Layout<a name="EN-US_TOPIC_0000001063148753"></a>
-
--   **[Layout Description](ui-js-building-ui-layout-intro.md)**  
-
--   **[Adding Title and Paragraph Text](ui-js-building-ui-layout-text.md)**  
-
--   **[Adding an Image](ui-js-building-ui-layout-image.md)**  
-
--   **[Adding a Comment](ui-js-building-ui-layout-comment.md)**  
-
--   **[Adding a Container](ui-js-building-ui-layout-external-container.md)**  
-
-

en/application-dev/ui/ui-js-building-ui-routes.md

-# Defining Page Routes<a name="EN-US_TOPIC_0000001063442795"></a>
+# Defining Page Routes
 
-Many applications consist of more than one page. For example, in a music application, a user taps a song on a music list page, and then needs to jump to the playback page of the song. You need to link these pages through page routing to implement redirection as required.
 
-The page router finds the target page based on the page URI. The following describes how to switch between two pages:
+An application generally consist of more than one page. For example, in a music application, a user taps a song on a music list page to jump to the playback page of the song. You need to link these pages through the page router to implement redirection as required.
 
-1.  In the  **Project**  window of DevEco Studio, choose  **entry \> src \> main**  \>  **js**  \>  **default**. Right-click the  **pages**  folder and choose  **New****JS Page**  from the shortcut menu to create the  **detail**  page.
-2.  Call  **router.push\(\)**  to navigate users to the  **detail**  page.
-3.  Call  **router.back\(\)**  to navigate users to the  **index**  page.
 
-## Building the Page Layout<a name="section135242911291"></a>
+The page router finds the target page based on the page URI. The following describes how to implement redirection between two pages:
+
+
+1. In the “Project“ window of DevEco Studio, choose entry > src > mainjsdefault. Right-click the pages folder and choose NewJS Page from the shortcut menu to create the detail page.
+
+2. Call router.push() to navigate users to the detail page.
+
+3. Call router.back() to navigate users to the index page.
+
+
+## Building the Page Layout
+
+The index and detail pages each contains a &lt;text> component that specifies the current page, and a &lt;button&gt; component that implements the switching between two pages. Example code in .hml files is as follows:
 
-The  **index**  and  **detail**  pages each contains a  **<text\>**  component that specifies the current page, and a  **<button\>**  component that implements the switching between two pages. Example code in  **.hml**  files is as follows:
 
 ```
 <!-- index.hml -->
@@ -20,6 +27,7 @@ The  **index**  and  **detail**  pages each contains a  **<text\>**  component t
 </div>
 ```
 
+
 ```
 <!-- detail.hml -->
 <div class="container">
@@ -28,9 +36,11 @@ The  **index**  and  **detail**  pages each contains a  **<text\>**  component t
 </div>
 ```
 
-## Setting Page Styles<a name="section174441114183216"></a>
 
-Set styles for the  **index**  and  **detail**  pages. Centers the  **<text\>**  and  **<button\>**  components and spaces the two components with 50 pixels. The CSS code for the two pages is as follows:
+## Setting Page Styles
+
+Set styles for the index and detail pages. Center the &lt;text&gt; and &lt;button&gt; components and space the two components with 50 pixels. The CSS code for the two pages is as follows:
+
 
 ```
 /* index.css */
@@ -47,9 +57,11 @@ Set styles for the  **index**  and  **detail**  pages. Centers the  **<text\>**
 }
 ```
 
-## Setting the Switch<a name="section1276711211359"></a>
 
-To make the  **launch**  method of the  **<button\>**  component take effect, the redirection logic needs to be implemented in the  **.js**  file of the page. Call  **router.push\(\)**  to add the page URI to the route stack, that is, to jump to the page specified by the URI. You need to import the router module before calling the router method. The sample code is as follows:
+## Implementing Redirection
+
+To make the launch method of the &lt;button&gt; component take effect, the redirection logic needs to be implemented in the .js file of the page. Call router.push() to add the page URI to the route stack, that is, to jump to the page specified by the URI. You need to import the router module before calling the router method. The sample code is as follows:
+
 
 ```
 // index.js
@@ -63,6 +75,7 @@ export default {
 }
 ```
 
+
 ```
 // detail.js
 import router from '@system.router';
@@ -73,8 +86,8 @@ export default {
 }
 ```
 
-The following figure shows the effect.
+The figure below shows the effect.
 
-**Figure  1**  Page routing<a name="fig41915914355"></a>  
-![](figures/page-routing.png "page-routing")
+  figure1 Page routing
 
+  ![en-us_image_0000001222967784](figures/en-us_image_0000001222967784.png)

en/application-dev/ui/ui-js-building-ui.md

-# Building the UI<a name="EN-US_TOPIC_0000001063580501"></a>
-
--   **[Component Overview](ui-js-building-ui-component.md)**  
-
--   **[Building the Layout](ui-js-building-ui-layout.md)**  
-
--   **[Adding Interactions](ui-js-building-ui-interactions.md)**  
-
--   **[Developing Animations](ui-js-building-ui-animation.md)**  
-
--   **[Defining Events](ui-js-building-ui-event.md)**  
-
--   **[Defining Page Routes](ui-js-building-ui-routes.md)**  
-
-

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

-# Common Component Development Guidelines<a name="EN-US_TOPIC_0000001154666642"></a>
-
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->The sample code provided in this document is applicable to the 720 px screen width on the phones.
-
--   **[Text](ui-js-components-text.md)**  
-
--   **[Input](ui-js-components-input.md)**  
-
--   **[Button](ui-js-components-button.md)**  
-
--   **[List](ui-js-components-list.md)**  
-
--   **[Picker](ui-js-components-picker.md)**  
-
--   **[Dialog](ui-js-components-dialog.md)**  
-
--   **[Form](ui-js-components-form.md)**  
-
--   **[Stepper](ui-js-components-stepper.md)**  
-
--   **[Tabs](ui-js-component-tabs.md)**  
-
--   **[Image](ui-js-components-images.md)**  
-
-

en/application-dev/ui/ui-js-component-tabs.md

-# Tabs<a name="EN-US_TOPIC_0000001157214240"></a>
+# &lt;tabs&gt; Development
 
-The  **<tabs\>**  component is a common UI component for navigation. It allows quick access to different functions of an app. For details, see  [tabs](../reference/arkui-js/js-components-container-tabs.md).
 
-## Creating Tabs<a name="section1820920264"></a>
+The &lt;tabs&gt; component is a common UI component for navigation. It allows quick access to different functions of an app. For details, see [tabs](../reference/arkui-js/js-components-container-tabs.md).
+
+
+## Creating Tabs
+
+Create a &lt;tabs&gt; component in the .hml file under pages/index.
 
-Create a  **<tabs\>**  component in the  **.hml**  file under  **pages/index**.
 
 ```
 <!-- index.hml -->
@@ -26,6 +29,7 @@ Create a  **<tabs\>**  component in the  **.hml**  file under  **pages/index**.
 </div>
 ```
 
+
 ```
 /* xxx.css */
 .container {
@@ -42,11 +46,13 @@ Create a  **<tabs\>**  component in the  **.hml**  file under  **pages/index**.
 }
 ```
 
-![](figures/3-9.gif)
+![en-us_image_0000001223287676](figures/en-us_image_0000001223287676.gif)
+
+
+## Setting the Tabs Orientation
 
-## Setting the Tabs Orientation<a name="section1696313408199"></a>
+By default, the active tab of a &lt;tabs&gt; component is the one with the specified index. To show the &lt;tabs&gt; vertically, set the vertical attribute to true.
 
-By default, the active tab of a  **<tabs\>**  component is the one with the specified  **index**. To show the  **<tabs\>**  vertically, set the  **vertical**  attribute to  **true**.
 
 ```
 <!-- index.hml -->
@@ -68,9 +74,10 @@ By default, the active tab of a  **<tabs\>**  component is the one with the spec
 </div>
 ```
 
-![](figures/29.gif)
+![en-us_image_0000001222967756](figures/en-us_image_0000001222967756.gif)
+
+Set the mode attribute to enable the child components of the <tab-bar> to be evenly distributed. Set the scrollable attribute to disable scrolling of the <tab-content>.
 
-Set the  **mode**  attribute to enable the child components of the  **<tab-bar\>**  to be evenly distributed. Set the  **scrollable**  attribute to disable scrolling of the  **<tab-content\>**.
 
 ```
 <!-- index.hml -->
@@ -92,11 +99,12 @@ Set the  **mode**  attribute to enable the child components of the  **<tab-bar\>
 </div>
 ```
 
-![](figures/30.gif)
+![en-us_image_0000001267647857](figures/en-us_image_0000001267647857.gif)
+
 
-## Setting the Style<a name="section482815298502"></a>
+## Setting the Style
 
-Set the background color, border, and tab-content layout of the  **<tabs\>**  component.
+  Set the background color, border, and tab-content layout of the &lt;tabs&gt; component.
 
 ```
 <!-- index.hml -->
@@ -118,6 +126,7 @@ Set the background color, border, and tab-content layout of the  **<tabs\>**  co
 </div>
 ```
 
+
 ```
 /* xxx.css */
 .container {
@@ -141,16 +150,17 @@ Set the background color, border, and tab-content layout of the  **<tabs\>**  co
   margin-top: 10px;
   height: 300px;
   color: blue;   
-  justify-content: center;
-  align-items: center;
+  justify-content: center;  align-items: center;
 }
 ```
 
-![](figures/31.gif)
+![en-us_image_0000001267767857](figures/en-us_image_0000001267767857.gif)
 
-## Displaying the Tab Index<a name="section331041121215"></a>
 
-Add the  **change**  event for the  **<tabs\>**  component to display the index of the current tab after tab switching.
+## Displaying the Tab Index
+
+Add the change event for the &lt;tabs&gt; component to display the index of the current tab after tab switching.
+
 
 ```
 <!-- index.hml -->
@@ -172,6 +182,7 @@ Add the  **change**  event for the  **<tabs\>**  component to display the index
 </div>
 ```
 
+
 ```
 /* index.js */
 import prompt from '@system.prompt';
@@ -184,17 +195,19 @@ export default {
 }
 ```
 
-![](figures/32.gif)
+![en-us_image_0000001222807772](figures/en-us_image_0000001222807772.gif)
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> - A &lt;tabs&gt; can wrap at most one [<tab-bar>](../reference/arkui-js/js-components-container-tab-bar.md) and at most one [<tab-content>](../reference/arkui-js/js-components-container-tab-content.md).
 
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->
->-   A  **<tabs\>**  can wrap at most one  [**<tab-bar\>**](../reference/arkui-js/js-components-container-tab-bar.md)  and at most one  [**<tab-content\>**](../reference/arkui-js/js-components-container-tab-content.md).
 
-## Example Scenario<a name="section1117302718531"></a>
+## Example Scenario
 
 In this example, you can switch between tabs and the active tab has the title text in red with an underline below.
 
-Use the  **<tabs\>**,  **<tab-bar\>**, and  **<tab-content\>**  components to implement tab switching. Then define the arrays and attributes. Add the  **change**  event to change the attribute values in the arrays so that the active tab has a different font color and an underline.
+Use the &lt;tabs&gt;, <tab-bar>, and <tab-content> components to implement tab switching. Then define the arrays and attributes. Add the change event to change the attribute values in the arrays so that the active tab has a different font color and an underline.
+
 
 ```
 <!-- index.hml -->
@@ -224,10 +237,11 @@ Use the  **<tabs\>**,  **<tab-bar\>**, and  **<tab-content\>**  components to im
 </div>
 ```
 
+
 ```
 /* xxx.css */
 .container{
-  background-color:#F1F3F5;
+background-color:#F1F3F5;
 }
 .tab_bar {
   width: 100%;
@@ -256,6 +270,7 @@ Use the  **<tabs\>**,  **<tab-bar\>**, and  **<tab-content\>**  components to im
 }
 ```
 
+
 ```
 /* index.js */
 import prompt from '@system.prompt';
@@ -299,5 +314,4 @@ export default {
 }
 ```
 
-![](figures/33.gif)
-
+![en-us_image_0000001267607885](figures/en-us_image_0000001267607885.gif)

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

-# Button<a name="EN-US_TOPIC_0000001202654279"></a>
+# &lt;button&gt; Development
 
-The  **<button\>**  component can be used to set a capsule, circle, text, arc, or download button. For details, see  [button](../reference/arkui-js/js-components-basic-button.md).
 
-## Creating a <button\> Component<a name="section1483585710237"></a>
+The&lt;button&gt;component can be used to set a capsule, circle, text, arc, or download button. For details, see [button](../reference/arkui-js/js-components-basic-button.md).
+
+
+## Creating a &lt;button&gt; Component
+
+Create a &lt;button&gt; component in the .hml file under pages/index.
 
-Create a  **<button\>**  component in the  **.hml**  file under  **pages/index**.
 
 ```
 <!-- xxx.hml -->
@@ -13,6 +16,7 @@ Create a  **<button\>**  component in the  **.hml**  file under  **pages/index**
 </div>
 ```
 
+
 ```
 /* xxx.css */
 .container {
@@ -23,11 +27,12 @@ Create a  **<button\>**  component in the  **.hml**  file under  **pages/index**
 }
 ```
 
-![](figures/3-2.png)
+![en-us_image_0000001267887821](figures/en-us_image_0000001267887821.png)
 
-## Setting the Button Type<a name="section1599710524112"></a>
 
-Set the  **type**  attribute of the  **<input\>**  component to  **button**,  **date**, or any of the supported values.
+## Setting the Button Type
+
+Set the type attribute of the &lt;input&gt; component to button, date, or any of the supported values.
 
 ```
 <!-- xxx.hml -->
@@ -61,15 +66,21 @@ Set the  **type**  attribute of the  **<input\>**  component to  **button**,  **
 }
 ```
 
-![](figures/05-3.png)
 
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->-   For capsule buttons, border-related styles are not supported.
->-   For circle buttons, text-related styles are not supported.
->-   For text buttons, the text size is adaptive, and  **radius**,  **width**, and  **height**  cannot be set. The  **background-color**  style is not supported when the background is completely transparent.
->-   If the icon used by the  **<button\>**  component is from the cloud, you must declare the  **ohos.permission.INTERNET**  permission in the  **config.json**  file under the  **resources**  folder.
+![en-us_image_0000001222967744](figures/en-us_image_0000001222967744.png)
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> - For capsule buttons, border-related styles are not supported.
+> 
+> - For circle buttons, text-related styles are not supported.
+> 
+> - For text buttons, the text size is adaptive, and radius, width, and height cannot be set. The background-color style is not supported when the background is completely transparent.
+> 
+> - If the icon used by the&lt;button&gt;component is from the cloud, you must declare the ohos.permission.INTERNET permission in the config.json file under the resources folder.
+
 
-Sample code for declaring the  **ohos.permission.INTERNET**  permission in the  **config.json**  file under the  **resources**  folder:
+Sample code for declaring the ohos.permission.INTERNET permission in the config.json file under the resources folder:
 
 ```
 <!-- config.json -->
@@ -80,9 +91,11 @@ Sample code for declaring the  **ohos.permission.INTERNET**  permission in the
 }
 ```
 
-## Showing the Download Progress<a name="section12724145171819"></a>
 
-Add the  **progress**  method to the  **<button\>**  component to display the download progress in real time.
+## Showing the Download Progress
+
+Add the progress method to the&lt;button&gt;component to display the download progress in real time.
+
 
 ```
 <!-- xxx.hml -->
@@ -91,6 +104,7 @@ Add the  **progress**  method to the  **<button\>**  component to display the do
 </div>
 ```
 
+
 ```
 /* xxx.css */
 .container { 
@@ -106,6 +120,7 @@ Add the  **progress**  method to the  **<button\>**  component to display the do
 }
 ```
 
+
 ```
 // xxx.js
 import prompt from '@system.prompt';
@@ -154,13 +169,14 @@ export default {
 }
 ```
 
-![](figures/34.gif)
+![en-us_image_0000001223287652](figures/en-us_image_0000001223287652.gif)
 
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
 >
->-   The  **setProgress**  method supports only buttons of the download type.
+> The setProgress method supports only buttons of the download type.
+
 
-## Example Scenario<a name="section64731917115116"></a>
+## Example Scenario
 
 Switch between the button types for different types of text.
 
@@ -262,5 +278,5 @@ export default {
 }
 ```
 
-![](figures/21.gif)
 
+![en-us_image_0000001222967740](figures/en-us_image_0000001222967740.gif)

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

-# Dialog<a name="EN-US_TOPIC_0000001201895755"></a>
+# &lt;dialog&gt; Development
 
-The  **<dialog\>**  component is custom pop-up container for showing critical information or calling for an action. For details, see  [dialog](../reference/arkui-js/js-components-container-dialog.md).
 
-## Creating a <dialog\> Component<a name="section174764398569"></a>
+The &lt;dialog&gt; component is custom pop-up container for showing critical information or calling for an action. For details, see [dialog](../reference/arkui-js/js-components-container-dialog.md).
 
-Create a  **<dialog\>**  component in the  **.hml**  file under  **pages/index**  and add  **<button\>**  components to trigger the  **<dialog\>**. The  **<dialog\>**  component supports only the  **width**,  **height**,  **margin**,  **margin-\[left|top|right|bottom\]**, and  **margin-\[start|end\]**  styles.
+
+## Creating a &lt;dialog&gt; Component
+
+  Create a &lt;dialog&gt; component in the .hml file under pages/index and add &lt;button&gt; components to trigger the &lt;dialog&gt;. The &lt;dialog&gt; component supports only the width, height, margin, margin-[left|top|right|bottom], and margin-[start|end] styles.
 
 ```
 <!-- xxx.hml -->
 <div class="doc-page">
-  <dialog class="dialogClass" id="dialogId">
-    <div class="content">
+  <dialog class="dialogClass" id="dialogId"><div class="content">
       <text>this is a dialog</text>
     </div>
   </dialog>
@@ -18,6 +19,7 @@ Create a  **<dialog\>**  component in the  **.hml**  file under  **pages/index**
 </div>
 ```
 
+
 ```
 /* xxx.css */
 .doc-page {
@@ -49,6 +51,7 @@ button{
 }
 ```
 
+
 ```
 /* xxx.js */
 export default {
@@ -59,11 +62,12 @@ export default {
 }
 ```
 
-![](figures/5-5.gif)
+![en-us_image_0000001267767893](figures/en-us_image_0000001267767893.gif)
 
-## Setting Dialog Box Response<a name="section15709114251818"></a>
 
-Add a  **cancel**  event that is triggered when a user touches a non-dialog area to cancel the pop-up dialog box. Add the  **show**  and  **close**  methods to display and close the dialog box, respectively.
+## Setting Dialog Box Response
+
+Add a cancel event that is triggered when a user touches a non-dialog area to cancel the pop-up dialog box. Add the show and close methods to display and close the dialog box, respectively.
 
 ```
 <!-- xxx.hml -->
@@ -125,16 +129,22 @@ export default {
 }
 ```
 
-![](figures/38.gif)
 
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->-   This component supports only one child component.
->-   Attributes and styles of a  **<dialog\>**  component cannot be dynamically updated.
->-   The  **<dialog\>**  component does not support the  **focusable**  and  **click-effect**  attributes.
+![en-us_image_0000001223287720](figures/en-us_image_0000001223287720.gif)
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> - This component supports only one child component.
+> 
+> - Attributes and styles of a &lt;dialog&gt; component cannot be dynamically updated.
+> 
+> - The &lt;dialog&gt; component does not support the focusable and click-effect attributes.
+
+
+## Example Scenario
 
-## Example Scenario<a name="section54252520379"></a>
 
-Use the  **<dialog\>**  component to implement a schedule. When the dialog box is open, use the  [**<textarea\>**](../reference/arkui-js/js-components-basic-textarea.md)  component to add an event and touch the OK button to obtain the current time and save the input text. The events in the calendar are displayed in a list.
+Use the &lt;dialog&gt; component to implement a schedule. When the dialog box is open, use the [&lt;textarea&gt;](../reference/arkui-js/js-components-basic-textarea.md) component to add an event and touch the OK button to obtain the current time and save the input text. The events in the calendar are displayed in a list.
 
 ```
 <!-- xxx.hml -->
@@ -292,5 +302,5 @@ export default {
 }
 ```
 
-![](figures/6.gif)
 
+![en-us_image_0000001223127756](figures/en-us_image_0000001223127756.gif)

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

-# Form<a name="EN-US_TOPIC_0000001201655789"></a>
+# &lt;form&gt; Development
 
-The  **<form\>**  component allows the content in  [**<input\>**](../reference/arkui-js/js-components-basic-input.md)  components to be submitted and reset. For details, see  [form](../reference/arkui-js/js-components-container-form.md).
 
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->This component is supported since API version 6.
+The &lt;form&gt; component allows the content in [&lt;input&gt;](../reference/arkui-js/js-components-basic-input.md)components to be submitted and reset. For details, see [form](../reference/arkui-js/js-components-container-form.md).
 
-## Creating a <form\> Component<a name="section1688401116367"></a>
 
-Create a  **<form\>**  component in the  **.hml**  file under  **pages/index**.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> This component is supported since API version 6.
+
+
+## Creating a &lt;form&gt; Component
+
+  Create a &lt;form&gt; component in the .hml file under pages/index.
 
 ```
 <!-- xxx.hml -->
 <div class="container">
-  <form> 
-    <input type="text" style="width:80%"></input>
+  <form>  <input type="text" style="width:80%"></input>
   </form>
 </div>
 ```
 
+
 ```
 /* xxx.css */
 .container {
@@ -28,11 +31,12 @@ Create a  **<form\>**  component in the  **.hml**  file under  **pages/index**.
 }
 ```
 
-![](figures/11.png)
+![en-us_image_0000001267887873](figures/en-us_image_0000001267887873.png)
 
-## Zooming In or Out on a Form<a name="section462755916266"></a>
 
-To implement the zoom effect after a form is clicked, add the  **click-effect**  attribute to the  **<form\>**  component. For values of  **click-effect**, see  [Universal Attributes](../reference/arkui-js/js-components-common-attributes.md).
+## Zooming In or Out on a Form
+
+  To implement the zoom effect after a form is clicked, add the click-effect attribute to the &lt;form&gt; component. For values of click-effect, see [Universal Attributes](../reference/arkui-js/js-components-common-attributes.md).
 
 ```
 <!-- xxx.hml -->
@@ -43,9 +47,11 @@ To implement the zoom effect after a form is clicked, add the  **click-effect**
 </div>
 ```
 
-## Setting the Form Style<a name="section17276142315293"></a>
 
-Add the  **background-color**  and  **border**  attributes.
+## Setting the Form Style
+
+
+Add the background-color and border attributes.
 
 ```
 /* xxx.css */
@@ -62,11 +68,13 @@ Add the  **background-color**  and  **border**  attributes.
 }
 ```
 
-![](figures/7.gif)
 
-## Adding Response Events<a name="section1587614482301"></a>
+![en-us_image_0000001267607913](figures/en-us_image_0000001267607913.gif)
+
 
-To submit or reset a form, add the  **submit**  and  **reset**  events.
+## Adding Response Events
+
+  To submit or reset a form, add the submit and reset events.
 
 ```
 <!-- xxx.hml -->
@@ -88,6 +96,7 @@ To submit or reset a form, add the  **submit**  and  **reset**  events.
 </div>
 ```
 
+
 ```
 /* xxx.js */
 import prompt from '@system.prompt';
@@ -105,13 +114,16 @@ export default{
 }
 ```
 
-![](figures/8-6.gif)
 
-## Example Scenario<a name="section54252520379"></a>
+![en-us_image_0000001267767885](figures/en-us_image_0000001267767885.gif)
+
+
+## Example Scenario
 
 Select an option and submit or reset the form data.
 
-Create  [**<input\>**](../reference/arkui-js/js-components-basic-input.md)  components, set their  **type**  attribute to  **checkbox**  and  **radio**, and use the  **onsubmit**  and  **onreset**  events of the  **<form\>**  component to submit and reset the form data.
+Create [&lt;input&gt;](../reference/arkui-js/js-components-basic-input.md) (en-us_topic_0000001173324647.xml) components, set their type attribute to checkbox and radio, and use the onsubmit and onreset events of the &lt;form&gt; component to submit and reset the form data.
+
 
 ```
 <!-- xxx.hml -->
@@ -148,6 +160,7 @@ Create  [**<input\>**](../reference/arkui-js/js-components-basic-input.md)  comp
 </div>
 ```
 
+
 ```
 /* index.css */
 .container {
@@ -165,6 +178,7 @@ label{
 }
 ```
 
+
 ```
 /* xxx.js */
 import prompt from '@system.prompt';
@@ -182,5 +196,4 @@ export default {
 }
 ```
 
-![](figures/9.gif)
-
+![en-us_image_0000001222967788](figures/en-us_image_0000001222967788.gif)

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

-# Image<a name="EN-US_TOPIC_0000001202854311"></a>
+# &lt;image&gt; Development
 
-The  **<image\>**  component is used to render and display images. For details, see  [image](../reference/arkui-js/js-components-basic-image.md).
 
-## Creating an <image\> Component<a name="section1688401116367"></a>
+The &lt;image&gt; component is used to render and display images. For details, see [image](../reference/arkui-js/js-components-basic-image.md).
 
-Create an  **<image\>**  component in the  **.hml**  file under  **pages/index**.
+
+## Creating an &lt;image&gt; Component
+
+  Create an &lt;image&gt; component in the .hml file under pages/index.
 
 ```
 <!-- index.hml -->
@@ -13,6 +15,7 @@ Create an  **<image\>**  component in the  **.hml**  file under  **pages/index**
 </div>
 ```
 
+
 ```
 /* xxx.css */
 .container {
@@ -23,11 +26,12 @@ Create an  **<image\>**  component in the  **.hml**  file under  **pages/index**
 }
 ```
 
-![](figures/10-10.png)
+![en-us_image_0000001223127736](figures/en-us_image_0000001223127736.png)
 
-## Setting the Image Style<a name="section17276142315293"></a>
 
-Set the  **width**,  **height**, and  **object-fit**  attributes to define the width, height, and scale type of an image.
+## Setting the Image Style
+
+Set the width, height, and object-fit attributes to define the width, height, and scale type of an image.
 
 ```
 <!-- index.hml -->
@@ -42,11 +46,10 @@ Set the  **width**,  **height**, and  **object-fit**  attributes to define the w
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background-color:#F1F3F5;
+background-color:#F1F3F5;
 }
 image{
-  width: 80%;
-  height: 500px;
+  width: 80%;  height: 500px;
   border: 5px solid saddlebrown;
   border-radius: 20px;
   object-fit: contain;
@@ -55,11 +58,13 @@ image{
 }
 ```
 
-![](figures/7-11.png)
 
-## Display Multiple Images<a name="section297282517378"></a>
+![en-us_image_0000001222807796](figures/en-us_image_0000001222807796.png)
 
-Define a  **for**  loop to display multiple images cyclically. Set  **option**  to specify the image scale style. For details about the scale styles, see the description of object-fit.
+
+## Display Multiple Images
+
+  Define a for loop to display multiple images cyclically. Set option to specify the image scale style. For details about the scale styles, see the description of object-fit.
 
 ```
 <!-- index.hml -->
@@ -81,6 +86,7 @@ Define a  **for**  loop to display multiple images cyclically. Set  **option**
 </div>
 ```
 
+
 ```
 /* xxx.css */
 .page-container {
@@ -114,6 +120,7 @@ Define a  **for**  loop to display multiple images cyclically. Set  **option**
 }
 ```
 
+
 ```
 /* index.js */
 export default {
@@ -129,11 +136,14 @@ export default {
 }
 ```
 
-![](figures/34-12.gif)
 
-## Loading Images<a name="section06913511375"></a>
+![en-us_image_0000001267767873](figures/en-us_image_0000001267767873.gif)
+
+
+## Loading Images
+
+When an image is successfully loaded, the complete event is triggered, and the loaded image is returned. If an exception occurs during image loading, the error event is triggered, and the image loading failure is printed.
 
-When an image is successfully loaded, the  **complete**  event is triggered, and the loaded image is returned. If an exception occurs during image loading, the  **error**  event is triggered, and the image loading failure is printed.
 
 ```
 <!-- index.hml -->
@@ -147,6 +157,7 @@ When an image is successfully loaded, the  **complete**  event is triggered, and
 </div>
 ```
 
+
 ```
 /* xxx.css */
 .container{
@@ -163,6 +174,7 @@ When an image is successfully loaded, the  **complete**  event is triggered, and
 }
 ```
 
+
 ```
 /* index.js */
 import prompt from '@system.prompt';
@@ -184,11 +196,12 @@ export default {
 }
 ```
 
-![](figures/111.gif)
+![en-us_image_0000001267887865](figures/en-us_image_0000001267887865.gif)
 
-## Example Scenario<a name="section54252520379"></a>
 
-In this example you touch and hold an image to gradually hide it. After the image is completely hidden, it will show in its original setting. Set a  **setInterval**  timer to change the image opacity at a specified interval so that it is hidden gradually. When the opacity changes to  **0**, the timer is cleared and the opacity is set to  **1**.
+## Example Scenario
+
+  In this example you touch and hold an image to gradually hide it. After the image is completely hidden, it will show in its original setting. Set a setInterval timer to change the image opacity at a specified interval so that it is hidden gradually. When the opacity changes to 0, the timer is cleared and the opacity is set to 1.
 
 ```
 <!-- index.hml -->
@@ -204,6 +217,7 @@ In this example you touch and hold an image to gradually hide it. After the imag
 </div>
 ```
 
+
 ```
 /* xxx.css */
 .page-container {
@@ -211,6 +225,7 @@ In this example you touch and hold an image to gradually hide it. After the imag
   align-self: center;
   justify-content: center;
   background-color:#F1F3F5;
+  background-color: #F1F3F5;
 }
 .content{
   flex-direction:column;
@@ -229,13 +244,10 @@ In this example you touch and hold an image to gradually hide it. After the imag
   justify-content: space-between;
 }
 .testimage {
-  width: 100%;
-  height: 400px; 
-  object-fit: scale-down;
-  border-radius: 20px;
-}
+  width: 100%;  height: 400px;   object-fit: scale-down;  border-radius: 20px;}
 ```
 
+
 ```
 /* index.js */
 import prompt from '@system.prompt';
@@ -263,5 +275,4 @@ export default {
 }
 ```
 
-![](figures/17.gif)
-
+![en-us_image_0000001267607905](figures/en-us_image_0000001267607905.gif)

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

-# Input<a name="EN-US_TOPIC_0000001202854309"></a>
+# <input> Development
 
-The  **<input\>**  component provides an interactive way to receive user input of various types, including  **date**,  **checkbox**, and  **button**. For details, see  [input](../reference/arkui-js/js-components-basic-input.md).
 
-## Creating an <input\> Component<a name="section119721242413"></a>
+The <input> component provides an interactive way to receive user input of various types, including date, checkbox, and button. For details, see [input](../reference/arkui-js/js-components-basic-input.md).
+
+
+## Creating an <input> Component
+
+Create an <input> component in the .hml file under pages/index.
 
-Create an  **<input\>**  component in the  **.hml**  file under  **pages/index**.
 
 ```
 <!-- xxx.hml -->
 <div class="container">       
-  <input type="text">         
-    Please enter the content
-  </input>
+  <input type="text">             Please enter the content  </input>
 </div>
 ```
 
+
 ```
 /* xxx.css */
 .container {
@@ -25,11 +27,13 @@ Create an  **<input\>**  component in the  **.hml**  file under  **pages/index**
 }
 ```
 
-![](figures/2.png)
+![en-us_image_0000001222807768](figures/en-us_image_0000001222807768.png)
+
 
-## Setting the Input Type<a name="section34344913465"></a>
+## Setting the Input Type
+
+Set the type attribute of the <input> component to button, date, or any of the supported values.
 
-Set the  **type**  attribute of the  **<input\>**  component to  **button**,  **date**, or any of the supported values.
 
 ```
 <!-- xxx.hml -->
@@ -51,6 +55,7 @@ Set the  **type**  attribute of the  **<input\>**  component to  **button**,  **
 </div>
 ```
 
+
 ```
 /* xxx.css */
 .container {
@@ -83,6 +88,7 @@ Set the  **type**  attribute of the  **<input\>**  component to  **button**,  **
 }
 ```
 
+
 ```
 // xxx.js
 export default {
@@ -92,15 +98,19 @@ export default {
 }
 ```
 
-![](figures/18.gif)
 
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->-   For wearables, the input type can only be  **button**,  **radio**, or  **checkbox**.
->-   The settings of  **checked**  take effect only when the input type is set to  **checkbox**  or  **radio**. The default value of  **checked**  is  **false**.
+![en-us_image_0000001223287672](figures/en-us_image_0000001223287672.gif)
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> - For wearables, the input type can only be button, radio, or checkbox.
+> 
+> - The settings of checked take effect only when the input type is set to checkbox or radio. The default value of checked is false.
 
-## Event Binding<a name="section44031114173719"></a>
 
-Add the  **search**  and  **translate**  events to the  **<input\>**  component.
+## Event Binding
+
+  Add the search and translate events to the <input> component.
 
 ```
 <!-- xxx.hml -->
@@ -113,6 +123,7 @@ Add the  **search**  and  **translate**  events to the  **<input\>**  component.
 </div>
 ```
 
+
 ```
 /* xxx.css */
 .content {
@@ -134,6 +145,7 @@ text{
 }
 ```
 
+
 ```
 // xxx.js
 import prompt from '@system.prompt'
@@ -153,11 +165,13 @@ export default {
 }
 ```
 
-![](figures/36.gif)
+![en-us_image_0000001267647853](figures/en-us_image_0000001267647853.gif)
 
-## Setting the Input Error Message<a name="section4314164631810"></a>
 
-Add the  **showError**  method to the  **<input\>**  component to display an error message in the event of incorrect input.
+## Setting the Input Error Message
+
+Add the showError method to the <input> component to display an error message in the event of incorrect input.
+
 
 ```
 <!-- xxx.hml -->
@@ -168,6 +182,7 @@ Add the  **showError**  method to the  **<input\>**  component to display an err
 </div>
 ```
 
+
 ```
 /* xxx.css */
 .content {
@@ -187,6 +202,7 @@ Add the  **showError**  method to the  **<input\>**  component to display an err
 }
 ```
 
+
 ```
 // xxx.js
 import prompt from '@system.prompt' 
@@ -203,13 +219,9 @@ import prompt from '@system.prompt'
    }, 
    buttonClick(e){ 
      if(this.value.length > 6){ 
-       this.$element("input").showError({ 
-         error:  'Up to 6 characters are allowed.' 
-        }); 
+       this.$element("input").showError({        error:  'Up to 6 characters are allowed.'       }); 
       }else if(this.value.length == 0){ 
-        this.$element("input").showError({ 
-          error:this.value + 'This field cannot be left empty.' 
-        }); 
+        this.$element("input").showError({         error:this.value + 'This field cannot be left empty.'       }); 
       }else{ 
         prompt.showToast({ 
           message: "success " 
@@ -219,15 +231,18 @@ import prompt from '@system.prompt'
  }
 ```
 
-![](figures/19.gif)
+![en-us_image_0000001223127708](figures/en-us_image_0000001223127708.gif)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> - This method is available when the input type is set to text, email, date, time, number, or password.
 
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->
->-   This method is available when the input type is set to  **text**,  **email**,  **date**,  **time**,  **number**, or  **password**.
 
-## Example Scenario<a name="section85617733119"></a>
+## Example Scenario
+
+
+Enter information by using the <input> component of the type that suits your needs.
+
 
-Enter information by using the  **<input\>**  component of the type that suits your needs.
 
 ```
 <!-- xxx.hml -->
@@ -257,6 +272,8 @@ Enter information by using the  **<input\>**  component of the type that suits y
 </div>
 ```
 
+
+
 ```
 /* xxx.css */
 .container { 
@@ -285,6 +302,8 @@ label {
 }
 ```
 
+
+
 ```
 // xxx.js
 import prompt from '@system.prompt';
@@ -301,5 +320,5 @@ export default {
 }     
 ```
 
-![](figures/4.gif)
 
+![en-us_image_0000001222807760](figures/en-us_image_0000001222807760.gif)

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

-# List<a name="EN-US_TOPIC_0000001156015762"></a>
+# &lt;list&gt; Development
 
-The  **<list\>**  component provides a list container that presents a series of list items arranged in a column with the same width. Lists can be used for presenting the same type of data in a multiple and coherent row style. For details, see  [list](../reference/arkui-js/js-components-container-list.md).
 
-## Creating a <list\> Component<a name="section1994073214247"></a>
+The &lt;list&gt; component provides a list container that presents a series of list items arranged in a column with the same width. Lists can be used for presenting the same type of data in a multiple and coherent row style. For details, see [list](../reference/arkui-js/js-components-container-list.md).
+
+
+## Creating a &lt;list&gt; Component
+
+Create a &lt;list&gt; component in the .hml file under pages/index.
 
-Create a  **<list\>**  component in the  **.hml**  file under  **pages/index**.
 
 ```
 <!-- index.hml -->
 <div class="container"> 
- <list>        
-   <list-item class="listItem"></list-item>
+ <list>    <list-item class="listItem"></list-item>
    <list-item class="listItem"></list-item>
    <list-item class="listItem"></list-item>
    <list-item class="listItem"></list-item>
@@ -18,6 +20,7 @@ Create a  **<list\>**  component in the  **.hml**  file under  **pages/index**.
 </div>
 ```
 
+
 ```
 /* xxx.css */
 .container {
@@ -32,15 +35,18 @@ Create a  **<list\>**  component in the  **.hml**  file under  **pages/index**.
 }
 ```
 
-![](figures/5.png)
+![en-us_image_0000001223287680](figures/en-us_image_0000001223287680.png)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> - &lt;list-item-group&gt; is a child component of the &lt;list&gt; component and is used to group items in a list. It can have a &lt;list-item&gt; nested inside, but not &lt;list&gt;.
+> 
+> - &lt;list-item&gt; is a child component of the &lt;list&gt; component and is used to display items in a list.
+
 
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->-   **<list-item-group\>**  is a child component of the  **<list\>**  component and is used to group items in a list. It can have a  **<list-item\>**  nested inside, but not  **<list\>**.
->-   **<list-item\>**  is a child component of the  **<list\>**  component and is used to display items in a list.
+## Adding a Scrollbar
 
-## Adding a Scrollbar<a name="section178831773548"></a>
+To display a scrollbar on the right side of the screen, set scrollbar to on. The side scrollbar can be used to scroll a long list or the screen up or down.
 
-To display a scrollbar on the right side of the screen, set  **scrollbar**  to  **on**. The side scrollbar can be used to scroll a long list or the screen up or down.
 
 ```
 <!-- index.hml -->
@@ -56,6 +62,7 @@ To display a scrollbar on the right side of the screen, set  **scrollbar**  to
 </div> 
 ```
 
+
 ```
 /* index.css */
 .container {
@@ -74,11 +81,13 @@ To display a scrollbar on the right side of the screen, set  **scrollbar**  to
 }
 ```
 
-![](figures/24.gif)
+![en-us_image_0000001223287684](figures/en-us_image_0000001223287684.gif)
 
-## Adding a Side Index Bar<a name="section592683718436"></a>
 
-Set a custom  **indexer**  component to add an index bar at the right boundary of a list. By default, an alphabetical indexer is used.
+## Adding a Side Index Bar
+
+Set a custom indexer component to add an index bar at the right boundary of a list. By default, an alphabetical indexer is used.
+
 
 ```
 <!-- index.hml -->
@@ -89,9 +98,10 @@ Set a custom  **indexer**  component to add an index bar at the right boundary o
 </div>
 ```
 
+
 ```
 /* index.css */
-.container {
+.container{
   flex-direction: column;
   background-color: #F1F3F5;
  } 
@@ -102,15 +112,18 @@ Set a custom  **indexer**  component to add an index bar at the right boundary o
 }
 ```
 
-![](figures/00.png)
+![en-us_image_0000001223127716](figures/en-us_image_0000001223127716.png)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> - This indexer attribute is valid only when flex-direction is set to column and columns is set to 1.
+> 
+> - You must include "\#" when using a customized indexer.
+
 
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->-   This  **indexer**  attribute is valid only when  **flex-direction**  is set to  **column**  and  **columns**  is set to  **1**.
->-   You must include  **"\#"**  when using a customized indexer.
+## Collapsing or Expanding a List
 
-## Collapsing or Expanding a List<a name="section940022183115"></a>
+To allow a &lt;list&gt; component to collapse and expand, add groupcollapse and groupexpand events.
 
-To allow a  **<list\>**  component to collapse and expand, add  **groupcollapse**  and  **groupexpand**  events.
 
 ```
 <!-- index.hml -->
@@ -132,6 +145,7 @@ To allow a  **<list\>**  component to collapse and expand, add  **groupcollapse*
 </div>
 ```
 
+
 ```
 /* index.css */
 .doc-page {
@@ -152,6 +166,7 @@ margin-top:30px;
 }
 ```
 
+
 ```
 // xxx.js
 import prompt from '@system.prompt';
@@ -183,21 +198,18 @@ export default {
 }
 ```
 
-![](figures/8-4.gif)
+![en-us_image_0000001267887845](figures/en-us_image_0000001267887845.gif)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> - The groupcollapse and groupexpand events can be used only by the list-item-group component.
 
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->
->-   The  **groupcollapse**  and  **groupexpand**  events can be used only by the  **list-item-group**  component.
 
-## Example Scenario<a name="section1945019230211"></a>
+## Example Scenario
 
 Search for contacts by using an alphabetical indexer.
 
 ```
 <!-- index.hml -->
-```
-
-```
 <div class="doc-page"> 
   <text style="font-size: 35px; font-weight: 500; text-align: center; margin-top: 20px; margin-bottom: 20px;"> 
       <span>Contacts</span> 
@@ -294,5 +306,5 @@ export default {
  }
 ```
 
-![](figures/27.gif)
 
+![en-us_image_0000001267767861](figures/en-us_image_0000001267767861.gif)

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

-# Picker<a name="EN-US_TOPIC_0000001155695748"></a>
+# &lt;picker&gt; Development
 
-The  **<picker\>**  component supports common, date, time, data and time, and multi-column text selectors. For details, see  [picker](../reference/arkui-js/js-components-basic-picker.md).
 
-## Creating a <picker\> Component<a name="section19696122895318"></a>
+The &lt;picker&gt; component supports common, date, time, data and time, and multi-column text selectors. For details, see [picker](../reference/arkui-js/js-components-basic-picker.md).
+
+
+## Creating a &lt;picker&gt; Component
+
+Create a &lt;picker&gt; component in the .hml file under pages/index.
 
-Create a  **<picker\>**  component in the  **.hml**  file under  **pages/index**.
 
 ```
 <!-- index.hml -->
 <div class="container">
-  <picker>
-    picker
-  </picker>
+  <picker>    picker  </picker>
 <div>
 ```
 
+
 ```
 /* index.css */
 .container {
@@ -25,11 +27,13 @@ Create a  **<picker\>**  component in the  **.hml**  file under  **pages/index**
 }
 ```
 
-![](figures/20211008-184455(welinkpc).gif)
+![en-us_image_0000001223287716](figures/en-us_image_0000001223287716.gif)
+
 
-## Setting the Picker Type<a name="section78391556183"></a>
+## Setting the Picker Type
+
+Set the type attribute of the &lt;picker&gt; component. For example, set it to date.
 
-Set the  **type**  attribute of the  **<picker\>**  component. For example, set it to  **date**.
 
 ```
 <!-- index.hml -->
@@ -39,6 +43,7 @@ Set the  **type**  attribute of the  **<picker\>**  component. For example, set
 </div>
 ```
 
+
 ```
 /* index.css */
 .container {
@@ -52,6 +57,7 @@ Set the  **type**  attribute of the  **<picker\>**  component. For example, set
 }
 ```
 
+
 ```
 // xxx.js
 export default {
@@ -63,15 +69,18 @@ export default {
 }
 ```
 
-![](figures/20211217-130837(welinkpc).gif)
+![en-us_image_0000001267647893](figures/en-us_image_0000001267647893.gif)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> - When setting the value range of a common selector, you must use the data binding mode.
+> 
+> - The lunarswitch attribute of the date selector is only supported on phones and tablets.
 
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->-   When setting the value range of a common selector, you must use the data binding mode.
->-   The  **lunarswitch**  attribute of the date selector is only supported on phones and tablets.
 
-## Setting the Time Format<a name="section1971415321217"></a>
+## Setting the Time Format
+
+Set the hours attribute to specify the time format used by the time selector. Available values include 12 and 24, indicating the 12-hour format and 24-hour format, respectively.
 
-Set the  **hours**  attribute to specify the time format used by the time selector. Available values include  **12**  and  **24**, indicating the 12-hour format and 24-hour format, respectively.
 
 ```
 <!-- index.hml -->
@@ -81,6 +90,7 @@ Set the  **hours**  attribute to specify the time format used by the time select
 </div>
 ```
 
+
 ```
 /* index.css */
 .container {
@@ -96,15 +106,18 @@ Set the  **hours**  attribute to specify the time format used by the time select
 }
 ```
 
-![](figures/25.gif)
+![en-us_image_0000001222807808](figures/en-us_image_0000001222807808.gif)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> - When hours is set to 12, the time is displayed in 12-hour format and distinguished by a.m. and p.m.
+> 
+> - When hours is set to 24, the time is displayed in 24-hour format.
+
 
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->-   When  **hours**  is set to  **12**, the time is displayed in 12-hour format and distinguished by a.m. and p.m.
->-   When  **hours**  is set to  **24**, the time is displayed in 24-hour format.
+## Adding Response Events
 
-## Adding Response Events<a name="section20659132323820"></a>
+To confirm and cancel selection, add change and cancel events.
 
-To confirm and cancel selection, add  **change**  and  **cancel**  events.
 
 ```
 <!-- index.hml -->
@@ -114,6 +127,7 @@ To confirm and cancel selection, add  **change**  and  **cancel**  events.
 </div>
 ```
 
+
 ```
 /* index.css */
 .container {
@@ -131,6 +145,7 @@ To confirm and cancel selection, add  **change**  and  **cancel**  events.
 }
 ```
 
+
 ```
 // xxx.js
 import prompt from '@system.prompt';
@@ -150,11 +165,13 @@ export default {
 }
 ```
 
-![](figures/26.gif)
+![en-us_image_0000001223127748](figures/en-us_image_0000001223127748.gif)
+
+
+## Example Scenario
 
-## Example Scenario<a name="section36086283455"></a>
 
-Implement a health check-in application by using the  **<picker\>**  component.
+Implement a health check-in application by using the &lt;picker&gt; component.
 
 ```
 <!-- index.hml -->
@@ -277,5 +294,5 @@ export default {
 }
 ```
 
-![](figures/qqqq.gif)
 
+![en-us_image_0000001267887877](figures/en-us_image_0000001267887877.gif)

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

-# Stepper<a name="EN-US_TOPIC_0000001156894290"></a>
+# &lt;stepper&gt; Development
 
-When multiple steps are required to complete a task, you can use the  **<stepper\>**  component to navigate your users through the whole process. For details, see  [stepper](../reference/arkui-js/js-components-container-stepper.md).
 
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->This component is supported since API version 5.
+When multiple steps are required to complete a task, you can use the &lt;stepper&gt; component to navigate your users through the whole process. For details, see [stepper](../reference/arkui-js/js-components-container-stepper.md).
 
-## Creating a <stepper\> Component<a name="section1820920264"></a>
 
-Create a  **<stepper\>**  component in the  **.hml**  file under  **pages/index**.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> This component is supported since API version 5.
+
+
+## Creating a &lt;stepper&gt; Component
+
+Create a &lt;stepper&gt; component in the .hml file under pages/index.
+
 
 ```
 <!-- index.hml -->
 <div class="container"> 
- <stepper>    
-   <stepper-item>     
+ <stepper>    <stepper-item>     
      <text>Step 1</text>
    </stepper-item> 
    <stepper-item>     
@@ -23,6 +26,7 @@ Create a  **<stepper\>**  component in the  **.hml**  file under  **pages/index*
 </div>
 ```
 
+
 ```
 /* xxx.css */
 .container {
@@ -38,11 +42,13 @@ text{
 }
 ```
 
-![](figures/2-7.gif)
+![en-us_image_0000001223287656](figures/en-us_image_0000001223287656.gif)
+
 
-## Setting the Index<a name="section1696313408199"></a>
+## Setting the Index
+
+Set index to the index value of the step that you want to display by default.
 
-Set  **index**  to the index value of the step that you want to display by default.
 
 ```
 <!-- index.hml -->
@@ -61,6 +67,7 @@ Set  **index**  to the index value of the step that you want to display by defau
 </div>
 ```
 
+
 ```
 /* index.css */
 .container {
@@ -74,9 +81,10 @@ text{
 }
 ```
 
-![](figures/10.gif)
+![en-us_image_0000001267767837](figures/en-us_image_0000001267767837.gif)
+
+Set the label attribute to customize the button text for the &lt;stepper-item&gt;.
 
-Set the  **label**  attribute to customize the button text for the  **<stepper-item\>**.
 
 ```
 <!-- index.hml -->
@@ -98,6 +106,7 @@ Set the  **label**  attribute to customize the button text for the  **<stepper-i
 </div>
 ```
 
+
 ```
 /* index.css */
 .container {
@@ -111,14 +120,12 @@ text{
 }
 ```
 
+
 ```
 /* index.js */
 export default { 
   data: {
-    label_1:{
-      nextLabel: 'NEXT',
-      status: 'normal'
-    },
+    label_1:{      nextLabel: 'NEXT',      status: 'normal'    },
     label_2:{
       prevLabel: 'BACK',
       nextLabel: 'NEXT',
@@ -133,11 +140,12 @@ export default {
 }
 ```
 
-![](figures/11-8.gif)
+![en-us_image_0000001267767841](figures/en-us_image_0000001267767841.gif)
 
-## Setting the Style<a name="section482815298502"></a>
 
-By default, the  **<stepper\>**  component fills entire space of its container. The sample code below shows how to set the border and background color using the  **border**  and  **background-color**  attributes.
+## Setting the Style
+
+  By default, the &lt;stepper&gt; component fills entire space of its container. The sample code below shows how to set the border and background color using the border and background-color attributes.
 
 ```
 <!-- index.hml -->
@@ -152,6 +160,7 @@ By default, the  **<stepper\>**  component fills entire space of its container.
 </div>
 ```
 
+
 ```
 /* index.css */
 .container {
@@ -165,8 +174,7 @@ By default, the  **<stepper\>**  component fills entire space of its container.
   height: 300px;
 }
 .stepperClass{
-  border:1px solid silver ;
-  background-color: white;
+  border:1px solid silver ;  background-color: white;
 }
 text{
   width: 100%;
@@ -175,14 +183,16 @@ text{
 }
 ```
 
-![](figures/02.png)
+![en-us_image_0000001223287668](figures/en-us_image_0000001223287668.png)
 
-## Adding Events<a name="section331041121215"></a>
 
-The  **<stepper\>**  component supports the  **finish**,  **change**,  **next**,  **back**, and  **skip**  events.
+## Adding Events
 
--   When the  **change**  and  **next**  or  **back**  events exist at the same time, the  **next**  or  **back**  event is executed before the  **change**  event.
--   Before resetting the  **index**  attribute, you must remove the current value. Otherwise, the value change cannot be detected.
+The &lt;stepper&gt; component supports the finish, change, next, back, and skip events.
+
+- When the change and next or back events exist at the same time, the next or back event is executed before the change event.
+
+- Before resetting the index attribute, you must remove the current value. Otherwise, the value change cannot be detected.
 
 ```
 <!-- index.hml -->
@@ -205,6 +215,7 @@ The  **<stepper\>**  component supports the  **finish**,  **change**,  **next**,
 </div>
 ```
 
+
 ```
 /* xxx.css */
 .doc-page {
@@ -231,6 +242,7 @@ button{
 }
 ```
 
+
 ```
 /* index.js */
 import prompt from '@system.prompt';
@@ -272,13 +284,15 @@ export default {
 }
 ```
 
-![](figures/37.gif)
+![en-us_image_0000001267607869](figures/en-us_image_0000001267607869.gif)
+
 
-## Example Scenario<a name="section1117302718531"></a>
+## Example Scenario
 
 Select the options displayed on the page. Your selection will be shown in real time. Click the next button to dynamically change the font color and font size on the page.
 
-Use the  **<stepper\>**  component to navigate through the steps. Create a  [**<toggle\>**](../reference/arkui-js/js-components-basic-toggle.md)  component to implement the functions of selection and displaying the selection result. Then use the  [**<select\>**](../reference/arkui-js/js-components-basic-select.md)  component to dynamically change the font color or size of the selected options.
+Use the &lt;stepper&gt; component to navigate through the steps. Create a [&lt;toggle&gt;](../reference/arkui-js/js-components-basic-toggle.md) component to implement the functions of selection and displaying the selection result. Then use the [&lt;select&gt;](../reference/arkui-js/js-components-basic-select.md) component to dynamically change the font color or size of the selected options.
+
 
 ```
 <div class="container">
@@ -321,6 +335,7 @@ Use the  **<stepper\>**  component to navigate through the steps. Create a  [**<
 </div>
 ```
 
+
 ```
 /* xxx.css */
 .container {
@@ -340,6 +355,7 @@ Use the  **<stepper\>**  component to navigate through the steps. Create a  [**<
 }
 ```
 
+
 ```
 /* index.js */
 import prompt from '@system.prompt';
@@ -382,5 +398,4 @@ export default {
 }
 ```
 
-![](figures/28.gif)
-
+![en-us_image_0000001267887817](figures/en-us_image_0000001267887817.gif)

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

-# Text<a name="EN-US_TOPIC_0000001157214238"></a>
+# &lt;text&gt; Development
 
-The  **<text\>**  component is used to display a piece of textual information. For details, see  [text](../reference/arkui-js/js-components-basic-text.md).
 
-## Creating a <text\> Component<a name="section1466515586539"></a>
+The &lt;text&gt; component is used to display a piece of textual information. For details, see [text](../reference/arkui-js/js-components-basic-text.md).
+
+
+## Creating a &lt;text&gt; Component
+
+Create a &lt;text&gt; component in the .hml file under pages/index.
 
-Create a  **<text\>**  component in the  **.hml**  file under  **pages/index**.
 
 ```
 <!-- xxx.hml -->
 <div class="container" style="text-align: center;justify-content: center; align-items: center;">
-  <text>   
-     Hello World  
-  </text>
+  <text>Hello World</text>
 </div>
 ```
 
+
 ```
 /* xxx.css */
 .container {
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   align-items: center;
   justify-content: center;
@@ -25,96 +29,128 @@ Create a  **<text\>**  component in the  **.hml**  file under  **pages/index**.
 }
 ```
 
-![](figures/01.png)
+![en-us_image_0000001222807780](figures/en-us_image_0000001222807780.png)
+
 
-## Setting the Text Style and Attributes<a name="section99161742155912"></a>
+## Setting the Text Style and Attributes
 
 - Adding a text style
 
-Set the  **color**,  **font-size**, and  **allow-scale**  attributes.
 
-```
-<!-- xxx.hml -->
-<div class="container" style="background-color:#F1F3F5;justify-content: center; align-items: center;">   
+  Set the color, font-size, allow-scale, word-spacing, and text-valign attributes to apply the color, size, zoom, spacing, and vertical alignment styles to the text.
+
+  ```
+  <!-- xxx.hml -->
+  <div class="container" style="background-color:#F1F3F5;flex-direction: column;justify-content: center; align-items: center;">   
     <text style="color: blueviolet; font-size: 40px; allow-scale:true"> 
       This is a passage
     </text>
-</div>
-```
+    <text style="color: blueviolet; font-size: 40px; margin-top: 20px; allow-scale:true;word-spacing: 20px;" >
+      This is a passage
+    </text>
+  </div>
+  ```
+
+  
+
+  ```
+  /* xxx.css */
+  .container {
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: #F1F3F5;
+  }
+  ```
+
 
-![](figures/01-0.png)
+  ![en-us_image_0000001222967764](figures/en-us_image_0000001222967764.png)
 
 - Adding a text modifier
 
-Set the  **text-decoration**  attribute to add an underline, overline, line-through, or a combination of lines to selected text. For values of  **text-decoration**, see [Text Style](../reference/arkui-js/js-components-basic-text.md).
 
-```
-<!-- xxx.hml -->
-<div class="container" style="background-color:#F1F3F5;">
+  Set the text-decoration attribute to add a line to selected text. Set the text-decoration-color attribute to apply specific color to the added line. For values of text-decoration, see [Text Style](../reference/arkui-js/js-components-basic-text.md).
+
+  ```
+  <!-- xxx.hml -->
+  <div class="container" style="background-color:#F1F3F5;">
     <text style="text-decoration:underline">
       This is a passage
     </text>
-  <text style="text-decoration:line-through">
+    <text style="text-decoration:line-through;text-decoration-color: red">
       This is a passage
     </text>
-</div>
-```
+  </div>
+  ```
 
-```
-/* xxx.css */
-.container {
+  ```
+  /* xxx.css */
+  .container {
+    width: 100%;
+    height: 100%;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-}
-text{
+  }
+  text{
     font-size: 50px;
-}
-```
+  }
+  ```
 
-![](figures/3.png)
+
+  ![en-us_image_0000001223287688](figures/en-us_image_0000001223287688.png)
 
 - Hiding text content
 
-Set the  **text-overflow**  attribute to  **ellipsis**  so that overflowed text is displayed as an ellipsis.
 
-```
-<!-- xxx.hml -->
-<div class="container">
+  Set the text-overflow attribute to ellipsis so that overflowed text is displayed as an ellipsis.
+
+  ```
+  <!-- xxx.hml -->
+  <div class="container">
     <text class="text">
       This is a passage
     </text>
-</div>
-```
+  </div>
+  ```
 
-```
-/* xxx.css */
-.container {
+  ```
+  /* xxx.css */
+  .container {
+    width: 100%;
+    height: 100%;
     flex-direction: column;
     align-items: center;
     background-color: #F1F3F5;
     justify-content: center;
-}
-.text{
+  }
+  .text{
     width: 200px;
     max-lines: 1;
     text-overflow:ellipsis;
-}
-```
+  }
+  ```
+
+
+  > ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+  > - text-overflow must be used together with max-lines.
+  >
+  > - max-lines indicates the maximum number of lines in the text.
 
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->-   **text-overflow**  must be used together with  **max-lines**.
->-   **max-lines**  indicates the maximum number of lines in the text.
 
-![](figures/05.png)
+![en-us_image_0000001267647865](figures/en-us_image_0000001267647865.png)
+
 
 - Setting the text line breaking mode
 
-Set the  **word-break**  attribute to specify how to break lines of text. For values of  **word-break**, see  [Text Styles](../reference/arkui-js/js-components-basic-text.md).
 
-```
-<!-- xxx.hml -->
-<div class="container">
+  Set the word-break attribute to specify how to break lines of text. For values of word-break, see [Text Styles](../reference/arkui-js/js-components-basic-text.md).
+
+  ```
+  <!-- xxx.hml -->
+  <div class="container">
     <div class="content">
       <text class="text1">
         Welcome to the world
@@ -123,43 +159,44 @@ Set the  **word-break**  attribute to specify how to break lines of text. For va
         Welcome to the world
       </text>
     </div>
-</div>
-```
+  </div>
+  ```
 
-```
-/* xxx.css */
-.container {
+  ```
+  /* xxx.css */
+  .container {
     background-color: #F1F3F5;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-}
-.content{
+  }
+  .content{
     width: 50%;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-}
-.text1{
+  }
+  .text1{
     height: 200px;
     border:1px solid #1a1919;
     margin-bottom: 50px;
     text-align: center;
     word-break: break-word;
     font-size: 40px;
-}
-.text2{
+  }
+  .text2{
     height: 200px;
     border:1px solid #0931e8;
     text-align: center;
     word-break: break-all;
     font-size: 40px;
-}
-```
+  }
+  ```
+
 
-![](figures/8.png)
+  ![en-us_image_0000001267767865](figures/en-us_image_0000001267767865.png)
 
--   Setting the  [**<span\>**](../reference/arkui-js/js-components-basic-span.md)  child component
+- Setting the [&lt;span&gt;](../reference/arkui-js/js-components-basic-span.md)child component
 
 ```
 <!-- xxx.hml -->
@@ -168,32 +205,29 @@ Set the  **word-break**  attribute to specify how to break lines of text. For va
     This is a passage
   </text>
   <text style="font-size: 45px;">
-    <span style="color: aqua;">This </span>
-    <span style="color: #F1F3F5;">
-      1
-    </span>
-    <span style="color: blue;"> is a </span>
-    <span style="color: #F1F3F5;">
-      1
-    </span>
-    <span style="color: red;">  passage </span>
+    <span style="color: aqua;">This </span><span style="color: #F1F3F5;">      1    </span>    <span style="color: blue;"> is a </span>    <span style="color: #F1F3F5;">      1    </span>    <span style="color: red;">  passage </span>
   </text>
 </div>
 ```
 
-![](figures/01-1.png)
 
->![](../public_sys-resources/icon-note.gif) **NOTE:** 
->-   When the  **<span\>**  child component is used to form a text paragraph, incorrect  **<span\>**  attribute settings \(for example, setting of  **font-weight**  to  **1000**\) will result in abnormal display of the text paragraph.
->-   When the  **<span\>**  child component is being used, do not include any text you want to show in the  **<text\>**  component, as such text will not be displayed if you do so.
+![en-us_image_0000001223127720](figures/en-us_image_0000001223127720.png)
 
-## Example Scenario<a name="section7280164491412"></a>
 
-Use the  **<text\>**  component to display text content through data binding. Use the  **<span\>**  child component to hide or display text content by setting the  **show**  attribute.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> - When the &lt;span&gt; child component is used to form a text paragraph, incorrect &lt;span&gt; attribute settings (for example, setting of font-weight to 1000) will result in abnormal display of the text paragraph.
+> 
+> - When the &lt;span&gt; child component is being used, do not include any text you want to show in the &lt;text&gt; component, as such text will not be displayed if you do so.
 
-```
-<!-- xxx.hml -->
-<div class="container">
+
+## Example Scenario
+
+Use the &lt;text&gt; component to display text content through data binding. Use the &lt;span&gt; child component to hide or display text content by setting the show attribute.
+
+
+    ```
+    <!-- xxx.hml -->
+    <div class="container">
       <div style="align-items: center;justify-content: center;">
         <text class="title">
           {{ content }}
@@ -207,8 +241,9 @@ Use the  **<text\>**  component to display text content through data binding. Us
         </span>
         <span style="color: #f76160">Hide clip </span>
       </text>
-</div>
-```
+    </div>
+    ```
+
 
 ```
 /* xxx.css */
@@ -226,6 +261,7 @@ Use the  **<text\>**  component to display text content through data binding. Us
 }
 ```
 
+
 ```
 // xxx.js
 export default {   
@@ -240,5 +276,4 @@ export default {
 }
 ```
 
-![](figures/1.gif)
-
+![en-us_image_0000001267887849](figures/en-us_image_0000001267887849.gif)

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

-# Custom Components<a name="EN-US_TOPIC_0000001063340553"></a>
+# Custom Components
+
 
 The ArkUI that uses the JavaScript-based web-like development paradigm supports custom components for you to extend existing components. You can encapsulate custom private attributes and events into new components to reuse them multiple times in your project. This also improves code readability. The following is an example:
 
--   **Building a custom component**
+
+- Building a custom component
   
   ```
   <!-- comp.hml -->
@@ -13,6 +15,7 @@ The  ArkUI that uses the JavaScript-based web-like development paradigm supports
    </div>
   ```
 
+  
   ```
   /* comp.css */
    .item { 
@@ -37,6 +40,7 @@ The  ArkUI that uses the JavaScript-based web-like development paradigm supports
    }
   ```
 
+  
   ```
   // comp.js
    export default {
@@ -58,7 +62,7 @@ The  ArkUI that uses the JavaScript-based web-like development paradigm supports
    }
   ```
 
--   **Introducing the custom component**
+- Introducing the custom component
   
   ```
   <!-- xxx.hml -->
@@ -69,6 +73,7 @@ The  ArkUI that uses the JavaScript-based web-like development paradigm supports
    </div>
   ```
 
+  
   ```
   /* xxx.css */
    .container { 
@@ -79,6 +84,7 @@ The  ArkUI that uses the JavaScript-based web-like development paradigm supports
    } 
   ```
 
+  
   ```
   // xxx.js
    export default { 
@@ -93,8 +99,8 @@ The  ArkUI that uses the JavaScript-based web-like development paradigm supports
   ```
 
 
-In this example, the parent component passes the customized attribute through  **title**  to the child component, and the child component receives the attribute value in  **props**. The child component passes  **text**  to the parent through the bound event, and the passed value is obtained via  **e.detail**. To successfully bind the child component event to the parent component, ensure that the event name meet the requirements for event binding. For details, see  [Basic Usage of Custom Components](../reference/arkui-js/js-components-custom-basic-usage.md). The following figures show how the custom component works.
+In this example, the parent component passes the customized attribute through title to the child component, and the child component receives the attribute value in props. The child component passes text to the parent through the bound event, and the passed value is obtained via e.detail. To successfully bind the child component event to the parent component, ensure that the event name meet the requirements for event binding. For details, see [Basic Usage of Custom Components](../reference/arkui-js/js-components-custom-basic-usage.md). The following figures show how the custom component works.
 
-**Figure  1**  Running effect<a name="fig12947164917208"></a>  
-![](figures/running-effect.png "running-effect")
+  figure1 Running effect
 
+  ![en-us_image_0000001222807816](figures/en-us_image_0000001222807816.png)

en/application-dev/ui/ui-js-overview.md

-# Overview<a name="EN-US_TOPIC_0000001064068634"></a>
+# Overview
 
- ArkUI with the JavaScript-based web-like development paradigm provides UI components \(basic, container, canvas, and more\) and standard CSS animation capabilities.
 
-## Basic Capabilities<a name="section1393616301083"></a>
+The web-like development paradigm uses the classical three-stage programming model, in which OpenHarmony Markup Language (HML) is used for building layouts, CSS for defining styles, and JavaScript for adding processing logic. UI components are associated with data through one-way data-binding. This means that when data changes, the UI automatically updates with the new data. This development paradigm has a low learning curve for frontend web developers, allowing them to quickly transform existing web applications into ArkUI applications. It could be helpful if you are developing small- and medium-sized applications with simple UIs.
 
--   **Web-like development paradigm**
 
-     ArkUI supports languages that are similar to those for web development, such as HTML and CSS. You can use them to describe the page layout and style, and use JavaScript \(conforming to the ECMAScript specification\) for page behavior. With  ArkUI, you can configure the UI in an intuitive manner, eliminating the need to code for UI state switching.
+## Overall Architecture
 
+ArkUI with the JavaScript-based web-like development paradigm consists of the following layers: application layer, frontend framework layer, engine layer, and porting layer.
 
 
-## Overall Structure<a name="section105231413161115"></a>
 
- ArkUI with the JavaScript-based web-like development paradigm consists of the following layers: application layer, frontend framework layer, engine layer, and porting layer.
+![en-us_image_0000001223127696](figures/en-us_image_0000001223127696.png)
 
-![](figures/zh-cn_image_0000001077953992.png)
-
--   **Application**
+- Application
 
   Contains applications with FAs you developed. The FA application in this document refers to the application with FAs developed using JavaScript. 
 
--   **Framework**
+- Framework
 
-    Parses UI pages and provides the Model-View-ViewModel \(MVVM\), page routing, custom components and more for front end development.
+  Parses UI pages and provides the Model-View-ViewModel (MVVM), page routing, custom components and more for front end development.
 
--   **Engine**
+- Engine
 
-    Accomplishes animation parsing, Document Object Model \(DOM\) building, layout computing, rendering command building and drawing, and event management.
+  Accomplishes animation parsing, Document Object Model (DOM) building, layout computing, rendering command building and drawing, and event management.
 
--   **Porting Layer**
+- Porting Layer
 
   Abstracts the platform layer to provide abstract interfaces to connect to the platform. For example, event interconnection, rendering pipeline interconnection, and lifecycle interconnection.
-
-

en/application-dev/ui/ui-ts-building-category-grid-layout.md

-# Building a Food Category Grid Layout<a name="EN-US_TOPIC_0000001192745835"></a>
+# Building a Food Category Grid Layout
+
 
 The diet application allows food on the home page to display in list or grid mode. You can implement switching between food categories through tabs in grid mode.
 
-1.  Import the  **Category**  enumeration type to the  **FoodCategoryList**  page.
+
+1. Import the Category enumeration type to the FoodCategoryList page.
      
    ```
    import { Category, FoodData } from '../model/FoodData'
    ```
 
-2.  Create the  **FoodCategoryList**  and  **FoodCategory**  components. The  **FoodCategoryList**  component is used as the entry component of the new page, and the  **initializeOnStartup**  method is invoked in the entry component.
+2. Create the FoodCategoryList and FoodCategory components. The FoodCategoryList component is used as the entry component of the new page, and the initializeOnStartup method is invoked in the entry component.
      
    ```
    @Component
@@ -37,7 +39,7 @@ The diet application allows food on the home page to display in list or grid mod
    }
    ```
 
-3.  Create the  **showList**  member variable in the  **FoodCategoryList**  component to control the rendering switchover between the list layout and grid layout. The conditional rendering statement  **if...else...**  is required.
+3. Create the showList member variable in the FoodCategoryList component to control the rendering switchover between the list layout and grid layout. The conditional rendering statement if...else... is required.
      
    ```
    @Entry
@@ -58,7 +60,7 @@ The diet application allows food on the home page to display in list or grid mod
    }
    ```
 
-4.  In the upper right corner of the page, create an icon for switching between the list and grid layouts. Set the stack alignment mode to  **TopEnd**, top-bottom alignment. Create an image component, and set the click event, that is, negation of  **showList**.
+4. In the upper right corner of the page, create an icon for switching between the list and grid layouts. Set the stack alignment mode to TopEnd, top-bottom alignment. Create an image component, and set the click event, that is, negation of showList.
      
    ```
    @Entry
@@ -86,7 +88,7 @@ The diet application allows food on the home page to display in list or grid mod
    }
    ```
 
-5.  Add the  **@State**  decorator. After you click the switch tab in the upper right corner, the page does not change. This is because the  **showList**  does not have state data and its change does not trigger the page refresh. You need to add the  **@State**  decorator to make it state data. The change of the  **@State**  decorator will cause re-rendering of the component where the decorator is located.
+5. Add the @State decorator. After you click the switch tab in the upper right corner, the page does not change. This is because the showList does not have state data and its change does not trigger the page refresh. You need to add the @State decorator to make it state data. The change of the @State decorator will cause re-rendering of the component where the decorator is located.
      
    ```
    @Entry
@@ -115,11 +117,11 @@ The diet application allows food on the home page to display in list or grid mod
    
    ```
 
-    When you click the switch icon, the  **FoodList**  component is displayed. When you click the switch icon again, the  **FoodList**  component is hidden.
+   When you click the switch icon, the FoodList component is displayed. When you click the switch icon again, the FoodList component is hidden.
 
-    ![](figures/video_2021-10-22_103503.gif)
+   ![en-us_image_0000001222807800](figures/en-us_image_0000001222807800.gif)
 
-6.  Create a tab to display all food categories \(**All**\). Create the  **<Tabs\>**  component and its child component  **TabContent**  in the  **FoodCategory**  component, and set  **tabBar**  to  **All**. Set the width of the  **TabBars**  to 280 and the layout mode to  **Scrollable**. This means that the  **TabBars**  can be scrolled when the total length exceeds 280. The  **<Tabs\>**  component is a container component that allows users to switch between content views through tabs. Each tab page corresponds to a  **TabContent**.
+6. Create a tab to display all food categories (All). Create the <Tabs> component and its child component TabContent in the FoodCategory component, and set tabBar to All. Set the width of the TabBars to 280 and the layout mode to Scrollable. This means that the TabBars can be scrolled when the total length exceeds 280. The <Tabs> component is a container component that allows users to switch between content views through tabs. Each tab page corresponds to a TabContent.
      
    ```
    @Component
@@ -137,9 +139,9 @@ The diet application allows food on the home page to display in list or grid mod
    }
    ```
 
-    ![](figures/en-us_image_0000001204538065.png)
+   ![en-us_image_0000001267647881](figures/en-us_image_0000001267647881.png)
 
-7.  Create the  **FoodGrid**  component to function as a child component of the  **TabContent**  component.
+7. Create the FoodGrid component to function as a child component of the TabContent component.
      
    ```
    @Component
@@ -165,7 +167,7 @@ The diet application allows food on the home page to display in list or grid mod
    }
    ```
 
-8.  Implement a 2 x 6 grid layout \(12 food data resources in total\). Create a  **Grid**  component, and set  **columnsTemplate**  to  **\('1fr 1fr'\)**,  **rowsTemplate**  to  **\('1fr 1fr 1fr 1fr 1fr 1fr'\)**, and both  **rowsGap**  and  **columnsGap**  to  **8**. Create a  **Scroll**  component so that it can be slid.
+8. Implement a 2 x 6 grid layout (12 food data resources in total). Create a Grid component, and set columnsTemplate to ('1fr 1fr'), rowsTemplate to ('1fr 1fr 1fr 1fr 1fr 1fr'), and both rowsGap and columnsGap to 8. Create a Scroll component so that it can be slid.
      
    ```
    @Component
@@ -189,7 +191,7 @@ The diet application allows food on the home page to display in list or grid mod
    }
    ```
 
-9.  Create a  **FoodGridItem**  component to display the food image, name, and calories and implement the UI layout. The  **FoodGridItem**  component is a child component of the  **GridItem**  component. The height of each  **FoodGridItem**  is  **184**, and the line spacing is  **8**. The total height of the  **Grid**  component is calculated as follows: \(184 + 8\) x 6 – 8 = 1144.
+9. Create a FoodGridItem component to display the food image, name, and calories and implement the UI layout. The FoodGridItem component is a child component of the GridItem component. The height of each FoodGridItem is 184, and the line spacing is 8. The total height of the Grid component is calculated as follows: (184 + 8) x 6 – 8 = 1144.
      
    ```
    @Component
@@ -245,9 +247,9 @@ The diet application allows food on the home page to display in list or grid mod
    }
    ```
 
-    ![](figures/video_2021-10-21_105602.gif)
+   ![en-us_image_0000001223287708](figures/en-us_image_0000001223287708.gif)
 
-10. Create the  **Category.Vegetable**,  **Category.Fruit**,  **Category.Nut**,  **Category.SeaFood**, and  **Category.Dessert**  tabs.
+10. Create the Category.Vegetable, Category.Fruit, Category.Nut, Category.SeaFood, and Category.Dessert tabs.
      
    ```
    @Component
@@ -287,9 +289,9 @@ The diet application allows food on the home page to display in list or grid mod
    }
    ```
 
-11. Set the number of rows and height of grids for different food categories. Because the number of foods varies according to the category, the  **''1fr 1fr 1fr 1fr 1fr 1fr '**  constant cannot be used to set the number of rows to 6.
+11. Set the number of rows and height of grids for different food categories. Because the number of foods varies according to the category, the ''1fr 1fr 1fr 1fr 1fr 1fr ' constant cannot be used to set the number of rows to 6.
+   Create member variables gridRowTemplate and HeightValue, and set the number of grid rows and height by using these member variables.
 
-    Create member variables  **gridRowTemplate**  and  **HeightValue**, and set the number of grid rows and height by using these member variables.
      
    ```
    @Component
@@ -318,7 +320,8 @@ The diet application allows food on the home page to display in list or grid mod
    }
    ```
 
-    Invoke the  **aboutToAppear**  API to calculate the number of rows \(**gridRowTemplate**\) and height \(**heightValue**\).
+   Invoke the aboutToAppear API to calculate the number of rows (gridRowTemplate) and height (heightValue).
+
      
    ```
    aboutToAppear() {
@@ -328,9 +331,10 @@ The diet application allows food on the home page to display in list or grid mod
    }
    ```
 
-    The custom component provides two lifecycle callbacks:  **aboutToAppear**  and  **aboutToDisappear**.  **aboutToAppear**  is executed after the custom component is created and before the  **build**  method of the custom component is executed.  **aboutToDisappear**  is executed when the custom component is deinitialized.
+   The custom component provides two lifecycle callbacks: aboutToAppear and aboutToDisappear. aboutToAppear is executed after the custom component is created and before the build method of the custom component is executed. aboutToDisappear is executed when the custom component is deinitialized.
+
+   ![en-us_image_0000001267647885](figures/en-us_image_0000001267647885.png)
 
-    ![](figures/en-us_image_0000001215113569.png)
      
    ```
    @Component
@@ -366,6 +370,4 @@ The diet application allows food on the home page to display in list or grid mod
    }
    ```
 
-    ![](figures/video_2021-10-21_105956.gif)
-
-
+   ![en-us_image_0000001267887869](figures/en-us_image_0000001267887869.gif)

en/application-dev/ui/ui-ts-building-category-list-layout.md

-# Building a Food Category List Layout<a name="EN-US_TOPIC_0000001192705719"></a>
+# Building a Food Category List Layout
 
-Use the  **List**  component and  **ForEach**  loop to build the food category list layout.
 
-1.  Create a page file named  **FoodCategoryList.ets**  in the  **pages**  directory, rename the  **index.ets**  file  **FoodDetail.ets**, and add the renamed file to the  **"pages"**  tag in the  **config.json**  file. The first page under the tag is the home page.
+Use the List component and ForEach loop to build the food category list layout.
+
+
+1. Create a page file named FoodCategoryList.ets in the pages directory, rename the index.ets file FoodDetail.ets, and add the renamed file to the "pages" tag in the config.json file. The first page under the tag is the home page.
      
    ```
    "js": [
@@ -14,7 +16,7 @@ Use the  **List**  component and  **ForEach**  loop to build the food category l
    ]
    ```
 
-2.  Create a  **List**  component named  **FoodList**  as the page entry point. Then, add a  **ListItem**  component named  **FoodListItem**  as its child component. The  **List**  component is used to display data of the same type. Its child component  **<ListItem\>**  is used to display specific items in the list.
+2. Create a List component named FoodList as the page entry point. Then, add a ListItem component named FoodListItem as its child component. The List component is used to display data of the same type. Its child component <ListItem> is used to display specific items in the list.
      
    ```
    @Component
@@ -35,14 +37,14 @@ Use the  **List**  component and  **ForEach**  loop to build the food category l
    }
    ```
 
-3.  Import the  **FoodData**  class and  **initializeOnStartup**  method.
+3. Import the FoodData class and initializeOnStartup method.
      
    ```
    import { FoodData } from '../model/FoodData'
    import { initializeOnStartup } from '../model/FoodDataModels'
    ```
 
-4.  Configure the  **FoodList**  and  **FoodListItem**  components to pass values. Create a member variable named  **foodItems**  of the  **FoodData\[\]**  type in the  **FoodList**  component and invoke the  **initializeOnStartup**  method to assign a value to the variable. Create a member variable  **foodItem**  of the  **FoodData**  type in the  **FoodListItem**  component. Pass the  **foodItems\[0\]**  of the first element in the parent  **foodItems**  array as a parameter to  **FoodListItem**.
+4. Configure the FoodList and FoodListItem components to pass values. Create a member variable named foodItems of the FoodData[] type in the FoodList component and invoke the initializeOnStartup method to assign a value to the variable. Create a member variable foodItem of the FoodData type in the FoodListItem component. Pass the foodItems[0] of the first element in the parent foodItems array as a parameter to FoodListItem.
      
    ```
    import { FoodData } from '../model/FoodData'
@@ -68,7 +70,7 @@ Use the  **List**  component and  **ForEach**  loop to build the food category l
    }
    ```
 
-5.  Declare the UI layout of the  **FoodListItem**  child component. Create a  **Flex**  component, including the food image thumbnail, food name, and calories in the food.
+5. Declare the UI layout of the FoodListItem child component. Create a Flex component, including the food image thumbnail, food name, and calories in the food.
      
    ```
    import { FoodData } from '../model/FoodData'
@@ -110,9 +112,9 @@ Use the  **List**  component and  **ForEach**  loop to build the food category l
    }
    ```
 
-    ![](figures/en-us_image_0000001204776353.png)
+   ![en-us_image_0000001267887833](figures/en-us_image_0000001267887833.png)
 
-6.  Create two  **FoodListItem**  objects. Create two  **FoodListItem**  objects in the  **List**  component and pass the first element  **this.foodItems\[0\]**  and the second element  **foodItem: this.foodItems\[1\]**  to the  **FoodListItem**.
+6. Create two FoodListItem objects. Create two FoodListItem objects in the List component and pass the first element this.foodItems[0] and the second element foodItem: this.foodItems[1] to the FoodListItem.
      
    ```
    import { FoodData } from '../model/FoodData'
@@ -157,9 +159,9 @@ Use the  **List**  component and  **ForEach**  loop to build the food category l
    }
    ```
 
-    ![](figures/en-us_image_0000001204537865.png)
+   ![en-us_image_0000001267767849](figures/en-us_image_0000001267767849.png)
 
-7.  Import  **ForEach**  so that you do not need to create  **FoodListItem**  objects one by one.
+7. Import ForEach so that you do not need to create FoodListItem objects one by one.
      
    ```
    ForEach(
@@ -169,9 +171,10 @@ Use the  **List**  component and  **ForEach**  loop to build the food category l
    )
    ```
 
-    The  **ForEach**  group has three parameters. The first parameter is the array to be traversed, the second parameter is the lambda function for generating child components, and the third parameter is the key value generator. The third parameter is optional. Yet, for performance reasons, it is strongly recommended that you provide it.  **keyGenerator**  enables the development framework to better recognize array changes without having to rebuild all nodes after item changes.
+   The ForEach group has three parameters. The first parameter is the array to be traversed, the second parameter is the lambda function for generating child components, and the third parameter is the key value generator. The third parameter is optional. Yet, for performance reasons, it is strongly recommended that you provide it. keyGenerator enables the development framework to better recognize array changes without having to rebuild all nodes after item changes.
+
+   Traverse the foodItems array to cyclically create the ListItem component. Pass each item in foodItems as a parameter to the FoodListItem component.
 
-    Traverse the  **foodItems**  array to cyclically create the  **ListItem**  component. Pass each item in  **foodItems**  as a parameter to the  **FoodListItem**  component.
      
    ```
    ForEach(this.foodItems, item => {
@@ -183,6 +186,7 @@ Use the  **List**  component and  **ForEach**  loop to build the food category l
 
    The code is as follows:
 
+     
    ```
    import { FoodData } from '../model/FoodData'
    import { initializeOnStartup } from '../model/FoodDataModels'
@@ -225,7 +229,7 @@ Use the  **List**  component and  **ForEach**  loop to build the food category l
    }
    ```
 
-8.  Add a title for the  **FoodList**.
+8. Add a title for the FoodList.
      
    ```
    @Entry
@@ -254,6 +258,4 @@ Use the  **List**  component and  **ForEach**  loop to build the food category l
    }
    ```
 
-    ![](figures/en-us_image_0000001169678922.png)
-
-
+   ![en-us_image_0000001267607877](figures/en-us_image_0000001267607877.png)

en/application-dev/ui/ui-ts-building-data-model.md

-# Building a Food Data Model<a name="EN-US_TOPIC_0000001146785866"></a>
+# Building a Food Data Model
+
 
 On the created page, we use various items to describe food, such as food names, calories, proteins, fats, carbohydrates, and vitamin C. This form of coding is impractical in actual development. Therefore, you need to create food data models to store and manage data in a unified manner.
 
-![](figures/en-us_image_0000001215433095.png)
 
-1.  Create a folder named  **model**  and create a file named  **FoodData.ets**  therein.
+![en-us_image_0000001267767897](figures/en-us_image_0000001267767897.png)
 
-    ![](figures/en-us_image_0000001195119619.png)
 
-2.  Define a food data storage model,  **FoodData**, and an enum variable,  **Category**. The  **FoodData**  class contains the food ID, name, category, image, calories, protein, fat, carbohydrates, and vitamin C attributes.
+1. Create a folder named model and create a file named FoodData.ets therein.
+   ![en-us_image_0000001223127760](figures/en-us_image_0000001223127760.png)
 
+2. Define a food data storage model, FoodData, and an enum variable, Category. The FoodData class contains the food ID, name, category, image, calories, protein, fat, carbohydrates, and vitamin C attributes.
    The eTS programming language is an extension of the TS language and also supports the TS syntax.
 
+     
    ```
    enum Category  {
      Fruit,
@@ -47,13 +49,12 @@ On the created page, we use various items to describe food, such as food names,
    }
    ```
 
-3.  Store food image resources in the  **resources**  \>  **phone**  \>  **media**  directory. Use food names as the image names.
+3. Store food image resources in the resources > phone > media directory. Use food names as the image names.
+   ![en-us_image_0000001222967800](figures/en-us_image_0000001222967800.png)
 
-    ![](figures/en-us_image_0000001195117633.png)
+4. Create food resource data. Create FoodDataModels.ets in the model folder and declare a food composition array, FoodComposition on the page.
+   In this example, 12 pieces of food data are used. You can customize more data resources when needed. Use LazyForEach to load data if a large amount of food data is involved. The following nutritional data is sourced from the Internet.
 
-4.  Create food resource data. Create  **FoodDataModels.ets**  in the  **model**  folder and declare a food composition array,  **FoodComposition**  on the page.
-
-    In this example, 12 pieces of food data are used. You can customize more data resources when needed. Use  **LazyForEach**  to load data if a large amount of food data is involved. The following nutritional data is sourced from the Internet.
      
    ```
    const FoodComposition: any[] = [
@@ -72,7 +73,7 @@ On the created page, we use various items to describe food, such as food names,
    ]
    ```
 
-5.  Create the  **initializeOnStartUp**  method to initialize the  **FoodData**  array. Export the  **FoodData**  class from  **FoodData.ets**, and import  **FoodData**  and  **Category**  in  **FoodDataModels.ets**.
+5. Create the initializeOnStartUp method to initialize the FoodData array. Export the FoodData class from FoodData.ets, and import FoodData and Category in FoodDataModels.ets.
      
    ```
    // FoodData.ets
@@ -96,4 +97,3 @@ On the created page, we use various items to describe food, such as food names,
 
 
 The data resources for the diet application are now ready. You can continue to create a food category list by loading the data.
-

en/application-dev/ui/ui-ts-components-web.md

 # Web
 
-The **\<Web>** component can be used to display web pages. For details, see [Web API](../reference/arkui-ts/ts-basic-components-web.md).
+The \<Web> component can be used to display web pages. For details, see [Web API](../reference/arkui-ts/ts-basic-components-web.md).
 
 ## Creating a Component
 
-Create a **\<Web>** component in the .ets file under **main/ets/MainAbility/pages**. Then, in the created component, use **src** to specify the web page URI to be referenced, and bind a controller to the component to call the component APIs.
+Create a \<Web> component in the .ets file under main/ets/MainAbility/pages. Then, in the created component, use src to specify the web page URI to be referenced, and bind a controller to the component to call the component APIs.
 
   ```
   // xxx.ets
@@ -22,7 +22,7 @@ Create a **\<Web>** component in the .ets file under **main/ets/MainAbility/page
 
 ## Setting Styles and Attributes
 
-When using the **\<Web>** component, you need to specify the styles and attributes. The sample code is as follows.
+When using the \<Web> component, you need to specify the styles and attributes. The sample code is as follows.
 
 ```
 // xxx.ets
@@ -50,7 +50,7 @@ struct WebComponent {
 ```
 ## Adding Events and Methods
 
-Add the **onProgressChange** event for the **\<Web>** component, which is triggered when the loading progress changes and returns the progress value in its callback. Assign the progress value to the **\<Progress>** component to control the status of the component. When the progress reaches 100%, the **\<Progress>** component is hidden, and the web page loading is complete.
+Add the onProgressChange event for the \<Web> component, which is triggered when the loading progress changes and returns the progress value in its callback. Assign the progress value to the \<Progress> component to control the status of the component. When the progress reaches 100%, the \<Progress> component is hidden, and the web page loading is complete.
 
 ```
 // xxx.ets
@@ -89,7 +89,7 @@ struct WebComponent {
   }
 }
 ```
-Add the **runJavaScript** method to the **onPageEnd** event. The **onPageEnd** event is triggered when the web page finishes loading. In this case, the **runJavaScript** method can be used to execute JavaScript scripts in the HTML file. In the sample code below, when the web page finishes loading, the **onPageEnd** event is triggered to call the **test** method in the HTML file and print information on the console.
+Add the runJavaScript method to the onPageEnd event. The onPageEnd event is triggered when the web page finishes loading. In this case, the runJavaScript method can be used to execute JavaScript scripts in the HTML file. In the sample code below, when the web page finishes loading, the onPageEnd event is triggered to call the test method in the HTML file and print information on the console.
 
 ```
 // xxx.ets
@@ -134,7 +134,7 @@ struct WebComponent {
 }
 ```
 
-Create an HTML file in **main/resources/rawfile**.
+Create an HTML file in main/resources/rawfile.
 
 ```
 <!-- index.html -->
@@ -153,7 +153,7 @@ Create an HTML file in **main/resources/rawfile**.
 ```
 ## Scenario Example
 
-In this example, you'll implement a **\<Web>** component where videos can be played dynamically. Embed a video resource into an HTML page, and then use the **\<Web>** component controller to invoke the **onActive** and **onInactive** methods to activate and pause page rendering, respectively. When the page is hidden, the **\<Web>** component stops rendering and the video playback pauses. When the page is displayed, the **\<Web>** component is activated and the video playback resumes.
+In this example, you'll implement a \<Web> component where videos can be played dynamically. Embed a video resource into an HTML page, and then use the \<Web> component controller to invoke the onActive and onInactive methods to activate and pause page rendering, respectively. When the page is hidden, the \<Web> component stops rendering and the video playback pauses. When the page is displayed, the \<Web> component is activated and the video playback resumes.
 
   ```
   // xxx.ets

en/application-dev/ui/ui-ts-components.md

-# Getting to Know Components<a name="EN-US_TOPIC_0000001192705717"></a>
+# Getting to Know Components
 
-Before customizing a component, get to know what the  [component and decorator](#section1094392618525)  are and initialize the component. Then,  [modify the component attributes and constructor parameters](#section19391124065216)  to customize a component.
 
-## Components and Decorators<a name="section1094392618525"></a>
+Before customizing a component, get to know what the [component and decorator](#components-and-decorators) are and initialize the component. Then, [modify the component attributes and constructor parameters](#modifying-component-attributes-and-constructor-parameters) to customize a component.
 
-In a declarative UI, all pages are composed of components. The data structure of the component is  **struct**, and the decorator  [@Component](ts-component-based-component.md)  is the component-based flag. The struct decorated by  **@Component**  indicates that the struct has the component capability.
+
+## Components and Decorators
+
+In a declarative UI, all pages are composed of components. The data structure of the component is struct, and the decorator [@Component](ts-component-based-component.md) is the component-based flag. The struct decorated by @Component indicates that the struct has the component capability.
 
 The method for declaring a custom component is as follows:
 
+
 ```
 @Component
 struct MyComponent {}
 ```
 
-In an IDE project template,  **MyComponent**  is a custom component that can display text in the center. You can describe your UI structures in the  **build**  method of the component, by complying with the API constraints of the  **Builder**.
+In an IDE project template, MyComponent is a custom component that can display text in the center. You can describe your UI structures in the build method of the component, by complying with the API constraints of the Builder.
+
 
 ```
 interface Builder {
@@ -21,23 +25,24 @@ interface Builder {
 }
 ```
 
-The component decorated by  [@Entry](ts-component-based-entry.md)  indicates that the component is the main entry of the page and can also be considered as the root node of the page. Note that a page must have one and only one  **@Entry**. Only the  **@Entry**  decorated component and its child components are displayed on the page.
+The component decorated by [@Entry](ts-component-based-entry.md) indicates that the component is the main entry of the page and can also be considered as the root node of the page. **NOTE** that a page must have one and only one @Entry. Only the @Entry decorated component and its child components are displayed on the page.
 
-**@Component**  and  **@Entry**  are basic and important decorators. To put it simply, a decorator assigns a capability to an object to be decorated. For example,  **@Entry**  assigns the capability of the page entry, and  **@Component**  assigns the component capability.
+@Component and @Entry are basic and important decorators. To put it simply, a decorator assigns a capability to an object to be decorated. For example, @Entry assigns the capability of the page entry, and @Component assigns the component capability.
 
 With a basic knowledge of the component and decorator, you are ready to develop a diet application.
 
-## Modifying Component Attributes and Constructor Parameters<a name="section19391124065216"></a>
 
-When you create a system component, the default style is used. You can change the display of the component by changing its attributes and styles.
+## Modifying Component Attributes and Constructor Parameters
 
-1.  Modify the  **fontSize**  attribute of the  **<Text\>**  component to change the font size of the component. In this example, the font size is set to 26 and font weight 500. Two configuration methods are available for setting the font weight:
+When you create a system component, the default style is used. You can change the display of the component by changing its attributes and styles.
 
-    1.  The value of the number type ranges from 100 to 900. The default value is  **400**. A larger value indicates a thicker font.
-    2.  **fontWeight**  is a built-in enumeration type. Its value can be  **Lighter**,  **Normal**,  **Bold**, or  **Bolder**.
+1. Modify the fontSize attribute of the <Text> component to change the font size of the component. In this example, the font size is set to 26 and font weight 500. Two configuration methods are available for setting the font weight:
+   1. The value of the number type ranges from 100 to 900. The default value is 400. A larger value indicates a thicker font.
+   2. fontWeight is a built-in enumeration type. Its value can be Lighter, Normal, Bold, or Bolder.
 
    The attribute method must follow the component and be connected by the operator ".". You can also configure multiple attributes of the component in method chaining mode.
 
+   
    ```
    @Entry
    @Component
@@ -54,9 +59,9 @@ When you create a system component, the default style is used. You can change th
    }
    ```
 
-    ![](figures/en-us_image_0000001168728272.png)
+   ![en-us_image_0000001267767845](figures/en-us_image_0000001267767845.png)
 
-2.  Change the display content of the  **<Text\>**  component from  **Hello World**  to  **Tomato**  by modifying the constructor parameters of the  **<Text\>**  component.
+2. Change the display content of the <Text> component from Hello World to Tomato by modifying the constructor parameters of the <Text> component.
   
    ```
    @Entry
@@ -74,6 +79,4 @@ When you create a system component, the default style is used. You can change th
    }
    ```
 
-    ![](figures/en-us_image_0000001168888224.png)
-
-
+   ![en-us_image_0000001267887829](figures/en-us_image_0000001267887829.png)

en/application-dev/ui/ui-ts-creating-project.md

-# Creating a Declarative UI Project<a name="EN-US_TOPIC_0000001146785864"></a>
+# Creating a Declarative UI Project
 
-Before creating a project, you need to install DevEco Studio. For details, see  [HUAWEI DevEco Studio User Guide](https://developer.harmonyos.com/en/docs/documentation/doc-guides/tools_overview-0000001053582387).
 
-1.  Open DevEco Studio and click  **Create Project**. If there is already a project, choose  **File**  \>  **New**  \>  **New project**.
+Before creating a project, you need to install DevEco Studio. 
 
-    ![](figures/en-us_image_0000001168956332.png)
 
-2.  On the page for selecting an ability template, select  **\[Standard\]Empty Ability**.
+1. Open DevEco Studio and click Create Project. If there is already a project, choose File > New > New project.
+   ![en-us_image_0000001267607861](figures/en-us_image_0000001267607861.png)
 
-    ![](figures/en-us_image_0000001168059158.png)
+2. 
   
-3.  Install the OpenHarmony SDK.
 
-    ![](figures/en-us_image_0000001213462329.png)
+   On the page for selecting an ability template, select [Standard]Empty Ability.
 
-4.  On the project configuration page, set Project Name to  **HealthyDiet**,  **Project Type**  to  **Application**,  **Device Type**  to  **Phone**,  **Language**  to  **eTS**, and  **Compatible API Version**  to  **SDK: API Version 7**. By default, DevEco Studio saves the project to drive C. You can change the save path by setting  **Save Location**. When you are done, click  **Finish**.
+   ![en-us_image_0000001223127704](figures/en-us_image_0000001223127704.png)
 
-    ![](figures/en-us_image_0000001167746622.png)
+3. 
+  Install the OpenHarmony SDK.
 
-5.  After the project is created, open the  **app.ets**  file.
+   ![en-us_image_0000001223127700](figures/en-us_image_0000001223127700.png)
 
-    The  **app.ets**  file provides the  **onCreate**  and  **onDestroy**  methods for the application lifecycle.  **onCreate**  is called when an application is created, and  **onDestroy**  is called when an application is destroyed. Global variables can be declared in the  **app.ets**  file, wherein the declared data and methods are shared by the entire application.
+4. On the project configuration page, set Project Name to HealthyDiet, Project Type to Application, Device Type to Phone, Language to eTS, and Compatible API Version to SDK: API Version 7. By default, DevEco Studio saves the project to drive C. You can change the save path by setting Save Location. When you are done, click Finish.
+  
+
+   ![en-us_image_0000001267647849](figures/en-us_image_0000001267647849.png)
+
+5. After the project is created, open the app.ets file.
+     The app.ets file provides the onCreate and onDestroy methods for the application lifecycle. onCreate is called when an application is created, and onDestroy is called when an application is destroyed. Global variables can be declared in the app.ets file, wherein the declared data and methods are shared by the entire application.
      
    ```
    export default {
@@ -33,7 +38,7 @@ Before creating a project, you need to install DevEco Studio. For details, see
    }
    ```
 
-6.  In the project navigation tree, open  **index.ets**. This page displays the current UI description. The declarative UI framework automatically generates a component-based  **struct**, which complies with the  **Builder**  API declaration. The current layout and components are declared in the  **build**  method.
+6. In the project navigation tree, open index.ets. This page displays the current UI description. The declarative UI framework automatically generates a component-based struct, which complies with the Builder API declaration. The current layout and components are declared in the build method.
   
    ```
    @Entry
@@ -51,17 +56,14 @@ Before creating a project, you need to install DevEco Studio. For details, see
    }
    ```
 
-7.  Click  **Previewer**  on the right to open the  **Previewer**  window. In the  **Previewer**  window of the phone type,  **Hello World**  is displayed in the middle and in bold.
-
-    If the  **Previewer**  button is unavailable, choose  **Settings**  \>  **SDK Manager**  \>OpenHarmony SDK \>  **Tools**  to check whether the  **Previewer**  is installed.
-
-    ![](figures/en-us_image_0000001214595111.png)
-
-8.  Install the application on the phone and run the application. Connect the phone to the computer. After the IDE identifies the phone, click  **Run'entry'**.
+7. Click Previewer on the right to open the Previewer window. In the Previewer window of the phone type, Hello World is displayed in the middle and in bold.
+   If the Previewer button is unavailable, choose Settings > SDK Manager >OpenHarmony SDK > Tools to check whether the Previewer is installed.
 
-    ![](figures/en-us_image_0000001148858818.png)
+   ![en-us_image_0000001222807756](figures/en-us_image_0000001222807756.png)
 
-    Before the installation, you must configure an application signature. For details, see  [Configuring the OpenHarmony App Signature](https://developer.harmonyos.com/en/docs/documentation/doc-guides/ohos-debugging-and-running-0000001263040487#section17660437768). After the installation is complete, click the  **Run**  icon on the screen to open the application.  **Hello World**  is displayed in the center of the screen.
+8. Install the application on the phone and run the application. Connect the phone to the computer. After the IDE identifies the phone, click Run'entry'.
+   ![en-us_image_0000001267607865](figures/en-us_image_0000001267607865.png)
 
-    ![](figures/en-us_image_0000001158896538.png)
+   Before the installation, you must configure an application signature. For details, see [Configuring the OpenHarmony App Signature](../quick-start/configuring-the-openharmony-app-signature.md). After the installation is complete, click the Run icon on the screen to open the application. Hello World is displayed in the center of the screen.
 
+   ![en-us_image_0000001267647841](figures/en-us_image_0000001267647841.png)

en/application-dev/ui/ui-ts-creating-simple-page.md

-# Creating a Simple Page<a name="EN-US_TOPIC_0000001192745831"></a>
+# Creating a Simple Page
 
-In this section, we will develop an infographic food details page, by building custom components through the container components  **<Stack\>**  and  **<Flex\>**  as well as basic components  **<Image\>**  and  **<Text\>**.
 
-## Building the Stack Layout<a name="section12782105345718"></a>
+In this section, we will develop an infographic food details page, by building custom components through the container components &lt;Stack&gt; and &lt;Flex&gt; as well as basic components &lt;Image&gt; and &lt;Text&gt;.
 
-1.  Create a food name.
 
-    Delete the code of the  **build**  method in the project template, create a  **<Stack\>**  component, and place the  **<Text\>**  component in the braces of the  **<Stack\>**  component so that the  **<Text\>**  component becomes a child component of the  **<Stack\>**  component. A  **<Stack\>**  component consists of one or more child components. The latter child component overwrites the former one.
+## Building the Stack Layout
+
+1. Create a food name.
+     Delete the code of the build method in the project template, create a &lt;Stack&gt; component, and place the &lt;Text&gt; component in the braces of the &lt;Stack&gt; component so that the &lt;Text&gt; component becomes a child component of the &lt;Stack&gt; component. A &lt;Stack&gt; component consists of one or more child components. The latter child component overwrites the former one.
      
    ```
    @Entry
@@ -22,11 +23,10 @@ In this section, we will develop an infographic food details page, by building c
    }
    ```
 
-    ![](figures/en-us_image_0000001214128687.png)
+   ![en-us_image_0000001222967780](figures/en-us_image_0000001222967780.png)
 
 2. Display food pictures.
-
-    Create an  **<Image\>**  component and specify a URL for it. The  **<Image\>**  and  **<Text\>**  components are mandatory. To display the  **<Text\>**  component above the  **<Image\>**  component, you need to declare the  **<Image\>**  component first. Image resources are stored in the  **rawfile**  folder in  **resources**. When referencing the resources in the  **rawfile**  folder, use the  **$rawfile\('_filename_  loaded\)**  format, where  **filename**  indicates the relative path of the file in the  **rawfile**  folder. Currently,  **$rawfile**  only allows the  **<Image\>**  component to reference image resources.
+     Create an &lt;Image&gt; component and specify a URL for it. The &lt;Image&gt; and &lt;Text&gt; components are mandatory. To display the &lt;Text&gt; component above the &lt;Image&gt; component, you need to declare the &lt;Image&gt; component first. Image resources are stored in the rawfile folder in resources. When referencing the resources in the rawfile folder, use the $rawfile('_filename_ loaded) format, where filename indicates the relative path of the file in the rawfile folder. Currently, $rawfile only allows the &lt;Image&gt; component to reference image resources.
      
    ```
    @Entry
@@ -43,19 +43,19 @@ In this section, we will develop an infographic food details page, by building c
    }
    ```
 
-    ![](figures/en-us_image_0000001168410342.png)
+   ![en-us_image_0000001267887861](figures/en-us_image_0000001267887861.png)
 
 3. Access images through resources.
+   In addition to specifying the image path, you can also use the media resource symbol $r to reference resources based on the resource qualifier rules in the resources folder. Right-click the resources folder, choose New &gt; Resource Directory, set Resource Type to Media (image resource), and set the resource qualifier to Device-Phone (currently, phones are used).
 
-    In addition to specifying the image path, you can also use the media resource symbol  **$r**  to reference resources based on the resource qualifier rules in the  **resources**  folder. Right-click the  **resources**  folder, choose  **New**  \>  **Resource Directory**, set  **Resource Type**  to  **Media**  \(image resource\), and set the resource qualifier to  **Device-Phone**  \(currently, phones are used\).
+   ![en-us_image_0000001267887853](figures/en-us_image_0000001267887853.png)
 
-    ![](figures/en-us_image_0000001168570318.png)
+   Click OK. The phone.media folder is generated in the resources folder. Place Tomato.png in the folder.
 
-    Click  **OK**. The  **phone.media**  folder is generated in the  **resources**  folder. Place  **Tomato.png**  in the folder.
+   ![en-us_image_0000001222807784](figures/en-us_image_0000001222807784.png)
 
-    ![](figures/en-us_image_0000001214330169.png)
+   You can then can reference the application resource in the $r('app.type.name') format, that is, $r('app.media.Tomato').
 
-    You can then can reference the application resource in the  **$r\('app.type.name'\)**  format, that is,  **$r\('app.media.Tomato'\)**.
    
    ```
    @Entry
@@ -74,12 +74,12 @@ In this section, we will develop an infographic food details page, by building c
    }
    ```
 
-4.  Set the width and height of the image, and set the  **objectFit**  attribute of the image to  **ImageFit.Contain**, which means to keep the aspect ratio of the image to ensure that the image is completely displayed within the boundary.
-
+4. Set the width and height of the image, and set the objectFit attribute of the image to ImageFit.Contain, which means to keep the aspect ratio of the image to ensure that the image is completely displayed within the boundary.
      If the image fills the entire screen, the possible causes are as follows:
-
    1. The width and height of the image are not set.
-    2.  The default attribute of  **objectFit**  of the image is  **ImageFit.Cover**, that is, the image is zoomed in or zoomed out to fill the entire display boundary with the aspect ratio locked.
+   
+   2. The default attribute of objectFit of the image is ImageFit.Cover, that is, the image is zoomed in or zoomed out to fill the entire display boundary with the aspect ratio locked.
+
      
    ```
    @Entry
@@ -98,9 +98,9 @@ In this section, we will develop an infographic food details page, by building c
    }
    ```
 
-    ![](figures/en-us_image_0000001214210217.png)
+   ![en-us_image_0000001223127732](figures/en-us_image_0000001223127732.png)
 
-5.  Set the food image and name layout. Set the alignment mode of the stack to bottom alignment. By default, the stack is center aligned. Set  **alignContent**  to  **Alignment.BottomStart**. Similar to  **FontWeight**,  **Alignment**  is a built-in enumeration type provided by the framework.
+5. Set the food image and name layout. Set the alignment mode of the stack to bottom alignment. By default, the stack is center aligned. Set alignContent to Alignment.BottomStart. Similar to FontWeight, Alignment is a built-in enumeration type provided by the framework.
   
    ```
    @Entry
@@ -119,12 +119,12 @@ In this section, we will develop an infographic food details page, by building c
    }
    ```
 
-    ![](figures/en-us_image_0000001168728872.png)
+   ![en-us_image_0000001267647873](figures/en-us_image_0000001267647873.png)
 
 6. You can change the background color of the food image by setting the background color of the stack. You can set the background color in either of the following ways:
+   1. By using the built-in enumeration value of Color provided by the framework. For example, backgroundColor(Color.Red) indicates that the background color is set to red.
+   2. By using the parameter of the string type. The supported color formats are rgb, rgba, and HEX. For example, you can set the background color to blue by setting backgroundColor(??\#0000FF??) and set the background color to white by setting backgroundColor(??rgb(255, 255, 255)??).
 
-    1.  By using the built-in enumeration value of  **Color**  provided by the framework. For example,  **backgroundColor\(Color.Red\)**  indicates that the background color is set to red.
-    2.  By using the parameter of the string type. The supported color formats are rgb, rgba, and HEX. For example, you can set the background color to blue by setting  **backgroundColor\(??\#0000FF??\)**  and set the background color to white by setting  **backgroundColor\(??rgb\(255, 255, 255\)??\)**.
      
    ```
    @Entry
@@ -144,12 +144,12 @@ In this section, we will develop an infographic food details page, by building c
    }
    ```
 
-    ![](figures/en-us_image_0000001168888822.png)
+   ![en-us_image_0000001222967772](figures/en-us_image_0000001222967772.png)
 
-7.  Adjust the left and bottom margin of the  **<Text\>**  component. Margin is a shorthand attribute. You can specify the margins of the four edges in a unified manner or separately. The configuration method is as follows:
+7. Adjust the left and bottom margin of the &lt;Text&gt; component. Margin is a shorthand attribute. You can specify the margins of the four edges in a unified manner or separately. The configuration method is as follows:
+   1. When the parameter is set to Length, the outer margins of the four edges are specified. For example, margin(20) indicates that the outer margins of the top, right, bottom, and left edges are all 20.
+   2. {top?: Length, right?: Length, bottom?: Length, left?:Length} specifies the margins of the four edges. For example, margin({ left: 26, bottom: 17.4 }) indicates that the left margin is 26 and the bottom margin is 17.4.
 
-    1.  When the parameter is set to  **Length**, the outer margins of the four edges are specified. For example,  **margin\(20\)**  indicates that the outer margins of the top, right, bottom, and left edges are all 20.
-    2.  **\{top?: Length, right?: Length, bottom?: Length, left?:Length\}**  specifies the margins of the four edges. For example,  **margin\(\{ left: 26, bottom: 17.4 \}\)**  indicates that the left margin is 26 and the bottom margin is 17.4.
      
    ```
    @Entry
@@ -170,12 +170,12 @@ In this section, we will develop an infographic food details page, by building c
    }
    ```
 
-    ![](figures/en-us_image_0000001213968747.png)
-
-8.  Adjust the structure between components and semanticize component names. Create the  **FoodDetail**  page entry component, create a column in  **FoodDetail**, and set the alignment to  **alignItems\(HorizontalAlign.Center\)**. Change the name of the  **MyComponent**  component to  **FoodImageDisplay**, which is a child component of the  **FoodDetail**  component.
+   ![en-us_image_0000001222967776](figures/en-us_image_0000001222967776.png)
 
+8. Adjust the structure between components and semanticize component names. Create the FoodDetail page entry component, create a column in FoodDetail, and set the alignment to alignItems(HorizontalAlign.Center). Change the name of the MyComponent component to FoodImageDisplay, which is a child component of the FoodDetail component.
    A column is a container component whose child components are vertically arranged. It is a linear layout in essence. Therefore, only the alignment in the cross axis direction can be set.
 
+   
    ```
    @Component
    struct FoodImageDisplay {
@@ -206,11 +206,11 @@ In this section, we will develop an infographic food details page, by building c
    ```
 
 
-## Building the Flex Layout<a name="section46084390581"></a>
+## Building the Flex Layout
 
-You can use the  **Flex**  layout to build a food composition table. In this way you do not need to worry about the width and height calculation. The size of different cells can be flexibly set based on the proportion.
+You can use the Flex layout to build a food composition table. In this way you do not need to worry about the width and height calculation. The size of different cells can be flexibly set based on the proportion.
 
-1.  Create a  **ContentTable**  component as a child component of the  **FoodDetail**  component.
+1. Create a ContentTable component as a child component of the FoodDetail component.
   
    ```
    @Component
@@ -247,13 +247,13 @@ You can use the  **Flex**  layout to build a food composition table. In this way
    }
    ```
 
-2.  Create a  **Flex**  component to display two food composition categories in the tomato: Calories and Nutrition.
+2. Create a Flex component to display two food composition categories in the tomato: Calories and Nutrition.
+   Calories contains information about calories. Nutrition contains information about protein, fat, carbohydrates, and vitamin C.
 
-    **Calories**  contains information about calories.  **Nutrition**  contains information about protein, fat, carbohydrates, and vitamin C.
+   Create the Calories class. Create a Flex component and set its height to 280, and the top, right, and left margins to 30. The Flex component contains three Text child components, which represent the category name (Calories), content name (Calories), and contain value (17 kcal), respectively. By default, child components in the Flex component are arranged horizontally.
 
-    Create the Calories class. Create a  **Flex**  component and set its height to  **280**, and the top, right, and left margins to  **30**. The  **Flex**  component contains three  **Text**  child components, which represent the category name \(**Calories**\), content name \(**Calories**\), and contain value \(**17 kcal**\), respectively. By default, child components in the  **Flex**  component are arranged horizontally.
+   In the following example, code of FoodImageDisplay is omitted, and only code of ContentTable is provided.
 
-    In the following example, code of  **FoodImageDisplay**  is omitted, and only code of  **ContentTable**  is provided.
    
    ```
    @Component
@@ -286,9 +286,9 @@ You can use the  **Flex**  layout to build a food composition table. In this way
    }
    ```
 
-    ![](figures/en-us_image_0000001169759552.png)
+   ![en-us_image_0000001267767869](figures/en-us_image_0000001267767869.png)
 
-3.  Adjust the layout and set the proportion \(**layoutWeight**\) of each part. Set the proportion of the category name to 1, and the total proportion of content name and content value to  **2**. The content name and content value are in a same  **Flex**, and the content name occupies all remaining space  **flexGrow\(1\)**.
+3. Adjust the layout and set the proportion (layoutWeight) of each part. Set the proportion of the category name to 1, and the total proportion of content name and content value to 2. The content name and content value are in a same Flex, and the content name occupies all remaining space flexGrow(1).
   
    ```
    @Component
@@ -342,11 +342,11 @@ You can use the  **Flex**  layout to build a food composition table. In this way
    }
    ```
 
-    ![](figures/en-us_image_0000001215079443.png)
+   ![en-us_image_0000001267607901](figures/en-us_image_0000001267607901.png)
 
-4.  Create the  **Nutrient**  class in a similar process.  **Nutrition**  consists of four parts:  **Protein**,  **Fat**,  **Carbohydrates**, and  **VitaminC**. The names of the last three parts are omitted in the table and represented by spaces.
+4. Create the Nutrient class in a similar process. Nutrition consists of four parts: Protein, Fat, Carbohydrates, and VitaminC. The names of the last three parts are omitted in the table and represented by spaces.
+   Set FlexDirection.Column, FlexAlign.SpaceBetween, and ItemAlign.Start.
 
-    Set  **FlexDirection.Column**,  **FlexAlign.SpaceBetween**, and  **ItemAlign.Start**.
    
    ```
    @Component
@@ -442,18 +442,18 @@ You can use the  **Flex**  layout to build a food composition table. In this way
    }
    ```
 
-5.  Use the custom constructor  **@Builder**  to simplify the code. It can be found that the food groups in each food composition table are actually of the same UI structure.
+5. Use the custom constructor @Builder to simplify the code. It can be found that the food groups in each food composition table are actually of the same UI structure.
+   ![en-us_image_0000001223287704](figures/en-us_image_0000001223287704.png)
 
-    ![](figures/en-us_image_0000001169599582.png)
+   Currently, all food groups are declared, resulting in code duplication and redundancy. You can use @Builder to build a custom method and abstract the same UI structure declaration. The @Builder decorated method and the build method for the @Component decorated component are used to declare some UI rendering structures and comply with the same eTS syntax. You can define one or more methods decorated by @Builder, but a component decorated by @Component can have only one build method.
 
-    Currently, all food groups are declared, resulting in code duplication and redundancy. You can use  **@Builder**  to build a custom method and abstract the same UI structure declaration. The  **@Builder**  decorated method and the  **build**  method for the  **@Component**  decorated component are used to declare some UI rendering structures and comply with the same eTS syntax. You can define one or more methods decorated by  **@Builder**, but a component decorated by  **@Component**  can have only one  **build**  method.
+   Declare the IngredientItem method decorated by @Builder in ContentTable to declare the UI descriptions for the category name, content name, and content value.
 
-    Declare the  **IngredientItem**  method decorated by  **@Builder**  in  **ContentTable**  to declare the UI descriptions for the category name, content name, and content value.
    
    ```
    @Component
    struct ContentTable {
-      @Builder IngredientItem(title:string, colorValue: string, name: string, value: string) {
+     @Builder IngredientItem(title:string, name: string, value: string) {
        Flex() {
          Text(title)
            .fontSize(17.4)
@@ -475,7 +475,8 @@ You can use the  **Flex**  layout to build a food composition table. In this way
    }
    ```
 
-    When the  **IngredientItem**  API is called in the  **build**  method of  **ContentTable**,  **this**  needs to be used to invoke the method in the scope of the component to distinguish the global method call.
+   When the IngredientItem API is called in the build method of ContentTable, this needs to be used to invoke the method in the scope of the component to distinguish the global method call.
+
    
    ```
    @Component
@@ -495,7 +496,8 @@ You can use the  **Flex**  layout to build a food composition table. In this way
    }
    ```
 
-    The overall code of the  **ContentTable**  component is as follows:
+   The overall code of the ContentTable component is as follows:
+
    
    ```
    @Component
@@ -543,17 +545,14 @@ You can use the  **Flex**  layout to build a food composition table. In this way
    }
    ```
 
-    ![](figures/en-us_image_0000001215199399.png)
-
+   ![en-us_image_0000001222807792](figures/en-us_image_0000001222807792.png)
 
 You've learned how to build a simple food details page. Read on to learn how to define the page layout and connection.
 
-## Samples<a name="section1398393853412"></a>
+## Samples
 
 The following sample is provided to help you better understand how to use build a simple page:
 
 - [eTSBuildCommonView](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/eTSBuildCommonView)
 
   This sample shows how to build a common view to display the picture of tomatoes and nutrition information, with the stack layout and flex layout.
-
-

en/application-dev/ui/ui-ts-experiencing-declarative-ui.md

-# Experiencing the Declarative UI<a name="EN-US_TOPIC_0000001169595734"></a>
-
--   **[Creating a Declarative UI Project](ui-ts-creating-project.md)**  
-
--   **[Getting to Know Components](ui-ts-components.md)**  
-
--   **[Creating a Simple Page](ui-ts-creating-simple-page.md)**  
-
-

en/application-dev/ui/ui-ts-overview.md

-# Overview<a name="EN-US_TOPIC_0000001192705715"></a>
+# Overview
 
-The TypeScript-based declarative development paradigm of  ArkUI is a simplified, high-performance UI development framework for cross-device applications on OpenHarmony.
 
-## Basic Capabilities<a name="section10519124516264"></a>
+The TypeScript-based declarative development paradigm of ArkUI is a simplified, high-performance UI development framework for cross-device applications.
+
+
+## Basic Capabilities
 
 In ArkUI that uses the TypeScript-based declarative development paradigm, the programming mode is closer to natural semantics. You can intuitively describe the UI without caring about how the framework implements UI drawing and rendering, leading to simplified and efficient development. The UI capabilities are provided from three dimensions: component, animation, and state management. System capability APIs are also provided to allow for effortless invocation of system capabilities.
 
--   **Out-of-the-box components**
 
+- Out-of-the-box components
   A wide range of preset system components are provided. You can set the rendering effect of these components in method chaining mode. You can combine system components to form custom components. In this way, page components are divided into independent UI units to implement independent creation, development, and reuse of different units on pages, making pages more engineering-oriented.
 
 
--   **A diverse array of animation APIs**
-
+- A diverse array of animation APIs
   By drawing from the standard SVG drawing capability and various open animation APIs, you can customize animation tracks by encapsulating physical models or calling the provided APIs.
 
 
--   **State and data management**
-
+- State and data management
   State data management provides clear page update and rendering processes and pipes through decorators with different functions. State management covers UI component states and application states. With these features, you are able to build an application-wide data update and UI rendering process.
 
 
--   **System capability APIs**
-
+- System capability APIs
   Development has never been so easy, with a diverse array of encapsulated system capability APIs, from UI design to system capability invoking.
 
 
-## Overall Architecture<a name="section11428133282710"></a>
+## Overall Architecture
 
-![](figures/en-us_image_0000001169532276.png)
 
--   **Declarative UI frontend**
 
-    Provides basic language specifications of the UI development paradigm, built-in UI components, layouts, and animations, and multiple state management mechanisms, with a wide array of APIs for you to call as required.
+![en-us_image_0000001223287712](figures/en-us_image_0000001223287712.png)
 
--   **Language runtime**
+- Declarative UI frontend
+  Provides basic language specifications of the UI development paradigm, built-in UI components, layouts, and animations, and multiple state management mechanisms, with a wide array of APIs for you to call as required.
 
+- Language runtime
   Provides the parsing capability for the UI paradigm syntax and allows for cross-language API calls for a high-performance running environment of the TS language.
 
--   **Declarative UI backend engine**
-
+- Declarative UI backend engine
   Provides UI rendering pipelines that are compatible with different development paradigms, multiple basic components, layout calculation, dynamic effects, and interaction events, with state management and drawing capabilities.
 
--   **Render engine**
-
+- Render engine
   Provides efficient drawing capabilities, which enable rendering instructions collected by the rendering pipeline to be drawn to the screen.
 
--   **Porting layer**
-
+- Porting layer
   Provides abstract APIs to connect to different systems, such as system rendering pipelines and lifecycle scheduling.
-
-

en/application-dev/ui/ui-ts-page-layout-connections.md

-# Defining Page Layout and Connection<a name="EN-US_TOPIC_0000001146626070"></a>
-
--   **[Building a Food Data Model](ui-ts-building-data-model.md)**  
-
--   **[Building a Food Category List Layout](ui-ts-building-category-list-layout.md)**  
-
--   **[Building a Food Category Grid Layout](ui-ts-building-category-grid-layout.md)**  
-
--   **[Implementing Page Redirection and Data Transmission](ui-ts-page-redirection-data-transmission.md)**  
-
-

en/application-dev/ui/ui-ts-page-redirection-data-transmission.md

-# Implementing Page Redirection and Data Transmission<a name="EN-US_TOPIC_0000001146626072"></a>
+# Implementing Page Redirection and Data Transmission
+
 
 This section describes how to implement page redirection and data transmission between pages:
 
+
 1. Page redirection: Click a food item on the food list page to go to the food details page. Click the back button on the food details page to go back to the food list page.
-2.  Data transmission between pages: After you click a food item,  **FoodDetail**  receives data from the previous page and renders the corresponding food details page.
 
-## Page Redirection<a name="section14532666112"></a>
+2. Data transmission between pages: After you click a food item, FoodDetail receives data from the previous page and renders the corresponding food details page.
+
+
+## Page Redirection
 
 The declarative UI paradigm provides two mechanisms for page redirection:
 
-1.  **Navigator**: encapsulates the page routing capability. After the page target is specified, all child components in the page target have the routing capability.
-2.  Router APIs: called to implement various operations of page routing. You'll need to import  **router**  before calling the router APIs.
+1. Navigator: encapsulates the page routing capability. After the page target is specified, all child components in the page target have the routing capability.
+
+2. Router APIs: called to implement various operations of page routing. You'll need to import router before calling the router APIs.
 
 The procedure below uses these two mechanisms for redirection between the page list page and food details page.
 
-1.  Click  **FoodListItem**. The  **FoodDetail**  page is displayed. Create a  **Navigator**  component in  **FoodListItem**  to enable its child components to have the routing function. The target page is  **'pages/FoodDetail'**.
+1. Click FoodListItem. The FoodDetail page is displayed. Create a Navigator component in FoodListItem to enable its child components to have the routing function. The target page is 'pages/FoodDetail'.
   
    ```
    @Component
@@ -42,9 +47,9 @@ The procedure below uses these two mechanisms for redirection between the page l
    }
    ```
 
-    ![](figures/listrouter.gif)
+   ![en-us_image_0000001223127744](figures/en-us_image_0000001223127744.gif)
 
-2.  Click  **FoodGridItem**. The  **FoodDetail**  page is displayed. Import the  **router**  module, and then call the  **push**  API of this module to push the  **FoodDetail**  page to the route stack to implement page redirection.
+2. Click FoodGridItem. The FoodDetail page is displayed. Import the router module, and then call the push API of this module to push the FoodDetail page to the route stack to implement page redirection.
   
    ```
    import router from '@system.router'
@@ -65,9 +70,9 @@ The procedure below uses these two mechanisms for redirection between the page l
    }
    ```
 
-    ![](figures/routercategory.gif)
+   ![en-us_image_0000001267607909](figures/en-us_image_0000001267607909.gif)
 
-3.  Add the icon for returning from the  **FoodDetail**  page to the food list page. Save the  **Back.png**  file to the  **resources**  \>  **phone**  \>  **media**  directory. Create a custom component  **PageTitle**, which contains the back icon and Food Detail text. Call the  **router.back\(\)**  API of the router to display the top page of the route stack, that is, the upper-level page.
+3. Add the icon for returning from the FoodDetail page to the food list page. Save the Back.png file to the resources > phone > media directory. Create a custom component PageTitle, which contains the back icon and Food Detail text. Call the router.back() API of the router to display the top page of the route stack, that is, the upper-level page.
   
    ```
    // FoodDetail.ets
@@ -94,7 +99,7 @@ The procedure below uses these two mechanisms for redirection between the page l
    }
    ```
 
-4.  Create the Stack component in the  **FoodDetail**  component, including the  **FoodImageDisplay**  and  **PageTitle**  child components. Set the alignment mode to  **TopStart**.
+4. Create the Stack component in the FoodDetail component, including the FoodImageDisplay and PageTitle child components. Set the alignment mode to TopStart.
   
    ```
    @Entry
@@ -113,14 +118,14 @@ The procedure below uses these two mechanisms for redirection between the page l
    }
    ```
 
-    ![](figures/en-us_image_0000001214998349.png)
+   ![en-us_image_0000001267767881](figures/en-us_image_0000001267767881.png)
 
 
-## Data Transmission Between Pages<a name="section86431031144816"></a>
+## Data Transmission Between Pages
 
-We have implemented the redirection and going back of the  **FoodCategoryList**  and  **FoodDetail**  pages. At this point, the tomato details page is displayed no matter which  **FoodListItem**/**FoodGridItem**  is clicked. This is because the data transmission between pages is not yet configured. To configure data transmission between pages, set the routing with parameters as follows:
+We have implemented the redirection and going back of the FoodCategoryList and FoodDetail pages. At this point, the tomato details page is displayed no matter which FoodListItem/FoodGridItem is clicked. This is because the data transmission between pages is not yet configured. To configure data transmission between pages, set the routing with parameters as follows:
 
-1.  Set the  **params**  attribute in the  **Navigator**  of the  **FoodListItem**  component. The  **params**  attribute accepts the key-value object.
+1. Set the params attribute in the Navigator of the FoodListItem component. The params attribute accepts the key-value object.
   
    ```
    // FoodList.ets
@@ -136,7 +141,8 @@ We have implemented the redirection and going back of the  **FoodCategoryList**
    }
    ```
 
-    The router API called by  **FoodGridItem**  also has the capability of redirection with parameters. The method of using the router API is similar to that of using the  **Navigator**.
+   The router API called by FoodGridItem also has the capability of redirection with parameters. The method of using the router API is similar to that of using the Navigator.
+
    
    ```
    router.push({
@@ -145,7 +151,7 @@ We have implemented the redirection and going back of the  **FoodCategoryList**
    })
    ```
 
-2.  Import the  **FoodData**  class to the  **FoodDetail**  page and add the  **foodItem**  member variable to the  **FoodDetail**  component.
+2. Import the FoodData class to the FoodDetail page and add the foodItem member variable to the FoodDetail component.
   
    ```
    // FoodDetail.ets
@@ -161,7 +167,7 @@ We have implemented the redirection and going back of the  **FoodCategoryList**
    }
    ```
 
-3.  Obtain the value of  **foodData**. Call  **router.getParams\(\).foodData**  to obtain the data corresponding to  **foodData**  carried when the  **FoodCategoryList**  page is displayed.
+3. Obtain the value of foodData. Call router.getParams().foodData to obtain the data corresponding to foodData carried when the FoodCategoryList page is displayed.
   
    ```
    @Entry
@@ -175,7 +181,7 @@ We have implemented the redirection and going back of the  **FoodCategoryList**
    }
    ```
 
-4.  Re-build the components on the  **FoodDetail**  page. During building, the food information on the  **FoodDetail**  page is all directly declared constants. You need to use the passed  **FoodData**  data to assign a new value to the constants. The code is as follows:
+4. Re-build the components on the FoodDetail page. During building, the food information on the FoodDetail page is all directly declared constants. You need to use the passed FoodData data to assign a new value to the constants. The code is as follows:
   
    ```
    @Component
@@ -267,13 +273,10 @@ We have implemented the redirection and going back of the  **FoodCategoryList**
    }
    ```
 
-
-## Samples<a name="section18889555307"></a>
+## Samples
 
 The following sample is provided to help you better understand how to define the page layout and connection:
 
 - [eTSDefiningPageLayoutAndConnection](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/eTSDefiningPageLayoutAndConnection)
 
   This sample exemplifies the basic usage of the list layout, grid layout, and page routing, by building the food list page and food details page.
-
-

zh-cn/application-dev/ui/ui-ts-creating-project.md

@@ -6,25 +6,22 @@
 
 
 1. 打开DevEco Studio，点击Create Project。如果已有一个工程，则点击File > New > New project。
+
    ![zh-cn_image_0000001168956332](figures/zh-cn_image_0000001168956332.png)
 
 2. 
-   进入选择ability template界面，选择[Standard]Empty Ability。
+   进入选择Ability Template界面，选择Empty Ability。
 
    ![zh-cn_image_0000001168059158](figures/zh-cn_image_0000001168059158.png)
 
-3. 
-   安装OpenHarmony SDK。
-
-   ![zh-cn_image_0000001213462329](figures/zh-cn_image_0000001213462329.png)
-
-4. 进入配置工程界面，将工程名字改为HealthyDiet，Project Type选择Application，Device Type选择Phone，Language选择eTS，选择兼容API Version 7。DevEco Studio会默认将工程保存在C盘，如果要更改工程保存位置，点击Save Location的文件夹图标，自行指定工程创建位置。配置完成后点击Finish。
+4. 进入配置工程界面，将工程名字改为HealthyDiet，Project Type选择Application，Compile API选择8，UI Syntax选择eTS。DevEco Studio会默认将工程保存在C盘，如果要更改工程保存位置，点击Save Location的文件夹图标，自行指定工程创建位置。配置完成后点击Finish。
   
 
    ![zh-cn_image_0000001167746622](figures/zh-cn_image_0000001167746622.png)
 
 5. 工程创建完成后，打开app.ets。
    app.ets提供了应用生命周期的接口：onCreate和onDestroy，分别在应用创建之初和应用被销毁时调用。在app.ets里可以声明全局变量，并且声明的数据和方法是整个应用共享的。
+   
    ```
    export default {
        onCreate() {

zh-cn/application-dev/ui/ui-ts-creating-simple-page.md

@@ -24,7 +24,7 @@
    ![zh-cn_image_0000001214128687](figures/zh-cn_image_0000001214128687.png)
 
 2. 食物图片展示。
-   创建Image组件，指定Image组件的url，Image组件和Text组件都是必选构造参数组件。为了让Text组件在Image组件上方显示，所以要先声明Image组件。图片资源放在resources下的rawfile文件夹内，引用rawfile下资源时使用```“$rawfile('filename')”```的形式，filename为rawfile目录下的文件相对路径。当前$rawfile仅支持Image控件引用图片资源。
+   创建Image组件，指定Image组件的url，Image组件和Text组件都是必选构造参数组件。为了让Text组件在Image组件上方显示，所以要先声明Image组件。图片资源放在resources下的rawfile文件夹内，引用rawfile下资源时使用“$rawfile('filename')”的形式，filename为rawfile目录下的文件相对路径。当前$rawfile仅支持Image控件引用图片资源。
    ```
    @Entry
    @Component
@@ -47,11 +47,11 @@
 
    ![zh-cn_image_0000001168570318](figures/zh-cn_image_0000001168570318.png)
 
-   点击OK后，resources文件夹下生成phone.media文件夹。将Tomato.png放入该文件夹内。
+   点击OK后，resources文件夹下生成phone文件夹，phone文件夹下生成media文件夹，将Tomato.png放入media文件夹内。
 
    ![zh-cn_image_0000001214330169](figures/zh-cn_image_0000001214330169.png)
 
-   就可以通过```“$r('app.type.name')”```的形式引用应用资源，即$r('app.media.Tomato')。
+   就可以通过“$r('app.type.name')”的形式引用应用资源，即$r('app.media.Tomato')。
 
    ```
    @Entry