From 47d9c930bae7753a180aaac646c14b0ab0dc2d47 Mon Sep 17 00:00:00 2001
From: "ester.zhou" <ester.zhou@huawei.com>
Date: Thu, 15 Dec 2022 16:44:15 +0800
Subject: [PATCH] Update docs (11968)

Signed-off-by: ester.zhou <ester.zhou@huawei.com>
---
 .../quick-start/start-overview.md             |   4 +-
 .../arkui-js/js-components-basic-input.md     |  92 ++++----
 .../arkui-js/js-components-basic-label.md     |  73 +++---
 .../arkui-js/js-components-basic-piece.md     |  52 +++--
 .../arkui-js/js-components-basic-qrcode.md    |  56 +++--
 .../arkui-js/js-components-basic-span.md      |  53 +++--
 .../arkui-js/js-components-basic-toggle.md    | 130 +++++++----
 .../js-components-basic-toolbar-item.md       |  90 ++++----
 .../arkui-js/js-components-canvas-canvas.md   |  81 +++----
 .../js-components-common-transition.md        |  57 ++---
 .../arkui-js/js-components-container-list.md  | 217 +++++++++++-------
 .../js-components-container-swiper.md         |  95 ++++----
 .../arkui-js/js-components-media-video.md     |  70 +++---
 13 files changed, 601 insertions(+), 469 deletions(-)

diff --git a/en/application-dev/quick-start/start-overview.md b/en/application-dev/quick-start/start-overview.md
index 3abd925eb7..4fe02e2b41 100644
--- a/en/application-dev/quick-start/start-overview.md
+++ b/en/application-dev/quick-start/start-overview.md
@@ -16,12 +16,12 @@ Before you begin, there are some basic concepts that will help you better unders
 
 OpenHarmony provides a UI development framework, known as ArkUI. ArkUI provides capabilities you may need for application UI development, including a wide array of components, layout calculation, animation, UI interaction, and drawing capabilities.
 
-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.
+ArkUI comes with two development paradigms: eTS-based declarative development paradigm (declarative development paradigm for short) and JavaScript-compatible web-like development paradigm (web-like development paradigm for short). You can choose whichever development paradigm that aligns with your practice.
 
 | **Development Paradigm** | **Language** | **UI Update Mode** | **Applicable To** | **Intended Audience** |
 | -------- | -------- | -------- | -------- | -------- |
+| Declarative development paradigm | Extended TypeScript (eTS) | Data-driven        | Applications involving technological sophistication and teamwork | Mobile application and system application developers |
 | Web-like development paradigm | JavaScript | Data-driven | Applications 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 |
 
 For DevEco Studio V2.2 Beta1 and later versions, both the traditional coding mode and the low-code mode are supported when the JS language is used for development.
 
diff --git a/en/application-dev/reference/arkui-js/js-components-basic-input.md b/en/application-dev/reference/arkui-js/js-components-basic-input.md
index 1f10982593..9ea5ccdb27 100644
--- a/en/application-dev/reference/arkui-js/js-components-basic-input.md
+++ b/en/application-dev/reference/arkui-js/js-components-basic-input.md
@@ -20,23 +20,23 @@ Not supported
 
 In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
 
-| Name                            | Type                   | Default Value   | Mandatory| Description                                                        |
-| -------------------------------- | ----------------------- | --------- | ---- | ------------------------------------------------------------ |
-| type                             | string                  | text<br>| No  | Type of the input component. Available values include **text**, **email**, **date**, **time**, **number**, **password**, **button**, **checkbox**, and **radio**.<br>The **text**, **email**, **date**, **time**, **number**, and **password** types can be dynamically switched and modified.<br>The **button**, **checkbox**, and **radio** types cannot be dynamically modified.  <br>- **button**: a button that can be clicked.<br>- **checkbox**: a check box.<br>- **radio**: a radio button that allows users to select one from multiple others with the same name.<br>- **text**: a single-line text field.<br>- **email**: a field used for an email address.<br>- **date**: date component, including the year, month, and day, but excluding time.<br>- **time**: time component, without the time zone.<br>- **number**: field for entering digits.<br>- **password**: password field, in which characters will be shielded.|
-| checked                          | boolean                 | false     | No  | Whether the **\<input>** component is selected. This attribute is valid only when **type** is set to **checkbox** or **radio**.             |
-| name                             | string                  | -         | No  | Name of the **\<input>** component.<br>This attribute is mandatory when **type** is set to **radio**.            |
-| value                            | string                  | -         | No  | Value of the **\<input>** component. When **type** is **radio**, this attribute is mandatory and the value must be unique for radio buttons with the same name.|
-| placeholder                      | string                  | -         | No  | Content of the hint text. This attribute is available only when the component type is set to **text**, **email**, **date**, **time**, **number**, or **password**.|
-| maxlength                        | number                  | -         | No  | Maximum number of characters that can be entered in the input box. The empty value indicates no limit.|
-| enterkeytype                     | string                  | default   | No  | Type of the **Enter** key on the soft keyboard. The value cannot be dynamically updated.<br>Available values include:<br>- default<br>- next<br>- go<br>- done<br>- send<br>- search<br>Except for the **next** type, clicking the Enter key hides the soft keyboard.|
-| headericon                       | string                  | -         | No  | Icon resource path before text input. This icon does not support click events and is unavailable for **button**, **checkbox**, and **radio** types. The supported icon image formats are JPG, PNG, and SVG.|
-| showcounter<sup>5+</sup>         | boolean                 | false     | No  | Whether to display the character counter for an input box. This attribute takes effect only when **maxlength** is set.     |
-| menuoptions<sup>5+</sup>         | Array&lt;MeunOption&gt; | -         | No  | Menu options displayed after users click the **More** button.              |
-| autofocus<sup>6+</sup>           | boolean                 | false     | No  | Whether to automatically obtain focus.<br>This attribute setting does not take effect on the application home page. You can enable a text box on the home page to automatically obtain focus, by delaying the **focus** method call (for about 100–500 ms) in **onActive**.|
-| selectedstart<sup>6+</sup>       | number                  | -1        | No  | Start position for text selection.                                |
-| selectedend<sup>6+</sup>         | number                  | -1        | No  | End position for text selection.                                |
-| softkeyboardenabled<sup>6+</sup> | boolean                 | true      | No  | Whether to display the soft keyboard during editing.                                  |
-| showpasswordicon<sup>6+</sup>    | boolean                 | true      | No  | Whether to display the icon at the end of the password text box. This attribute is available only when **type** is set to **password**.        |
+| Name                              | Type                     | Default Value      | Mandatory  | Description                                      |
+| -------------------------------- | ----------------------- | --------- | ---- | ---------------------------------------- |
+| type                             | string                  | text<br>| No   | Type of the input component. Available values include **text**, **email**, **date**, **time**, **number**, **password**, **button**, **checkbox**, and **radio**.<br>The **text**, **email**, **date**, **time**, **number**, and **password** types can be dynamically switched and modified.<br>The **button**, **checkbox**, and **radio** types cannot be dynamically modified.  <br>- **button**: a button that can be clicked.<br>- **checkbox**: a check box.<br>- **radio**: a radio button that allows users to select one from multiple others with the same name.<br>- **text**: a single-line text field.<br>- **email**: a field used for an email address.<br>- **date**: date component, including the year, month, and day, but excluding time.<br>- **time**: time component, without the time zone.<br>- **number**: field for entering digits.<br>- **password**: password field, in which characters will be shielded.|
+| checked                          | boolean                 | false     | No   | Whether the **\<input>** component is selected. This attribute is valid only when **type** is set to **checkbox** or **radio**.        |
+| name                             | string                  | -         | No   | Name of the **\<input>** component.<br>This attribute is mandatory when **type** is set to **radio**.     |
+| value                            | string                  | -         | No   | Value of the **\<input>** component. When **type** is **radio**, this attribute is mandatory and the value must be unique for radio buttons with the same name.|
+| placeholder                      | string                  | -         | No   | Content of the hint text. This attribute is available only when the component type is set to **text** \|email\|date\|time\|number\|**password**.|
+| maxlength                        | number                  | -         | No   | Maximum number of characters that can be entered in the input box. The empty value indicates no limit.          |
+| enterkeytype                     | string                  | default   | No   | Type of the **Enter** key on the soft keyboard. The value cannot be dynamically updated.<br>Available values include:<br>- default<br>- next<br>- go<br>- done<br>- send<br>- search<br>Except for the **next** type, clicking the Enter key hides the soft keyboard.|
+| headericon                       | string                  | -         | No   | Icon resource path before text input. This icon does not support click events and is unavailable for **button**, **checkbox**, and **radio** types. The supported icon image formats are JPG, PNG, and SVG.|
+| showcounter<sup>5+</sup>         | boolean                 | false     | No   | Whether to display the character counter for an input box. This attribute takes effect only when **maxlength** is set.        |
+| menuoptions<sup>5+</sup>         | Array&lt;MenuOption&gt; | -         | No   | Menu options displayed after users click the **More** button.                 |
+| autofocus<sup>6+</sup>           | boolean                 | false     | No   | Whether to automatically obtain focus.<br>This attribute setting does not take effect on the application home page. You can enable a text box on the home page to automatically obtain focus, by delaying the **focus** method call (for about 100–500 ms) in **onActive**.|
+| selectedstart<sup>6+</sup>       | number                  | -1        | No   | Start position for text selection.                          |
+| selectedend<sup>6+</sup>         | number                  | -1        | No   | End position for text selection.                          |
+| softkeyboardenabled<sup>6+</sup> | boolean                 | true      | No   | Whether to display the soft keyboard during editing.                           |
+| showpasswordicon<sup>6+</sup>    | boolean                 | true      | No   | Whether to display the icon at the end of the password text box. This attribute is available only when **type** is set to **password**.        |
 
 **Table 1** MenuOption<sup>5+</sup>
 
@@ -50,14 +50,14 @@ In addition to the [universal attributes](../arkui-js/js-components-common-attri
 
 In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
 
-| Name                    | Type                      | Default Value    | Mandatory| Description                                                        |
-| ------------------------ | -------------------------- | ---------- | ---- | ------------------------------------------------------------ |
-| color                    | &lt;color&gt;              | \#e6000000 | No  | Font color of the single-line text box or button.                              |
-| font-size                | &lt;length&gt;             | 16px       | No  | Font size of the single-line text box or button.                              |
-| allow-scale              | boolean                    | true       | No  | Whether the font size changes with the system's font size settings.<br>If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart.|
-| placeholder-color        | &lt;color&gt;              | \#99000000 | No  | Color of the hint text in the single-line text box. This attribute is available when **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**.|
-| font-weight              | number&nbsp;\|&nbsp;string | normal     | No  | Font weight of the single-line text box or button. For details, see **font-weight** of the [**\<text>** component](../arkui-js/js-components-basic-text.md).|
-| caret-color<sup>6+</sup> | &lt;color&gt;              | -          | No  | Color of the input cursor.                                        |
+| Name                      | Type                        | Default Value       | Mandatory  | Description                                      |
+| ------------------------ | -------------------------- | ---------- | ---- | ---------------------------------------- |
+| color                    | &lt;color&gt;              | \#e6000000 | No   | Font color of the single-line text box or button.                         |
+| font-size                | &lt;length&gt;             | 16px       | No   | Font size of the single-line text box or button.                         |
+| allow-scale              | boolean                    | true       | No   | Whether the font size changes with the system's font size settings.<br>If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart.|
+| placeholder-color        | &lt;color&gt;              | \#99000000 | No   | Color of the hint text in the single-line text box. This attribute is available only when the component type is set to **text**, **email**, **date**, **time**, **number**, or **password**. |
+| font-weight              | number \| string | normal     | No   | Font weight of the single-line text box or button. For details, see **font-weight** of the [**\<text>**](../arkui-js/js-components-basic-text.md) component. |
+| caret-color<sup>6+</sup> | &lt;color&gt;              | -          | No   | Color of the caret.                              |
 
 
 ## Events
@@ -65,30 +65,32 @@ In addition to the [universal styles](../arkui-js/js-components-common-styles.md
 In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
 
 - When **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**, the following events are supported.
+
   | Name                       | Parameter                                      | Description                                      |
   | ------------------------- | ---------------------------------------- | ---------------------------------------- |
-  | change                    | {<br>&nbsp;value: inputValue<br>&nbsp;}  | Triggered when the content entered in the input box changes. The most recent content entered by the user is returned.<br>If you change the **value** attribute directly, this event will not be triggered.|
-  | enterkeyclick             | {<br>&nbsp;value: enterKey<br>&nbsp;}    | Triggered when the **Enter** key on the soft keyboard is clicked. The type of the **Enter** key is returned, which is of the number type. Available values are as follows:<br>- **2**: returned if **enterkeytype** is **go**.<br>- **3**: returned if **enterkeytype** is **search**.<br>- **4**: returned if **enterkeytype** is **send**.<br>- **5**: returned if **enterkeytype** is **next**.<br>- **6**: returned if **enterkeytype** is **default**, **done**, or is not set.|
-  | translate<sup>5+</sup>    | {<br>&nbsp;value:&nbsp;selectedText<br>&nbsp;} | Triggered when users click the translate button in the menu displayed after they select a text segment. The selected text content is returned.|
-  | share<sup>5+</sup>        | {<br>&nbsp;value:&nbsp;selectedText<br>&nbsp;} | Triggered when users click the share button in the menu displayed after they select a text segment. The selected text content is returned.|
-  | search<sup>5+</sup>       | {<br>&nbsp;value:&nbsp;selectedText<br>&nbsp;} | Triggered when users click the search button in the menu displayed after they select a text segment. The selected text content is returned.|
-  | optionselect<sup>5+</sup> | {<br>&nbsp;index: optionIndex,<br>&nbsp;value:&nbsp;selectedText<br>&nbsp;} | Triggered when users click a menu option in the menu displayed after they select a text segment. This event is valid only when the **menuoptions** attribute is set. The option index and selected text content are returned.|
-  | selectchange<sup>6+</sup> | {<br>start:&nbsp;number,<br>end:&nbsp;number<br>&nbsp;} | Triggered when the text selection changes.                            |
+  | change                    | {<br> value: inputValue<br> }  | Triggered when the content entered in the input box changes. The most recent content entered by the user is returned.<br>If you change the **value** attribute directly, this event will not be triggered.|
+  | enterkeyclick             | {<br> value: enterKey<br> }    | Triggered when the **Enter** key on the soft keyboard is clicked. The type of the **Enter** key is returned, which is of the number type. Available values are as follows:<br>- **2**: returned if **enterkeytype** is **go**.<br>- **3**: returned if **enterkeytype** is **search**.<br>- **4**: returned if **enterkeytype** is **send**.<br>- **5**: returned if **enterkeytype** is **next**.<br>- **6**: returned if **enterkeytype** is **default**, **done**, or is not set.|
+  | translate<sup>5+</sup>    | {<br> value: selectedText<br> } | Triggered when users click the translate button in the menu displayed after they select a text segment. The selected text content is returned.|
+  | share<sup>5+</sup>        | {<br> value: selectedText<br> } | Triggered when users click the share button in the menu displayed after they select a text segment. The selected text content is returned.|
+  | search<sup>5+</sup>       | {<br> value: selectedText<br> } | Triggered when users click the search button in the menu displayed after they select a text segment. The selected text content is returned.|
+  | optionselect<sup>5+</sup> | {<br> index: optionIndex,<br> value: selectedText<br> } | Triggered when users click a menu option in the menu displayed after they select a text segment. This event is valid only when the **menuoptions** attribute is set. The option index and selected text content are returned.|
+  | selectchange<sup>6+</sup> | {<br>start: number,<br>end: number<br> } | Triggered when the text selection changes.                            |
 
 - When **type** is set to **checkbox** or **radio**, the following events are supported.
+
   | Name    | Parameter                                      | Description                                      |
   | ------ | ---------------------------------------- | ---------------------------------------- |
-  | change | {<br>&nbsp;checked:true&nbsp;\|&nbsp;false&nbsp;<br>} | Triggered when the checked status of the **checkbox** or **radio** button changes.|
+  | change | {<br> checked:true \| false <br>} | Triggered when the checked status of the **checkbox** or **radio** button changes.|
 
 ## Methods
 
 In addition to the [universal methods](../arkui-js/js-components-common-methods.md), the following methods are supported.
 
-| Name               | Parameter                                                        | Description                                                        |
-| ------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
-| focus               | {<br>&nbsp;focus:&nbsp;true\|false<br>&nbsp;}:<br>If **focus** is not passed, the default value **true** is used.| Obtains or loses focus. When **type** is set to **text**, **email**, **date**, **time**, **number**, or password, the input method can be displayed or hidden.|
-| showError           | {<br>&nbsp;error:&nbsp;string&nbsp;<br>}                     | Displays the error message. This attribute is available when **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**.|
-| delete<sup>6+</sup> | -                                                            | Deletes the text content based on the current cursor position when **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**; deletes the last character and displays the cursor if the current input component does not have a cursor.|
+| Name                 | Parameter                                      | Description                                      |
+| ------------------- | ---------------------------------------- | ---------------------------------------- |
+| focus               | {<br> focus: true\|false<br> }:<br>If **focus** is not passed, the default value **true** is used. | Obtains or loses focus. When **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**, the input method can be displayed or collapsed. |
+| showError           | {<br> error: string <br>}                | Displays the error message. This method is available when **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**. |
+| delete<sup>6+</sup> | -                                        | Deletes text based on the current caret position when **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**; deletes the last character and displays the caret if the current input component does not have a caret. |
 
 ## Example
 
@@ -100,26 +102,28 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods.
        headericon="/common/search.svg" placeholder="Please input text" onchange="change"
        onenterkeyclick="enterkeyClick">
      </input>
-     <input class="button" type="button" value="Submit" onclick="buttonClick"></input>
+     <input class="button" type="button" value="Submit" onclick="buttonClick" style="color: blue"></input>
    </div>
    ```
 
    ```css
    /* xxx.css */
    .content {
-     width: 60%;
+     width: 100%;
      flex-direction: column;
      align-items: center;
    }
    .input {
+     width: 60%;
      placeholder-color: gray;
    }
    .button {
+     width: 60%;
      background-color: gray;
      margin-top: 20px;
-   }
+    }
    ```
-
+   
    ```js
    // xxx.js
    import prompt from '@system.prompt'
@@ -141,11 +145,11 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods.
          error: 'error text'
        });
      },
-   }
+    }
    ```
 
    ![1-2](figures/1-2.png)
-
+   
 2. Common button
    ```html
    <!-- xxx.hml -->
diff --git a/en/application-dev/reference/arkui-js/js-components-basic-label.md b/en/application-dev/reference/arkui-js/js-components-basic-label.md
index eef2bce9d4..9a45521ecb 100644
--- a/en/application-dev/reference/arkui-js/js-components-basic-label.md
+++ b/en/application-dev/reference/arkui-js/js-components-basic-label.md
@@ -1,61 +1,67 @@
 # label
 
+>  **NOTE**
+>
+>  This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
+
 The **\<label>** component defines labels for the **\<input>**, **\<button>**, and **\<textarea>** components. When a label is clicked, the click effect of the component associated with the label will be triggered.
 
 ## Required Permissions
 
 None
 
-## Child Component
+
+## Child Components
 
 Not supported
 
-## Attributes
 
-In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported.
+## Attributes
 
+In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
 
+| Name    | Type    | Default Value | Mandatory  | Description         |
+| ------ | ------ | ---- | ---- | ----------- |
+| target | string | -    | No   | Attribute ID of the target component.|
 
-| Name   | Type   | Default Value | Mandatory | Description                           |
-| ------ | ------ | ------------- | --------- | ------------------------------------- |
-| target | string | -             | No        | Attribute ID of the target component. |
 
 ## Styles
 
-In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported.
-
-
-
-| Name              | Type             | Default Value | Mandatory | Description                                                  |
-| ----------------- | ---------------- | ------------- | --------- | ------------------------------------------------------------ |
-| color             | \<color>          | #e5000000     | No        | Text color.                                                  |
-| font-size         | \<length>         | 30px          | No        | Font size (px).                                              |
-| allow-scale       | boolean          | true          | No        | Whether the text size changes with the system's font size settings.NOTE:For details about how to make the configuration take effect dynamically, see the **config-changes** attribute in the **config.json** file. |
-| letter-spacing    | \<length>         | 0px           | No        | Character spacing (px).                                      |
-| font-style        | string           | normal        | No        | Font style. Available values are as follows:<br>-**normal**: standard font style<br>-**italic**: italic font style<br/> |
-| font-weight       | number \| string | normal        | No        | Font width. For the number type, the value ranges from 100 to 900. The default value is 400. A larger value indicates a larger font width.NOTE:The value must be an integer multiple of 100.The value of the string type can be **lighter**, **normal**, **bold**, or **bolder**. |
-| text-decoration   | string           | none          | No        | Text decoration. Available values are as follows:<br/>-**underline**: An underline is used.<br/>-**line-through**: A strikethrough is used.<br/>-**none**: The standard text is used.<br/> |
-| text-align        | string           | start         | No        | Text alignment mode. Available values are as follows:<br/>-**left**: The text is left-aligned.<br/>-**center**: The text is center-aligned.<br/>-**right**: The text is right-aligned.<br/>-**start**: The text is aligned with the direction in which the text is written.<br/>-**end**: The text is aligned with the opposite direction in which the text is written.NOTE:If the text width is not specified, the alignment effect may not be obvious when the text width is the same as the width of the parent container. |
-| line-height       | \<length>         | 0px           | No        | Text line height. When this parameter is set to **0px**, the text line height is not limited and the font size is adaptive. |
-| text-overflow     | string           | clip          | No        | Takes effect when the maximum number of lines is specified. Available values are as follows:<br/>-**clip**: The text is clipped and displayed based on the size of the parent container.<br/>-**ellipsis**: The text is displayed based on the size of the parent container. The text that cannot be displayed is replaced with ellipsis. This style must be used together with **max-lines**. |
-| font-family       | string           | sans-serif    | No        | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font that exists in the system or the font specified by [Custom Font Styles](js-components-common-customizing-font.md) in the family is selected as the font for the text. |
-| max-lines         | number           | -             | No        | Maximum number of lines in the text.                         |
-| min-font-size     | \<length>         | -             | No        | Minimum font size in the text. This style must be used together with **max-font-size**. The font size can be changed dynamically. After the maximum and minimum font sizes are set, **font-size** does not take effect. |
-| max-font-size     | \<length>         | -             | No        | Maximum font size in the text. This style must be used together with **min-font-size**. The font size can be changed dynamically. After the maximum and minimum font sizes are set, **font-size** does not take effect. |
-| font-size-step    | \<length>         | 1px           | No        | Step for dynamically adjusting the font size in the text. The minimum and maximum font sizes must be set. |
-| prefer-font-sizes | \<array>          | -             | No        | Preset preferred font sizes. For dynamic font size adjustment, the preset sizes are used to match the maximum number of lines in the text. If the preferred font sizes were not set, the font size will be adjusted based on the maximum and minimum font sizes and the step you have set. If the maximum number of lines in the text cannot be met, **text-overflow** is used to truncate the text. If this parameter is set, **font-size**, **max-font-size**, **min-font-size**, and **font-size-step** do not take effect.Example values: **12px,14px,16px** |
+In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
+
+| Name               | Type                        | Default Value       | Mandatory  | Description                                      |
+| ----------------- | -------------------------- | ---------- | ---- | ---------------------------------------- |
+| color             | &lt;color&gt;              | #e5000000  | No   | Font color.                                |
+| font-size         | &lt;length&gt;             | 30px       | No   | Font size.                                |
+| allow-scale       | boolean                    | true       | No   | Whether the font size changes with the system's font size settings.<br>For details about how to make the configuration take effect dynamically, see the **config-changes** attribute in the **config.json** file.|
+| letter-spacing    | &lt;length&gt;             | 0px        | No   | Character spacing (px).                              |
+| font-style        | string                     | normal     | No   | Font style. Available values are as follows:<br>- **normal**: standard font style.<br>- **italic**: italic font style.|
+| font-weight       | number \| string | normal     | No   | Font weight. For the number type, the value ranges from 100 to 900. The default value is 400. A larger value indicates a heavier font weight.<br>The value of the number type must be an integer multiple of 100.<br>The value of the string type can be **lighter**, **normal**, **bold**, or **bolder**.|
+| text-decoration   | string                     | none       | No   | Text decoration. Available values are as follows:<br>- **underline**: An underline is used.<br>- **line-through**: A strikethrough is used.<br>- **none**: The standard text is used.|
+| text-align        | string                     | start<br>| No   | Text alignment mode. Available values are as follows:<br>- **left**: The text is left-aligned.<br>- **center**: The text is center-aligned.<br>- **right**: The text is right-aligned.<br>- **start**: The text is aligned with the direction in which the text is written.<br>- **end**: The text is aligned with the opposite direction in which the text is written.<br>If the text width is not specified, the alignment effect may not be obvious when the text width is the same as the width of the parent container.|
+| line-height       | &lt;length&gt;             | 0px        | No   | Text line height. When this parameter is set to **0px**, the text line height is not limited and the font size is adaptive.      |
+| text-overflow     | string                     | clip       | No   | Takes effect when the maximum number of lines is specified. Available values are as follows:<br>- **clip**: The text is clipped and displayed based on the size of the parent container.<br>- **ellipsis**: The text is displayed based on the size of the parent container. The text that cannot be displayed is replaced with ellipsis. This style must be used together with **max-lines**.|
+| font-family       | string                     | sans-serif | No   | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text.|
+| max-lines         | number                     | -          | No   | Maximum number of lines in the text.                              |
+| min-font-size     | &lt;length&gt;             | -          | No   | Minimum font size in the text. This style must be used together with **max-font-size**. The font size can be changed dynamically. After the maximum and minimum font sizes are set, **font-size** does not take effect.|
+| max-font-size     | &lt;length&gt;             | -          | No   | Maximum font size in the text. This style must be used together with **min-font-size**. The font size can be changed dynamically. After the maximum and minimum font sizes are set, **font-size** does not take effect.|
+| font-size-step    | &lt;length&gt;             | 1px        | No   | Step for dynamically adjusting the font size in the text. The minimum and maximum font sizes must be set.           |
+| prefer-font-sizes | &lt;array&gt;              | -          | No   | Preset preferred font sizes. For dynamic font size adjustment, the preset sizes are used to match the maximum number of lines in the text. If the preferred font sizes were not set, the font size will be adjusted based on the maximum and minimum font sizes and the step you have set. If the maximum number of lines in the text cannot be met, **text-overflow** is used to truncate the text. If this parameter is set, **font-size**, **max-font-size**, **min-font-size**, and **font-size-step** do not take effect.<br>Example: prefer-font-sizes: 12px,14px,16px|
+
 
 ## Events
 
 Not supported
 
+
 ## Methods
 
 Not supported
 
-## Example Code
 
-```
+## Example
+
+```html
 <!--xxx.hml -->
 <div class="container">
   <div class="row">
@@ -71,10 +77,13 @@ Not supported
     <input class="input" id="checkboxId" type="checkbox"></input>
   </div>
 </div>
+```
+
+```css
 /*xxx.css */
 .container {
   flex-direction: column;
-  align-items: center;
+  margin-left: 20px;
 }
 .row {
   flex-direction: row;
@@ -89,4 +98,4 @@ Not supported
 }
 ```
 
-![img](figures/en-us_image_0000001152834002.png)
\ No newline at end of file
+![en-us_image_0000001152834002](figures/en-us_image_0000001152834002.png)
diff --git a/en/application-dev/reference/arkui-js/js-components-basic-piece.md b/en/application-dev/reference/arkui-js/js-components-basic-piece.md
index 11666b49f8..4503782492 100644
--- a/en/application-dev/reference/arkui-js/js-components-basic-piece.md
+++ b/en/application-dev/reference/arkui-js/js-components-basic-piece.md
@@ -1,51 +1,60 @@
 # piece
 
-An entrance piece that can contain images and text. It is usually used to display receivers, for example, email recipients or message recipients.
+>  **NOTE**
+>
+>  This component is supported since API version 5. Updates will be marked with a superscript to indicate their earliest API version.
+
+The **\<piece>** component provides an entrance piece that can contain images and text. It is usually used to display receivers, for example, email recipients or message recipients.
 
 ## Child Components
 
-None
+Not supported
 
-## Attributes
 
-In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported.
+## Attributes
 
+In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
 
+| Name    | Type   | Mandatory| Description                                                        |
+| -------- | ------- | ---- | ------------------------------------------------------------ |
+| content  | string  | Yes  | Text content of the operational piece.                                            |
+| closable | boolean | No  | Whether to display the delete icon for the operational piece. When users click the delete icon, it triggers the close event.<br>Default value: **false**|
+| icon     | string  | No  | URL of the delete icon for the operational piece. The value can be a local path.                         |
 
-| Name     | Type    | Default Value | Mandatory | Description                                                  |
-| -------- | ------- | ------------- | --------- | ------------------------------------------------------------ |
-| content  | string  | -             | Yes       | Text content of the operational piece.                       |
-| closable | boolean | false         | No        | Whether to display the delete icon for the operational piece. When users click the delete icon, it triggers the close event. |
-| icon     | string  | -             | No        | URL of the delete icon for the operational piece. The value can be a local path. |
 
 ## Styles
 
-Styles in [Universal Styles](js-components-common-styles.md) are supported.
+The [universal styles](../arkui-js/js-components-common-styles.md) are supported.
 
-> ![img](https://gitee.com/openharmony/docs/raw/OpenHarmony-3.1-Release/en/application-dev/public_sys-resources/icon-note.gif) **NOTE:** By default, text and images are placed in the middle of the **\<piece>** component.
+>  **NOTE**
+>
+>  By default, text and images are placed in the middle of the **\<piece>** component.
 
-## Events
 
-In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported.
+## Events
 
+In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
 
+| Name   | Parameter  | Description                                 |
+| ----- | ---- | ----------------------------------- |
+| close | -    | Triggered when users click the delete icon of the operational piece. You can delete this component by using the **if** directive.|
 
-| Name  | Parameter | Description                                                  |
-| ----- | --------- | ------------------------------------------------------------ |
-| close | -         | Triggered when users click the delete icon of the operational piece. You can delete this component by using the **if** directive. |
+## Methods
 
-## Method
+The [universal methods](../arkui-js/js-components-common-methods.md) are supported.
 
-Methods in [Universal Methods](js-components-common-methods.md) are supported.
 
 ## Example
 
-```
+```html
 <!-- xxx.hml-->
 <div class="container" >
   <piece if="{{first}}" content="example"></piece>
   <piece if="{{second}}" content="example" closable="true" onclose="closeSecond"></piece>
 </div>
+```
+
+```css
 /* xxx.css */
 .container {
   width: 100%;
@@ -53,6 +62,9 @@ Methods in [Universal Methods](js-components-common-methods.md) are supported.
   align-items: center;
   justify-content: center;
 }
+```
+
+```js
 // xxx.js
 export default {
   data: {
@@ -65,4 +77,4 @@ export default {
 }
 ```
 
-![img](figures/11-5.gif)
\ No newline at end of file
+![11-5](figures/11-5.gif)
diff --git a/en/application-dev/reference/arkui-js/js-components-basic-qrcode.md b/en/application-dev/reference/arkui-js/js-components-basic-qrcode.md
index 850efc3359..47f2919223 100644
--- a/en/application-dev/reference/arkui-js/js-components-basic-qrcode.md
+++ b/en/application-dev/reference/arkui-js/js-components-basic-qrcode.md
@@ -1,53 +1,60 @@
 # qrcode
 
+>  **NOTE**
+>
+>  This component is supported since API version 5. Updates will be marked with a superscript to indicate their earliest API version.
+
 The **\<qrcode>** component is used to generate and display a QR code.
 
 ## Required Permissions
 
 None
 
+
 ## Child Components
 
 Not supported
 
-## Attributes
 
-In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported.
+## Attributes
 
+In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
 
+| Name   | Type    | Default Value | Mandatory  | Description                                      |
+| ----- | ------ | ---- | ---- | ---------------------------------------- |
+| value | string | -    | Yes   | Content used to generate the QR code.                             |
+| type  | string | rect | No   | QR code type. Available values are as follows:<br>- **rect**: rectangular QR code.<br>- **circle**: round QR code.|
 
-| Name  | Type   | Default Value | Mandatory | Description                                                  |
-| ----- | ------ | ------------- | --------- | ------------------------------------------------------------ |
-| value | string | -             | Yes       | Content used to generate the QR code                         |
-| type  | string | rect          | No        | QR code type. Available values are as follows:<br/>-**rect**: rectangular QR code<br/>-**circle**: round QR code<br/> |
 
 ## Styles
 
-In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported.
+In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
 
+| Name              | Type           | Default Value     | Mandatory  | Description      |
+| ---------------- | ------------- | -------- | ---- | -------- |
+| color            | &lt;color&gt; | \#000000 | No   | Color of the QR code.  |
+| background-color | &lt;color&gt; | \#ffffff | No   | Background color of the QR code.|
 
-
-| Name             | Type    | Default Value | Mandatory | Description              |
-| ---------------- | ------- | ------------- | --------- | ------------------------ |
-| color            | \<color> | #000000       | No        | QR code color            |
-| background-color | \<color> | #ffffff       | No        | QR code background color |
-
-> ![img](https://gitee.com/openharmony/docs/raw/OpenHarmony-3.1-Release/en/application-dev/public_sys-resources/icon-note.gif) **NOTE:**
+>  **NOTE**
+>  - If the values of **width** and **height** are different, the smaller value is used as the length of the QR code. The generated QR code is centered.
+>
+>
+>  - If either **width** or **height** is set, the value is used as the length of the QR code. If neither of them is set, the default length 200 px is used.
 >
-> - If the values of **width** and **height** are different, the smaller value is used as the length of the QR code. The generated QR code is center displayed.
-> - If either **width** or **height** is set, the value is used as the length of the QR code. If neither of them is set, the default length is 200 px.
+
 
 ## Events
 
-Events in [Universal Events](js-components-common-events.md) are supported.
+The [universal events](../arkui-js/js-components-common-events.md) are supported.
 
 ## Methods
 
-Methods in [Universal Methods](js-components-common-methods.md) are supported.
+The [universal methods](../arkui-js/js-components-common-methods.md) are supported.
+
 
 ## Example
 
-```
+```html
 <!-- xxx.hml -->
 <div class="container">
   <qrcode value="{{qr_value}}" type="{{qr_type}}"
@@ -63,6 +70,9 @@ Methods in [Universal Methods](js-components-common-methods.md) are supported.
     <option for="{{bcol_list}}" value="{{$item}}">{{$item}}</option>
   </select>
 </div>
+```
+
+```css
 /* xxx.css */
 .container {
   width: 100%;
@@ -79,6 +89,9 @@ select{
   margin-top: 40px;
   margin-bottom: 40px;
 }
+```
+
+```js
 /* index.js */
 export default {
   data: {
@@ -96,9 +109,6 @@ export default {
       this.qr_type = 'circle'
     }
   },
-  setvalue(e) {
-    this.qr_value = e.newValue
-  },
   setcol(e) {
     this.qr_col = e.newValue
   },
@@ -108,4 +118,4 @@ export default {
 }
 ```
 
-![img](figures/12.gif)
\ No newline at end of file
+![12](figures/12.gif)
diff --git a/en/application-dev/reference/arkui-js/js-components-basic-span.md b/en/application-dev/reference/arkui-js/js-components-basic-span.md
index de34e6d85a..bf1c86a781 100644
--- a/en/application-dev/reference/arkui-js/js-components-basic-span.md
+++ b/en/application-dev/reference/arkui-js/js-components-basic-span.md
@@ -1,54 +1,67 @@
 # span
 
-The **\<span>** child component of **\<[text](js-components-basic-text.md)>** is used as a text modifier.
+>  **NOTE**
+>
+>  This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
+
+As a child component of **[\<text>](../arkui-js/js-components-basic-text.md)**, the **\<span>** component is used as a text modifier.
 
 ## Required Permissions
 
 None
 
+
 ## Child Components
 
-The **\<span>** child component is supported.
+Not supported
+
 
 ## Attributes
 
-Attributes in [Universal Attributes](js-components-common-attributes.md) are supported.
+The [universal attributes](../arkui-js/js-components-common-attributes.md) are supported.
 
-> ![img](https://gitee.com/openharmony/docs/raw/OpenHarmony-3.1-Release/en/application-dev/public_sys-resources/icon-note.gif) **NOTE:** The **focusable** and **disabled** attributes are not supported.
+>  **NOTE**
+>
+>  The **focusable** and **disabled** attributes are not supported.
 
-## Styles
 
-Only the following style attributes are supported.
+## Styles
 
+Only the following styles are supported.
 
+| Name             | Type                        | Default Value       | Mandatory  | Description                                      |
+| --------------- | -------------------------- | ---------- | ---- | ---------------------------------------- |
+| color           | &lt;color&gt;              | -          | No   | Font color of the modified text.                            |
+| font-size       | &lt;length&gt;             | 30px       | No   | Font size of the modified text.                            |
+| allow-scale     | boolean                    | true       | No   | Whether the font size of the modified text changes with the system's font size settings.<br>If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart.|
+| font-style      | string                     | normal     | No   | Font style of the modified text. For details, see **font-style** of the [**\<text>**](../arkui-js/js-components-basic-text.md#styles) component.|
+| font-weight     | number \| string | normal     | No   | Font weight of the modified text. For details, see **font-weight** of the [**\<text>**](../arkui-js/js-components-basic-text.md#styles) component.|
+| text-decoration | string                     | none       | No   | Text decoration of the modified text. For details, see **text-decoration** of the [**\<text>**](../arkui-js/js-components-basic-text.md#styles) component.|
+| font-family     | string                     | sans-serif | No   | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text.|
 
-| Name            | Type             | Default Value | Mandatory | Description                                                  |
-| --------------- | ---------------- | ------------- | --------- | ------------------------------------------------------------ |
-| color           | \<color>          | -             | No        | Font color of the modified text.                             |
-| font-size       | \<length>         | 30px          | No        | Font size of the modified text.                              |
-| allow-scale     | boolean          | true          | No        | Whether the font size of the modified text changes with the system's font size settings.<br/>NOTE:<br/>If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart. |
-| font-style      | string           | normal        | No        | Font style of the modified text. For details, see [font-style](js-components-basic-text.md) of the **text** component. |
-| font-weight     | number \| string | normal        | No        | Font weight of the modified text. For details, see [font-weight](js-components-basic-text.md) of the **text** component. |
-| text-decoration | string           | none          | No        | Text decoration of the modified text. For details, see [text-decoration](js-components-basic-text.md) of the **text** component. |
-| font-family     | string           | sans-serif    | No        | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the font specified by [Custom Font Styles](js-components-common-customizing-font.md) is used for the text. |
 
 ## Events
 
-Only the click event in [Universal Events](js-components-common-events.md) is supported.
+Only the click event in [Universal Events](../arkui-js/js-components-common-events.md) is supported.
 
-## Method
+
+## Methods
 
 Not supported
 
-## Example Code
 
-```
+## Example
+
+```html
 <!-- xxx.hml -->
 <div class="container">
   <text class="title">
     <span class="spanTxt">span</span>
   </text>
 </div>
+```
+
+```css
 /* xxx.css */
 .container {
   display: flex;
@@ -67,4 +80,4 @@ Not supported
 }
 ```
 
-![img](figures/en-us_image_0000001152588626.png)
\ No newline at end of file
+![en-us_image_0000001152588626](figures/en-us_image_0000001152588626.png)
diff --git a/en/application-dev/reference/arkui-js/js-components-basic-toggle.md b/en/application-dev/reference/arkui-js/js-components-basic-toggle.md
index e2f4767d3a..0ec0ac5c5c 100644
--- a/en/application-dev/reference/arkui-js/js-components-basic-toggle.md
+++ b/en/application-dev/reference/arkui-js/js-components-basic-toggle.md
@@ -1,58 +1,63 @@
 # toggle
 
+>  **NOTE**
+>
+>  This component is supported since API version 5. Updates will be marked with a superscript to indicate their earliest API version.
+
 The **\<toggle>** component allows your user to select from a group of options and may display the selection result in real time. Generally, the option group consists of many toggles.
 
+
 ## Required Permissions
 
 None
 
-## Child Component
+
+## Child Components
 
 Not supported
 
-## Attributes
 
-In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported.
+## Attributes
 
+In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
 
+| Name     | Type     | Default Value  | Mandatory  | Description        |
+| ------- | ------- | ----- | ---- | ---------- |
+| value   | string  | -     | Yes   | Text value of the toggle. |
+| checked | boolean | false | No   | Whether the toggle is selected.|
 
-| Name    | Type    | Default Value | Mandatory | Description                     |
-| ------- | ------- | ------------- | --------- | ------------------------------- |
-| value   | string  | -             | Yes       | Text value of the toggle.       |
-| checked | boolean | false         | No        | Whether the toggle is selected. |
 
 ## Styles
 
-In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported.
-
+In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
 
+| Name         | Type                        | Default Value       | Mandatory  | Description                                      |
+| ----------- | -------------------------- | ---------- | ---- | ---------------------------------------- |
+| text-color  | &lt;color&gt;              | \#E5000000 | No   | Text color of the toggle.                              |
+| font-size   | &lt;length&gt;             | 16px       | No   | Font size of the toggle.                              |
+| allow-scale | boolean                    | true       | No   | Whether the font size changes with the system's font size settings.<br>If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart.|
+| font-style  | string                     | normal     | No   | Font style of the toggle.                              |
+| font-weight | number \| string | normal     | No   | Font weight of the toggle. For details, see **font-weight** of the [**\<text>**](../arkui-js/js-components-basic-text.md#styles) component.|
+| font-family | &lt;string&gt;             | sans-serif | No   | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text.|
 
-| Name        | Type             | Default Value | Mandatory | Description                                                  |
-| ----------- | ---------------- | ------------- | --------- | ------------------------------------------------------------ |
-| text-color  | \<color>          | #E5000000     | No        | Text color of the toggle.                                    |
-| font-size   | \<length>         | 16px          | No        | Font size of the toggle.                                     |
-| allow-scale | boolean          | true          | No        | Whether the font size changes with the system's font size settings.<br/>NOTE:<br/>If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart. |
-| font-style  | string           | normal        | No        | Font style of the toggle.                                    |
-| font-weight | number \| string | normal        | No        | Font weight of the toggle. For details, see **font-weight** of the [text](js-components-basic-text.md) component. |
-| font-family | \<string>         | sans-serif    | No        | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the font specified by [Custom Font Styles](js-components-common-customizing-font.md) is used for the text. |
 
 ## Events
 
-In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported.
-
+In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
 
+| Name    | Parameter                             | Description            |
+| ------ | ------------------------------- | -------------- |
+| change | { checked: isChecked } | Triggered when the toggle is selected or unselected.|
 
-| Name   | Parameter              | Description                                          |
-| ------ | ---------------------- | ---------------------------------------------------- |
-| change | { checked: isChecked } | Triggered when the toggle is selected or unselected. |
 
 ## Methods
 
-Methods in [Universal Methods](https://gitee.com/openharmony/docs/blob/OpenHarmony-3.1-Release/en/application-dev/reference/arkui-js/js-components-common-methods.md) are supported.
+The [universal methods](../arkui-js/js-components-common-methods.md) are supported.
+
 
 ## Example
 
-```
+```html
 <!-- xxx.hml -->
 <div style="flex-direction: column;">
   <text class="margin">1. Multiple choice example</text>
@@ -65,41 +70,64 @@ Methods in [Universal Methods](https://gitee.com/openharmony/docs/blob/OpenHarmo
       value="{{$item.name}}" @change="allchange" @click="allclick({{$item.id}})"></toggle>
   </div>
 </div>
+```
+
+```css
 /* xxx.css */
 .margin {
   margin: 7px;
 }
+```
+
+```js
 // xxx.js
 export default {
-  data: {
-    toggle_list: [
-      { "id":"1001", "name":"Living room", "checked":true },
-      { "id":"1002", "name":"Bedroom", "checked":false },
-      { "id":"1003", "name":"Second bedroom", "checked":false },
-      { "id":"1004", "name":"Kitchen", "checked":false },
-      { "id":"1005", "name":"Study", "checked":false },
-      { "id":"1006", "name":"Garden", "checked":false },
-      { "id":"1007", "name":"Bathroom", "checked":false },
-      { "id":"1008", "name":"Balcony", "checked":false },
-    ],
-    toggles: ["Living room","Bedroom","Kitchen","Study"],
-    idx: ""
-  },
-  allclick(arg) {
-    this.idx = arg
-  },
-  allchange(e) {
-    if (e.checked === true) {
-      for (var i = 0; i < this.toggle_list.length; i++) {
-        if (this.toggle_list[i].id === this.idx) {
-          this.toggle_list[i].checked = true
-        } else {
-          this.toggle_list[i].checked = false
+    data: {
+        toggle_list: [
+            {
+                "id": "1001", "name": "Living room", "checked": true
+            },
+            {
+                "id": "1002", "name": "Bedroom", "checked": false
+            },
+            {
+                "id": "1003", "name": "Second bedroom", "checked": false
+            },
+            {
+                "id": "1004", "name": "Kitchen", "checked": false
+            },
+            {
+                "id": "1005", "name": "Study", "checked": false
+            },
+            {
+                "id": "1006", "name": "Garden", "checked": false
+            },
+            {
+                "id": "1007", "name": "Bathroom", "checked": false
+            },
+            {
+                "id": "1008", "name": "Balcony", "checked": false
+            },
+        ],
+        toggles: ["Living room", "Bedroom", "Kitchen", "Study"],
+        idx: ""
+    },
+    allclick(arg) {
+        this.idx = arg;
+    },
+    allchange(e) {
+        if (e.checked != true) {
+            return;
+        }
+        for (var i = 0; i < this.toggle_list.length; i++) {
+            if (this.toggle_list[i].id === this.idx) {
+                this.toggle_list[i].checked = true;
+            } else {
+                this.toggle_list[i].checked = false;
+            }
         }
-      }
     }
-  }
 }
 ```
 
-![img](figures/screenshot.png)
\ No newline at end of file
+![screenshot](figures/screenshot.png)
diff --git a/en/application-dev/reference/arkui-js/js-components-basic-toolbar-item.md b/en/application-dev/reference/arkui-js/js-components-basic-toolbar-item.md
index fa0c77c83d..b83de204fe 100644
--- a/en/application-dev/reference/arkui-js/js-components-basic-toolbar-item.md
+++ b/en/application-dev/reference/arkui-js/js-components-basic-toolbar-item.md
@@ -1,67 +1,73 @@
 # toolbar-item
 
-The **\<toolbar-item>** component is the child component of **\<toolbar>** to display an operation option on the toolbar.
+>  **NOTE**
+>
+>  This component is supported since API version 5. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Child Component
+As a child component of **[\<toolbar>](js-components-basic-toolbar.md)**, the **\<toolbar-item>** component is used to display an operation option on the toolbar.
 
-None
 
-## Attributes
+## Child Components
+
+Not supported
 
-In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported.
 
+## Attributes
+
+In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
 
+| Name   | Type    | Default Value | Mandatory  | Description                                      |
+| ----- | ------ | ---- | ---- | ---------------------------------------- |
+| value | string | -    | Yes   | Text content of the operation option.                               |
+| icon  | string | -    | Yes   | Icon image path, which is displayed on the option text. The value can be a local path. Supported image formats are PNG, JPG, and SVG.|
 
-| Name  | Type   | Default Value | Mandatory | Description                                                  |
-| ----- | ------ | ------------- | --------- | ------------------------------------------------------------ |
-| value | string | -             | Yes       | Text content of the operation option.                        |
-| icon  | string | -             | Yes       | Icon image path, which is displayed on the option text. The value is a local path. Supported image formats are PNG, JPG, and SVG. |
 
 ## Styles
 
-Only the following style attributes are supported.
-
-
-
-| Name                | Type                                                         | Default Value | Mandatory | Description                                                  |
-| ------------------- | ------------------------------------------------------------ | ------------- | --------- | ------------------------------------------------------------ |
-| color               | \<color>                                                     | #e6000000     | No        | Text color.                                                  |
-| font-size           | \<length>                                                    | 16px          | No        | Text size.                                                   |
-| allow-scale         | boolean                                                      | true          | No        | Whether the text size changes with the system's font size settings. |
-| font-style          | string                                                       | normal        | No        | Text font style. Available values are as follows:<br/>-**normal**: standard font style<br/>-**italic**: italic font style |
-| font-weight         | number\|string                                               | normal        | No        | Text font weight. The number value must be an exact multiple of 100 ranging from 100 to 900. The default value is 400. A larger value indicates a bigger weight. Available values of the string type are **lighter**, **normal**, **bold**, or **bolder**. |
-| text-decoration     | string                                                       | none          | No        | Text decoration. Available values are as follows:<br/>-**underline**: An underline is used.<br/>-**line-through**: A strikethrough is used.<br/>-**none**: The standard text is used. |
-| font-family         | string                                                       | sans-serif    | No        | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the font specified by [Custom Font Styles](js-components-common-customizing-font.md) is used for the text. |
-| background          | \<linear-gradient>                                           | -             | No        | This attribute supports [Gradient Styles](js-components-common-gradient.md) only but is not compatible with **background-color** or **background-image**. |
-| background-color    | \<color>                                                     | -             | No        | Background color.                                            |
-| background-image    | string                                                       | -             | No        | Background image. Currently, this attribute is not compatible with **background-color** or **background**. Both online and local image resources are supported. |
-| background-size     | <br/>-string<br/>-\<length> \<length><br/>-\<percentage> \<percentage> | auto          | No        | Background image size.<br/>-The **string** values are as follows:<br/>  -**contain**: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.<br/>  -**cover**: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background area.<br/>  -**auto**: The original image width-height ratio is retained.<br/>-The two **\<length>** values are as follows:Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to **auto** by default.<br/>-The two **\<percentage>** values are as follows:Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to **auto** by default. |
-| background-repeat   | string                                                       | repeat        | No        | Repeating attribute of a background image. By default, a background image is repeated both horizontally and vertically.<br/>-**repeat**: Repeatedly draws images along the x-axis and y-axis at the same time.<br/>-**repeat-x**: Repeatedly draws images along the x-axis.<br/>-**repeat-y**: Repeatedly draws images along the y-axis.<br/>-**no-repeat**: The image is not drawn repeatedly. |
-| background-position | string string\<length> \<length>\<percentage> \<percentage>  | 0px 0px       | No        | <br/>-Using keywords: If only one keyword is specified, the other value is **center** by default. The two values define the horizontal position and vertical position, respectively.<br/>  -**left**: leftmost in the horizontal direction<br/>  -**right**: rightmost in the horizontal direction<br/>  -**top**: top in the vertical direction<br/>  -**bottom**: bottom in the vertical direction<br/>  -**center**: center position<br/>-Using **\<length>**: The first value indicates the horizontal position, and the second value indicates the vertical position. **0 0** indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is **50%**.<br/>-Using **\<percentage>**: The first value indicates the horizontal position, and the second value indicates the vertical position. **0% 0%** indicates the upper left corner. **100% 100%** indicates the lower right corner. If only one value is specified, the other one is **50%**.<br/>-Using both **\<percentage>** and **\<length>**. |
-| opacity             | number                                                       | 1             | No        | Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. |
-| display             | string                                                       | flex          | No        | Type of the box containing an element. Available values are as follows:<br/>-**flex**: flexible layout<br/>-**none**: The box is disabled. |
-| visibility          | string                                                       | visible       | No        | Whether to display the box containing an element. The invisible box occupies layout space. (To remove the box, set the **display** attribute to **none**.) Available values are as follows:<br/>-**visible**: The box is visible.<br/>-**hidden**: The box is hidden but still takes up space.<br/>NOTE:<br/>If both **visibility** and **display** are set, only **display** takes effect. |
+Only the following styles are supported.
+
+| Name                 | Type                                      | Default Value         | Mandatory  | Description                                      |
+| ------------------- | ---------------------------------------- | ------------ | ---- | ---------------------------------------- |
+| color               | &lt;color&gt;                            | \#e6000000   | No   | Font color.                                   |
+| font-size           | &lt;length&gt;                           | 16px         | No   | Font size.                                   |
+| allow-scale         | boolean                                  | true         | No   | Whether the font size changes with the system's font size settings.               |
+| font-style          | string                                   | normal       | No   | Font style. Available values are as follows:<br> - **normal**: standard font style<br>- **italic**: italic font style|
+| font-weight         | number\|string                           | normal       | No   | Font weight. The number value must be an exact multiple of 100 ranging from 100 to 900. The default value is 400. A larger value indicates a bigger weight. Available values of the string type are **lighter**, **normal**, **bold**, or **bolder**. |
+| text-decoration     | string                                   | none         | No   | Text decoration. Available values are as follows:<br>- **underline**: An underline is used.<br>- **line-through**: A strikethrough is used.<br>- **none**: The standard text is used.|
+| font-family         | string                                   | sans-serif   | No   | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text.|
+| background          | &lt;linear-gradient&gt;                  | -            | No   | Background. This attribute supports [gradient styles](../arkui-js/js-components-common-gradient.md) only and is not compatible with **background-color** or **background-image**.|
+| background-color    | &lt;color&gt;                            | -            | No   | Background color.                                 |
+| background-image    | string                                   | -            | No   | Background image. Currently, this attribute is not compatible with **background-color** or **background**. Both online and local image resources are supported.|
+| background-size     | - string<br>- &lt;length&gt; &lt;length&gt;<br>- &lt;percentage&gt; &lt;percentage&gt; | auto         | No   | Background image size.<br>- The available values of the **string** type are as follows:<br>  - **contain**: extends the image to the maximum size so that its height and width are fully applicable to the content area.<br>  - **cover**: extends the background image to a large enough size so that it completely covers the background area. Some parts of the image may not be displayed in the background area.<br>  - **auto**: retains the original aspect ratio of the image.<br>- Values of the **\<length>** type: The two values are width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to **auto** by default.<br>- Values of the **\<percentage>** type: The two values are width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to **auto** by default. |
+| background-repeat   | string                                   | repeat       | No   | How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically.<br>- **repeat**: The image is repeated along both the x-axis and y-axis.<br>- **repeat-x**: The image is repeated along the x-axis.<br>- **repeat-y**: The image is repeated along the y-axis.<br>- **no-repeat**: The image is not repeated.|
+| background-position | - string string<br>- &lt;length&gt; &lt;length&gt;<br>- &lt;percentage&gt; &lt;percentage&gt; | 0px 0px | No   | Position of the background image.<br>- Values of the **string** type: If you set only one value, the other value is set to **center** by default. The two values define the horizontal position and vertical position, respectively.<br>  - **left**: leftmost in the horizontal direction.<br>  - **right**: rightmost in the horizontal direction.<br>  - **top**: top in the vertical direction.<br>  - **bottom**: bottom in the vertical direction.<br>  - **center**: center in the horizontal or vertical direction.<br>- Values of the **\<length>** type: The first value indicates the horizontal position, and the second value indicates the vertical position. For the upper left corner, the value is 0 0 in px (**0px 0px**). If you only set one value, the other value is set to **50%**.<br>- Values of the **\<percentage>** type: The first value indicates the horizontal position, and the second value indicates the vertical position. For the upper left corner, the value is **0% 0%**. For the lower right corner, the value is **100% 100%**. If you only set one value, the other value is set to **50%**.<br>- Values of the **\<percentage>** type and **\<length>** type can be used together.|
+| opacity             | number                                   | 1            | No   | Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent.       |
+| display             | string                                   | flex         | No   | Type of the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
+| visibility          | string                                   | visible      | No   | Whether to display the box containing an element. A hidden box still occupies layout space. (To remove the box, set the **display** attribute to **none**.) Available values are as follows:<br>- **visible**: The box is visible.<br>- **hidden**: The box is hidden but still takes up space.<br>If both **visibility** and **display** are set, only **display** takes effect.|
+
 
 ## Events
 
-Events in [Universal Events](js-components-common-events.md) are supported.
+The [universal events](../arkui-js/js-components-common-events.md) are supported.
+
 
-## Method
+## Methods
 
 Not supported
 
+
 ## Example
 
-```
+```html
 <!-- xxx.hml -->
-<toolbar style="position: fixed; bottom: 0px; ">    
-   <toolbar-item icon='common/Icon/location.png' value='Option 1' >   </toolbar-item>
-   <toolbar-item icon='common/Icon/heart.png' value='Option 2'>   </toolbar-item>    
-   <toolbar-item icon='common/Icon/diamond.png' value='Option 3'  >   </toolbar-item>    
-   <toolbar-item icon='common/Icon/heart.png' value='Option 4' >   </toolbar-item>    
-   <toolbar-item icon='common/Icon/heart.png' value='Option 5' >   </toolbar-item>
-   <toolbar-item icon='common/Icon/heart.png' value='Option 6'>   </toolbar-item> 
+<toolbar style="position : fixed; bottom : 0px;">
+    <toolbar-item icon='common/Icon/location.png' value='Option 1'></toolbar-item>
+    <toolbar-item icon='common/Icon/heart.png' value='Option 2'></toolbar-item>
+    <toolbar-item icon='common/Icon/diamond.png' value='Option 3'></toolbar-item>
+    <toolbar-item icon='common/Icon/heart.png' value='Option 4'></toolbar-item>
+    <toolbar-item icon='common/Icon/heart.png' value='Option 5'></toolbar-item>
+    <toolbar-item icon='common/Icon/heart.png' value='Option 6'></toolbar-item>
 </toolbar>
 ```
 
-![img](figures/progress-7.jpg)
\ No newline at end of file
+![progress-7](figures/progress-7.jpg)
diff --git a/en/application-dev/reference/arkui-js/js-components-canvas-canvas.md b/en/application-dev/reference/arkui-js/js-components-canvas-canvas.md
index 40c06a2458..ca3a9125a0 100644
--- a/en/application-dev/reference/arkui-js/js-components-canvas-canvas.md
+++ b/en/application-dev/reference/arkui-js/js-components-canvas-canvas.md
@@ -1,93 +1,96 @@
 # canvas
 
+>  **NOTE**
+>
+>  This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
+
 The **\<canvas>** component is used for customizing drawings.
 
 ## Required Permissions
 
 None
 
+
 ## Child Components
 
 Not supported
 
+
 ## Attributes
 
-Attributes in [Universal Attributes](js-components-common-attributes.md) are supported.
+The [universal attributes](../arkui-js/js-components-common-attributes.md) are supported.
+
 
 ## Styles
 
-Styles in [Universal Styles](js-components-common-styles.md) are supported.
+The [universal styles](../arkui-js/js-components-common-styles.md) are supported.
+
 
 ## Events
 
-Events in [Universal Events](js-components-common-events.md) are supported.
+The [universal events](../arkui-js/js-components-common-events.md) are supported.
+
 
 ## Methods
 
-In addition to the methods in [Universal Methods](js-components-common-methods.md), the following events are supported.
+In addition to the [universal methods](../arkui-js/js-components-common-methods.md), the following methods are supported.
+
 
 ### getContext
 
-getContext(type: '2d', options?: ContextAttrOptions): CanvasRendering2dContext
+getContext(type: '2d', options?:  ContextAttrOptions): CanvasRenderingContext2D
 
 Obtains the canvas drawing context. This API cannot be called in **onInit** or **onReady**.
 
-- Parameters
-
-  
+**Parameters**
 
-  | Name      | Type                                                 | Mandatory | Description                                                  |
-  | --------- | ---------------------------------------------------- | --------- | ------------------------------------------------------------ |
-  | type      | string                                               | Yes       | The value is set to **'2d'**, indicating that a 2D drawing object is returned. This object can be used to draw rectangles, texts, and images on the canvas component. |
-  | options6+ | [ContextAttrOptions](js-components-canvas-canvas.md) | No        | Whether to enable anti-aliasing. By default, anti-aliasing is disabled. |
+| Name                 | Type              | Mandatory  | Description                                      |
+| -------------------- | ------------------ | ---- | ---------------------------------------- |
+| type                 | string             | Yes   | Object type. The value is set to **'2d'**, indicating that a 2D drawing object is returned. This object can be used to draw rectangles, texts, and images on the canvas component.|
+| options<sup>6+</sup> | ContextAttrOptions | No   | Whether to enable anti-aliasing. By default, anti-aliasing is disabled.                 |
 
   **Table 1** ContextAttrOptions
 
-  
+| Name      | Type     | Description                 |
+| --------- | ------- | ------------------- |
+| antialias | boolean | Whether to enable anti-aliasing. The default value is **false**.|
 
-  | Name      | Type    | Description                                                  |
-  | --------- | ------- | ------------------------------------------------------------ |
-  | antialias | boolean | Whether to enable anti-aliasing. The default value is **false**. |
+**Return value**
 
-- Return values
+| Type                                      | Description                  |
+| ---------------------------------------- | -------------------- |
+| [CanvasRenderingContext2D](../arkui-js/js-components-canvas-canvasrenderingcontext2d.md) | 2D drawing object, which can be used to draw rectangles, images, and texts on the canvas component.|
 
-  
-
-  | Type                                                         | Description                                                  |
-  | ------------------------------------------------------------ | ------------------------------------------------------------ |
-  | [CanvasRenderingContext2D](js-components-canvas-canvasrenderingcontext2d.md) | 2D drawing object, which can be used to draw rectangles, images, and texts on the canvas component. |
-
-### toDataURL6+
+### toDataURL<sup>6+</sup>
 
 toDataURL(type?: string, quality?: number): string
 
 Generates a URL containing image display information.
 
-- Parameters
-
-  
-
-  | Name    | Type   | Mandatory | Description                                                  |
-  | ------- | ------ | --------- | ------------------------------------------------------------ |
-  | type    | string | No        | Image format. The default value is **image/png**.            |
-  | quality | number | No        | Image quality, which ranges from 0 to 1, when the image format is **image/jpeg** or **image/webp**. If the set value is beyond the value range, the default value **0.92** is used. |
+**Parameters**
 
-- Return values
+| Name    | Type  | Mandatory  | Description                                      |
+| ------- | ------ | ---- | ---------------------------------------- |
+| type    | string | No   | Image format. The default value is **image/png**.           |
+| quality | number | No   | Image quality, which ranges from 0 to 1, when the image format is **image/jpeg** or **image/webp**. If the set value is beyond the value range, the default value **0.92** is used.|
 
-  
+**Return value**
 
-  | Type   | Description |
-  | ------ | ----------- |
-  | string | Image URL.  |
+| Type    | Description       |
+| ------ | --------- |
+| string | Image URL.|
 
 ## Example
 
-```
+```html
 <!-- xxx.hml -->
 <div>
   <canvas ref="canvas1" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
   <input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="handleClick" />
 </div>
+```
+
+```js
 // xxx.js
 export default {
   handleClick() {
@@ -97,4 +100,4 @@ export default {
     // "data:image/png;base64,xxxxxxxx..."
   }
 }
-```
\ No newline at end of file
+```
diff --git a/en/application-dev/reference/arkui-js/js-components-common-transition.md b/en/application-dev/reference/arkui-js/js-components-common-transition.md
index 19e54ce8bb..d751602299 100644
--- a/en/application-dev/reference/arkui-js/js-components-common-transition.md
+++ b/en/application-dev/reference/arkui-js/js-components-common-transition.md
@@ -11,14 +11,14 @@
 
 | Name     | Type    | Default Value | Description                                      |
 | ------- | ------ | ---- | ---------------------------------------- |
-| shareid | string | -   | Used for the transition of shared elements, which takes effect only when this attribute is set. **\<list-item>**, **\<image>**, **\<text>**, **\<button>**, and **\<label>** components are supported for the transition of shared elements. |
+| shareid | string | -   | Used for the transition of shared elements, which takes effect only when this attribute is set. **\<list-item>**, **\<image>**, **\<text>**, **\<button>**, and **\<label>** components are supported for the transition of shared elements.|
 
 
 ### Styles
 
 | Name                               | Type    | Default Value     | Description                                      |
 | --------------------------------- | ------ | -------- | ---------------------------------------- |
-| shared-transition-effect          | string | exchange | Entry style of a shared element during transition.<br>-&nbsp;**exchange** (default): The source page element is moved to the position of the target page element and is zoomed in or out properly.<br>-&nbsp;**static**: The position of the target page element remains unchanged. You can configure the opacity animation. Currently, only the static effect configured on the target page takes effect.|
+| shared-transition-effect          | string | exchange | Entry style of a shared element during transition.<br>- **exchange** (default): The source page element is moved to the position of the target page element and is zoomed in or out properly.<br>- **static**: The position of the target page element remains unchanged. You can configure the opacity animation. Currently, only the static effect configured on the target page takes effect.|
 | shared-transition-name            | string | -        | During the transition, the style configured on the target page takes effect preferentially. This style is used to configure the animation effect of shared elements. The animation effect is an animation sequence defined by **@keyframes** supporting transform and opacity animations. If the effect of shared elements conflicts with the custom animation, the latter is used.|
 | shared-transition-timing-function | string | friction | During the transition, the style configured on the target page takes effect preferentially. This style defines the difference curve during the transition of shared elements. If it is not configured, the friction curve is used.|
 
@@ -52,7 +52,7 @@ In the example below, where **PageA** jumps to **PageB**, the shared element is
       <image src="item.jpg" shareid="shareImage" onclick="jump" class="shared-transition-style"></image>
     </list-item>
     <list-item>
-      <text onclick="jump">Click on picture to Jump to the details</text>
+      <text onclick="jump">Click on picture to jump to the details</text>
     </list-item>
   </list>
 </div>
@@ -60,12 +60,12 @@ In the example below, where **PageA** jumps to **PageB**, the shared element is
 
 ```js
 // xxx.js
-import router from '@system.router';
+import router from '@ohos.router';
 export default {
   jump() {
     router.push({
       // The path must be the same as that in the config.json file.
-      uri: 'pages/detailpage',
+      url: 'pages/detailpage',
     });
   },
 }
@@ -93,7 +93,7 @@ export default {
 
 ```js
 // xxx.js
-import router from '@system.router';
+import router from '@ohos.router';
 export default {
   jumpBack() {
     router.back();
@@ -117,7 +117,6 @@ export default {
 ## Widget Transition
 
 >  **NOTE**
->
 >  Widget transitions are not available when other transitions (including shared element transitions and custom transitions) are used.
 
 
@@ -125,7 +124,7 @@ export default {
 
 | Name               | Type    | Default Value | Description                                      |
 | ----------------- | ------ | ---- | ---------------------------------------- |
-| transition-effect | string | -    | Whether a component on the current page displays the transition effect during a widget transition. Available values are as follows:<br>-&nbsp;**unfold**: The component will move upwards by one widget height if the component is located above the widget tapped by the user, or move downwards by one widget height if the component is located below the widget.<br>-&nbsp;**none**: No transition effect is displayed. |
+| transition-effect | string | -    | Whether a component on the current page displays the transition effect during a widget transition. Available values are as follows:<br>- **unfold**: The component will move upwards by one widget height if the component is located above the widget tapped by the user, or move downwards by one widget height if the component is located below the widget.<br>- **none**: No transition effect is displayed.|
 
 
 ### Example
@@ -140,7 +139,7 @@ The **source_page** has a title area on the top and a widget list. Users can tap
     <text style="font-size: 23px; margin-bottom: 20px" >MAIN TITLE</text>
   </div>
   <list style="width:340px;height:600px;flex-direction:column;justify-content:center;align-items:center">
-    <list-item type="listItem" class="item" card="true" for="list" id="{{$item.id}}" onclick="jumpPage({{$item.id}}, {{$item.uri}})">
+    <list-item type="listItem" class="item" card="true" for="list" id="{{$item.id}}" onclick="jumpPage({{$item.id}}, {{$item.url}})">
       <text style="margin-left: 10px; font-size: 23px;">{{$item.title}}</text>
     </list-item>
   </list>
@@ -149,19 +148,19 @@ The **source_page** has a title area on the top and a widget list. Users can tap
 
 ```js
 // xxx.js
-import router from '@system.router'
+import router from '@ohos.router'
 export default {
   data: { list: [] },
   onInit() {
     for(var i = 0; i < 10; i++) {
-      var item = { uri: "pages/card_transition/target_page/index", 
+      var item = { url: "pages/card_transition/target_page/index", 
                    title: "this is title" + i, id: "item_" + i }
       this.list.push(item);
     }
   },
-  jumpPage(id, uri) {
+  jumpPage(id, url) {
     var cardId = this.$element(id).ref;
-    router.push({ uri: uri, params : { ref : cardId } });
+    router.push({ url: url, params : { ref : cardId } });
   }
 }
 ```
@@ -169,6 +168,8 @@ export default {
 ```css
 /* xxx.css */
 .container {
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   align-items: center;
   background-color: #ABDAFF;
@@ -199,6 +200,8 @@ export default {
 ```css
 /* xxx.css */
 .container {
+  width: 100%;
+  height: 100%; 
   flex-direction: column;
   align-items: center;
   background-color: #EBFFD7;
@@ -223,7 +226,7 @@ export default {
 | -------------------------- | ------ | ------------- | ---------------------------------------- |
 | transition-enter           | string | -             | Works with **@keyframes** and supports transform and opacity animations. For details, see [Attributes available for the @keyframes rule](../arkui-js/js-components-common-animation.md).|
 | transition-exit            | string | -             | Works with **@keyframes** and supports transform and opacity animations. For details, see [Attributes available for the @keyframes rule](../arkui-js/js-components-common-animation.md).|
-| transition-duration        | string | Follows the default page transition time of the device | The unit can be s or ms. The default unit is ms. If no value is specified, the default value is used. |
+| transition-duration        | string | Follows the default page transition time of the device| The unit can be s|or ms. The default unit is ms. If no value is specified, the default value is used.|
 | transition-timing-function | string | friction      | Speed curve of the transition animation, which makes the animation more fluent. For details, see the description of **animation-timing-function **in [Animation Styles](../arkui-js/js-components-common-animation.md).|
 
 
@@ -255,16 +258,16 @@ export default {
    </div>
    ```
 
-   ```css
+   ```js
    // xxx.js
-   import router from '@system.router';
+   import router from '@ohos.router';
    export default {
        data: {
-
+   
        },
        jump() {
            router.push({
-               uri:'pages/transition2/transition2'
+               url:'pages/transition2/transition2'
            })
        }
    }
@@ -288,13 +291,13 @@ export default {
        transition-duration: 5s;
        transition-timing-function: friction;
    }
-
+   
    @keyframes go_page {
        from {
            opacity: 0;
            transform: translate(0px) rotate(60deg) scale(1.0);
        }
-
+   
        to {
            opacity: 1;
            transform: translate(100px) rotate(360deg) scale(1.0);
@@ -305,7 +308,7 @@ export default {
            opacity: 1;
            transform: translate(200px) rotate(60deg) scale(2);
        }
-
+   
        to {
            opacity: 0;
            transform: translate(200px) rotate(360deg) scale(2);
@@ -321,15 +324,15 @@ export default {
    <div class="container">
        <text>transition</text>
        <div class="move_page" onclick="jumpBack"></div>
-   </div
+   </div>
    ```
 
    ```js
    // xxx.js
-   import router from '@system.router';
+   import router from '@ohos.router';
    export default {
        data: {
-
+   
        },
        jumpBack() {
            router.back()
@@ -346,7 +349,7 @@ export default {
        width: 100%;
        height: 100%;
    }
-
+   
    .move_page {
        width: 100px;
        height: 100px;
@@ -356,7 +359,7 @@ export default {
        transition-duration: 5s;
        transition-timing-function: ease;
    }
-
+   
    @keyframes go_page {
        from {
            opacity: 0;
@@ -367,7 +370,7 @@ export default {
            transform:translate(100px) rotate(180deg) scale(2.0);
        }
    }
-
+   
    @keyframes exit_page {
        from {
            opacity: 1;
diff --git a/en/application-dev/reference/arkui-js/js-components-container-list.md b/en/application-dev/reference/arkui-js/js-components-container-list.md
index d09ee605bf..35c3aac633 100644
--- a/en/application-dev/reference/arkui-js/js-components-container-list.md
+++ b/en/application-dev/reference/arkui-js/js-components-container-list.md
@@ -1,110 +1,157 @@
 # list
 
-The **\<list>** component provides a list container that presents a series of list items arranged in a column with the same width. Lists support presentations of the same data in a multiple and coherent row style, for example, images and texts.
+>  **NOTE**
+>
+>  This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
+
+The **\<list>** component provides a list container that presents a series of list items arranged in a column with the same width. It supports presentations of the same type of data in a multiple and coherent row style, for example, images or text.
 
 ## Required Permissions
 
-N/A
+None
+
 
 ## Child Components
 
-\<[list-item](js-components-container-list-item-group.md)> and \<[list-item-group](js-components-container-list-item.md)>
+The **[\<list-item-group>](../arkui-js/js-components-container-list-item-group.md)** and **[\<list-item>](../arkui-js/js-components-container-list-item.md)** components are supported.
 
-## Attributes
-
-In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported.
 
+## Attributes
 
+In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
+
+| Name                         | Type                                      | Default Value    | Mandatory  | Description                                      |
+| --------------------------- | ---------------------------------------- | ------- | ---- | ---------------------------------------- |
+| scrollpage                  | boolean                                  | false   | No   | Whether to scroll the non-list part on the top of the list page out of the visible area with the list. The value can be **true** (scrolls the non-list part out) or **false** (does not scroll the non-list part out). This attribute is not available when the direction is **row**.|
+| cachedcount                 | number                                   | 0       | No   | Minimum number of cached list items when a long list is loaded with delay.<br>When the number of list items cached outside the visible area is less than the value of this attribute, a **requestitem** event is triggered.|
+| scrollbar                   | string                                   | off     | No   | Display mode of the side scrollbar. (Currently, only the vertical scrollbar is supported.)<br>- **off**: no display.<br>- **auto**: displayed on demand (The side scrollbar is displayed when touched and disappears 2s later.).<br>- **on**: always displayed.|
+| scrolleffect                | string                                   | spring  | No   | Scroll effect. Available values are as follows:<br>- **spring**: Similar to the physical dynamic effect of a spring. After scrolling to the edge, you can continue to scroll for a distance based on the initial speed or by touching the knob of the scrollbar. After you release your hand, the knob is rebounded.<br>- **fade**: Similar to the physical dynamic effect of fade. When you scroll to the edge, a wave shape fades. The fade changes according to the speed and scrolling distance.<br>- **no**: No effect after the scrollbar is moved to the edge.|
+| indexer                     | boolean \| Array&lt;string&gt; | false   | No   | Whether to display the alphabetical index bar on the sidebar. If this attribute is set to **true** or a customized indexer, the index bar is displayed at the right boundary of the list. Example:<br>**"indexer" : "true"** indicates the default alphabetical indexer.<br>**"indexer" : "false"** indicates no indexer.<br>"indexer": ['#', '1', '2', '3', '4', '5', '6', '7', '8'] indicates a customized index. You must include **"#"** when using a customized indexer.<br>This **indexer** attribute is valid only when **flex-direction** is set to **column** and **columns** is set to **1**.<br>This attribute must be used together with the **[section](../arkui-js/js-components-container-list-item.md#attributes)** attribute of **\<list-item>**.|
+| indexercircle<sup>5+</sup>  | boolean                                  | -       | No   | Whether to use a circle indexer.<br>The default value is **true** for wearables and **false** for other device types. This attribute is invalid if **indexer** is set to **false**.|
+| indexermulti<sup>5+</sup>   | boolean                                  | false   | No   | Whether to use a multi-language indexer.<br>This attribute is invalid if **indexer** is set to **false**.    |
+| indexerbubble<sup>5+</sup>  | boolean                                  | true    | No   | Whether to display the bubble effect when switching among indexes.<br>This attribute is invalid if **indexer** is set to **false**.   |
+| divider<sup>5+</sup>        | boolean                                  | false   | No   | Whether list items are separated by dividers.<br>For details about divider styles, see **divider-color**, **divider-height**, **divider-length**, and **divider-origin** in the **Styles** table.|
+| shapemode                   | string                                   | default | No   | Shape of the side scrollbar.<br>- **default**: not specified (following the theme).<br>- **rect**: rectangle.<br>- **round**: circle.|
+| updateeffect                | boolean                                  | false   | No   | Whether a dynamic effect is displayed when an item in the list is deleted or added.<br>- **false**: No dynamic effect is displayed.<br>- **true**: A dynamic effect is displayed when an item is added or deleted.|
+| chainanimation<sup>5+</sup> | boolean                                  | false   | No   | Whether to display chained animations on this list when it slides or its top and bottom are dragged. The list items are separated with even space, and one item animation starts after the previous animation during basic sliding interactions. The chained animation effect is similar with spring physics.<br>- **false**: Chained animations are displayed.<br>- **true**: No chained animation is displayed.<br>Type of the **Enter** key on the soft keyboard. The value cannot be dynamically updated.<br>This attribute does not take effect if an indexer is used.<br>If this attribute is **true**, the **sticky** attributes set for **\<list-item>** components do not take effect.|
+| initialindex                | number                                   | 0       | No   | Item displayed at the start position of the viewport when the current list is loaded for the first time. The default value is **0**, indicating that the first item is displayed. If the number you set is greater than the index of the last item, the setting does not take effect. When the **initialoffset** attribute is set, this attribute does not take effect. This attribute does not take effect if **indexer** or **scrollpage** is set to **true**.|
+| initialoffset               | &lt;length&gt;                           | 0       | No   | Start offset of the viewport when the current list is loaded for the first time. The offset must not exceed the scrolling range of the current list. If exceeded, the offset is truncated to the maximum value of the scrolling range. This attribute does not take effect if **indexer** or **scrollpage** is set to **true**.|
+| selected<sup>5+</sup>       | string                                   | -       | No   | Selected item in the current list. The value can be a **section** value of any list items.|
 
-| Name             | Type                     | Default Value | Mandatory | Description                                                  |
-| ---------------- | ------------------------ | ------------- | --------- | ------------------------------------------------------------ |
-| scrollpage       | boolean                  | false         | No        | Whether to scroll the non-list part on the top of the list page out of the visible area with the list. The value can be **true** (scrolls the non-list part out) or **false** (does not scroll the non-list part out). This attribute is not available when the direction is **row**. |
-| cachedcount      | number                   | 0             | No        | Minimum number of cached list items when the long list is loaded with delay.When the number of list items cached outside the visible area is less than the value of this attribute, a **requestitem** event is triggered. |
-| scrollbar        | string                   | off           | No        | Display mode of the side scrollbar. (Currently, only the vertical scrollbar is supported.)  <br>- **off**: No display <br>- **auto**: Displayed on demand (The side scrollbar is displayed when touched and disappears 2s later.) <br>- **on**: Always displayed |
-| scrolleffect     | string                   | spring        | No        | Scroll effect. Available values are as follows:  <br>- **spring**: Similar to the physical dynamic effect of a spring. After scrolling to the edge, you can continue to scroll for a distance based on the initial speed or by touching the knob of the scrollbar. After you release your hand, the knob is rebounded. <br>- **fade**: Similar to the physical dynamic effect of fade. When you scroll to the edge, a wave shape fades. The fade changes according to the speed and scrolling distance. <br>- **no**: No effect after the scrollbar is moved to the edge. |
-| indexer          | boolean \| Array\<string> | false         | No        | Whether to display the alphabetical index bar on the sidebar. If this attribute is set to **true** or a customized indexer, the index bar is displayed at the right boundary of the list. Example:<br>**"indexer" : "true"** indicates the default alphabetical indexer.<br>**"indexer" : "false"** indicates no indexer.<br>"indexer": ['#', '1', '2', '3', '4', '5', '6', '7', '8'] indicates a customized index. You must include **"#"** when using a customized indexer.<br>NOTE:<br>- This attribute is valid only when **flex-direction** is set to **column** and **columns** is set to **1**.<br>- This attribute must be used together with the [section](js-components-container-list-item.md#section2907183951110) attribute of **\<list-item>**. |
-| indexercircle<sup>5+</sup>  | boolean                  | -             | No        | Whether to use a circle indexer.<br>The default value is **true** for wearables and **false** for other device types. This attribute is invalid if **indexer** is set to **false**. |
-| indexermulti<sup>5+</sup>   | boolean                  | false         | No        | Whether to use a multi-language indexer.<br>This attribute is invalid if **indexer** is set to **false**. |
-| indexerbubble<sup>5+</sup>  | boolean                  | true          | No        | Whether to display the bubble effect when switching among indexes.<br>This attribute is invalid if **indexer** is set to **false**. |
-| divider<sup>5+</sup>        | boolean                  | false         | No        | Whether list items are separated by dividers.<br>For details about divider styles, see **divider-color**, **divider-height**, **divider-length**, and **divider-origin** in the [Styles](https://gitee.com/openharmony/docs/blob/OpenHarmony-3.1-Release/en/application-dev/nottoctopics/en-us_topic_0000001131154746.md#section1071433432218) table. |
-| shapemode        | string                   | default       | No        | Shape of the side scrollbar.  <br>- **default**: not specified (following the theme) <br>- **rect**: rectangle <br>- **round**: circle |
-| updateeffect     | boolean                  | false         | No        | Whether a dynamic effect is displayed when an item in the list is deleted or added.  <br>- **false**: No dynamic effect is displayed. <br>- **true**: A dynamic effect is displayed when an item is added or deleted. |
-| chainanimation<sup>5+</sup> | boolean                  | false         | No        | Whether to display chained animations on this list when it slides or its top and bottom are dragged. The list items are separated with even space, and one item animation starts after the previous animation during basic sliding interactions. The chained animation effect is similar with spring physics.  <br>- **false**: Chained animations are displayed. <br>- **true**: No chained animation is displayed.<br>NOTE:<br>  - Dynamic modification is not supported.<br>  - This attribute does not take effect if an indexer is used.<br>  - If this attribute is  **true**, the **sticky** attributes set for **\<list-item>** components do not take effect. |
-| initialindex     | number                   | 0             | No        | Item to be displayed at the start position of the viewport when the current list is loaded for the first time. The default value is **0**, indicating that the first item is displayed.<br> The setting does not take effect in any of the following cases:<br>- The value you set is greater than the index of the last item.<br>- The **initialoffset** attribute is set. <br>- **indexer** or **scrollpage** is set to **true**. |
-| initialoffset    | \<length>                 | 0             | No        | Start offset of the viewport when the current list is loaded for the first time. The offset must not exceed the scrolling range of the current list. If exceeded, the offset is truncated to the maximum value of the scrolling range. This attribute does not take effect if **indexer** or **scrollpage** is set to **true**. |
-| selected<sup>5+</sup>       | string                   | -             | No        | Selected item in the current list. The value can be a **section** value of any list items. |
 
 ## Styles
 
-In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported.
+In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
 
+| Name                           | Type                                      | Default Value        | Mandatory  | Description                                      |
+| ----------------------------- | ---------------------------------------- | ----------- | ---- | ---------------------------------------- |
+| divider-color<sup>5+</sup>    | &lt;color&gt;                            | transparent | No   | Item divider color. This style is valid only when the **divider** attribute of **\<list>** is set to **true**.     |
+| divider-height<sup>5+</sup>   | &lt;length&gt;                           | 1           | No   | Item divider height. This style is valid only when the **divider** attribute of **\<list>** is set to **true**.     |
+| divider-length<sup>5+</sup>   | &lt;length&gt;                           | Main axis width       | No   | Item divider length. If this style is not set, the maximum length is the width of the main axis, and the actual length depends on the **divider-origin** parameter. This style is valid only when the **divider** attribute of **\<list>** is set to **true**.|
+| divider-origin<sup>5+</sup>   | &lt;length&gt;                           | 0           | No   | Item divider offset relative to the start point of the main axis. This style is valid only when the **divider** attribute of **\<list>** is set to **true**.|
+| flex-direction                | string                                   | column      | No   | Main axis direction of the flex container. It specifies how items are placed in the flex container.<br>- **column**: The y-axis is the main axis.<br>- **row**: The x-axis is the main axis.<br>For the **\<list>** component, the default value is **column**. For other components, the default value is **row**.|
+| columns                       | number                                   | 1           | No   | Number of columns displayed in the cross axis direction of the list. The default value is **1**.<br>When multiple columns are set, the columns are evenly distributed on the cross axis of the **\<list>** component. The size of each column is the same.|
+| align-items                   | string                                   | stretch     | No   | Alignment of items in each column on the cross axis. Available values are as follows:<br>- **stretch**: Items are stretched to the same height or width as the container in the cross axis direction.<br>- **flex-start**: Items are aligned to the start of the cross axis.<br>- **flex-end**: Items are aligned to the end of the cross axis.<br>- **center**: Items are aligned in the center of the cross axis.<br>This style takes effect only on items of each column. Columns are evenly distributed.|
+| item-extent                   | &lt;length&gt; \| &lt;percentage&gt; | -           | No   | Size of an internal item. When a percentage is set, the value indicates the percentage of the length in the main axis direction relative to the list viewpoint.|
+| fade-color                    | &lt;color&gt;                            | grey        | No   | Color of the physical dynamic effect. This attribute is valid only when **scrolleffect** is set to **fade**.          |
+| scrollbar-color<sup>6+</sup>  | &lt;color&gt;                            | -           | No   | Color of the scrollbar.                               |
+| scrollbar-width<sup>6+</sup>  | &lt;length&gt;                           | -           | No   | Width of the scrollbar.                               |
+| scrollbar-offset<sup>6+</sup> | &lt;length&gt;                           | 0           | No   | Offset between the scrollbar and the default position of the list. The value must be a positive number. The default position is on the right edge of the list. You can adjust the horizontal position of the scrollbar by setting this offset. If the scrollbar is drawn outside the list and the parent component of the list is capable of cropping, the scrollbar will be cropped.|
 
 
-| Name               | Type                     | Default Value       | Mandatory | Description                                                  |
-| ------------------ | ------------------------ | ------------------- | --------- | ------------------------------------------------------------ |
-| divider-color<sup>5+</sup>    | \<color>                  | transparent         | No        | Item divider color. This style is valid only when the **divider** attribute of **\<list>** is set to **true**. |
-| divider-height<sup>5+</sup>   | \<length>                 | 1                   | No        | Item divider height. This style is valid only when the **divider** attribute of **\<list>** is set to **true**. |
-| divider-length<sup>5+</sup>   | \<length>                 | The main axis width | No        | Item divider length. If this style is not set, the maximum length is the width of the main axis, and the actual length depends on the **divider-origin** parameter. This style is valid only when the **divider** attribute of **\<list>** is set to **true**. |
-| divider-origin<sup>5+</sup>   | \<length>                 | 0                   | No        | Item divider offset relative to the start point of the main axis. This style is valid only when the **divider** attribute of **\<list>** is set to **true**. |
-| flex-direction     | string                   | column              | No        | Main axis direction of the flex container. It specifies how items are placed in the flex container.<br>- **column**: The y-axis is the maim axis.<br>- **row**: The x-axis is the main axis.<br>For the **\<list>** component, the default value is **column**. For other components, the default value is **row**. |
-| columns            | number                   | 1                   | No        | Number of columns displayed in the cross axis direction of the list. The default value is **1**.<br>NOTE:<br>When multiple columns are set, the columns are evenly distributed on the cross axis of the **\<list>** component. The size of each column is the same. |
-| align-items        | string                   | stretch             | No        | Alignment of items in each column on the cross axis. Available values are as follows:  <br>- **stretch**: Items are stretched to the same height or width as the container in the cross axis direction. <br>- **flex-start**: Items are aligned to the start of the cross axis. <br>- **flex-end**: Items are aligned to the end of the cross axis. <br>- **center**: Items are aligned in the middle of the cross axis.NOTE:This style takes effect only on items of each column. Columns are evenly distributed. |
-| item-extent        | \<length> \| \<percentage> | -                   | No        | Size of an internal item. When a percentage is set, the value indicates the percentage of the length in the main axis direction relative to the list viewpoint. |
-| fade-color         | \<color>                  | grey                | No        | Color of the physical dynamic effect. This attribute is valid only when **scrolleffect** is set to **fade**. |
-| scrollbar-color<sup>6+</sup>  | \<color>                  | -                   | No        | Color of the scrollbar.                                      |
-| scrollbar-width<sup>6+</sup>  | \<length>                 | -                   | No        | Width of the scrollbar.                                      |
-| scrollbar-offset<sup>6+</sup> | \<length>                 | 0                   | No        | Offset between the scrollbar and the default position of the list. The value must be a positive number. The default position is on the right edge of the list. You can adjust the horizontal position of the scrollbar by setting this offset. If the scrollbar is drawn outside the list and the parent component of the list is capable of cropping, the scrollbar will be cropped. |
-
 ## Events
 
-In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported.
-
+In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
 
+| Name                        | Parameter                                      | Description                                      |
+| -------------------------- | ---------------------------------------- | ---------------------------------------- |
+| indexerchange<sup>5+</sup> | { local: booleanValue }   | Triggered when the indexer switches between local and alphabetic indexers. This parameter takes effect only when both **indexer** and **indexermulti** are set to **true**. The values of **booleanValue** can be:<br>- **true**: The local index is displayed.<br>- **false**: The alphabetic index is displayed.|
+| scroll                     | { scrollX: scrollXValue, scrollY: scrollYValue, scrollState: stateValue } | Triggered to indicate the offset and status of list scrolling.<br>**stateValue: 0**: The list is not scrolling.<br>**stateValue: 1**: The list is scrolling along with user's touches.<br>**stateValue: 2**: The list is scrolling after the touches stop.|
+| scrollbottom               | -                                        | Triggered when the list is scrolled to the bottom.                           |
+| scrolltop                  | -                                        | Triggered when the list is scrolled to the top.                           |
+| scrollend                  | -                                        | Triggered when the list stops scrolling.                               |
+| scrolltouchup              | -                                        | Triggered when the list continues scrolling after the user lifts their fingers.                        |
+| requestitem                | -                                        | Triggered for a request to create a list-item.<br>This event is triggered when the number of cached list-items outside the visible area is less than the value of **cachedcount** during long list loading with delay.|
+| rotate<sup>7+</sup>        | { rotateValue: number }   | Triggered to indicate the incremental value of the rotation angle of the watch crown. This parameter is only supported by wearables.                    |
 
-| Name            | Parameter                                                    | Description                                                  |
-| --------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
-| indexerchange<sup>5+</sup> | { local: booleanValue }                                      | Triggered when the indexer switches between local and alphabetic indexers. This parameter takes effect only when both **indexer** and **indexermulti** are set to **true**. The value of **booleanValue** can be:  <br>- **true**: The local index is displayed. <br>- **false**: The alphabetic index is displayed. |
-| scroll          | { scrollX: scrollXValue, scrollY: scrollYValue, scrollState: stateValue } | Triggered to indicate the offset and status of list scrolling.  <br>- **stateValue: 0**: The list is not scrolling.<br>- **stateValue: 1**: The list is scrolling along with user's touches. <br>- **stateValue: 2**: The list is scrolling after the touches stop. |
-| scrollbottom    | -                                                            | Triggered when the list is scrolled to the bottom.           |
-| scrolltop       | -                                                            | Triggered when the list is scrolled to the top.              |
-| scrollend       | -                                                            | Triggered when the list stops scrolling.                     |
-| scrolltouchup   | -                                                            | Triggered when the list continues scrolling after the user lifts their fingers. |
-| requestitem     | -                                                            | Triggered for a request to create a list-item.This event is triggered when the number of cached list-items outside the visible area is less than the value of **cachedcount** during long list loading with delay. |
-| rotate<sup>7+</sup>        | { rotateValue: number }                                      | Triggered to indicate the incremental value of the rotation angle of the watch crown. This parameter is only supported by wearables. |
 
 ## Methods
 
-In addition to the methods in [Universal Methods](js-components-common-methods.md), the following events are supported.
-
-
-
-| Name          | Parameter                                                    | Description                                                  |
-| ------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
-| scrollTo      | { index: number(specified position) }                        | Scrolls the list to the position of the item at the specified index. |
-| scrollBy      | [ScrollParam](js-components-container-list.md#t54327f53ea104788bc430b9047ecb47b) | Scrolls the list for a certain distance.<br>This method applies only to smart TVs. |
-| scrollTop     | { smooth: boolean }                                          | If **smooth** is set to **false** (default value), the list is directly scrolled to the top.<br>If **smooth** is set to **true**, the list is smoothly scrolled to the top. |
-| scrollBottom  | { smooth: boolean }                                          | If **smooth** is set to **false** (default value), the list is directly scrolled to the bottom.<br/>If **smooth** is set to **true**, the list is smoothly scrolled to the bottom. |
-| scrollPage    | { reverse: boolean, smooth: boolean }                        | If **reverse** is set to **false** (default value), the next page is displayed.If there is no next page, the list scrolls to the bottom.<br/>If **reverse** is set to **true**, the previous page is displayed. If there is no previous page, the list scrolls to the top.<br/>If **smooth** is set to **false** (default value), the list is directly scrolled to another page.<br/>If **smooth** is set to **true**, the list is smoothly scrolled to another page. |
-| scrollArrow   | { reverse: boolean, smooth: boolean }                        | If **reverse** is set to **false** (default value), the list scrolls towards the bottom for a certain distance. If there is no sufficient distance, the list scrolls to the bottom.<br/>If **reverse** is set to **true**, the list scrolls towards the top for a certain distance. If there is no sufficient distance, the list scrolls to the top.<br/>If **smooth** is set to **false** (default value), the list is directly scrolled.<br/>If **smooth** is set to **true**, the list is smoothly scrolled. |
-| collapseGroup | { groupid: string }                                          | Collapses a group.<br/>**groupid**: ID of the group to collapse.<br/>All groups are collapsed when **groupid** is not specified. |
-| expandGroup   | { groupid: string }                                          | Expands a group.<br/>**groupid**: ID of the group to expand.<br/>All groups are expanded when **groupid** is not specified. |
-| currentOffset | -                                                            | Returns the offset of the current scrolling. The return value type is **Object**. For details, see [Table 2](js-components-container-list.md). |
-
-**Table 1** ScrollParam
-
-
-
-| Name   | Type    | Mandatory | Default Value | Remarks                                                      |
-| ------ | ------- | --------- | ------------- | ------------------------------------------------------------ |
-| dx     | number  | No        | 0             | Offset for scrolling the list in the horizontal direction, in px. |
-| dy     | number  | No        | 0             | Offset for scrolling the list in the vertical direction, in px. |
-| smooth | boolean | No        | true          | Whether a sliding animation is displayed when the list position is changed. |
-
-**Table 2** Attributes of the currentOffset return object
-
-
-
-| Name | Type   | Remarks                               |
-| ---- | ------ | ------------------------------------- |
-| x    | number | Scrolling offset in the x-axis, in px |
-| y    | number | Scrolling offset in the y-axis, in px |
\ No newline at end of file
+In addition to the [universal methods](../arkui-js/js-components-common-methods.md), the following methods are supported.
+
+| Name           | Parameter                                      | Description                                      |
+| ------------- | ---------------------------------------- | ---------------------------------------- |
+| scrollTo      | { index: number(specified position) }  | Scrolls the list to the position of the item at the specified index.                  |
+| scrollTop     | { smooth: boolean }       | If **smooth** is set to **false** (default value), the list is directly scrolled to the top.<br>If **smooth** is set to **true**, the list is smoothly scrolled to the top.|
+| scrollBottom  | { smooth: boolean }       | If **smooth** is set to **false** (default value), the list is directly scrolled to the bottom.<br>If **smooth** is set to **true**, the list is smoothly scrolled to the bottom.|
+| scrollPage    | { reverse: boolean, smooth: boolean } | If **reverse** is set to **false** (default value), the next page is displayed. If there is no next page, the list scrolls to the bottom.<br>If **reverse** is set to **true**, the previous page is displayed. If there is no previous page, the list scrolls to the top.<br>If **smooth** is set to **false** (default value), the list is directly scrolled to another page.<br>If **smooth** is set to **true**, the list is smoothly scrolled to another page.|
+| scrollArrow   | { reverse: boolean, smooth: boolean } | If **reverse** is set to **false** (default value), the list scrolls towards the bottom for a certain distance. If there is no sufficient distance, the list scrolls to the bottom.<br>If **reverse** is set to **true**, the list scrolls towards the top for a certain distance. If there is no sufficient distance, the list scrolls to the top.<br>If **smooth** is set to **false** (default value), the list is directly scrolled.<br>If **smooth** is set to **true**, the list is smoothly scrolled.|
+| collapseGroup | { groupid: string }       | Collapses a group.<br>**groupid**: ID of the group to collapse.<br>All groups are collapsed when **groupid** is not specified.|
+| expandGroup   | { groupid: string }       | Expands a group.<br>**groupid**: ID of the group to expand.<br>All groups are expanded when **groupid** is not specified.|
+| currentOffset | -                                        | Returns the offset of the current scrolling. The return value type is Object. For details, see **currentOffset**.|
+
+**Table 1** currentOffset
+
+| Name  | Type    | Remarks              |
+| ---- | ------ | ---------------- |
+| x    | number | Scrolling offset in the x-axis, in px|
+| y    | number | Scrolling offset in the y-axis, in px|
+
+## Example
+
+```html
+<!-- index.hml -->
+<div class="container">
+  <list class="todo-wrapper">
+    <list-item for="{{todolist}}" class="todo-item">
+      <div style="flex-direction: column;align-items: center;justify-content: center;">
+        <text class="todo-title">{{$item.title}}</text>
+        <text class="todo-title">{{$item.date}}</text>
+      </div>
+    </list-item>
+  </list>
+</div>
+```
+```css
+/* index.css */
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+.todo-wrapper {
+  width: 100%;
+  height: 300px;
+}
+.todo-item {
+  width: 100%;
+  height: 120px;
+  justify-content:center;
+}
+.todo-title {
+  width: 100%;
+  height: 80px;
+  text-align: center;
+}
+```
+
+```js
+// index.js
+export default {
+  data: {
+    todolist: [{
+      title: 'Prepare for the interview',
+      date: '2021-12-31 10:00:00'
+    }, {
+      title: 'Watch the movie',
+      date: '2021-12-31 20:00:00'
+    }],
+  },
+}
+```
+
+
+
+![en-us_image_0000001185033226](figures/en-us_image_0000001185033226.png)
diff --git a/en/application-dev/reference/arkui-js/js-components-container-swiper.md b/en/application-dev/reference/arkui-js/js-components-container-swiper.md
index b4099998da..f607139653 100644
--- a/en/application-dev/reference/arkui-js/js-components-container-swiper.md
+++ b/en/application-dev/reference/arkui-js/js-components-container-swiper.md
@@ -1,77 +1,78 @@
 # swiper
 
-The **\<swiper>** component provides a container that allows users to switch among child components by swiping operations.
+>  **NOTE**
+>
+>  This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
+
+The **\<swiper>** component provides a container that allows users to switch among child components using swipe gestures.
 
 ## Required Permissions
 
 None
 
+
 ## Child Components
 
-All child components except **\<list>** are supported.
+Supported
 
-## Attributes
 
-In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported.
+## Attributes
 
+In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
 
+| Name                            | Type     | Default Value   | Mandatory  | Description                                      |
+| ------------------------------ | ------- | ------ | ---- | ---------------------------------------- |
+| index                          | number  | 0      | No   | Index of the child component currently displayed in the container.                       |
+| autoplay                       | boolean | false  | No   | Whether to enable autoplay for child component switching. If this attribute is **true**, the indicator does not take effect<sup>5+</sup>. |
+| interval                       | number  | 3000   | No   | Autoplay interval, in milliseconds, when autoplay is enabled.                   |
+| indicator                      | boolean | true   | No   | Whether to enable the indicator. The default value is **true**.                      |
+| digital<sup>5+</sup>           | boolean | false  | No   | Whether to enable the digital indicator. The default value is **false**.<br>The digital indicator takes effect only when **indicator** is set to **true**.|
+| indicatordisabled<sup>5+</sup> | boolean | false  | No   | Whether gesture operations are disabled on the indicator. If this attribute is set to **true**, the indicator does not respond to clicking or dragging operations.  |
+| loop                           | boolean | true   | No   | Whether to enable looping.                               |
+| duration                       | number  | -      | No   | Duration of the autoplay for child component switching.                             |
+| vertical                       | boolean | false  | No   | Whether the swipe gesture is performed vertically. A vertical swipe uses the vertical indicator.                  |
+| cachedsize<sup>7+</sup>        | number  | -1     | No   | Minimum number of cached items during delayed loading of the **\<swiper>** component. The value **-1** indicates that all content is cached.         |
+| scrolleffect<sup>7+</sup>      | string  | spring | No   | Scroll effect. The options are as follows:<br>- **spring**: Similar to the physical dynamic effect of a spring. When the scrollbar reaches the edge, it can continue to scroll for a distance based on the initial speed or a touch event. It rebounds after being released.<br>- **fade**: Similar to the physical dynamic effect of fade. When the scrollbar reaches the edge, a wave shape fades. The fade changes according to the speed and scrolling distance.<br>- **none**: No effect when the scrollbar reaches the edge.<br>This attribute is valid only when **loop** is set to **false**.|
 
-| Name                | Type    | Default Value | Mandatory | Description                                                  |
-| ------------------- | ------- | ------------- | --------- | ------------------------------------------------------------ |
-| index               | number  | 0             | No        | Index of a child component currently displayed in the container. |
-| autoplay            | boolean | false         | No        | Whether to enable autoplay for child component switching. If this attribute is **true**, the indicator does not take effect<sup>5+</sup>. |
-| interval            | number  | 3000          | No        | Autoplay interval, in milliseconds, when autoplay is enabled. |
-| indicator           | boolean | true          | No        | Whether to enable the indicator. The default value is **true**. |
-| digital<sup>5+</sup>           | boolean | false         | No        | Whether to enable the digital indicator. The default value is **false**.<br>NOTE:<br>The digital indicator takes effect only when **indicator** is set to **true**. |
-| indicatordisabled<sup>5+</sup> | boolean | false         | No        | Whether gesture operations are disabled on the indicator. If this attribute is set to **true**, the indicator does not respond to clicking or dragging operations. |
-| loop                | boolean | true          | No        | Whether to enable looping.                                   |
-| duration            | number  | -             | No        | Duration of the autoplay for child component switching.      |
-| vertical            | boolean | false         | No        | Whether the swipe gesture is performed vertically. A vertical swipe uses the vertical indicator. |
-| cachedsize<sup>7+</sup>        | number  | -1            | No        | Minimum number of cached items during delayed loading of the **\<swiper>** component. The value **-1** indicates that all content is cached. |
-| scrolleffect<sup>7+</sup>      | string  | spring        | No        | Scroll effect. The options are as follows:   <br>- **spring**: Similar to the physical dynamic effect of a spring. After scrolling to the edge, you can continue to scroll for a distance based on the initial speed or by touching the knob of the scrollbar. After you release your hand, the knob is rebounded.  <br>- **fade**: Similar to the physical dynamic effect of fade. When you scroll to the edge, a wave shape fades. The fade changes according to the speed and scrolling distance.  <br>- **none**: No effect after the scroll bar is moved to the edge.NOTE:This attribute is valid only when **loop** is set to **false**. |
 
 ## Styles
 
-In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported.
+In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
 
+| Name                                | Type                                      | Default Value       | Mandatory  | Description                  |
+| ---------------------------------- | ---------------------------------------- | ---------- | ---- | -------------------- |
+| indicator-color                    | &lt;color&gt;                            | -          | No   | Fill color of the indicator.        |
+| indicator-selected-color           | &lt;color&gt;                            | \#ff007dff | No   | Color of the currently selected indicator.        |
+| indicator-size                     | &lt;length&gt;                           | 4px        | No   | Diameter of the indicator.        |
+| indicator-top\|left\|right\|bottom | &lt;length&gt; \| &lt;percentage&gt; | -          | No   | Relative position of the indicator in the swiper.|
+| next-margin<sup>7+</sup>           | &lt;length&gt; \| &lt;percentage&gt; | -          | No   | Next margin, used to reveal a small part of the next item.   |
+| previous-margin<sup>7+</sup>       | &lt;length&gt; \| &lt;percentage&gt; | -          | No   | Previous margin, used to reveal a small part of the previous item.   |
 
 
-| Name                               | Type                       | Default Value | Mandatory | Description                                                  |
-| ---------------------------------- | -------------------------- | ------------- | --------- | ------------------------------------------------------------ |
-| indicator-color                    | \<color>                   | -             | No        | Fill color of the navigation point indicator.                |
-| indicator-selected-color           | \<color>                   | #ff007dff     | No        | Color of the currently selected navigation point indicator.  |
-| indicator-size                     | \<length>                  | 4px           | No        | Diameter of the navigation point indicator.                  |
-| indicator-top\|left\|right\|bottom | \<length> \| \<percentage> | -             | No        | Relative position of the indicator in the swiper.            |
-| next-margin<sup>7+</sup>           | \<length> \| \<percentage> | -             | No        | Next margin, used to reveal a small part of the next item.   |
-| previous-margin<sup>7+</sup>       | \<length> \| \<percentage> | -             | No        | Previous margin, used to reveal a small part of the previous item. |
-
 ## Events
 
-In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported.
-
-
+In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
 
-| Name              | Parameter                | Description                                                  |
-| ----------------- | ------------------------ | ------------------------------------------------------------ |
-| change            | { index: currentIndex }  | Triggered when the index of the currently displayed component changes. |
-| rotation          | { value: rotationValue } | Triggered when the crown of the wearable rotates.            |
-| animationfinish<sup>7+</sup> | -                        | Triggered when the animation is finished.                    |
+| Name                          | Parameter                                     | Description                |
+| ---------------------------- | --------------------------------------- | ------------------ |
+| change                       | { index: currentIndex }  | Triggered when the index of the currently displayed component changes.|
+| rotation                     | { value: rotationValue } | Triggered when the crown of the wearable rotates. |
+| animationfinish<sup>7+</sup> | -                                       | Triggered when the animation is finished.       |
 
 ## Methods
 
-In addition to the methods in [Universal Methods](js-components-common-methods.md), the following events are supported.
+In addition to the [universal methods](../arkui-js/js-components-common-methods.md), the following methods are supported.
 
+| Name          | Parameter                                    | Description             |
+| ------------ | -------------------------------------- | --------------- |
+| swipeTo      | { index: number(specificLocation) } | Scrolls the child component to the position at the specified index.|
+| showNext     | -                                     | Shows the next child component.      |
+| showPrevious | -                                     | Shows the previous child component.      |
 
 
-| Name         | Parameter                             | Description                                                  |
-| ------------ | ------------------------------------- | ------------------------------------------------------------ |
-| swipeTo      | { index: number(specified position) } | Scrolls the child component to the position at the specified index. |
-| showNext     | None                                  | Shows the next child component.                              |
-| showPrevious | None                                  | Shows the previous child component.                          |
-
 ## Example
 
-```
+```html
 <!-- xxx.hml -->
 <div class="container">
   <swiper class="swiper" id="swiper" index="0" indicator="true" loop="true" digital="false" cachedsize="-1"
@@ -90,6 +91,9 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m
   <input class="button" type="button" value="showNext" onclick="showNext"></input>
   <input class="button" type="button" value="showPrevious" onclick="showPrevious"></input>
 </div>
+```
+
+```css
 /* xxx.css */
 .container {
   flex-direction: column;
@@ -134,6 +138,9 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m
 .text {
   font-size: 40px;
 }
+```
+
+```js
 // xxx.js
 export default {
   swipeTo() {
@@ -148,4 +155,4 @@ export default {
 }
 ```
 
-![img](figures/4-0.gif)
\ No newline at end of file
+![4-0](figures/4-0.gif)
diff --git a/en/application-dev/reference/arkui-js/js-components-media-video.md b/en/application-dev/reference/arkui-js/js-components-media-video.md
index 18c3fbef3b..0141e4818d 100644
--- a/en/application-dev/reference/arkui-js/js-components-media-video.md
+++ b/en/application-dev/reference/arkui-js/js-components-media-video.md
@@ -3,17 +3,7 @@
 
 >  **NOTE**
 >
-> - This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
->
-> - Set **configChanges** under **abilities** in the **config.json** file to **orientation**.
-> ```
-> "abilities": [
-> {
-> "configChanges": ["orientation"],
-> ...
-> }
-> ]
-> ```
+>  This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
 
 The **\<video>** component provides a video player.
 
@@ -27,26 +17,26 @@ Not supported
 
 In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
 
-| Name| Type| Default Value| Mandatory| Description|
-| -------- | -------- | -------- | -------- | -------- |
-| muted | boolean | false | No| Whether the video is muted.|
-| src | string | - | No| Path of the video content to play.|
-| autoplay | boolean | false | No| Whether the video is played automatically after being rendered.|
-| controls | boolean | true | No| Whether the control bar is displayed during video playback. If the value is set to **false**, the control bar is not displayed. The default value is **true**, indicating that the platform can either show or hide the control bar.|
+| Name      | Type     | Default Value  | Mandatory  | Description                                      |
+| -------- | ------- | ----- | ---- | ---------------------------------------- |
+| muted    | boolean | false | No   | Whether the video is muted.                               |
+| src      | string  | -     | No   | Path of the video content to play.                              |
+| autoplay | boolean | false | No   | Whether the video is played automatically after being rendered.                               |
+| controls | boolean | true  | No   | Whether the control bar is displayed during video playback. If the value is set to **false**, the control bar is not displayed. The default value is **true**, indicating that the platform can either show or hide the control bar.|
 
 
 ## Styles
 
 In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
 
-| Name| Type| Default Value| Mandatory| Description|
-| -------- | -------- | -------- | -------- | -------- |
-| object-fit | string | contain | No| Video scale type. If **poster** has been assigned a value, the setting of this style will affect the scaling type of the video poster. For details, see object-fit enums.|
+| Name        | Type    | Default Value    | Mandatory  | Description                                      |
+| ---------- | ------ | ------- | ---- | ---------------------------------------- |
+| object-fit | string | contain | No   | Video scale type. If **poster** has been assigned a value, the setting of this style will affect the scaling type of the video poster. For details, see object-fit enums.|
 
 **Table 1** object-fit enums
 
-| Type| Description|
-| -------- | -------- |
+| Type  | Description                       |
+| ---- | ------------------------- |
 | fill | The image is resized to fill the display area, and its aspect ratio is not retained.|
 
 
@@ -54,31 +44,31 @@ In addition to the [universal styles](../arkui-js/js-components-common-styles.md
 
 In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
 
-| Name| Parameter| Description|
-| -------- | -------- | -------- |
-| prepared | {&nbsp;duration:&nbsp;value&nbsp;}<sup>5+</sup> | Triggered when the video preparation is complete. The video duration (in seconds) is obtained from **duration**.|
-| start | - | Triggered when the video is played.|
-| pause | - | Triggered when the video playback is paused.|
-| finish | - | Triggered when the video playback is finished.|
-| error | - | Triggered when the video playback fails.|
-| seeking | {&nbsp;currenttime:&nbsp;value&nbsp;} | Triggered to report the time (in seconds) when the progress bar is being dragged.|
-| seeked | {&nbsp;currenttime:&nbsp;value&nbsp;} | Triggered to report the playback time (in seconds) when the user finishes dragging the progress bar.|
-| timeupdate | {&nbsp;currenttime:&nbsp;value&nbsp;} | Triggered once per 250 ms when the playback progress changes. The unit of the current playback time is second.|
+| Name        | Parameter                                      | Description                                   |
+| ---------- | ---------------------------------------- | ------------------------------------- |
+| prepared   | { duration: value }<sup>5+</sup> | Triggered when the video preparation is complete. The video duration (in seconds) is obtained from **duration**.|
+| start      | -                                        | Triggered when the video is played.                            |
+| pause      | -                                        | Triggered when the video playback is paused.                            |
+| finish     | -                                        | Triggered when the video playback is finished.                          |
+| error      | -                                        | Triggered when the video playback fails.                          |
+| seeking    | { currenttime: value }    | Triggered to report the time (in seconds) when the progress bar is being dragged.                 |
+| seeked     | { currenttime: value }    | Triggered to report the playback time (in seconds) when the user finishes dragging the progress bar.              |
+| timeupdate | { currenttime: value }    | Triggered once per 250 ms when the playback progress changes. The unit of the current playback time is second.      |
 
 
 ## Methods
 
 In addition to the [universal methods](../arkui-js/js-components-common-methods.md), the following methods are supported.
 
-| Name| Parameter| Description|
-| -------- | -------- | -------- |
-| start | - | Starts playing a video.|
-| pause | - | Pauses a video.|
-| setCurrentTime | {&nbsp;currenttime:&nbsp;value&nbsp;} | Sets the video playback position, in seconds.|
+| Name            | Parameter                                   | Description               |
+| -------------- | ------------------------------------- | ----------------- |
+| start          | -                                     | Starts playing a video.          |
+| pause          | -                                     | Pauses a video.        |
+| setCurrentTime | { currenttime: value } | Sets the video playback position, in seconds.|
 
-> **NOTE**
+>  **NOTE**
 >
-> The methods in the above table can be called after the **attached** callback is invoked.
+>  The methods in the above table can be called after the **attached** callback is invoked.
 
 ## Example
 
@@ -87,7 +77,7 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods.
 <div class="container">
   <video id='videoId' src='/common/myDeram.mp4' muted='false' autoplay='false'
          controls='true' onprepared='preparedCallback' onstart='startCallback'
-         onpaues='pauesCallback' onfinish='finishCallback' onerror='errorCallback'
+         onpause='pauseCallback' onfinish='finishCallback' onerror='errorCallback'
          onseeking='seekingCallback' onseeked='seekedCallback' 
          ontimeupdate='timeupdateCallback'
          style="object-fit:fill; width:80%; height:400px;"
-- 
GitLab