From 90897bc4eafc4dfd1575a0e0e3bf4a19f37258f4 Mon Sep 17 00:00:00 2001
From: "ester.zhou" <ester.zhou@huawei.com>
Date: Thu, 22 Sep 2022 19:33:07 +0800
Subject: [PATCH] Update docs (9656)

Signed-off-by: ester.zhou <ester.zhou@huawei.com>
---
 .../js-components-common-animation.md         |  28 +-
 .../js-components-container-stepper.md        | 188 ++++-------
 en/application-dev/ui/Readme-EN.md            |   8 +-
 ...-performance-improvement-recommendation.md | 304 ++++++++++++++++++
 en/application-dev/ui/ts-types.md             | 224 -------------
 .../ui/ui-js-components-stepper.md            |  24 +-
 6 files changed, 397 insertions(+), 379 deletions(-)
 create mode 100644 en/application-dev/ui/ts-performance-improvement-recommendation.md
 delete mode 100644 en/application-dev/ui/ts-types.md

diff --git a/en/application-dev/reference/arkui-js/js-components-common-animation.md b/en/application-dev/reference/arkui-js/js-components-common-animation.md
index 24676a7323..72969d608a 100644
--- a/en/application-dev/reference/arkui-js/js-components-common-animation.md
+++ b/en/application-dev/reference/arkui-js/js-components-common-animation.md
@@ -6,20 +6,20 @@ Components support dynamic rotation, translation, and scaling effects. These eff
 >
 > The initial APIs of this component  are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version.
 
-| Name                      | Type                                                         | Default Value                         | Description                                                  |
-| ------------------------- | ------------------------------------------------------------ | ------------------------------------- | ------------------------------------------------------------ |
-| transform-origin          | string<sup>6+</sup> \| \<percentage> \| \<length> string<sup>6+</sup> \| \<percentage> \| \<length> | center center                         | Origin position of the transformed element. The unit can be px or a percentage (relative to the animation target component). If only one value is specified, the other one is **50%**. The available values for the first string are **left**, **center**, and **right**. The available values for the second string are **top**, **center**, and **bottom**.<br>Example:<br/>transform-origin: 200px 30%<br/>transform-origin: 100px topt<br/>ransform-origin: center center |
-| transform                 | string                                                       | -                                     | Translation, rotation, and scaling attributes.<br/>For details, see **transform**. |
-| animation<sup>6+</sup>               | string                                                       | 0s ease 0s 1 normal none running none | Animation attributes in the format of **duration \| timing-function \| delay \| iteration-count \| direction \| fill-mode \| play-state \| name**. The order of the parameters is not specified, but the **duration** and **delay** parameters are parsed based on where they are placed. |
-| animation-name            | string                                                       | -                                     | @keyframes rule. For details, see **@keyframes**. |
-| animation-delay           | \<time>                                                      | 0                                     | Delay for playing the animation, in ms or s, for example, **1000 ms** or **1s**. The default unit is ms. |
-| animation-duration        | \<time>                                                      | 0                                     | Animation duration, in ms or s, for example, **1000 ms** or **1s**. The default unit is ms.<br/>NOTE:<br/>**animation-duration** must be specified. Otherwise, the duration is **0**, which means the animation will not be played. |
-| animation-iteration-count | number \| infinite                                           | 1                                     | Number of times that an animation is played. The animation is played once by default. You can set the value to **infinite** to play the animation infinitely. |
-| animation-timing-function | string                                                       | ease                                  | Speed curve of an animation, which makes the animation more fluent.Available values are as follows:  <br>- **linear**: The animation speed keeps unchanged.   <br>- **ease**: The animation starts at a low speed and then accelerates. It slows down before the animation ends. **cubic-bezier(0.25, 0.1, 0.25, 1.0)**  <br>- **ease-in**: The animation starts at a low speed. **cubic-bezier(0.42, 0.0, 1.0, 1.0)**  <br>- **ease-out**: The animation ends at a low speed. **cubic-bezier(0.0, 0.0, 0.58, 1.0)**  <br>- **ease-in-out**: The animation starts and ends at a low speed. **cubic-bezier(0.42, 0.0, 0.58, 1.0)****<br>- **friction**: Damping curve, **cubic-bezier(0.2, 0.0, 0.2, 1.0)****<br>- **extreme-deceleration**: Extreme deceleration curve, **cubic-bezier(0.0, 0.0, 0.0, 1.0) curve****<br>- **sharp**: Sharp curve, **cubic-bezier(0.33, 0.0, 0.67, 1.0)****<br>- **rhythm**: Rhythm curve, **cubic-bezier(0.7, 0.0, 0.2, 1.0)****<br>- **smooth**: Smooth curve, **cubic-bezier(0.4, 0.0, 0.4, 1.0)****<br>- **cubic-bezier**: You can customize an animation speed curve in the **cubic-bezier()** function. The x and y values of each input parameter must be between 0 and 1.<br>- steps: step curve <sup>6+</sup>. Syntax: steps(number[, end\|start]); The number parameter is mandatory. The value must be a positive integer. The second parameter is optional. It indicates that the start point or end point of each interval changes step by step. The value can be end or start. The default value is end. |
-| animation-direction<sup>6+</sup>     | string                                                       | normal                                | Mode of playing the animation.   <br>- **normal**: Plays the animation in forward loop mode.  <br>- **reverse**: Plays the animation in reverse loop mode.  <br>- **alternate**: Plays the animation in alternating loop mode. When the animation is played for an odd number of times, the playback is in forward direction. When the animation is played for an even number of times, the playback is in backward direction.  <br>- **alternate-reverse**: Plays the animation in reverse-alternating loop mode. When the animation is played for an odd number of times, the playback is in backward direction. When the animation is played for an even number of times, the playback is in forward direction. |
-| animation-fill-mode       | string                                                       | none                                  | Start and end styles of the animation   <br>- **none**: No style is applied to the target before or after the animation is executed.  <br>- **forwards**: The target keeps the state at the end of the animation (defined in the last key frame) after the animation is executed.  <br>- **backwards**<sup>6+</sup>: The animation uses the value defined in the first key frame during the **animation-delay**. When **animation-direction** is set to **normal** or **alternate**, the value in the **from** key frame is used. When **animation-direction** is set to **reverse** or **alternate-reverse**, the value in the **to** key frame is used..  <br>- **both**<sup>6+</sup>: The animation follows the **forwards** and **backwards** rules. |
-| animation-play-state<sup>6+</sup>    | string                                                       | running                               | Current state of the animation.  <br>- **paused**: paused  <br>- **running**: playing |
-| transition<sup>6+</sup>              | string                                                       | all 0 ease 0                          | Transition effect when the component status is switched. The following four attributes can be set through the **transition** attribute.<br>- **transition-property**: name of the CSS property for setting the transition effect. Currently, the width, height, and background color are supported.  <br>- **transition-duration**: duration required for completing the transition effect, in seconds.  <br>- **transition-timing-function**: time curve of the transition effect. The curve provided by the style animation is supported.  <br>- **transition-delay**: delay for starting the transition effect, in seconds. |
+| Name                      | Type                                                         | Description                                                  |
+| ------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
+| transform-origin          | string<sup>6+</sup> \| \<percentage> \| \<length> string<sup>6+</sup> \| \<percentage> \| \<length> | Origin position of the transformed element. The unit can be px or a percentage (relative to the animation target component). If only one value is specified, the other one is **50%**. The available values for the first string are **left**, **center**, and **right**. The available values for the second string are **top**, **center**, and **bottom**.<br>Example:<br/>transform-origin: 200px 30%<br/>transform-origin: 100px topt<br/>ransform-origin: center center<br/>Default value: **center center** |
+| transform                 | string                                                       | Translation, rotation, and scaling attributes.<br/>For details, see **transform**. |
+| animation<sup>6+</sup>               | string                                                       | Animation attributes in the format of **duration \| timing-function \| delay \| iteration-count \| direction \| fill-mode \| play-state \| name**. The order of the parameters is not specified, but the **duration** and **delay** parameters are parsed based on where they are placed.<br/>Default value: 0s&nbsp;ease&nbsp;0s&nbsp;1&nbsp;normal&nbsp;none&nbsp;running&nbsp;none |
+| animation-name            | string                                                       | @keyframes rule. For details, see **@keyframes**. |
+| animation-delay           | \<time>                                                      | Delay for playing the animation, in ms or s, for example, **1000 ms** or **1s**. The default unit is ms.<br/>Default value: 0 |
+| animation-duration        | \<time>                                                      | Animation duration, in ms or s, for example, **1000 ms** or **1s**. The default unit is ms.<br/>**NOTE**<br/>**animation-duration** must be specified. Otherwise, the duration is **0**, which means the animation will not be played.<br/>Default value: **0** |
+| animation-iteration-count | number \| infinite                                           | Number of times that an animation is played. The animation is played once by default. You can set the value to **infinite** to play the animation infinitely.<br/>Default value: **1** |
+| animation-timing-function | string                                                       | Speed curve of an animation, which makes the animation more fluent.Available values are as follows:  <br>- **linear**: The animation speed keeps unchanged. <br>- **ease**: The animation starts slowly, accelerates, and then slows down towards the end. The cubic-bezier curve (0.25, 0.1, 0.25, 1.0) is used.<br>- **ease-in**: The animation starts at a low speed. The cubic-bezier curve (0.42, 0.0, 1.0, 1.0) is used.<br>- **ease-out**: The animation ends at a low speed. The cubic-bezier curve (0.0, 0.0, 0.58, 1.0) is used.<br>- **ease-in-out**: The animation starts and ends at a low speed. The cubic-bezier curve (0.42, 0.0, 0.58, 1.0) is used.<br>- **friction**: The animation uses the friction cubic-bezier curve (0.2, 0.0, 0.2, 1.0).<br>- **extreme-deceleration**: The animation uses the extreme deceleration cubic-bezier curve (0.0, 0.0, 0.0, 1.0).<br>- **sharp**: The animation uses the sharp cubic-bezier curve (0.33, 0.0, 0.67, 1.0).<br>- **rhythm**: The animation uses the rhythm cubic-bezier curve (0.7, 0.0, 0.2, 1.0).<br>- **smooth**: The animation uses the smooth cubic-bezier curve (0.4, 0.0, 0.4, 1.0).<br>- **cubic-bezier**: You can customize an animation speed curve in the **cubic-bezier()** function. The x and y values of each input parameter must be between 0 and 1.<br>- **steps**: The animation uses the step curve<sup>6+</sup>. The syntax is as follows: steps(number[, end\|start]), where the first parameter **number** is mandatory and must be a positive integer; the second parameter is optional and indicates that the start point or end point (default) of each interval changes step by step.<br/>Default value: **ease** |
+| animation-direction<sup>6+</sup>     | string                                                       | Mode of playing the animation.   <br>- **normal**: Plays the animation in forward loop mode.  <br>- **reverse**: Plays the animation in reverse loop mode.  <br>- **alternate**: Plays the animation in alternating loop mode. When the animation is played for an odd number of times, the playback is in forward direction. When the animation is played for an even number of times, the playback is in backward direction.  <br>- **alternate-reverse**: Plays the animation in reverse-alternating loop mode. When the animation is played for an odd number of times, the playback is in backward direction. When the animation is played for an even number of times, the playback is in forward direction.<br/>Default value: **normal** |
+| animation-fill-mode       | string                                                       | Start and end styles of the animation   <br>- **none**: No style is applied to the target before or after the animation is executed.  <br>- **forwards**: The target keeps the state at the end of the animation (defined in the last key frame) after the animation is executed.  <br>- **backwards**<sup>6+</sup>: The animation uses the value defined in the first key frame during the **animation-delay**. When **animation-direction** is set to **normal** or **alternate**, the value in the **from** key frame is used. When **animation-direction** is set to **reverse** or **alternate-reverse**, the value in the **to** key frame is used..  <br>- **both**<sup>6+</sup>: The animation follows the **forwards** and **backwards** rules.<br/>Default value: none |
+| animation-play-state<sup>6+</sup>    | string                                                       | Current state of the animation.  <br>- **paused**: paused  <br>- **running**: playing<br/>Default value: **running** |
+| transition<sup>6+</sup>              | string                                                       | Transition effect when the component status is switched. The following four attributes can be set through the **transition** attribute.<br>- **transition-property**: name of the CSS property for setting the transition effect. Currently, the width, height, and background color are supported.  <br>- **transition-duration**: duration required for completing the transition effect, in seconds.  <br>- **transition-timing-function**: time curve of the transition effect. The curve provided by the style animation is supported.  <br>- **transition-delay**: delay for starting the transition effect, in seconds.<br/>Default value: **all&nbsp;0&nbsp;ease&nbsp;0** |
 
 **Table 1** transform
 
diff --git a/en/application-dev/reference/arkui-js/js-components-container-stepper.md b/en/application-dev/reference/arkui-js/js-components-container-stepper.md
index 1941dfbf7e..fd10e69fdc 100644
--- a/en/application-dev/reference/arkui-js/js-components-container-stepper.md
+++ b/en/application-dev/reference/arkui-js/js-components-container-stepper.md
@@ -1,130 +1,69 @@
-# stepper<a name="EN-US_TOPIC_0000001173324583"></a>
+# stepper
 
-The  **<stepper\>**  component provides a step navigator. When multiple steps are required to complete a task, you can use the  **<stepper\>**  component to navigate your users through the whole process.
+The **\<stepper>** component provides a step navigator. When multiple steps are required to complete a task, you can use the **\<stepper>** component to navigate your users through the whole process.
 
-## Required Permissions<a name="section11257113618419"></a>
+>  **NOTE**
+>
+>  This component is supported since API version 5. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Required Permissions
 
 None
 
-## Child Components<a name="section9288143101012"></a>
-
-Only the  **<stepper-item\>**  component is supported.
-
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->Steps in the  **<stepper\>**  are sorted according to the sequence of its  **<stepper-item\>**  child components.
-
-## Attributes<a name="section191521418142311"></a>
-
-In addition to the attributes in  [Universal Attributes](js-components-common-attributes.md), the following attributes are supported.
-
-<a name="table20633101642315"></a>
-<table><thead align="left"><tr id="row663331618238"><th class="cellrowborder" valign="top" width="25.040000000000003%" id="mcps1.1.5.1.1"><p id="a45273e2103004ff3bdd3375013e96a2a"><a name="a45273e2103004ff3bdd3375013e96a2a"></a><a name="a45273e2103004ff3bdd3375013e96a2a"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="25.11%" id="mcps1.1.5.1.2"><p id="ad5b10d4a60e44bb4a8bbb3b4416d7b27"><a name="ad5b10d4a60e44bb4a8bbb3b4416d7b27"></a><a name="ad5b10d4a60e44bb4a8bbb3b4416d7b27"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="11.18%" id="mcps1.1.5.1.3"><p id="ab2ae3d9f60d6475ab95ba095851a9d07"><a name="ab2ae3d9f60d6475ab95ba095851a9d07"></a><a name="ab2ae3d9f60d6475ab95ba095851a9d07"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="38.67%" id="mcps1.1.5.1.4"><p id="af5c3b773ed0a42e589819a6c8d257ca1"><a name="af5c3b773ed0a42e589819a6c8d257ca1"></a><a name="af5c3b773ed0a42e589819a6c8d257ca1"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row9173122818343"><td class="cellrowborder" valign="top" width="25.040000000000003%" headers="mcps1.1.5.1.1 "><p id="p1517410284349"><a name="p1517410284349"></a><a name="p1517410284349"></a>index</p>
-</td>
-<td class="cellrowborder" valign="top" width="25.11%" headers="mcps1.1.5.1.2 "><p id="p1174172823415"><a name="p1174172823415"></a><a name="p1174172823415"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="11.18%" headers="mcps1.1.5.1.3 "><p id="p19174112863417"><a name="p19174112863417"></a><a name="p19174112863417"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="38.67%" headers="mcps1.1.5.1.4 "><p id="p7174328203414"><a name="p7174328203414"></a><a name="p7174328203414"></a>Index of the <strong id="b1432325813342"><a name="b1432325813342"></a><a name="b1432325813342"></a>&lt;stepper-item&gt;</strong> child component that is currently displayed.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Styles<a name="section72591594253"></a>
-
-Styles in  [Universal Styles](js-components-common-styles.md)  are supported.
-
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->By default, the  **<stepper\>**  component fills entire space of its container. To optimize user experience, it is recommended that the container should be as large as the application window in size, or should be the root component.
-
-## Events<a name="section69611614182911"></a>
-
-In addition to the events in  [Universal Events](js-components-common-events.md), the following events are supported.
-
-<a name="table836435619510"></a>
-<table><thead align="left"><tr id="row153658563517"><th class="cellrowborder" valign="top" width="10.481048104810482%" id="mcps1.1.4.1.1"><p id="a0ff86a4560fa46bfbeb711d109869422"><a name="a0ff86a4560fa46bfbeb711d109869422"></a><a name="a0ff86a4560fa46bfbeb711d109869422"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="41.91419141914191%" id="mcps1.1.4.1.2"><p id="a4c85eb8ca18b4169a25c4a9263fa63ed"><a name="a4c85eb8ca18b4169a25c4a9263fa63ed"></a><a name="a4c85eb8ca18b4169a25c4a9263fa63ed"></a>Parameter</p>
-</th>
-<th class="cellrowborder" valign="top" width="47.6047604760476%" id="mcps1.1.4.1.3"><p id="ab30b2353efa245fbad4d2aaa2ee33def"><a name="ab30b2353efa245fbad4d2aaa2ee33def"></a><a name="ab30b2353efa245fbad4d2aaa2ee33def"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row990553521718"><td class="cellrowborder" valign="top" width="10.481048104810482%" headers="mcps1.1.4.1.1 "><p id="p1390619353170"><a name="p1390619353170"></a><a name="p1390619353170"></a>finish</p>
-</td>
-<td class="cellrowborder" valign="top" width="41.91419141914191%" headers="mcps1.1.4.1.2 "><p id="p7906113541716"><a name="p7906113541716"></a><a name="p7906113541716"></a>None</p>
-</td>
-<td class="cellrowborder" valign="top" width="47.6047604760476%" headers="mcps1.1.4.1.3 "><p id="p7906113531711"><a name="p7906113531711"></a><a name="p7906113531711"></a>Triggered when the last step on the navigator is complete.</p>
-</td>
-</tr>
-<tr id="row24211338161718"><td class="cellrowborder" valign="top" width="10.481048104810482%" headers="mcps1.1.4.1.1 "><p id="p2421113881715"><a name="p2421113881715"></a><a name="p2421113881715"></a>skip</p>
-</td>
-<td class="cellrowborder" valign="top" width="41.91419141914191%" headers="mcps1.1.4.1.2 "><p id="p16421133841719"><a name="p16421133841719"></a><a name="p16421133841719"></a>None</p>
-</td>
-<td class="cellrowborder" valign="top" width="47.6047604760476%" headers="mcps1.1.4.1.3 "><p id="p1342113381171"><a name="p1342113381171"></a><a name="p1342113381171"></a>Triggered when users click the skip button, which works only if you have called <strong id="b494641310465"><a name="b494641310465"></a><a name="b494641310465"></a>setNextButtonStatus</strong> method to allow users to skip all steps.</p>
-</td>
-</tr>
-<tr id="row153591438186"><td class="cellrowborder" valign="top" width="10.481048104810482%" headers="mcps1.1.4.1.1 "><p id="p163591032182"><a name="p163591032182"></a><a name="p163591032182"></a>change</p>
-</td>
-<td class="cellrowborder" valign="top" width="41.91419141914191%" headers="mcps1.1.4.1.2 "><p id="p1535910381819"><a name="p1535910381819"></a><a name="p1535910381819"></a>{ prevIndex: prevIndex, index: index}</p>
-</td>
-<td class="cellrowborder" valign="top" width="47.6047604760476%" headers="mcps1.1.4.1.3 "><p id="p113602034189"><a name="p113602034189"></a><a name="p113602034189"></a>Triggered when users click the left or right (text) button of the step navigator to switch between steps. <strong id="b108361233105012"><a name="b108361233105012"></a><a name="b108361233105012"></a>prevIndex</strong> indicates the index of the previous step, and <strong id="b1014617216510"><a name="b1014617216510"></a><a name="b1014617216510"></a>index</strong> indicates that of the current step.</p>
-</td>
-</tr>
-<tr id="row6686131145112"><td class="cellrowborder" valign="top" width="10.481048104810482%" headers="mcps1.1.4.1.1 "><p id="p126879113514"><a name="p126879113514"></a><a name="p126879113514"></a>next</p>
-</td>
-<td class="cellrowborder" valign="top" width="41.91419141914191%" headers="mcps1.1.4.1.2 "><p id="p06871911115113"><a name="p06871911115113"></a><a name="p06871911115113"></a>{ index: index, pendingIndex: pendingIndex }</p>
-</td>
-<td class="cellrowborder" valign="top" width="47.6047604760476%" headers="mcps1.1.4.1.3 "><p id="p18140235202411"><a name="p18140235202411"></a><a name="p18140235202411"></a>Triggered when users click the next (text) button. <strong id="b155446175519"><a name="b155446175519"></a><a name="b155446175519"></a>index</strong> indicates the index of the current step, and <strong id="b16471726587"><a name="b16471726587"></a><a name="b16471726587"></a>pendingIndex</strong> indicates that of the step to go. The return value is in <strong id="b20759101845911"><a name="b20759101845911"></a><a name="b20759101845911"></a>{pendingIndex:</strong><em id="i13961625125919"><a name="i13961625125919"></a><a name="i13961625125919"></a> pendingIndex</em><strong id="b1882982055918"><a name="b1882982055918"></a><a name="b1882982055918"></a>}</strong> format. You can use <strong id="b79512405598"><a name="b79512405598"></a><a name="b79512405598"></a>pendingIndex</strong> to specify a <strong id="b1235062917016"><a name="b1235062917016"></a><a name="b1235062917016"></a>&lt;stepper-item&gt;</strong> child component as the next step to go.</p>
-</td>
-</tr>
-<tr id="row914118186514"><td class="cellrowborder" valign="top" width="10.481048104810482%" headers="mcps1.1.4.1.1 "><p id="p1414151817510"><a name="p1414151817510"></a><a name="p1414151817510"></a>back</p>
-</td>
-<td class="cellrowborder" valign="top" width="41.91419141914191%" headers="mcps1.1.4.1.2 "><p id="p16910122113429"><a name="p16910122113429"></a><a name="p16910122113429"></a>{ index: index, pendingIndex: pendingIndex }</p>
-</td>
-<td class="cellrowborder" valign="top" width="47.6047604760476%" headers="mcps1.1.4.1.3 "><p id="p714261895119"><a name="p714261895119"></a><a name="p714261895119"></a>Triggered when users click the previous (text) button. <strong id="b1620921210312"><a name="b1620921210312"></a><a name="b1620921210312"></a>index</strong> indicates the index of the current step, and <strong id="b1621511211318"><a name="b1621511211318"></a><a name="b1621511211318"></a>pendingIndex</strong> indicates that of the step to go. The return value is in Object:{ <strong id="b102171121532"><a name="b102171121532"></a><a name="b102171121532"></a>{pendingIndex:</strong><em id="i42187121636"><a name="i42187121636"></a><a name="i42187121636"></a> pendingIndex</em><strong id="b1622051211313"><a name="b1622051211313"></a><a name="b1622051211313"></a>}</strong> format. You can use <strong id="b822118128316"><a name="b822118128316"></a><a name="b822118128316"></a>pendingIndex</strong> to specify a <strong id="b192236121235"><a name="b192236121235"></a><a name="b192236121235"></a>&lt;stepper-item&gt;</strong> child component as the previous step.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Methods<a name="section1954212182148"></a>
-
-In addition to the methods in  [Universal Methods](js-components-common-methods.md), the following events are supported.
-
-<a name="table12793153991411"></a>
-<table><thead align="left"><tr id="row15793239141412"><th class="cellrowborder" valign="top" width="19.561956195619562%" id="mcps1.1.4.1.1"><p id="p9794143915141"><a name="p9794143915141"></a><a name="p9794143915141"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="24.102410241024103%" id="mcps1.1.4.1.2"><p id="p107942395147"><a name="p107942395147"></a><a name="p107942395147"></a>Parameter</p>
-</th>
-<th class="cellrowborder" valign="top" width="56.33563356335634%" id="mcps1.1.4.1.3"><p id="p11794133913143"><a name="p11794133913143"></a><a name="p11794133913143"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row157940399145"><td class="cellrowborder" valign="top" width="19.561956195619562%" headers="mcps1.1.4.1.1 "><p id="p1479453913144"><a name="p1479453913144"></a><a name="p1479453913144"></a>setNextButtonStatus</p>
-</td>
-<td class="cellrowborder" valign="top" width="24.102410241024103%" headers="mcps1.1.4.1.2 "><p id="p10794163914147"><a name="p10794163914147"></a><a name="p10794163914147"></a>{ status: string, label: label }</p>
-</td>
-<td class="cellrowborder" valign="top" width="56.33563356335634%" headers="mcps1.1.4.1.3 "><p id="p12794143917141"><a name="p12794143917141"></a><a name="p12794143917141"></a>Sets the status of the next (text) button in this step navigator. Available <strong id="b29094326514"><a name="b29094326514"></a><a name="b29094326514"></a>status</strong> values are as follows:</p>
-<a name="ol12242138121713"></a><a name="ol12242138121713"></a><ol id="ol12242138121713"><li><strong id="b1032161115214"><a name="b1032161115214"></a><a name="b1032161115214"></a>normal</strong>: The next button is displayed normally and can navigate users to the next step when it is clicked.</li><li><strong id="b1661325920517"><a name="b1661325920517"></a><a name="b1661325920517"></a>disabled</strong>: The next button is grayed out and unavailable.</li><li><strong id="b873175710711"><a name="b873175710711"></a><a name="b873175710711"></a>waiting</strong>: The next button is not displayed, and a process bar is displayed instead.</li><li><strong id="b1990819331594"><a name="b1990819331594"></a><a name="b1990819331594"></a>skip</strong>: The skip button is displayed to allow users to skip all remaining steps.</li></ol>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Example<a name="section15374183712313"></a>
 
-```
+## Child Components
+
+Only the **\<stepper-item>** component is supported.
+
+>  **NOTE**
+>
+>  Steps in the **\<stepper>** are sorted according to the sequence of its **\<stepper-item>** child components.
+
+
+## Attributes
+
+In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
+
+| Name   | Type    | Default Value | Description                            |
+| ----- | ------ | ---- | ------------------------------ |
+| index | number | -    | Index of the **<stepper-item>** child component that is currently displayed.|
+
+
+## Styles
+
+The [universal styles](../arkui-js/js-components-common-styles.md) are supported.
+
+>  **NOTE**
+>
+>  By default, the **\<stepper>** component fills entire space of its container. To optimize user experience, it is recommended that the container should be as large as the application window in size, or should be the root component.
+
+
+## Events
+
+In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
+
+| Name    | Parameter                                      | Description                                      |
+| ------ | ---------------------------------------- | ---------------------------------------- |
+| finish | -                                       | Triggered when the last step on the navigator is complete.                   |
+| skip   | -                                       | Triggered when users click the skip button, which works only if you have called **setNextButtonStatus** method to allow users to skip all steps.|
+| change | { prevIndex: prevIndex, index: index} | Triggered when users click the left or right (text) button of the step navigator to switch between steps. **prevIndex** indicates the index of the previous step, and **index** indicates that of the current step.|
+| next   | { index: index, pendingIndex: pendingIndex } | Triggered when users click the next (text) button. **index** indicates the index of the current step, and **pendingIndex** indicates that of the step to go. The return value is in **{pendingIndex:*** pendingIndex***}** format. You can use **pendingIndex** to specify a **<stepper-item>** child component as the next step to go.|
+| back   | { index: index, pendingIndex: pendingIndex } | Triggered when users click the previous (text) button. **index** indicates the index of the current step, and **pendingIndex** indicates that of the step to go. The return value is in Object:{ **{pendingIndex:*** pendingIndex***}** format. You can use **pendingIndex** to specify a **<stepper-item>** child component as the previous step.|
+
+
+## Methods
+
+In addition to the [universal methods](../arkui-js/js-components-common-methods.md), the following methods are supported.
+
+| Name                 | Parameter                                      | Description                                      |
+| ------------------- | ---------------------------------------- | ---------------------------------------- |
+| setNextButtonStatus | { status: string, label: label } | Sets the status of the next (text) button in this step navigator. Available **status** values are as follows:<br>- **normal**: The next button is displayed normally and can navigate users to the next step when it is clicked.<br>- **disabled**: The next button is grayed out and unavailable.<br>- **waiting**: The next button is not displayed, and a process bar is displayed instead.<br>- **skip**: The skip button is displayed to allow users to skip all remaining steps.|
+
+
+## Example
+
+```html
 <!-- xxx.hml -->
 <div class = "container">
   <stepper class="stepper" id="mystepper" index="0"  onnext="nextclick" onback="backclick">
@@ -150,7 +89,7 @@ In addition to the methods in  [Universal Methods](js-components-common-methods.
 </div>
 ```
 
-```
+```css
 /* xxx.css */
 .container {
   margin-top: 20px;
@@ -174,7 +113,7 @@ In addition to the methods in  [Universal Methods](js-components-common-methods.
 }
 ```
 
-```
+```js
 // xxx.js
 export default {
   data: {
@@ -215,5 +154,4 @@ export default {
 }
 ```
 
-![](figures/en-us_image_0000001127125114.gif)
-
+![en-us_image_0000001127125114](figures/en-us_image_0000001127125114.gif)
diff --git a/en/application-dev/ui/Readme-EN.md b/en/application-dev/ui/Readme-EN.md
index ffe375386f..20d4a865e9 100644
--- a/en/application-dev/ui/Readme-EN.md
+++ b/en/application-dev/ui/Readme-EN.md
@@ -12,7 +12,6 @@
             - [Resource File Categories](ui-ts-basic-resource-file-categories.md)
             - [Accessing Resources](ts-resource-access.md)
         - [Pixel Units](ts-pixel-units.md)
-        - [Types](ts-types.md)
     - Declarative Syntax
         - [Overview](ts-syntax-intro.md)
         - General UI Description Specifications
@@ -20,8 +19,8 @@
             - Declarative UI Description Specifications
                 - [Configuration Without Parameters](ts-parameterless-configuration.md)
                 - [Configuration with Mandatory Parameters](ts-configuration-with-mandatory-parameters.md)
-
-                - [Attribute Configuration](ts-attribution-configuration.md)
+    
+            - [Attribute Configuration](ts-attribution-configuration.md)
                 - [Event Configuration](ts-event-configuration.md)
                 - [Child Component Configuration](ts-child-component-configuration.md)
             - Componentization
@@ -73,7 +72,8 @@
         - [Building a Food Category List Layout](ui-ts-building-category-list-layout.md)
         - [Building a Food Category Grid Layout](ui-ts-building-category-grid-layout.md)
         - [Implementing Page Redirection and Data Transmission](ui-ts-page-redirection-data-transmission.md)
-
+    - [Recommendations for Improving Performance](ts-performance-improvement-recommendation.md)
+    
 - JavaScript-based Web-like Development Paradigm
     - [Overview](ui-js-overview.md)
     - Framework
diff --git a/en/application-dev/ui/ts-performance-improvement-recommendation.md b/en/application-dev/ui/ts-performance-improvement-recommendation.md
new file mode 100644
index 0000000000..ee06f5113f
--- /dev/null
+++ b/en/application-dev/ui/ts-performance-improvement-recommendation.md
@@ -0,0 +1,304 @@
+# Recommendations for Improving Performance
+
+Poor-performing code may work, but will take away from your application performance. This topic presents a line-up of recommendations that you can take to improve your implementation, thereby avoiding possible performance drop.
+
+## Lazy Loading
+
+When developing a long list, use of loop rendering, as in the code snippet below, can greatly slow down page loading and increase server load.
+
+```ts
+@Entry
+@Component
+struct MyComponent {
+  @State arr: number[] = Array.from(Array(100), (v,k) =>k);  // Construct an array of 0 to 99.
+  build() {
+    List() {
+      ForEach(this.arr, (item: number) => {
+        ListItem() {
+          Text(`item value: ${item}`)
+        }
+      }, (item: number) => item.toString())
+    }
+  }
+}
+```
+
+The preceding code snippet loads all of the 100 list elements at a time during page loading. This is generally not desirable. Instead, what we need is to load data from the data source and create corresponding components on demand. This can be achieved through lazy loading. The sample code is as follows:
+
+```ts
+class BasicDataSource implements IDataSource {
+  private listeners: DataChangeListener[] = []
+
+  public totalCount(): number {
+    return 0
+  }
+
+  public getData(index: number): any {
+    return undefined
+  }
+
+  registerDataChangeListener(listener: DataChangeListener): void {
+    if (this.listeners.indexOf(listener) < 0) {
+      console.info('add listener')
+      this.listeners.push(listener)
+    }
+  }
+
+  unregisterDataChangeListener(listener: DataChangeListener): void {
+    const pos = this.listeners.indexOf(listener);
+    if (pos >= 0) {
+      console.info('remove listener')
+      this.listeners.splice(pos, 1)
+    }
+  }
+
+  notifyDataReload(): void {
+    this.listeners.forEach(listener => {
+      listener.onDataReloaded()
+    })
+  }
+
+  notifyDataAdd(index: number): void {
+    this.listeners.forEach(listener => {
+      listener.onDataAdd(index)
+    })
+  }
+
+  notifyDataChange(index: number): void {
+    this.listeners.forEach(listener => {
+      listener.onDataChange(index)
+    })
+  }
+
+  notifyDataDelete(index: number): void {
+    this.listeners.forEach(listener => {
+      listener.onDataDelete(index)
+    })
+  }
+
+  notifyDataMove(from: number, to: number): void {
+    this.listeners.forEach(listener => {
+      listener.onDataMove(from, to)
+    })
+  }
+}
+
+class MyDataSource extends BasicDataSource {
+  private dataArray: string[] = ['item value: 0', 'item value: 1', 'item value: 2']
+
+  public totalCount(): number {
+    return this.dataArray.length
+  }
+
+  public getData(index: number): any {
+    return this.dataArray[index]
+  }
+
+  public addData(index: number, data: string): void {
+    this.dataArray.splice(index, 0, data)
+    this.notifyDataAdd(index)
+  }
+
+  public pushData(data: string): void {
+    this.dataArray.push(data)
+    this.notifyDataAdd(this.dataArray.length - 1)
+  }
+}
+
+@Entry
+@Component
+struct MyComponent {
+  private data: MyDataSource = new MyDataSource()
+
+  build() {
+    List() {
+      LazyForEach(this.data, (item: string) => {
+        ListItem() {
+          Row() {
+            Text(item).fontSize(20).margin({ left: 10 })
+          }
+        }
+        .onClick(() => {
+          this.data.pushData('item value: ' + this.data.totalCount())
+        })
+      }, item => item)
+    }
+  }
+}
+```
+
+The preceding code initializes only three list elements during page loading and loads a new list item each time a list element is clicked.
+
+## Prioritizing Conditional Rendering over Visibility Control
+
+Use of the visibility attribute to hide or show a component, as in the code snippet below, results in re-creation of the component, leading to performance drop.
+
+```ts
+@Entry
+@Component
+struct MyComponent {
+  @State isVisible: Visibility = Visibility.Visible;
+
+  build() {
+    Column() {
+      Button ("Show/Hide")
+        .onClick(() => {
+          if (this.isVisible == Visibility.Visible) {
+            this.isVisible = Visibility.None
+          } else {
+            this.isVisible = Visibility.Visible
+          }
+        })
+      Row().visibility(this.isVisible)
+        .width(300).height(300).backgroundColor(Color.Pink)
+    }.width('100%')
+  }
+}
+```
+
+To avoid the preceding issue, use the **if** conditional statement instead. The sample code is as follows:
+
+```ts
+@Entry
+@Component
+struct MyComponent {
+  @State isVisible: boolean = true;
+
+  build() {
+    Column() {
+      Button ("Show/Hide")
+        .onClick(() => {
+          this.isVisible = !this.isVisible
+        })
+      if (this.isVisible) {
+        Row()
+          .width(300).height(300).backgroundColor(Color.Pink)
+      }
+    }.width('100%')
+  }
+}
+```
+
+## Prioritizing Flex over Column/Row
+
+By default, the flex container needs to re-lay out flex items to comply with the **flexShrink** and **flexGrow** settings. This may result in drop in rendering performance.
+
+```ts
+@Entry
+@Component
+struct MyComponent {
+  build() {
+    Flex({ direction: FlexDirection.Column }) {
+      Flex().width(300).height(200).backgroundColor(Color.Pink)
+      Flex().width(300).height(200).backgroundColor(Color.Yellow)
+      Flex().width(300).height(200).backgroundColor(Color.Grey)
+    }
+  }
+}
+```
+
+To avoid the preceding issue, replace **Flex** with **Column** and **Row**, which can create the same page layout as **Flex** does.
+
+```ts
+@Entry
+@Component
+struct MyComponent {
+  build() {
+    Column() {
+      Row().width(300).height(200).backgroundColor(Color.Pink)
+      Row().width(300).height(200).backgroundColor(Color.Yellow)
+      Row().width(300).height(200).backgroundColor(Color.Grey)
+    }
+  }
+}
+```
+
+## Setting Width and Height for \<List> Components
+
+When a **\<List>** component is nested within a **\<Scroll>** component, all of its content will be loaded if its width and height is not specified, which may result in performance drop.
+
+```ts
+@Entry
+@Component
+struct MyComponent {
+  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+
+  build() {
+    Scroll() {
+      List() {
+        ForEach(this.arr, (item) => {
+          ListItem() {
+            Text(`item value: ${item}`).fontSize(30).margin({ left: 10 })
+          }.height(100)
+        }, (item) => item.toString())
+      }
+    }.backgroundColor(Color.Pink)
+  }
+}
+```
+
+Therefore, in the above scenario, you are advised to set the width and height for the **\<List>** component as follows:
+
+```ts
+@Entry
+@Component
+struct MyComponent {
+  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+
+  build() {
+    Scroll() {
+      List() {
+        ForEach(this.arr, (item) => {
+          ListItem() {
+            Text(`item value: ${item}`).fontSize(30).margin({ left: 10 })
+          }.height(100)
+        }, (item) => item.toString())
+      }.width('100%').height(500)
+    }.backgroundColor(Color.Pink)
+  }
+}
+```
+
+## Minimizing White Blocks During Swiping
+To minimize white blocks durign swiping, expand the UI loading range by increasing the value of **cachedCount** for the **\<List>** and **\<Grid>** components. **cachedCount** indicates the number of list or grid items preloaded outside of the screen.
+
+If an item needs to request an online image, set **cachedCount** as appropriate so that the the image is downloaded in advance before the item comes into view on the screen, thereby reducing the number of white blocks.
+
+The following is an example of using **cachedCount**:
+
+```ts
+@Entry
+@Component
+struct MyComponent {
+  private source: MyDataSource = new MyDataSource();
+  build() {
+    List() {
+      LazyForEach (this.source, item => {
+        ListItem() {
+          Text("Hello" + item)
+            .fontSize(100)
+            .onAppear(()=>{
+              console.log("appear:" + item)
+            })
+        }
+      })
+    }.cachedCount(3)  // Increase the value to enlarge the range of logs that appear.
+  }
+}
+class MyDataSource implements IDataSource {
+  data: number[] = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
+  public totalCount(): number {
+    return this.data.length
+  }
+  public getData(index: number): any {
+    return this.data[index]
+  }
+  registerDataChangeListener(listener: DataChangeListener): void {
+  }
+  unregisterDataChangeListener(listener: DataChangeListener): void {
+  }
+}
+```
+**Instructions**
+
+A greater **cachedCount** value may result in higher CPU and memory overhead of the UI. Adjust the value by taking into account both the comprehensive performance and user experience.
\ No newline at end of file
diff --git a/en/application-dev/ui/ts-types.md b/en/application-dev/ui/ts-types.md
deleted file mode 100644
index b0c79c0e26..0000000000
--- a/en/application-dev/ui/ts-types.md
+++ /dev/null
@@ -1,224 +0,0 @@
-# Types
-
-## Resource
-
-The **Resource** type is used to reference resources for setting component attribute values.
-
-If a **Resource** object is created using `$r` or `$rawfile`, modifying attribute values of the object is prohibited.
-
-- `$r('belonging.type.name')`
-
-  **belonging**: system or application resource. The value can be **'sys'** or **'app'**.
-
-  **type**: resource type, which can be **'color'**, **'float'**, **'string'**, or **'media'**.
-
-  **name**: resource name, which is determined during resource definition.
-
-- `$rawfile('filename')`
-
-  **filename**: name of the file in **resources/rawfile** of the project.
-
-  | Name                   | Type  | Readable| Writable| Description      |
-  | ----------------------- | ------ | ---- | ---- | ---------- |
-  | id                      | number | Yes  | No  | Resource ID.   |
-  | type                    | number | Yes  | No  | Resource type.   |
-  | params                  | any[]  | Yes  | No  | Optional resource parameters. |
-  | bundleName<sup>9+</sup> | string | Yes  | No  | Bundle name. |
-  | moduleName<sup>9+</sup> | string | Yes  | No  | Module name.|
-
-## Length
-
-The **Length** type is used to represent a size unit.
-
-| Type    | Description                                                        |
-| -------- | ------------------------------------------------------------ |
-| string   | String type. Explicitly specify the length unit, for example, **'10px'**, or the length in percentage, for example, **'100%'**.|
-| number   | Number type. The default unit is vp.                                                |
-| Resource | Size referenced from system or application resources.          |
-
-## ResourceStr<sup>8+</sup>
-
-The **ResourceStr** type is used to represent the types that can be used by input parameters of the string type.
-
-| Type    | Description                                                |
-| -------- | --------------------------------------------------- |
-| string   | String type.                                        |
-| Resource | String referenced from system or application resources.|
-
-## Padding
-
-The **Padding** type is used to describe the padding areas in different directions of a component.
-
-| Name    | Type    | Mandatory| Description                   |
-| ------- | ------   | ---- |------------------------ |
-| top     | Length   |  No | Height of the padding area on the top of the component.  |
-| right   | Length   |  No | Width of the padding area on the right of the component.|
-| bottom  | Length   |  No | Height of the padding area at the bottom of the component.  |
-| left    | Length   |  No | Width of the padding area on the left of the component.|
-
-## Margin
-
-The **Margin** type is used to describe the margin areas in different directions of a component.
-
-| Name    | Type    | Mandatory| Description                   |
-| ------- | ------   | ---- |------------------------ |
-| top     | Length   |  No | Height of the margin area above the component.  |
-| right   | Length   |  No | Width of the margin area on the right of the component.|
-| bottom  | Length   |  No | Height of the margin area below the component.  |
-| left    | Length   |  No | Width of the margin area on the left of the component.|
-
-## EdgeWidths<sup>9+</sup>
-
-The **EdgeWidths** type is used to describe the edge widths in different directions of a component.
-
-| Name    | Type    | Mandatory| Description                |
-| ------- | ------   | ---- |--------------------- |
-| top     | Length   |  No | Width of the top edge of the component.     |
-| right   | Length   |  No | Width of the right edge of the component.     |
-| bottom  | Length   |  No | Width of the bottom edge of the component.     |
-| left    | Length   |  No | Width of the left edge of the component.     |
-
-## BorderRadiuses<sup>9+</sup>
-
-The **BorderRadiuses** type is used to describe the radius of the rounded corners of a component.
-
-| Name       | Type    | Mandatory| Description                |
-| ----------- | ------  | ---- |--------------------- |
-| topLeft     | Length   |  No | Radius of the top left rounded corner of the component.     |
-| topRight    | Length   |  No | Radius of the top right rounded corner of the component.     |
-| bottomLeft  | Length   |  No | Radius of the bottom left rounded corner of the component.     |
-| bottomRight | Length   |  No | Radius of the bottom right rounded corner of the component.     |
-
-## EdgeColors<sup>9+</sup>
-
-The **EdgeColors** type is used to describe the edge colors of a component.
-
-| Name    | Type           | Mandatory| Description                |
-| ------- | --------------- | ---- |--------------------- |
-| top     | ResourceColor   |  No | Color of the top edge of the component.     |
-| right   | ResourceColor   |  No | Color of the right edge of the component.     |
-| bottom  | ResourceColor   |  No | Color of the bottom edge of the component.     |
-| left    | ResourceColor   |  No | Color of the left edge of the component.     |
-
-## EdgeStyles<sup>9+</sup>
-
-The **EdgeStyles** type is used to describe the edge styles of a component.
-
-| Name    | Type         | Mandatory| Description                |
-| ------- | ------------- | ---- |--------------------- |
-| top     | BorderStyle   |  No | Style of the top edge of the component.     |
-| right   | BorderStyle   |  No | Style of the right edge of the component.     |
-| bottom  | BorderStyle   |  No | Style of the bottom edge of the component.     |
-| left    | BorderStyle   |  No | Style of the left edge of the component.     |
-
-
-## Offset
-
-The **Offset** type is used to describe the offset coordinates of a component in the layout.
-
-| Name    | Type    | Mandatory| Description                |
-| -------- | ------  | ---- |--------------------- |
-| dx       | Length   |  Yes | Horizontal offset.     |
-| dy       | Length   |  Yes | Vertical offset.     |
-
-## ResourceColor<sup>8+</sup>
-
-The **ResourceColor** type is used to describe the color types of resources.
-
-| Type    | Description                   |
-| -------- | ----------------------- |
-| [Color](../reference/arkui-ts/ts-appendix-enums.md#color)    | Color enum.            |
-| number   | Color in the hexadecimal notation.           |
-| string   | Color in the RGB or RGBA notion.    |
-| Resource | Color referenced from system or application resources.|
-
-## LengthConstrain
-
-The **LengthConstrain** type is used to limit the maximum and minimum lengths of a component.
-
-| Name     | Type    | Mandatory| Description           |
-| --------- | ------  | ---- |---------------- |
-| minLength | Length   |  Yes | Minimum length of the component.  |
-| maxLength | Length   |  Yes | Maximum length of the component.  |
-
-
-## Font
-
-The **Font** type is used to set the text style.
-
-| Name  | Type                          | Mandatory| Description                                                        |
-| ------ | ------------------------------ | ---- | ------------------------------------------------------------ |
-| size   | number                         | No  | Font size. If the value is of the number type, the unit fp is used.            |
-| weight | number                         | No  | Font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is **400**. A larger value indicates a larger font weight.|
-| family | [FontWeight](../reference/arkui-ts/ts-appendix-enums.md#fontweight) \| number \| string | No  | Font family of the text. Use commas (,) to separate multiple fonts. The priority of the fonts is the sequence in which they are placed. An example value is **'Arial, sans-serif'**.|
-| style  | string \| Resource             | No  | Font style.                                        |
-
-## Area<sup>8+</sup>
-
-The **Area** type is used to describe the area information of the target element.
-
-| Name          | Type     | Description                                             |
-| -------------- | -------- | ------------------------------------------------- |
-| width          | Length   | Width of the target element. The value is of the number type when being used as the return value and the unit is vp. |
-| height         | Length   | Height of the target element. The value is of the number type when being used as the return value and the unit is vp. |
-| position       | Position | Position of the upper left corner of the target element relative to that of the parent element.               |
-| globalPosition | Position | Position of the upper left corner of the target element relative to that of the page.                 |
-
-
-## Position<sup>8+</sup>
-
-The **Position** type is used to represent coordinates of a point.
-
-| Name  | Type   | Mandatory| Description                                       |
-| ----- | ------- | ---- | ------------------------------------------- |
-| x     | Length  | No  | X coordinate. The value is of the number type when being used as the return value and the unit is vp.  |
-| y     | Length  | No  | Y coordinate. The value is of the number type when used as the return value and the unit is vp.  |
-
-## ConstraintSizeOptions
-
-The **ConstraintSizeOptions** type is used to set the constraint size of a component, thereby limiting the size range during component layout.
-
-| Name     | Type     | Mandatory | Description          |
-| --------- | -------- | ---- | -------------- |
-| minWidth  | Length   |  No | Minimum width of the element. |
-| maxWidth  | Length   |  No | Maximum width of the element. |
-| minHeight | Length   |  No | Minimum height of the element. |
-| maxHeight | Length   |  No | Maximum height of the element. |
-
-## SizeOptions
-
-The **SizeOptions** type is used to set the width and height.
-
-| Name   | Type     | Mandatory| Description           |
-| ------- | -------- | ---- | -------------- |
-| width   | Length   |  No | Width of the element.     |
-| height  | Length   |  No | Height of the element.     |
-
-
-## BorderOptions
-
-The **BorderOptions** type is used to provide border information.
-
-| Name  | Type                    | Mandatory | Description      |
-| ------ | ----------------------- | ---- | ----------- |
-| width  | Length  \| EdgeWidths<sup>9+</sup>  |  No | Border width.  |
-| color  | ResourceColor \| EdgeColors<sup>9+</sup> |  No | Border color.  |
-| radius | Length \| BorderRadiuses<sup>9+</sup>  |  No | Border radius.  |
-| style  | [BorderStyle](../reference/arkui-ts/ts-appendix-enums.md#borderstyle)  \| EdgeStyles<sup>9+</sup> |  No | Border style.  |
-
-## ColorFilter<sup>9+</sup>
-
-The **ColorFilter** type is used to create a color filter with a 4*5 matrix.
-
-| Name       | Type     | Mandatory  | Description                                                        |
-| ----------- | -------- | ------ | --------------------------------------------------------------- |
-| constructor | number[] | Yes    | Constructor for creating a color filter with a 4\*5 matrix. The input parameter is [m*n], which is the matrix value in row m and column n. The matrix is row-first. |
-
-
-## CustomBuilder<sup>8+</sup>
-
-The **CustomBuilder** type is used to define custom UI descriptions in component attribute methods.
-
-| Name         | Type              | Description                                                        |
-| ------------- | ---------------------- | ------------------------------------------------------------ |
-| CustomBuilder | ()&nbsp;=&gt;&nbsp;any | Builder of component attribute methods for defining custom UI descriptions. This type of method must be decorated by **@Builder**. For details, see [@Builder](ts-component-based-builder.md).|
diff --git a/en/application-dev/ui/ui-js-components-stepper.md b/en/application-dev/ui/ui-js-components-stepper.md
index 015b9efdac..4c89c10be1 100644
--- a/en/application-dev/ui/ui-js-components-stepper.md
+++ b/en/application-dev/ui/ui-js-components-stepper.md
@@ -1,7 +1,6 @@
-# &lt;stepper&gt; Development
+# \<stepper> Development
 
-
-When multiple steps are required to complete a task, you can use the **&lt;stepper&gt;** component to navigate your users through the whole process. For details, see [stepper](../reference/arkui-js/js-components-container-stepper.md).
+When multiple steps are required to complete a task, you can use the **<stepper>** component to navigate your users through the whole process. For details, see [stepper](../reference/arkui-js/js-components-container-stepper.md).
 
 
 > **NOTE**
@@ -9,9 +8,9 @@ When multiple steps are required to complete a task, you can use the **&lt;stepp
 > This component is supported since API version 5.
 
 
-## Creating a &lt;stepper&gt; Component
+## Creating a \<stepper> Component
 
-Create a **&lt;stepper&gt;** component in the .hml file under **pages/index**.
+Create a **\<stepper>** component in the .hml file under **pages/index**.
 
 ```html
 <!-- xxx.hml -->
@@ -85,7 +84,7 @@ text{
 
 ![en-us_image_0000001267767837](figures/en-us_image_0000001267767837.gif)
 
-Set the **label** attribute to customize the button text for the **&lt;stepper-item&gt;**.
+Set the **label** attribute to customize the label for the **\<stepper-item>**.
 
 ```html
 <!-- xxx.hml -->
@@ -149,8 +148,7 @@ export default {
 
 ## Setting Styles
 
-By default, the **&lt;stepper&gt;** component fills entire space of its container. The sample code below shows how to set the border and background color using the **border** and **background-color** attributes.
-
+By default, the **\<stepper>** component fills entire space of its container. The sample code below shows how to set the border and background color using the **border** and **background-color** attributes.
 ```html
 <!-- xxx.hml -->
 <div class="container" > 
@@ -194,7 +192,7 @@ text{
 
 ## Adding Events
 
-The **&lt;stepper&gt;** component supports the **finish**, **change**, **next**, **back**, and **skip** events.
+The **\<stepper>** component supports the **finish**, **change**, **next**, **back**, and **skip** events.
 
 - When the **change** and **next** or **back** events exist at the same time, the **next** or **back** event is executed before the **change** event.
 
@@ -271,12 +269,14 @@ export default {
   stepperChange(e){
     console.log("stepperChange"+e.index)
     prompt.showToast({
+      // index indicates the sequence number of the current step.
       message: 'Previous step: '+e.prevIndex+"-------Current step:"+e.index
     })
   },
   stepperNext(e){
     console.log("stepperNext"+e.index)
     prompt.showToast({
+      // pendingIndex indicates the sequence number of the step to be redirected to.
       message: 'Current step:'+e.index+"-------Next step:"+e.pendingIndex
     })
     var index = {pendingIndex:e.pendingIndex }
@@ -295,9 +295,9 @@ export default {
 
 ## Example Scenario
 
-Select the options displayed on the page. Your selection will be shown in real time. Click the next button to dynamically change the font color and font size on the page.
+In this example, you can select the options displayed on the page and see how your selection takes effect in real time. Clicking the next button will dynamically change the font color and font size of the selected option.
 
-Use the &lt;stepper&gt; component to navigate through the steps. Create a [&lt;toggle&gt;](../reference/arkui-js/js-components-basic-toggle.md) component to implement the functions of selection and displaying the selection result. Then use the [&lt;select&gt;](../reference/arkui-js/js-components-basic-select.md) component to dynamically change the font color or size of the selected options.
+Use a **\<stepper>** component to navigate through the steps. Create a **\<Toggle>**(../reference/arkui-js/js-components-basic-toggle.md) component to implement the functions of selecting an option and displaying the selection result. Then use the **\<Select>**(../reference/arkui-js/js-components-basic-select.md) component to dynamically change the font color or size of the selected option.
 
 ```html
 <!-- xxx.hml -->
@@ -404,4 +404,4 @@ export default {
 }
 ```
 
-![en-us_image_0000001267887817](figures/en-us_image_0000001267887817.gif)
\ No newline at end of file
+![en-us_image_0000001267887817](figures/en-us_image_0000001267887817.gif)
-- 
GitLab