update ui en

Signed-off-by: NHelloCrease <lian15@huawei.com>

en/application-dev/application-dev-website.md

@@ -51,17 +51,38 @@
         - [Defining Page Routes](ui/ui-js-building-ui-routes.md)
       - Common Component Development Guidelines
         - Container Components
-          - [List](ui/ui-js-components-list.md)
-          - [Dialog](ui/ui-js-components-dialog.md)
-          - [Form](ui/ui-js-components-form.md)
-          - [Stepper](ui/ui-js-components-stepper.md)
-          - [Tabs](ui/ui-js-component-tabs.md)
+          - [<list> Development](ui/ui-js-components-list.md)
+          - [<dialog> Development](ui/ui-js-components-dialog.md)
+          - [<form> Development](ui/ui-js-components-form.md)
+          - [<stepper> Development](ui/ui-js-components-stepper.md)
+          - [<tabs> Development](ui/ui-js-component-tabs.md)
+          - [<swiper> Development](ui/ui-js-components-swiper.md)
         - Basic Components
-          - [Text](ui/ui-js-components-text.md)
-          - [Input](ui/ui-js-components-input.md)
-          - [Button](ui/ui-js-components-button.md)
-          - [Picker](ui/ui-js-components-picker.md)
-          - [Image](ui/ui-js-components-images.md)
+          - [<text> Development](ui/ui-js-components-text.md)
+          - [<input> Development](ui/ui-js-components-input.md)
+          - [<button> Development](ui/ui-js-components-button.md)
+          - [<picker> Development](ui/ui-js-components-picker.md)
+          - [<image> Development](ui/ui-js-components-images.md)
+          - [<image-animator> Development](ui/ui-js-components-image-animator.md)
+          - [<rating> Development](ui/ui-js-components-rating.md)
+          - [<slider> Development](ui/ui-js-components-slider.md)
+          - [<chart> Development](ui/ui-js-components-chart.md)
+          - [<switch> Development](ui/ui-js-components-switch.md)
+          - [<toolbar> Development](ui/ui-js-components-toolbar.md)
+          - [<menu> Development](ui/ui-js-components-menu.md)
+          - [<marquee> Development](ui/ui-js-components-marquee.md)
+          - [<qrcode> Development](ui/ui-js-components-qrcode.md)
+          - [<search> Development](ui/ui-js-components-search.md)
+        - <canvas> Development
+          - [CanvasRenderingContext2D](ui/ui-js-components-canvasrenderingcontext2d.md)
+          - [Path2D](ui/ui-js-components-path2d.md)
+          - [OffscreenCanvas](ui/ui-js-components-offscreencanvas.md)
+        - [<grid-container> Development](ui/ui-js-components-calendar.md)
+        - Svg
+          - [Basics](ui/ui-js-components-svg-overview.md)
+          - [Graph Drawing](ui/ui-js-components-svg-graphics.md)
+          - [Path Drawing](ui/ui-js-components-svg-path.md)
+          - [Text Drawing](ui/ui-js-components-svg-text.md)
        - Animation Development Guidelines
            - CSS Animation
              - [Defining Attribute Style Animations](ui/ui-js-animate-attribute-style.md)
@@ -128,6 +149,13 @@
           - [Custom Component Lifecycle Callbacks](ui/ts-custom-component-lifecycle-callbacks.md)
           - [Example: Component Creation and Re-Initialization](ui/ts-component-creation-re-initialization.md)
         - [Syntactic Sugar](ui/ts-syntactic-sugar.md)
+      - Common Component Development Guidelines
+        - [Button](ui/ui-ts-basic-components-button.md)
+        - [Web](ui/ui-ts-components-web.md)
+      - Common Layout Development Guidelines
+        - [Flex Layout](ui/ui-ts-layout-flex.md)
+        - [Grid Layout](ui/ui-ts-layout-grid-container.md)
+        - [Media Query](ui/ui-ts-layout-mediaquery.md)
       - Experiencing the Declarative UI
         - [Creating a Declarative UI Project](ui/ui-ts-creating-project.md)
         - [Getting to Know Components](ui/ui-ts-components.md)

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

@@ -33,13 +33,33 @@
             - [<form> Development](ui-js-components-form.md)
             - [<stepper> Development](ui-js-components-stepper.md)
             - [<tabs> Development](ui-js-component-tabs.md)
-
+            - [<swiper> Development](ui-js-components-swiper.md)
         - Basic Components
             - [<text> Development](ui-js-components-text.md)
             - [<input> Development](ui-js-components-input.md)
             - [<button> Development](ui-js-components-button.md)
             - [<picker> Development](ui-js-components-picker.md)
             - [<image> Development](ui-js-components-images.md)
+            - [<image-animator> Development](ui-js-components-image-animator.md)
+            - [<rating> Development](ui-js-components-rating.md)
+            - [<slider> Development](ui-js-components-slider.md)
+            - [<chart> Development](ui-js-components-chart.md)
+            - [<switch> Development](ui-js-components-switch.md)
+            - [<toolbar> Development](ui-js-components-toolbar.md)
+            - [<menu> Development](ui-js-components-menu.md)
+            - [<marquee> Development](ui-js-components-marquee.md)
+            - [<qrcode> Development](ui-js-components-qrcode.md)
+            - [<search> Development](ui-js-components-search.md)
+        - <canvas> Development
+            - [CanvasRenderingContext2D](ui-js-components-canvasrenderingcontext2d.md)
+            - [Path2D](ui-js-components-path2d.md)
+            - [OffscreenCanvas](ui-js-components-offscreencanvas.md)
+        - [<grid-container> Development](ui-js-components-calendar.md)
+        - Svg
+            - [Basics](ui-js-components-svg-overview.md)
+            - [Graph Drawing](ui-js-components-svg-graphics.md)
+            - [Path Drawing](ui-js-components-svg-path.md)
+            - [Text Drawing](ui-js-components-svg-text.md)
     - Animation Development Guidelines
         - CSS Animation
             - [Defining Attribute Style Animations](ui-js-animate-attribute-style.md)

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

 # <tabs> Development
 
 
-The <tabs> component is a common UI component for navigation. It allows quick access to different functions of an app. For details, see [tabs](../reference/arkui-js/js-components-container-tabs.md).
+The **<tabs>** component is a common UI component for navigation. It allows quick access to different functions of an app. For details, see [tabs](../reference/arkui-js/js-components-container-tabs.md).
 
 
 ## Creating Tabs
 
-Create a <tabs> component in the .hml file under pages/index.
+Create a **<tabs>** component in the .hml file under **pages/index**.
 
 
 ```
@@ -25,7 +25,7 @@ Create a <tabs> component in the .hml file under pages/index.
         <text>content2</text>
       </div>
     </tab-content>
-  </tabs>
+</tabs>
 </div>
 ```
 
@@ -51,7 +51,7 @@ Create a &lt;tabs&gt; component in the .hml file under pages/index.
 
 ## Setting the Tabs Orientation
 
-By default, the active tab of a &lt;tabs&gt; component is the one with the specified index. To show the &lt;tabs&gt; vertically, set the vertical attribute to true.
+By default, the active tab of a **&lt;tabs&gt;** component is the one with the specified **index**. To show the **&lt;tabs&gt;** vertically, set the **vertical** attribute to **true**.
 
 
 ```
@@ -76,7 +76,7 @@ By default, the active tab of a &lt;tabs&gt; component is the one with the speci
 
 ![en-us_image_0000001222967756](figures/en-us_image_0000001222967756.gif)
 
-Set the mode attribute to enable the child components of the <tab-bar> to be evenly distributed. Set the scrollable attribute to disable scrolling of the <tab-content>.
+Set the **mode** attribute to enable the child components of the **&lt;tab-bar&gt;** to be evenly distributed. Set the **scrollable** attribute to disable scrolling of the **&lt;tab-content&gt;**.
 
 
 ```
@@ -102,9 +102,9 @@ Set the mode attribute to enable the child components of the <tab-bar> to be eve
 ![en-us_image_0000001267647857](figures/en-us_image_0000001267647857.gif)
 
 
-## Setting the Style
+## Setting Styles
 
-  Set the background color, border, and tab-content layout of the &lt;tabs&gt; component.
+  Set the background color, border, and tab-content layout of the **&lt;tabs&gt;** component.
 
 ```
 <!-- index.hml -->
@@ -150,7 +150,8 @@ Set the mode attribute to enable the child components of the <tab-bar> to be eve
   margin-top: 10px;
   height: 300px;
   color: blue;   
-  justify-content: center;  align-items: center;
+  justify-content: center;
+  align-items: center;
 }
 ```
 
@@ -159,13 +160,13 @@ Set the mode attribute to enable the child components of the <tab-bar> to be eve
 
 ## Displaying the Tab Index
 
-Add the change event for the &lt;tabs&gt; component to display the index of the current tab after tab switching.
+Add the **change** event for the **&lt;tabs&gt;** component to display the index of the current tab after tab switching.
 
 
 ```
 <!-- index.hml -->
 <div class="container" style="background-color:#F1F3F5;">
-  <tabs class="tabs" onchange="tabChange">
+  <tabs class="tabs"onchange="tabChange">
     <tab-bar class="tabBar">
       <text class="tabBarItem">item1</text>
       <text class="tabBarItem">item2</text>
@@ -198,15 +199,15 @@ export default {
 ![en-us_image_0000001222807772](figures/en-us_image_0000001222807772.gif)
 
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
-> - A &lt;tabs&gt; can wrap at most one [<tab-bar>](../reference/arkui-js/js-components-container-tab-bar.md) and at most one [<tab-content>](../reference/arkui-js/js-components-container-tab-content.md).
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
+> - A **&lt;tabs&gt;** can wrap at most one [**&lt;tab-bar&gt;**](../reference/arkui-js/js-components-container-tab-bar.md)  and at most one [**&lt;tab-content&gt;**](../reference/arkui-js/js-components-container-tab-content.md).
 
 
 ## Example Scenario
 
 In this example, you can switch between tabs and the active tab has the title text in red with an underline below.
 
-Use the &lt;tabs&gt;, <tab-bar>, and <tab-content> components to implement tab switching. Then define the arrays and attributes. Add the change event to change the attribute values in the arrays so that the active tab has a different font color and an underline.
+Use the **&lt;tabs&gt;**, **&lt;tab-bar&gt;**, and **&lt;tab-content&gt;** components to implement tab switching. Then define the arrays and attributes. Add the **change** event to change the attribute values in the arrays so that the active tab has a different font color and an underline.
 
 
 ```

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

 # <button> Development
 
 
-The<button>component can be used to set a capsule, circle, text, arc, or download button. For details, see [button](../reference/arkui-js/js-components-basic-button.md).
+The **<button>** component can be used to set a capsule, circle, text, arc, or download button. For details, see [button](../reference/arkui-js/js-components-basic-button.md).
 
 
-## Creating a <button> Component
+## Creating a <button> Component
 
-Create a <button> component in the .hml file under pages/index.
+Create a **<button>** component in the .hml file under **pages/index**.
 
 
 ```
@@ -20,6 +20,8 @@ Create a <button> component in the .hml file under pages/index.
 ```
 /* xxx.css */
 .container {
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -32,7 +34,9 @@ Create a <button> component in the .hml file under pages/index.
 
 ## Setting the Button Type
 
-Set the type attribute of the <input> component to button, date, or any of the supported values.
+Set the **type** attribute of the **<input>** component to **button**, **date**, or any of the supported values.
+
+
 
 ```
 <!-- xxx.hml -->
@@ -42,9 +46,13 @@ Set the type attribute of the &lt;input&gt; component to button, date, or any of
 </div>
 ```
 
+
+
 ```
 /* xxx.css */
 .container {  
+  width: 100%;
+  height: 100%;
   background-color: #F1F3F5;
   flex-direction: column;
   align-items: center;
@@ -70,17 +78,19 @@ Set the type attribute of the &lt;input&gt; component to button, date, or any of
 ![en-us_image_0000001222967744](figures/en-us_image_0000001222967744.png)
 
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
 > - For capsule buttons, border-related styles are not supported.
 > 
 > - For circle buttons, text-related styles are not supported.
 > 
-> - For text buttons, the text size is adaptive, and radius, width, and height cannot be set. The background-color style is not supported when the background is completely transparent.
+> - For text buttons, the text size is adaptive, and **radius**, **width**, and **height** cannot be set. The **background-color** style is not supported when the background is completely transparent.
 > 
-> - If the icon used by the&lt;button&gt;component is from the cloud, you must declare the ohos.permission.INTERNET permission in the config.json file under the resources folder.
+> - If the icon used by the **&lt;button&gt;** component is from the cloud, you must declare the **ohos.permission.INTERNET** permission in the **config.json** file under the **resources** folder.
+
+
+Sample code for declaring the **ohos.permission.INTERNET** permission in the **config.json** file under the **resources** folder:
 
 
-Sample code for declaring the ohos.permission.INTERNET permission in the config.json file under the resources folder:
 
 ```
 <!-- config.json -->
@@ -94,7 +104,7 @@ Sample code for declaring the ohos.permission.INTERNET permission in the config.
 
 ## Showing the Download Progress
 
-Add the progress method to the&lt;button&gt;component to display the download progress in real time.
+Add the **progress** method to the **&lt;button&gt;** component to display the download progress in real time.
 
 
 ```
@@ -171,15 +181,16 @@ export default {
 
 ![en-us_image_0000001223287652](figures/en-us_image_0000001223287652.gif)
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
->
-> The setProgress method supports only buttons of the download type.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
+> - The **setProgress** method supports only buttons of the download type.
 
 
 ## Example Scenario
 
 Switch between the button types for different types of text.
 
+
+
 ```
 <!-- xxx.hml -->
 <div class="container">
@@ -197,6 +208,8 @@ Switch between the button types for different types of text.
 </div>
 ```
 
+
+
 ```
 /* xxx.css */
 .container {
@@ -243,6 +256,8 @@ Switch between the button types for different types of text.
 }
 ```
 
+
+
 ```
 // xxx.js
 export default {

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

+# <grid-container> Development
+
+
+The **<grid-container>** component is the root container of the grid layout. Within the root container, you can use **<grid-row>** and **<grid-col>** for the grid layout. For details, see [grid-container](../reference/arkui-js/js-components-grid-container.md).
+
+
+## Creating a <grid-container> Component
+
+Create a **<grid-container>** component in the .hml file under **pages/index** and add a [**<grid-row>**](../reference/arkui-js/js-components-grid-row.md) child component.
+
+
+```
+<!-- index.hml -->
+<div class="container">
+  <grid-container id="mygrid" columns="5" gutter="20px" style="background-color: pink;">
+    <grid-row style="height:100px;justify-content:space-around;width: 80%;background-color: #f67002;margin-left: 
+      10%;"></grid-row>
+    <grid-row style="height:300px;justify-content:space-around;background-color: #ffcf00;width: 100%;"></grid-row>
+    <grid-row style="height:150px;justify-content:space-around;background-color: #032cf8;width: 100%;"></grid-row>
+  </grid-container>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container{
+  flex-direction: column;
+  background-color: #F1F3F5;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+}
+```
+
+![en-us_image_0000001276162725](figures/en-us_image_0000001276162725.png)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
+> **&lt;grid-container&gt;** supports only **&lt;grid-row&gt;** as a child component.
+
+
+## Methods
+
+Click the **&lt;grid-container&gt;** component to call the **getColumns**, **getColumnWidth**, and **getGutterWidth** methods to return the number of columns in the grid container, and column width and gutter width of the grid container. Press and hold the component to call the **getSizeType** method to return the size-responsive type of the grid container (**xs**|**sm**|**md**|**lg**).
+
+
+```
+<!-- index.hml -->
+<div class="container">
+  <grid-container id="mygrid" columns="6" gutter="20px" style="background-color: pink;padding-top: 100px;" 
+    onclick="getColumns" onlongpress="getSizeType">
+    <grid-row style="height:100px;justify-content:space-around;background-color: #4cedf3;width: 20%;margin-left: 
+      40%;"></grid-row>
+    <grid-row style="height:150px;justify-content:space-around;background-color: #4cbff3;width: 50%;margin-left:
+      25%;"></grid-row>
+    <grid-row style="height:200px;justify-content:space-around;background-color: #465ff6;width: 80%;margin-left: 
+      10%;"></grid-row>
+    <grid-row style="height:200px;justify-content:space-around;background-color: #5011ec;width: 100%;"></grid-row>
+  </grid-container>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container{
+  flex-direction: column;
+  background-color: #F1F3F5;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+}
+```
+
+
+```
+// index.js
+import prompt from '@system.prompt';
+export default {
+  data:{
+    gutterWidth:'',
+    columnWidth:'',
+    columns:'',
+  },
+  getColumns(){
+    this.$element('mygrid').getColumnWidth((result)=>{
+      this.columnWidth = result;
+    })
+    this.$element('mygrid').getGutterWidth((result)=>{
+      this.gutterWidth = result;
+    })
+    this.$element('mygrid').getColumns((result)=>{
+      this.columns= result;
+    }) 
+    setTimeout(()=>{              
+      prompt.showToast({duration:5000,message:'columnWidth:'+this.columnWidth+',gutterWidth:'+
+      this.gutterWidth+',getColumns:'+this.columns})
+    })
+  },
+  getSizeType(){
+      this.$element('mygrid').getSizeType((result)=>{
+      prompt.showToast({duration:2000,message:'get size type:'+result})
+    })
+  },
+}
+```
+
+![en-us_image_0000001231843088](figures/en-us_image_0000001231843088.gif)
+
+
+## Adding &lt;grid-col&gt;
+
+After adding a **&lt;grid-row&gt;** child component to **&lt;grid-container&gt;**, add a **&lt;grid-col&gt;** child component to **&lt;grid-row&gt;** to form a layout.
+
+
+```
+<!-- index.hml -->
+<div class="container">
+  <grid-container id="mygrid" columns="4" gutter="0" style="background-color: pink;" onclick="getColumns" onlongpress="getSizeType">
+    <grid-row style="height: 100px;justify-content: space-around;background-color: #4cbff3;width: 100%;">
+      <grid-col span="0">
+        <div style="align-items: center;justify-content: center;height: 100%;width: 100%;">
+          <text style="color: dodgerblue;" onclick="getCol">top</text>
+        </div>
+      </grid-col>
+    </grid-row>
+    <grid-row style="height:500px;justify-content:space-around;background-color: #3b55ef;width: 100%;">
+      <grid-col span="0" style="width: 20%;">
+        <div style="align-items: center;justify-content: center;height: 100%;width: 100%;">
+          <text style="color: dodgerblue;">left</text>
+        </div>
+      </grid-col>
+      <grid-col span="0" style="background-color:orange;width: 80%;">
+        <div style="width: 100%;height: 100%;align-items: center;justify-content: center;">
+          <text>right</text>
+        </div>
+      </grid-col>
+    </grid-row>
+    <grid-row style="height: 100px;justify-content: space-around;background-color: #4cbff3;width: 100%;">
+      <grid-col style="background-color:#c075ef;" span="0">
+        <div style="width: 100%;height: 100%;padding: 20px;align-items: center;justify-content: center;">
+          <text>bottom</text>
+        </div>
+      </grid-col>
+    </grid-row>
+  </grid-container>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container{
+  flex-direction: column;
+  background-color: #F1F3F5;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+}
+text{
+  color: white;
+  font-size: 40px;
+
+```
+
+![en-us_image_0000001231683124](figures/en-us_image_0000001231683124.png)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
+> **&lt;grid-row&gt;** supports only **&lt;grid-col&gt;** as a child component. You can add content only to **&lt;grid-col&gt;**.
+
+
+## Example Scenario
+
+In this example, the content in the list is output cyclically to create a grid layout. When the user pulls down the screen, the **refresh** method is triggered. In this case, a piece of data is added to the list and **setTimeout** is set to refresh the request data.
+
+
+```
+<!-- index.hml -->
+<div class="container">
+  <refresh refreshing="{{fresh}}" onrefresh="refresh">
+    <grid-container id="mygrid" gutter="20" style="margin: 10px;">
+      <grid-row style="height:200px;width: 100%;background-color: #e7e7e2;margin-top: 50px; padding: 0px 20px;border-radius: 15px;" for="item in list">
+        <grid-col span="0" style="width: 40%;">
+          <div style="align-items: center;justify-content: center">
+            <image src="{{item.src}}" style="object-fit: contain;border-radius: 30px;"></image>
+          </div>
+        </grid-col>
+        <grid-col span="0" style="width: 60%;">
+          <div style="align-items: center;justify-content: center;width: 100%;height: 100%;text-align: center;">
+            <text>image{{item.id}}</text>
+          </div>
+        </grid-col>
+      </grid-row>
+    </grid-container>
+  </refresh>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container{
+  flex-direction: column;
+  background-color: #F1F3F5;
+  width: 100%;
+}
+text{
+  color: #0a0aef;
+  font-size: 60px;
+}
+```
+
+
+```
+// index.js
+import prompt from '@system.prompt';
+export default {
+  data:{
+    list:[
+      {src:'common/images/1.png',id:'1'},
+      {src:'common/images/2.png',id:'2'},
+      {src:'common/images/3.png',id:'3'}
+    ],
+    fresh:false
+  },
+  refresh(e) {
+    prompt.showToast({
+      message: 'refreshing'
+    })
+    var that = this;
+    that.fresh = e.refreshing;
+    setTimeout(function () {
+      that.fresh = false;
+      that.list.unshift({src: 'common/images/4.png',id:'4'});
+      prompt.showToast({
+        message: 'succeed'
+      })
+    }, 2000)
+  }
+}
+```
+
+
+![en-us_image_0000001276003501](figures/en-us_image_0000001276003501.gif)

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

+# <canvas> Development
+
+
+The **<canvas>** component provides a canvas for drawing customized graphics. For details, see [canvas](../reference/arkui-js/js-components-canvas-canvas.md).
+
+
+## Creating a <canvas> Component
+
+Create a **<canvas>** component in the .hml file under **pages/index**.
+
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <canvas></canvas>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container{
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #F1F3F5;
+}
+canvas{
+  background-color: #00ff73;
+}
+```
+
+![en-us_image_0000001232162316](figures/en-us_image_0000001232162316.png)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
+> - The default background color of the **&lt;canvas&gt;** component is the same as that of the parent component.
+> 
+> - The default width and height of **&lt;canvas&gt;** are 300 px and 150 px, respectively.
+
+
+## Adding Styles
+
+Set **width**, **height**, **background-color**, and **border** of the **&lt;canvas&gt;** component.
+
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <canvas></canvas>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container{
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #F1F3F5;
+}
+canvas{
+  width: 500px;
+  height: 500px;
+  background-color: #fdfdfd;
+  border: 5px solid red;
+}
+```
+
+![en-us_image_0000001231843104](figures/en-us_image_0000001231843104.png)
+
+
+## Adding Events
+
+Add the long press event to the **&lt;canvas&gt;** component. When the event is triggered, the value of **dataUrl** (image information returned by the **toDataURL** method) of the **&lt;canvas&gt;** component can be obtained and printed in the text area below.
+
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <canvas ref="canvas1" onlongpress="getUrl"></canvas>
+  <text>dataURL</text>
+  <text class="content">{{dataURL}}</text>
+</div>
+```
+
+
+```
+/* xxx.css */.container{  flex-direction: column;  justify-content: center;  align-items: center;  background-color: #F1F3F5;}canvas{  width: 500px;  height: 500px;  background-color: #fdfdfd;  border: 5px solid red;
+  margin-bottom: 50px;
+}.content{  border: 5px solid blue;  padding: 10px;  width: 90%;  height: 400px;  overflow: scroll;}
+```
+
+
+```
+// xxx.js
+import prompt from '@system.prompt';
+export default {
+  data:{
+    dataURL:null,
+    antialia: false,
+    porc:'open',
+  },
+  onShow(){
+    let el = this.$refs.canvas1;
+    let ctx = el.getContext("2d");
+    ctx.strokeRect(100,100,300,300);
+  },
+  getUrl(){
+    let el = this.$refs.canvas1;
+    let dataUrl = el.toDataURL();
+    this.dataURL = dataUrl;
+    prompt.showToast({duration:2000,message:"long press,get dataURL"});
+  }
+}
+```
+
+![en-us_image_0000001276003513](figures/en-us_image_0000001276003513.gif)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
+> The **&lt;canvas&gt;** component cannot be created in **onInit** or **onReady**.

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

+# CanvasRenderingContext2D
+
+
+Use **CanvasRenderingContext2D** to draw objects such as graphics, texts, line segments, and images on the **<canvas>** component. For details, see [CanvasRenderingContext2D](../reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md).
+
+
+## Drawing Line Segments
+
+Use **moveTo** and **lineTo** to draw a line segment. Use the **closePath** method to end current path, obtaining a closed path. Set **quadraticCurveTo** (quadratic bezier curve) or **bezierCurveTo** (cubic bezier curve) to draw a graphic.
+
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <canvas ref="canvas1"></canvas>
+  <select @change="change">
+    <option value="value1"> line </option>
+    <option value="value2"> quadratic </option>
+    <option value="value3"> bezier </option>
+    <option value="value4"> arc/ellipse </option>
+    <option value="value5"> lineJoin/miterLimit </option>
+  </select>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container{
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #F1F3F5;
+}
+canvas{
+  width: 600px;
+  height: 500px;
+  background-color: #fdfdfd;
+  border: 5px solid red;
+}
+select{
+  margin-top: 50px;
+  width: 250px;
+  height: 100px;
+  background-color: white;
+}
+```
+
+
+```
+// xxx.js
+import prompt from '@system.prompt';
+export default {
+  data:{
+    el: null,
+    ctx: null,
+  },
+  onShow(){
+    this.el = this.$refs.canvas1;
+    this.ctx = this.el.getContext("2d",{antialias: true});
+    // Clear the contents on the canvas.
+    this.ctx.clearRect(0, 0, 600, 500);
+    // Create a drawing path.
+    this.ctx.beginPath();
+    // Square off the endpoints of the line.
+    this.ctx.lineCap = 'butt';
+    // Border width
+    this.ctx.lineWidth = 15;
+    // Create a drawing path.
+    this.ctx.beginPath();
+    // Move a drawing path from the current point to a target position.
+    this.ctx.moveTo(200, 100);
+    // Connect the current point to a target position.
+    this.ctx.lineTo(400, 100);
+    // Stroke a path.
+    this.ctx.stroke();
+    this.ctx.beginPath();
+    // Round the endpoints of the line.
+    this.ctx.lineCap = 'round';
+    this.ctx.moveTo(200, 200);
+    this.ctx.lineTo(400, 200);
+    this.ctx.stroke();
+    // Square off the endpoints of the line.
+    this.ctx.beginPath();
+    this.ctx.lineCap = 'square';
+    this.ctx.moveTo(200, 300);
+    this.ctx.lineTo(400, 300);
+    this.ctx.stroke();
+  },
+  change(e){
+    if(e.newValue == 'value1'){
+      this.el = this.$refs.canvas1;
+      this.ctx = this.el.getContext("2d",{antialias: true});
+      this.ctx.clearRect(0, 0, 600, 500);
+      // Top
+      this.ctx.beginPath();
+      this.ctx.lineCap = 'butt';
+      this.ctx.moveTo(200, 100);
+      this.ctx.lineTo(400, 100);
+      this.ctx.stroke();
+      // Center
+      this.ctx.beginPath();
+      this.ctx.lineCap = 'round';
+      this.ctx.moveTo(200, 200);
+      this.ctx.lineTo(400, 200);
+      this.ctx.stroke();
+      // Bottom
+      this.ctx.beginPath();
+      this.ctx.lineCap = 'square';
+      this.ctx.moveTo(200, 300);
+      this.ctx.lineTo(400, 300);
+      this.ctx.stroke();
+    }else if(e.newValue == 'value2'){
+      this.ctx.clearRect(0, 0, 600, 500);
+      // Top
+      this.ctx.beginPath();
+      this.ctx.moveTo(100, 150);
+      // Path of the quadratic bezier curve
+      this.ctx.quadraticCurveTo(300, 50, 500, 150);
+      this.ctx.stroke();
+      // Left
+      this.ctx.beginPath();
+      this.ctx.moveTo(200, 150);
+      this.ctx.quadraticCurveTo(250, 250, 250, 400);
+      this.ctx.stroke();
+      // Right
+      this.ctx.beginPath();
+      this.ctx.moveTo(400, 150);
+      this.ctx.quadraticCurveTo(350, 250, 350, 400);
+      this.ctx.stroke();
+    }else if(e.newValue == 'value3'){
+      this.ctx.clearRect(0, 0, 600, 500);
+      // Bottom
+      this.ctx.beginPath();
+      this.ctx.moveTo(100, 200);
+      // Path of the cubic bezier curve
+      this.ctx.bezierCurveTo(150, 100, 200, 100,250, 200);
+      this.ctx.stroke();
+      // Left
+      this.ctx.beginPath();
+      this.ctx.moveTo(350, 200);
+      this.ctx.bezierCurveTo(400, 100, 450, 100,500, 200);
+      this.ctx.stroke();
+      // Right
+      this.ctx.beginPath();
+      this.ctx.moveTo(200, 350);
+      this.ctx.bezierCurveTo(250, 500, 350, 500, 400, 350);
+      this.ctx.stroke();
+    }else if(e.newValue == 'value4'){
+      this.ctx.clearRect(0, 0, 600, 500);
+      this.ctx.beginPath();
+      this.ctx.moveTo(100, 200);
+      // Arc
+      this.ctx.arcTo(150, 300, 350, 300, 150);
+      this.ctx.stroke();
+      this.ctx.beginPath();
+      // Ellipse
+      this.ctx.ellipse(400, 250, 50, 100, Math.PI * 0.25, Math.PI * 0.5 , Math.PI , 1);
+      this.ctx.stroke();
+    }else if(e.newValue == 'value5'){
+      this.ctx.clearRect(0, 0, 600, 500);
+      // Upper left
+      this.ctx.beginPath();
+      // Draw a sector centered at the common endpoint of connected line segments.
+      this.ctx.lineJoin = 'round';
+      this.ctx.moveTo(100, 100);
+      this.ctx.lineTo(200, 200);
+      this.ctx.lineTo(100, 250);
+      this.ctx.stroke();
+      // lower left
+      this.ctx.beginPath();
+      // Fill a triangular between the common endpoint of connected segments.
+      this.ctx.lineJoin = 'bevel';
+      this.ctx.moveTo(100, 300);
+      this.ctx.lineTo(200, 400);
+      this.ctx.lineTo(100, 450);
+      this.ctx.stroke();
+      // Top right
+      this.ctx.beginPath();
+      // Distance between the internal angle and exterior angle at the intersection of lines
+      this.ctx.lineJoin = 'miter';
+      this.ctx.miterLimit = 3;
+      this.ctx.moveTo(400, 100);
+      this.ctx.lineTo(450, 200);
+      this.ctx.lineTo(400, 250);
+      // Draw a closed path.
+      this.ctx.closePath();
+      this.ctx.stroke();
+      // Lower right
+      this.ctx.beginPath();
+      this.ctx.lineJoin = 'miter';
+      this.ctx.miterLimit = 10;
+      this.ctx.moveTo(400, 300);
+      this.ctx.lineTo(450, 400);
+      this.ctx.lineTo(400, 450);
+      this.ctx.closePath();
+      this.ctx.stroke();
+    }
+  },
+}
+```
+
+![en-us_image_0000001232162320](figures/en-us_image_0000001232162320.gif)
+
+
+## Drawing Border
+
+Globally define the canvas (**el**) and brush (**ctx**), and create a rectangle with the border width of 5 upon initialization. Change the border width (**lineWidth**), color (**strokeStyle**), and line dash level (**setLineDash**). Add the **change** event to the **&lt;select&gt;** component. The **change** event will be triggered upon selection and the changed image will be displayed.
+
+
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <canvas ref="canvas1"></canvas>
+  <select @change="change">
+    <option value="value1">strokeRect</option>
+    <option value="value2">arc</option>
+    <option value="value3">lineDashRect</option>
+    <option value="value4">fillRect</option>
+  </select>
+</div>
+```
+
+
+
+```
+/* xxx.css */
+.container{
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #F1F3F5;
+}
+canvas{
+  width: 600px;
+  height: 500px;
+  background-color: #fdfdfd;
+  border: 5px solid red;
+}
+select{
+  margin-top: 50px;
+  width: 250px;
+  height: 100px;
+  background-color: white;
+}
+```
+
+
+
+```
+// xxx.js
+import prompt from '@system.prompt';
+export default {
+  data:{
+    el: null,
+    ctx: null,
+  },
+  onShow(){
+    this.el = this.$refs.canvas1;
+    this.ctx = this.el.getContext("2d",{antialias: true});
+    this.ctx.lineWidth = 5;
+    this.ctx.strokeRect(200, 150, 200, 200);
+  },
+  change(e){
+    if(e.newValue == 'value1'){
+      // Clear the contents on the canvas.
+      this.ctx.clearRect(0,0,600,500);
+      // Border width
+      this.ctx.lineWidth = 5;
+      // Border color
+      this.ctx.strokeStyle = '#110000';
+      // Line dash level of the border
+      this.ctx.setLineDash([0,0]);
+      // Draw a stroked rectangle.
+      this.ctx.strokeRect(200, 150, 200, 200);
+    }else if(e.newValue == 'value2'){
+      this.ctx.clearRect(0,0,600,500);
+      this.ctx.lineWidth = 30;
+      this.ctx.strokeStyle = '#0000ff';
+      this.ctx.setLineDash([0,0]);
+      // Draw a circle.
+      this.ctx.arc(300, 250, 150,0,6.28);
+      // Draw borders.
+      this.ctx.stroke();
+    }else if(e.newValue == 'value3'){
+      this.ctx.clearRect(0,0,600,500);
+      this.ctx.lineWidth = 5;
+      this.ctx.setLineDash([5,5]);
+      this.ctx.strokeRect(200, 150, 200, 200);
+    }else if(e.newValue == 'value4'){
+      this.ctx.clearRect(0,0,600,500);
+      // Draw and fill a rectangle.
+      this.ctx.fillStyle = '#0000ff';
+      this.ctx.fillRect(200, 150, 200, 200);
+    }
+  },
+}
+```
+
+
+![en-us_image_0000001232003004](figures/en-us_image_0000001232003004.gif)
+
+
+## Setting Gradient Fill Colors
+
+Add the **createLinearGradient** and **createRadialGradient** attributes to create a gradient container, use the **addColorStop** method to add multiple color blocks to form a gradient color, and set **fillStyle** as **gradient** to apply the gradient color to a rectangle. Then set the shadow blur level by using **shadowBlur**, the shadow color by using **shadowColor**, and the shadow offset by using **shadowOffset**.
+
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <canvas ref="canvas1"></canvas>
+  <select @change="change">
+    <option value="value1">LinearGradient</option>
+    <option value="value2">RadialGradient</option>
+    <option value="value3">shadowBlur</option>
+    <option value="value4">shadowOffset</option>
+  </select>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container{
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #F1F3F5;
+}
+canvas{
+  width: 600px;
+  height: 500px;
+  background-color: #fdfdfd;
+  border: 5px solid red;
+}
+select{
+  margin-top: 50px;
+  width: 250px;
+  height: 100px;
+  background-color: white;
+}
+```
+
+
+```
+// xxx.js
+import prompt from '@system.prompt';
+export default {
+  data:{
+    el: null,
+    ctx: null,
+  },
+  onShow(){
+    this.el = this.$refs.canvas1;
+    this.ctx = this.el.getContext("2d",{antialias: true});
+    // Create a linear gradient.
+    let gradient = this.ctx.createLinearGradient(100,100, 400,300);
+    // Add gradient colors.
+    gradient.addColorStop(0.0, 'red');
+    gradient.addColorStop(0.7, 'white');
+    gradient.addColorStop(1.0, 'green');
+    // Apply the gradient.
+    this.ctx.fillStyle = gradient;
+    this.ctx.fillRect(100, 100, 400, 300);
+  },
+  change(e){
+    if(e.newValue == 'value1'){
+      // Clear the contents on the canvas.
+      this.ctx.clearRect(0,0,600,500);
+      let gradient = this.ctx.createLinearGradient(100,100, 400,300);
+      gradient.addColorStop(0.0, 'red');
+      gradient.addColorStop(0.7, 'white');
+      gradient.addColorStop(1.0, 'green');
+      this.ctx.fillStyle = gradient;
+      // Set the level of shadow blur.
+      this.ctx.shadowBlur = 0;
+      // Set the distance that shadows will be offset vertically.
+      this.ctx.shadowOffsetY = 0;
+      // Set the distance that shadows will be offset horizontally.
+      this.ctx.shadowOffsetX = 0;
+      this.ctx.fillRect(100, 100, 400, 300);
+    }else if(e.newValue == 'value2'){
+      this.ctx.clearRect(0,0,600,500);
+      // Create a radial gradient.
+      let gradient = this.ctx.createRadialGradient(300,250,20,300,250,100);
+      gradient.addColorStop(0.0, 'red');
+      gradient.addColorStop(0.7, 'white');
+      gradient.addColorStop(1.0, 'green');
+      this.ctx.shadowBlur = 0;
+      this.ctx.shadowOffsetY = 0;
+      this.ctx.shadowOffsetX = 0;
+      this.ctx.fillStyle = gradient;
+      this.ctx.fillRect(100, 100, 400, 300);
+    }else if(e.newValue == 'value3'){
+      this.ctx.clearRect(0,0,600,500);
+      let gradient = this.ctx.createLinearGradient(100,100, 400,400);
+      gradient.addColorStop(0.0, 'red');
+      gradient.addColorStop(0.5, 'white');
+      gradient.addColorStop(1, '#17ea35');
+      // Set the level of shadow blur.
+      this.ctx.shadowBlur = 30;
+      // Set the shadow color.
+      this.ctx.shadowColor = 'rgb(229, 16, 16)';
+      this.ctx.fillStyle = gradient;
+      this.ctx.fillRect(100, 100, 400, 300);
+    }else if(e.newValue == 'value4'){
+      this.ctx.clearRect(0,0,600,500);
+      this.ctx.clearRect(0,0,600,500);
+      let gradient = this.ctx.createRadialGradient(300,250,20,300,250,200);
+      gradient.addColorStop(0.0, 'red');
+      gradient.addColorStop(0.5, 'white');
+      gradient.addColorStop(1, '#17ea35');
+      // Set the level of shadow blur.
+      this.ctx.shadowBlur = 30;
+      this.ctx.shadowOffsetY = 30;
+      // Set the shadow color.
+      this.ctx.shadowColor = 'rgb(23, 1, 1)';
+      this.ctx.fillStyle = gradient;
+      this.ctx.fillRect(100, 100, 400, 300);
+    }
+  },
+}
+```
+
+![en-us_image_0000001231683148](figures/en-us_image_0000001231683148.gif)
+
+
+## Filling Texts
+
+Create a text and use the **fillText** method to write the text on the canvas. Use the **globalAlpha** attribute to change the baseline transparency to avoid the text being hidden by the baseline. Then set the **textAlign** and **textBaseline** attributes to determine the text position based on the baseline.
+
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <canvas ref="canvas1"></canvas>
+  <select @change="change">
+    <option value="value1">text</option>
+    <option value="value2">textBaseline</option>
+    <option value="value3">textAlign</option>
+  </select>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container{
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #F1F3F5;
+}
+canvas{
+  width: 600px;
+  height: 500px;
+  background-color: #fdfdfd;
+  border: 5px solid red;
+}
+select{
+  margin-top: 50px;
+  width: 250px;
+  height: 100px;
+  background-color: white;
+}
+```
+
+
+```
+// xxx.js
+import prompt from '@system.prompt';
+export default {
+  data:{
+    el: null,
+    ctx: null,
+  },
+  onShow(){
+    this.el = this.$refs.canvas1;
+    this.ctx = this.el.getContext("2d",{antialias: true});
+    // Create a text.
+    let text = "Hello World";
+    // Set the font.
+    this.ctx.font = '30px';
+    this.ctx.fillText("with:"+this.ctx.measureText(text).width, 200, 300);
+    // Set the fill text.
+    this.ctx.fillText(text, 200, 250);
+  },
+  change(e){
+    if(e.newValue == 'value1'){
+      // Clear the contents on the canvas.
+      this.ctx.clearRect(0,0,600,500);
+      // Start a new path.
+      this.ctx.beginPath();
+      // Initialize the textAlign value.
+      this.ctx.textAlign = 'left';
+      // Initialize textBaseline.
+      this.ctx.textBaseline = 'alphabetic';
+      // Set the font.
+      this.ctx.font = '30px';
+      let text = "Hello World";
+      // Obtain the font width.
+      this.ctx.fillText("with:"+this.ctx.measureText(text).width, 200, 300);
+    // Set the fill text.
+      this.ctx.fillText(text, 200, 250);
+    }else if(e.newValue == 'value2'){
+      this.ctx.clearRect(0,0,600,500);
+      this.ctx.beginPath();
+      // Set the Alpha value.
+      this.ctx.globalAlpha = 0.1;
+      // Set the line width.
+      this.ctx.lineWidth = 10;
+      // Set the line segment color.
+      this.ctx.strokeStyle = '#0000ff';
+      // Move from the current point to a target position.
+      this.ctx.moveTo(0, 240);
+      // Connect the current point to a target position.
+      this.ctx.lineTo(600, 240);
+      this.ctx.stroke();
+      this.ctx.font = '35px';
+      this.ctx.globalAlpha = 1;
+      // Initialize the textAlign value.
+      this.ctx.textAlign = 'left';
+      // Set textBaseline.
+      this.ctx.textBaseline = 'top';
+      this.ctx.fillText('Top', 50, 240);
+      this.ctx.textBaseline = 'bottom';
+      this.ctx.fillText('Bottom', 200, 240);
+      this.ctx.textBaseline = 'middle';
+      this.ctx.fillText('Middle', 400, 240);
+    }else if(e.newValue == 'value3'){
+      // Clear the contents on the canvas.
+      this.ctx.clearRect(0,0,600,500);
+      this.ctx.beginPath();
+      this.ctx.globalAlpha = 0.1;
+      this.ctx.lineWidth = 10;
+      this.ctx.strokeStyle = '#0000ff';
+      this.ctx.moveTo(300, 0);
+      this.ctx.lineTo(300, 500);
+      this.ctx.stroke();
+      this.ctx.font = '35px';
+      this.ctx.globalAlpha = 1;
+      // Initialize textBaseline.
+      this.ctx.textBaseline = 'alphabetic';
+      // Set textAlign.
+      this.ctx.textAlign = 'left';
+      this.ctx.fillText('textAlign=left',300, 100);
+      this.ctx.textAlign = 'center';
+      this.ctx.fillText('textAlign=center',300, 250);
+      this.ctx.textAlign = 'right';
+      this.ctx.fillText('textAlign=right',300, 400);
+    }
+  }
+}
+```
+
+![en-us_image_0000001276162745](figures/en-us_image_0000001276162745.gif)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
+> In the **ltr** layout mode, the value **start** equals **left**. In the **rtl** layout mode, the value **start** equals **right**.
+
+
+## Adding Images
+
+After creating an image object, use the **drawImage** attribute to draw the image and set animation styles such as scaling, translating, and rotating.
+
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <div class="content">
+    <canvas ref="canvas0"></canvas>
+    <text onclick="change">change</text>
+    <canvas ref="canvas1"></canvas>
+    <text onclick="rotate">rotate</text>
+    <canvas ref="canvas2"></canvas>
+    <text onclick="scale">scale</text>
+    <canvas ref="canvas3"></canvas>
+    <text onclick="translate" style="width: 300px;">translate</text>
+    <canvas ref="canvas4"></canvas>
+    <text onclick="transform" style="width: 300px;">transform</text>
+    <canvas ref="canvas5"></canvas>
+    <text onclick="setTransform" style="width: 300px;">setTransform</text>
+    <canvas ref="canvas6"></canvas>
+  </div>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container{
+  flex-direction: column;
+  background-color: #F1F3F5;
+  align-items: center;
+}
+canvas{
+  width: 600px;
+  height: 300px;
+  margin-bottom: 100px;
+  background-color: #fdfdfd;
+  border: 5px solid red;
+}
+.content{
+  width: 80%;
+  margin-top: 50px;
+  margin-bottom: 50px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+text{
+  font-size: 35px;
+  width: 200px;
+  height: 80px;
+  color: white;
+  border-radius: 20px;
+  text-align: center;
+  background-color: #6060e7;
+  margin-bottom: 30px;
+}
+```
+
+
+```
+// xxx.js
+import prompt from '@system.prompt';
+export default {
+  data:{
+    compositeOperation: 'source-over'
+  },
+  onShow(){
+    let ctx = this.$refs.canvas0.getContext("2d");
+    // Create an image object.
+    let img = new Image();
+    // Set the image path.
+    img.src = 'common/images/2.png';
+    // Set the image width.
+    img.width= 150;
+    // Set the image height.
+    img.height=150;
+    // Create an image tiling container.
+    var pat = ctx.createPattern(img, 'repeat');
+    ctx.fillStyle = pat;
+    ctx.fillRect(0, 0, 600, 300);
+  },
+  change(){
+    // Obtain the brush after the canvas is created.
+    let ctx = this.$refs.canvas1.getContext("2d");
+    ctx.clearRect(0,0,600,1000);
+    if(this.compositeOperation == "source-over"){
+      this.compositeOperation = "destination-over";
+    }else{
+      this.compositeOperation = "source-over";
+    }
+    ctx.globalCompositeOperation = this.compositeOperation;
+    let img = new Image();
+    img.src = 'common/images/2.png';
+    // Invoked when the image is successfully obtained.
+    img.onload = function() {
+      ctx.drawImage(img, 150, 20, 200, 200);
+    };
+    let img1 = new Image();
+    img1.src = 'common/images/3.png';
+    img1.onload = function() {
+      // Draw an image.
+      ctx.drawImage(img1, 250, 80, 200, 200);
+    };
+    // A method is triggered when the image fails to be obtained.
+    img1.onerror = function() {
+      prompt.showToast({message:"error",duration:2000})
+    };
+  },
+  rotate(){
+    let ctx = this.$refs.canvas2.getContext("2d");
+    ctx.clearRect(0,0,600,300);
+    // Rotate the image.
+    ctx.rotate(10 * Math.PI / 180);
+    let img = new Image();
+    img.src = 'common/images/2.png';
+    img.onload = function() {
+      ctx.drawImage(img, 300, 0, 100, 100);
+    };
+  },
+  scale(){
+    let ctx = this.$refs.canvas3.getContext("2d");
+    ctx.clearRect(0,0,600,200);
+    // Scale the image.
+    ctx.scale(1.3,1.2);
+    let img = new Image();
+    img.src = 'common/images/2.png';
+    img.onload = function() {
+      ctx.drawImage(img, 0, 0, 50, 50);
+    };
+  },
+  translate(){
+    let ctx = this.$refs.canvas4.getContext("2d");
+    ctx.clearRect(0,0,600,300);
+    ctx.translate(10,0);
+    let img = new Image();
+    img.src = 'common/images/2.png';
+    img.onload = function() {
+      ctx.drawImage(img, 0, 50, 300, 200);
+    };
+  },
+  transform(){
+    let ctx = this.$refs.canvas5.getContext("2d");
+    ctx.clearRect(0,0,600,300);
+    ctx.transform(1.1, 0.1, 0.1, 1, 10, 0);
+    let img = new Image();
+    img.src = 'common/images/2.png';
+    img.onload = function() {
+      ctx.drawImage(img, 0, 50, 100, 100);
+     };
+  },
+  setTransform(){
+    let ctx = this.$refs.canvas6.getContext("2d");
+    ctx.clearRect(0,0,600,300);
+    ctx.setTransform(1.1, 0.1, 0.1, 1, 10, 0);
+    let img = new Image();
+    img.src = 'common/images/2.png';
+    img.onload = function() {
+      ctx.drawImage(img, 0, 50, 100, 100);
+    };
+  },
+}
+```
+
+![en-us_image_0000001232003008](figures/en-us_image_0000001232003008.gif)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
+> - Unlike the **transform()** function, the **setTransform()** function resets the existing transformation matrix and creates a transformation matrix even if it uses the same parameters.
+> 
+> - The following formulas calculate coordinates of the transformed graph. **x** and **y** represent coordinates before transformation, and **x'** and **y'** represent coordinates after transformation.
+>   x' = scaleX \* x + skewY \* y + translateX
+> 
+>   y' = skewX \* x + scaleY \* y + translateY
+
+
+## Adding Methods
+
+Use the **save** method to save the brush style, and use the **restore** method to restore the saved settings. In the following example, set the brush to red. After the brush setting is saved, clear the canvas and change the brush to blue. In this moment, directly using the brush will get a blue rectangle; using the brush after the restore operation will get a red rectangle.
+
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <div class="content">
+    <canvas ref="canvas"></canvas>
+  </div>
+  <div class="content">
+    <text onclick="save">save</text>
+    <text onclick="clear">clear</text>
+    <text onclick="restore">restore</text>
+  </div>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container{
+  flex-direction: column;
+  background-color: #F1F3F5;
+  align-items: center;
+}
+canvas{
+  margin-top: 300px;
+  width: 600px;
+  height: 500px;
+  background-color: #fdfdfd;
+  border: 5px solid red;
+}
+.content{
+  width: 80%;
+  margin-top: 50px;
+  margin-bottom: 50px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+text{
+  width: 150px;
+  height: 80px;
+  color: white;
+  border-radius: 20px;
+  text-align: center;
+  background-color: #6060e7;
+  margin-bottom: 30px;
+}
+```
+
+
+```
+// xxx.js
+import prompt from '@system.prompt';
+export default {
+  data:{
+    ctx: '',
+  },
+  onShow(){
+    this.ctx = this.$refs.canvas.getContext("2d");
+    this.ctx.fillStyle = "red"
+    this.ctx.fillRect(200, 150, 200, 200);
+  },
+  save(){
+    // Save the brush setting.
+    this.ctx.save();
+    prompt.showToast({message:"save succeed"});
+  },
+  clear(){ 
+    this.ctx.clearRect(0,0,600,500);
+    // Change the brush color.
+    this.ctx.fillStyle = "#2133d2";
+  },
+  restore(){
+    this.ctx.beginPath();
+    // Restore the brush setting.
+    this.ctx.restore();
+    this.ctx.fillRect(200, 150, 200, 200);
+  },
+}
+```
+
+![en-us_image_0000001231683144](figures/en-us_image_0000001231683144.gif)

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

+# <chart> Development
+
+
+The **<chart>** component displays line charts, gauge charts, and bar charts. For details, see [chart](../reference/arkui-js/js-components-basic-chart.md).
+
+
+## Creating a <chart> Component
+
+Create a **<chart>** component in the .hml file under **pages/index**.
+
+
+
+```
+<!-- xxx.hml -->
+<div class="container">
+ <chart class="chart-data" type="line" options="{{lineOps}}" datasets="{{lineData}}"></chart>
+</div>
+```
+
+
+
+```
+/* xxx.css */
+.container {
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #F1F3F5;
+}
+.chart-data {
+  width: 700px;
+  height: 600px;
+}
+```
+
+
+
+```
+/* xxx.js */
+export default {
+  data: {
+    lineData: [
+      {
+        data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716]
+      }
+    ],
+    lineOps: {
+      xAxis: {
+        min: 0,
+        max: 20,
+        display: false,
+      },
+      yAxis: {
+        min: 0,
+        max: 1000,
+        display: false,
+      },
+      series: {
+        lineStyle: {
+          width: 15,
+        },
+      }
+    },
+  }
+}
+```
+
+
+![en-us_image_0000001231683156](figures/en-us_image_0000001231683156.png)
+
+
+## Setting the Chart Type
+
+Define the chart type using the **type** attribute, for example, setting a chart to a bar chart.
+
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <div class="container">
+    <div class="switch-block">
+      <text class="title">
+        {{ title }}
+      </text>
+    </div>
+    <tabs class="tabs" index="0" vertical="false" onchange="changes">
+      <tab-content class="tabcontent" scrollable="true">
+        <tabs >
+          <tab-bar class="tab-bar" mode="fixed"style="margin-bottom: 50px;">
+            <text class="tab-text">Line chart</text>
+            <text class="tab-text">Bar chart</text>
+            <text class="tab-text">Gauge chart</text>
+          </tab-bar>
+          <tab-content>
+            <div class="bar-block" style="margin-left: 30px;">
+              <chart class="chart-data"type="line" ref="linechart" options="{{ lineOps }}" datasets="{{ lineData }}">
+              </chart>
+            </div>
+            <div class="bar-block">
+              <chart class="data-bar"type="bar" id="bar-chart" options="{{ barOps }}" datasets="{{ barData }}">
+              </chart>
+            </div>
+            <div class="chart-block">
+              <chart type="gauge" ></chart>
+            </div>
+          </tab-content>
+        </tabs>
+      </tab-content>
+    </tabs>
+  </div>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container {
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  justify-content: center;
+  background-color: #F1F3F5;
+}
+.chart-data {
+  width: 700px;
+  height: 600px;
+}
+.title{
+  margin-left: 50px;
+  margin-top: 50px;
+  font-size: 50px;
+}
+.line-block{
+  align-items: center;
+  justify-content: center;
+}
+.bar-block{
+  align-items: center;
+  justify-content: center;
+}
+.chart-block{
+  width: 90%;
+  margin-left: 30px;
+}
+```
+
+
+```
+/* xxx.js */
+export default {
+  data: {
+    title:"Type display",
+    barData: [
+      {
+        fillColor: '#3848e8',
+        data: [763, 550, 551, 554, 731, 654, 525, 696, 595],
+      }
+    ],
+    lineData: [
+      {
+        strokeColor: '#0081ff',
+        fillColor: '#cce5ff',
+        data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716],
+        gradient: true,
+      }
+    ],
+    lineOps: {
+      xAxis: {
+        min: 0,
+        max: 20,
+        display: false,
+      },
+      yAxis: {
+        min: 0,
+        max: 1000,
+        display: false,
+      },
+      series:{
+        lineStyle: {
+          width: "5px",
+          smooth: true,
+        },
+        headPoint: {
+          shape:"circle",
+          size: 20,
+          strokeWidth: 5,
+          fillColor: '#ffffff',
+          strokeColor: '#007aff',
+          display: true,
+        },
+        loop:{
+          margin: 2,
+          gradient: true
+        }
+      },
+    },
+    barOps: {
+      xAxis: {
+        min: 0,
+        max: 20,
+        display: false,
+        axisTick: 10,
+      },
+      yAxis: {
+        min: 0,
+        max: 1000,
+      },
+    },
+  },
+}
+```
+
+![en-us_image_0000001275803181](figures/en-us_image_0000001275803181.gif)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
+> The **&lt;chart&gt;** component does not display the value of each point.
+
+
+## Setting the Chart Attributes
+
+In the **options** attribute of the **&lt;chart&gt;** component, you can set the x-axis, y-axis, and data series parameters. In the **datasets** attribute, you can set the line color, fill color, gradient fill color, and drawing point set.
+
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <chart class="chart-data" type="line" options="{{lineOps}}" datasets="{{lineData}}"></chart>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container {
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #F1F3F5;
+}
+.chart-data {
+  width: 700px;
+  height: 600px;
+}
+```
+
+
+```
+/* xxx.js */
+export default {
+  data: {
+    // Line chart data
+    lineData: [
+      {
+        strokeColor: '#0081ff',
+        fillColor: '#cce5ff',  // Fill color
+        data: [463, 250, 251, 254, 431, 354, 225, 396, 295, 328, 491, 205, 313, 275, 475, 553, 491, 380, 357, 416],
+        gradient: true,
+      }
+    ],
+   lineOps: {
+     // X-axis parameters
+      xAxis: {
+        min: 0,
+        max: 20,
+        display: false,
+      },
+     // Y-axis parameters
+      yAxis: {
+        min: 0,
+        max: 1000,
+        display: false,
+      },
+     // Data series parameters
+      series: {
+        // Line style
+        lineStyle: {
+          width: "5px",
+          smooth: true,
+        },
+        // Style and size of the white point at the start of the line
+        headPoint: {
+          shape: "circle",
+          size: 20,
+          strokeWidth: 5,
+          fillColor: '#ffffff',
+          strokeColor: '#007aff',
+          display: true,
+        },
+        // Whether to start drawing again when the screen is looped.
+        loop: {
+          margin: 2,
+          gradient: true
+        }
+      }
+    },
+  },
+}
+```
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
+> - The **options** attribute supports the settings of bar charts and line charts but does not support those of gauge charts.
+> 
+> - The **datasets** attribute supports the datasets for bar charts and line charts but does not support those of gauge charts.
+> 
+> - Only line charts support **series**.
+
+
+## Adding Data
+
+Use the **append** method of the **&lt;chart&gt;** component to dynamically add data.
+
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <stack class="chart-region">
+    <chart class="chart-data" type="line" ref="linechart" options="{{lineOps}}" datasets="{{lineData}}"></chart>
+  </stack>
+  <button value="Add data"onclick="addData"></button>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container {
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #F1F3F5;
+}
+.chart-region {
+  height: 400px;
+  width: 700px;
+}
+.chart-data {
+  width: 700px;
+  height: 600px;
+}
+button {
+  width: 100%;
+  height: 50px;
+  background-color: #F4F2F1;
+  text-color: #0C81F3;
+  margin-top: 30px;
+}
+```
+
+
+```
+// xxx.js
+export default {
+  data: {
+    lineData: [
+      {
+        strokeColor: '#de0b6e',
+        fillColor: '#bb09a3',
+        data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716],
+        gradient: true,
+      }
+    ],
+    lineOps: {
+      xAxis: {
+      min: 0,
+      max: 20,
+      display: false,
+      },
+      yAxis: {
+        min: 0,
+        max: 1000,
+        display: false,
+      },
+      series: {
+        lineStyle: {
+          width: "5px",
+          smooth: true,
+        },
+        headPoint: {
+          shape: "circle",
+          size: 20,
+          strokeWidth: 5,
+          fillColor: '#ffffff',
+          strokeColor: '#f8145c',
+          display: true,
+        },
+        loop: {
+          margin: 2,
+          gradient: true,
+        }
+      }
+    },
+  },
+ addData() {
+    this.$refs.linechart.append({
+      serial: 0,
+        data: [Math.floor(Math.random() * 400) + 200]
+    })
+  }
+}
+```
+
+![en-us_image_0000001275803177](figures/en-us_image_0000001275803177.gif)
+
+
+## Example Scenario
+
+Select the data display status using **&lt;switch&gt;**. When **&lt;switch&gt;** is set to **true**, the timer is used to dynamically display data.
+
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <div class="container">
+    <div class="switch-block">
+      <text class="title">{{ title }} </text>
+      <switch class="switch" showtext="{{ showText }}" allow-scale="{{ allowScale }}"onchange="change">
+      </switch>
+    </div>
+    <tabs class="tabs" index="0" vertical="false" onchange="changes">
+      <tab-content class="tabcontent" scrollable="true">
+        <div>
+          <tabs class="tabs" index="0" vertical="false" onchange="changes">
+            <tab-content class="tabcontent" scrollable="true">
+              <div class="line-class">
+                <div class="bar-block">
+                  <chart class="chart-data" type="line" ref="linechart" options="{{ lineOps }}"   
+                  datasets="{{ lineData }}">
+                  </chart>
+                </div>
+                <div class="bar-block">
+                  <chart class="data-bar" type="bar" id="bar-chart" options="{{ barOps }}"datasets="{{ barData }}">
+                  </chart>
+                </div>
+             </div>
+           </tab-content>
+         </tabs>
+       </div>
+       <div>
+         <div class="container">
+           <list class="todo-wrapper">
+             <list-item for="{{ barData }}" class="todo-item">
+               <text class="todo-title">{{ $item.data }}</text>
+             </list-item>
+           </list>
+           <list class="todo-wrapper">
+             <list-item for="{{ lineData.data }}" class="todo-item">
+               <text class="todo-title">{{ $item.value }}</text>
+             </list-item>
+           </list>
+         </div>
+       </div>
+      </tab-content>
+    </tabs>
+  </div>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container{
+  display:flex;
+  flex-direction:column;
+  background-color: #F1F3F5;
+}
+.line-class{
+  display: flex;
+  flex-direction: column;
+}
+.title{
+  font-size: 40px;
+  margin-left: 40px;
+}
+.switch-block {
+  margin-top: 30px;
+  width: 98%;
+  height: 80px;
+  display: flex;
+  justify-content: space-between;
+}
+.switch{
+  font-size: 40px;
+}
+.bar-block {
+  margin-top: 80px;
+  margin-left: 40px;
+  position: relative;
+  width: 90%;
+  border-radius: 10px;
+  background-color: #25FAB27B;
+  height: 40%;
+  justify-content: center;
+}
+```
+
+
+```
+// xxx.js
+export default {
+  data: {
+    interval: null,
+    title: "Data Display",
+    allowScale: true,
+    dataLength: 30,
+    barGroup: 3,
+    lineData: null,
+    lineOps: {
+      xAxis: {
+        min: 0,
+        max: 5
+      },
+      yAxis: {
+        min: 0,
+        max: 100
+      },
+      series: {
+        lineStyle: {
+        width: '1px',
+      },
+        headPoint: {
+          shape: 'circle',
+          size: 10,
+          strokeWidth: 2,
+          fillColor: '#ffffff',
+          strokeColor: '#8477DF'
+        },
+        loop: {
+          margin: 2
+        }
+      }
+    },
+    barData: [
+      {
+        fillColor: '#97CF0A2C',
+        data: [20, 20,40, 56]
+      },
+      {
+        fillColor: '#6D0A7ACF',
+        data: [52, 40, 2, 67]
+      },
+      {
+        fillColor: '#6A0ACFA1',
+        data: [56, 2, 77, 40]
+      }
+    ],
+    barOps: {
+      xAxis: {
+        min: 0,
+        max: 20,
+        axisTick: 5
+      },
+      yAxis: {
+        min: 0,
+        max: 100
+      }
+    }
+  },
+  onInit() {
+    this.changeLine();
+  },
+  change(e) {
+    if (e.checked) {
+      this.interval = setInterval(() => {
+        this.changeLine();
+        this.changeBar();
+      }, 1000)
+    } else {
+      clearInterval(this.interval);
+    }
+  },
+  changeLine() {
+    var dataArray = [];
+    for (var i = 0; i < this.dataLength; i++) {
+      var nowValue = Math.floor(Math.random() * 99 + 1);
+      var obj = {
+        "value": nowValue,
+        "description": nowValue + "",
+        "textLocation": "top",
+        "textColor": "#CDCACA",
+        "pointStyle": {
+          "shape": "circle",
+          "size": 5,
+          "fillColor": "#CF0A2C",
+          "strokeColor": "#CF0A2C"
+        }
+      };
+      dataArray.push(obj);
+    }
+    this.lineData = [
+      {
+        strokeColor: '#0081ff',
+        fillColor: '#FF07CDC4',
+        data: dataArray,
+        gradient: true,
+      }
+    ]
+  },
+  changeBar() {
+    for (var i = 0;i < this.barGroup; i++) {
+      var dataArray = this.barData[i].data;
+      for (var j = 0;j < 4; j++) {
+        dataArray[j] = Math.floor(Math.random() * 99 + 1);
+      }
+    }
+    this.barData = this.barData.splice(0, this.barGroup + 1);
+  },
+  changes(e) {
+    console.log("Tab index: " + e.index);
+  },
+}
+
+```
+
+![en-us_image_0000001232162328](figures/en-us_image_0000001232162328.gif)

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

 # <dialog> Development
 
 
-The <dialog> component is custom pop-up container for showing critical information or calling for an action. For details, see [dialog](../reference/arkui-js/js-components-container-dialog.md).
+The **<dialog>** component is custom pop-up container for showing critical information or calling for an action. For details, see [dialog](../reference/arkui-js/js-components-container-dialog.md).
 
 
 ## Creating a <dialog> Component
 
-  Create a <dialog> component in the .hml file under pages/index and add <button> components to trigger the <dialog>. The <dialog> component supports only the width, height, margin, margin-[left|top|right|bottom], and margin-[start|end] styles.
+  Create a **<dialog>** component in the .hml file under **pages/index** and add **<button>** components to trigger the **<dialog>**. The **<dialog>** component supports only the **width**, **height**, **margin**, **margin-[left|top|right|bottom]**, and **margin-[start|end]** styles.
 
 ```
 <!-- xxx.hml -->
 <div class="doc-page">
-  <dialog class="dialogClass" id="dialogId"><div class="content">
+  <dialog class="dialogClass" id="dialogId">
+<div class="content" dragable="true">
       <text>this is a dialog</text>
     </div>
-  </dialog>
+</dialog>
   <button value="click me" onclick="openDialog"></button>
 </div>
 ```
@@ -23,6 +24,8 @@ The &lt;dialog&gt; component is custom pop-up container for showing critical inf
 ```
 /* xxx.css */
 .doc-page {
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   align-items: center;
   justify-content: center;
@@ -67,7 +70,9 @@ export default {
 
 ## Setting Dialog Box Response
 
-Add a cancel event that is triggered when a user touches a non-dialog area to cancel the pop-up dialog box. Add the show and close methods to display and close the dialog box, respectively.
+Add a **cancel** event that is triggered when a user touches a non-dialog area to cancel the pop-up dialog box. Add the **show** and **close** methods to display and close the dialog box, respectively.
+
+
 
 ```
 <!-- xxx.hml -->
@@ -82,9 +87,13 @@ Add a cancel event that is triggered when a user touches a non-dialog area to ca
 </div>
 ```
 
+
+
 ```
 /* xxx.css */
 .doc-page {
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   align-items: center;
   justify-content: center;
@@ -113,6 +122,8 @@ button{
 }
 ```
 
+
+
 ```
 /* xxx.js */
 import prompt from '@system.prompt';
@@ -133,18 +144,20 @@ export default {
 ![en-us_image_0000001223287720](figures/en-us_image_0000001223287720.gif)
 
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
 > - This component supports only one child component.
 > 
-> - Attributes and styles of a &lt;dialog&gt; component cannot be dynamically updated.
+> - Attributes and styles of a **&lt;dialog&gt;** component cannot be dynamically updated.
 > 
-> - The &lt;dialog&gt; component does not support the focusable and click-effect attributes.
+> - The **&lt;dialog&gt;** component does not support the **focusable** and **click-effect** attributes.
 
 
 ## Example Scenario
 
 
-Use the &lt;dialog&gt; component to implement a schedule. When the dialog box is open, use the [&lt;textarea&gt;](../reference/arkui-js/js-components-basic-textarea.md) component to add an event and touch the OK button to obtain the current time and save the input text. The events in the calendar are displayed in a list.
+Use the **&lt;dialog&gt;** component to implement a schedule. When the dialog box is open, use the [**&lt;textarea&gt;**](../reference/arkui-js/js-components-basic-textarea.md) component to add an event and touch the OK button to obtain the current time and save the input text. The events in the calendar are displayed in a list.
+
+
 
 ```
 <!-- xxx.hml -->
@@ -180,6 +193,8 @@ Use the &lt;dialog&gt; component to implement a schedule. When the dialog box is
 </div>
 ```
 
+
+
 ```
 /* xxx.css */
 .doc-page {
@@ -248,6 +263,8 @@ Use the &lt;dialog&gt; component to implement a schedule. When the dialog box is
 }
 ```
 
+
+
 ```
 /* xxx.js */
 var info = null;

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

 # <form> Development
 
 
-The <form> component allows the content in [<input>](../reference/arkui-js/js-components-basic-input.md)components to be submitted and reset. For details, see [form](../reference/arkui-js/js-components-container-form.md).
+The <form> component allows the content in [<input>](../reference/arkui-js/js-components-basic-input.md) components to be submitted and reset. For details, see [form](../reference/arkui-js/js-components-container-form.md).
 
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
 > This component is supported since API version 6.
 
 
 ## Creating a <form> Component
 
-  Create a <form> component in the .hml file under pages/index.
+  Create a **<form>** component in the .hml file under **pages/index**.
 
 ```
 <!-- xxx.hml -->
 <div class="container">
   <form> <input type="text" style="width:80%"></input>
-  </form>
+</form>
 </div>
 ```
 
@@ -24,6 +24,8 @@ The &lt;form&gt; component allows the content in [&lt;input&gt;](../reference/ar
 ```
 /* xxx.css */
 .container {
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -36,7 +38,7 @@ The &lt;form&gt; component allows the content in [&lt;input&gt;](../reference/ar
 
 ## Zooming In or Out on a Form
 
-  To implement the zoom effect after a form is clicked, add the click-effect attribute to the &lt;form&gt; component. For values of click-effect, see [Universal Attributes](../reference/arkui-js/js-components-common-attributes.md).
+  To implement the zoom effect after a form is clicked, add the **click-effect** attribute to the **&lt;form&gt;** component. For values of **click-effect**, see [Universal Attributes](../reference/arkui-js/js-components-common-attributes.md).
 
 ```
 <!-- xxx.hml -->
@@ -48,10 +50,23 @@ The &lt;form&gt; component allows the content in [&lt;input&gt;](../reference/ar
 ```
 
 
-## Setting the Form Style
+## Setting Form Styles
+
+
+Add the **background-color** and **border** attributes.
+
+
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <form  id="formId" class="formClass" click-effect="spring-large">
+    <input type="text"></input>  
+  </form>
+</div>
+```
 
 
-Add the background-color and border attributes.
 
 ```
 /* xxx.css */
@@ -63,8 +78,7 @@ Add the background-color and border attributes.
 }
 .formClass{
   width: 80%;
-  padding: 10px;
-  border: 1px solid #c3d3e7;
+  height: 20%;
 }
 ```
 
@@ -74,14 +88,14 @@ Add the background-color and border attributes.
 
 ## Adding Response Events
 
-  To submit or reset a form, add the submit and reset events.
+  To submit or reset a form, add the **submit** and **reset** events.
 
 ```
 <!-- xxx.hml -->
-<div class="container" style="background-color:#F1F3F5;">
-  <form onsubmit='onSubmit' onreset='onReset' style="justify-content: center; align-items: center;text-align: center;">
-    <div style="flex-direction: column;justify-content: center;align-self: center;">
-      <div style="justify-content: center; align-items: center;">
+<div class="container">
+  <form onsubmit='onSubmit' onreset='onReset' class="form">
+    
+    <div style="justify-content: center; width: 100%;">
       <label>Option 1</label>
       <input type='radio' name='radioGroup' value='radio1'></input>
       <label>Option 2</label>
@@ -91,7 +105,7 @@ Add the background-color and border attributes.
       <input type="submit" value="Submit" style="width:100px; margin-right:20px;" ></input>
       <input type="reset" value="Reset" style="width:100px;"></input>
     </div>
-    </div> 
+    
   </form>
 </div>
 ```
@@ -122,7 +136,7 @@ export default{
 
 Select an option and submit or reset the form data.
 
-Create [&lt;input&gt;](../reference/arkui-js/js-components-basic-input.md) (en-us_topic_0000001173324647.xml) components, set their type attribute to checkbox and radio, and use the onsubmit and onreset events of the &lt;form&gt; component to submit and reset the form data.
+Create [&lt;input&gt;](../reference/arkui-js/js-components-basic-input.md) components, set their **type** attribute to **checkbox** and **radio**, and use the **onsubmit** and **onreset** events of the **&lt;form&gt;** component to submit and reset the form data.
 
 
 ```

en/application-dev/ui/ui-js-components-image-animator.md

+# <image-animator> Development
+
+
+The **<image-animator>** component applies an animation to images. For details, see [image-animator](../reference/arkui-js/js-components-basic-image-animator.md).
+
+
+## Creating an <image-animator> Component
+
+In the **pages/index** directory, create an **<image-animator>** component in the .hml file, define the component style in the .css file, and reference an image in the .js file.
+
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <image-animator class="animator" images="{{frames}}" duration="3s"/>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container {
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #F1F3F5;
+}
+.animator {
+  width: 500px;
+  height: 500px;
+}
+```
+
+
+```
+/* index.js */
+export default {
+  data: {
+    frames: [
+      {
+        src: "/common/landscape1.jpg",
+      },
+      {
+        src: "/common/landscape2.jpg",
+      }
+    ],
+  },
+};
+```
+
+![en-us_image_0000001275922969](figures/en-us_image_0000001275922969.gif)
+
+
+## Setting the &lt;image-animator&gt; Attributes
+
+Add the **iteration** (number of times the animation is played), **reverse** (whether the animation plays backward), **fixedsize** (whether the image size is fixed to the component size), **duration** (duration of the animation), and **fillmode** (style of the target when the animation is not playing) attributes.
+
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <image-animator class="animator" fixedsize="false" iteration='2' reverse="false" ref="animator" fillmode="none" images="{{frames}}"duration="5s" />
+</div>
+```
+
+
+```
+/* xxx.css */
+.container {
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  background-color: #F1F3F5;
+}
+.animator {
+  width: 500px;
+  height: 500px;
+}
+```
+
+
+```
+/* index.js */
+export default {
+  data: {
+    frames: [
+      {
+        src: 'common/landscape1.jpg',
+        width: '250px',
+        height: '250px',
+        left: '150px',
+        top: '50px',
+      },
+      {
+        src: 'common/landscape2.jpg',
+        width: '300px',
+        height: '300px',
+        left: '150px',
+        top: '100px',
+      },
+      {
+        src: 'common/landscape1.jpg',
+        width: '350px',
+        height: '350px',
+        left: '150px',
+        top: '150px',
+      },
+      {
+        src: 'common/landscape2.jpg',
+        width: '400px',
+        height: '400px',
+        left: '150px',
+        top: '200px',
+      },
+      {
+        src: 'common/landscape3.jpg',
+        width: '450px',
+        height: '450px',
+        left: '150px',
+        top: '250px',
+      },
+      {
+        src: 'common/landscape4.jpg',
+        width: '500px',
+        height: '500px',
+        left: '150px',
+        top: '300px',
+      },
+    ],
+  },
+};
+```
+
+![en-us_image_0000001276003481](figures/en-us_image_0000001276003481.gif)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
+> - If the **duration** attribute is set in the **images** attribute, the **duration** attribute set in the **&lt;image-animator&gt;** component is invalid.
+> 
+> - If **fixedsize** is set to **true**, the **width**, **height**, **top**, and **left** settings in **images** will not take effect.
+> 
+> - Setting **reverse** to **false** indicates that images are played from the first one to the last one. Setting **reverse** to **true** indicates that images are played from the last one to the first one.
+
+
+## Binding Events
+
+Add the start, pause, stop, and resume events to the **&lt;image-animator&gt;** component. Specifically, the start event is triggered when the image animator starts playing; the pause event is triggered when the image animator is clicked; the resume event is triggered when the image animator is pressed and held; the stop event is triggered when the image animator stops playing.
+
+
+```
+<!-- xxx.hml -->
+<div class="doc-page">
+  <image-animator class="img" id="img" images="{{imginfo}}" iteration="1" duration="10s" onstart="popstart" onpause="poppause" 
+  onstop="popstop" onresume="popresume" onlongpress="setresume" onclick="setpause">
+  </image-animator>
+</div>
+```
+
+
+```
+/* xxx.css */
+.doc-page {
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+   background-color: #F1F3F5;
+}
+.img {
+  width: 600px;
+  height: 600px;
+  border: 3px solid orange;
+}
+```
+
+
+```
+/* index.js */
+import prompt from '@system.prompt';
+export default {
+  data: {
+    imginfo: [
+      {
+        src: 'common/landscape1.jpg',
+      },{
+        src: 'common/landscape2.jpg',
+      },{
+        src: 'common/landscape3.jpg',
+      },{
+        src: 'common/landscape4.jpg',
+      }
+    ],
+  },
+  onInit() {
+  },
+  setpause(e) {
+    this.$element('img').pause()
+  },
+  setresume(e) {
+    this.$element('img').resume()
+  },
+  popstart(e) {
+    prompt.showToast({
+      message: 'Started.'
+    })
+  },
+  poppause(e) {
+    prompt.showToast({
+      message: 'Paused.'
+    })
+  },
+  popstop(e) {
+    prompt.showToast({
+      message: 'Stopped.'
+    })
+  },
+  popresume(e) {
+    prompt.showToast({
+      message: 'Resumed.'
+    })
+  }
+}
+```
+
+![en-us_image_0000001231843076](figures/en-us_image_0000001231843076.gif)
+
+
+## Example Scenario
+
+You can click the start or stop button to change the image animation status.
+
+Call the start, pause, stop, and resume methods to start, pause, stop, and resume the image animation, and call the **getState** method to check the image animation status.
+
+
+```
+<!-- xxx.hml -->
+<div class="doc-page">
+  <image-animator class="img" id="img" images="{{imginfo}}" iteration="2" reverse="{{rev}}" duration="10s">
+  </image-animator>
+  <div style="width: 700px;height:450px;margin-top: 40px;flex-direction:column;justify-content:space-around;">
+    <div class="container">
+      <button type="capsule" value="Start" onclick="startimg"></button>
+      <button type="capsule" value="Pause" onclick="pauseimg"></button>
+    </div>
+    <div class="container">
+      <button type="capsule" value="Stop" onclick="stopimg"></button>
+      <button type="capsule" value="Resume" onclick="resumeimg"></button>
+    </div>
+    <div class="container">
+      <button type="capsule" value="Get Status" onclick="getimgstate"></button>
+      <button type="capsule" value="{{revVal}}" onclick="revimg"></button>
+    </div>
+  </div>
+</div>
+```
+
+
+```
+/* xxx.css */
+.doc-page {
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #F1F3F5;
+}
+.img {
+  width: 600px;
+  height: 600px;
+  border: 3px solid orange;
+}
+button{
+  width: 260px
+}
+.container {
+  width: 100%;
+  height: 120px;
+  align-items: center;
+  justify-content: space-around;
+}
+```
+
+
+```
+/* index.js */
+import prompt from '@system.prompt';
+export default {
+  data: {
+    rev:false,
+    imginfo: [
+      {
+        src: 'common/landscape1.jpg',
+      },{
+        src: 'common/landscape2.jpg',
+      },{
+        src: 'common/landscape3.jpg',
+      },{
+        src: 'common/landscape4.jpg',
+      }
+    ],
+    revVal:'Reverse'
+  },
+  onInit() {
+  },
+  startimg(e) {
+    this.$element('img').start()
+  },
+  pauseimg(e) {
+    this.$element('img').pause()
+  },
+  stopimg(e) {
+    this.$element('img').stop()
+  },
+  resumeimg(e) {
+    this.$element('img').resume()
+  },
+  getimgstate(e) {
+    prompt.showToast({
+      message: 'Current state:' + this.$element('img').getState()
+    })
+  },
+  revimg(e) {
+    this.rev = !this.rev
+    if (this.rev) {
+      this.revVal ='Play Forward'
+    } else {
+      this.revVal ='Reverse'
+    }
+  }
+}
+```
+
+![en-us_image_0000001276162717](figures/en-us_image_0000001276162717.gif)

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

 # <image> Development
 
 
-The <image> component is used to render and display images. For details, see [image](../reference/arkui-js/js-components-basic-image.md).
+The **<image>** component is used to render and display images. For details, see [image](../reference/arkui-js/js-components-basic-image.md).
 
 
 ## Creating an <image> Component
 
-  Create an <image> component in the .hml file under pages/index.
+  Create an **<image>** component in the .hml file under **pages/index**.
 
 ```
 <!-- index.hml -->
 <div class="container">
-  <image src="common/images/bg-tv.jpg"> </image>
+  <image style="height: 30%;" src="common/images/bg-tv.jpg"> </image>
 </div>
 ```
 
@@ -19,6 +19,8 @@ The &lt;image&gt; component is used to render and display images. For details, s
 ```
 /* xxx.css */
 .container {
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -31,7 +33,9 @@ The &lt;image&gt; component is used to render and display images. For details, s
 
 ## Setting the Image Style
 
-Set the width, height, and object-fit attributes to define the width, height, and scale type of an image.
+Set the **width**, **height**, and **object-fit** attributes to define the width, height, and scale type of an image.
+
+
 
 ```
 <!-- index.hml -->
@@ -40,16 +44,21 @@ Set the width, height, and object-fit attributes to define the width, height, an
 </div>
 ```
 
+
+
 ```
 /* xxx.css */
 .container {
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 background-color:#F1F3F5;
 }
 image{
-  width: 80%;  height: 500px;
+ width: 80%;
+  height: 500px;
   border: 5px solid saddlebrown;
   border-radius: 20px;
  object-fit: contain;
@@ -59,12 +68,13 @@ image{
 ```
 
 
+
 ![en-us_image_0000001222807796](figures/en-us_image_0000001222807796.png)
 
 
 ## Loading Images
 
-When an image is successfully loaded, the complete event is triggered, and the loaded image is returned. If an exception occurs during image loading, the error event is triggered, and the image loading failure is printed.
+When an image is successfully loaded, the **complete** event is triggered, and the loaded image is returned. If an exception occurs during image loading, the **error** event is triggered, and the image loading failure is printed.
 
 
 ```
@@ -83,6 +93,8 @@ When an image is successfully loaded, the complete event is triggered, and the l
 ```
 /* xxx.css */
 .container{
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   justify-content: center;
   align-self: center;
@@ -123,7 +135,7 @@ export default {
 
 ## Example Scenario
 
-  In this example you touch and hold an image to gradually hide it. After the image is completely hidden, it will show in its original setting. Set a setInterval timer to change the image opacity at a specified interval so that it is hidden gradually. When the opacity changes to 0, the timer is cleared and the opacity is set to 1.
+  In this example you touch and hold an image to gradually hide it. After the image is completely hidden, it will show in its original setting. Set a **setInterval** timer to change the image opacity at a specified interval so that it is hidden gradually. When the opacity changes to **0**, the timer is cleared and the opacity is set to **1**.
 
 ```
 <!-- index.hml -->
@@ -143,6 +155,8 @@ export default {
 ```
 /* xxx.css */
 .page-container {
+  width: 100%;
+  height: 100%;
   flex-direction:column;
   align-self: center;
   justify-content: center;

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

-# <input> Development
+# &lt;input&gt; Development
 
 
-The <input> component provides an interactive way to receive user input of various types, including date, checkbox, and button. For details, see [input](../reference/arkui-js/js-components-basic-input.md).
+The **&lt;input&gt;** component provides an interactive way to receive user input of various types, including **date**, **checkbox**, and **button**. For details, see [input](../reference/arkui-js/js-components-basic-input.md).
 
 
-## Creating an <input> Component
+## Creating an &lt;input&gt; Component
 
-Create an <input> component in the .hml file under pages/index.
+Create an **&lt;input&gt;** component in the .hml file under **pages/index**.
 
 
 ```
 <!-- xxx.hml -->
 <div class="container">       
-  <input type="text">             Please enter the content  </input>
+<input type="text">         
+    Please enter the content
+  </input>
 </div>
 ```
 
@@ -20,6 +22,8 @@ Create an <input> component in the .hml file under pages/index.
 ```
 /* xxx.css */
 .container {
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -32,7 +36,7 @@ Create an <input> component in the .hml file under pages/index.
 
 ## Setting the Input Type
 
-Set the type attribute of the <input> component to button, date, or any of the supported values.
+Set the **type** attribute of the **&lt;input&gt;** component to **button**, **date**, or any of the supported values.
 
 
 ```
@@ -59,6 +63,8 @@ Set the type attribute of the <input> component to button, date, or any of the s
 ```
 /* xxx.css */
 .container {
+  width: 100%;
+  height: 100%;
   align-items: center;
   flex-direction: column;
   justify-content: center;
@@ -102,15 +108,15 @@ export default {
 ![en-us_image_0000001223287672](figures/en-us_image_0000001223287672.gif)
 
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
-> - For wearables, the input type can only be button, radio, or checkbox.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
+> - For wearables, the input type can only be **button**, **radio**, or **checkbox**.
 > 
-> - The settings of checked take effect only when the input type is set to checkbox or radio. The default value of checked is false.
+> - The settings of **checked** take effect only when the input type is set to **checkbox** or **radio**. The default value of **checked** is **false**.
 
 
 ## Event Binding
 
-  Add the search and translate events to the <input> component.
+  Add the **search** and **translate** events to the **&lt;input&gt;** component.
 
 ```
 <!-- xxx.hml -->
@@ -128,6 +134,7 @@ export default {
 /* xxx.css */
 .content {
   width: 100%;
+  height: 100%;
   flex-direction: column;
   align-items: center;
   justify-content: center;
@@ -170,7 +177,7 @@ export default {
 
 ## Setting the Input Error Message
 
-Add the showError method to the <input> component to display an error message in the event of incorrect input.
+Add the **showError** method to the **&lt;input&gt;** component to display an error message in the event of incorrect input.
 
 
 ```
@@ -187,6 +194,7 @@ Add the showError method to the <input> component to display an error message in
 /* xxx.css */
 .content {
   width: 100%;
+  height: 100%;
   flex-direction: column;
   align-items: center;
   justify-content: center;
@@ -219,9 +227,13 @@ import prompt from '@system.prompt'
    }, 
    buttonClick(e){ 
      if(this.value.length > 6){ 
-       this.$element("input").showError({        error:  'Up to 6 characters are allowed.'       }); 
+       this.$element("input").showError({ 
+         error:  'Up to 6 characters are allowed.' 
+        }); 
       }else if(this.value.length == 0){ 
-        this.$element("input").showError({         error:this.value + 'This field cannot be left empty.'       }); 
+       this.$element("input").showError({ 
+          error:this.value + 'This field cannot be left empty.' 
+        }); 
       }else{ 
         prompt.showToast({ 
           message: "success " 
@@ -233,14 +245,14 @@ import prompt from '@system.prompt'
 
 ![en-us_image_0000001223127708](figures/en-us_image_0000001223127708.gif)
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
-> - This method is available when the input type is set to text, email, date, time, number, or password.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
+> - This method is available when the input type is set to **text**, **email**, **date**, **time**, **number**, or **password**.
 
 
 ## Example Scenario
 
 
-Enter information by using the <input> component of the type that suits your needs.
+Enter information by using the **&lt;input&gt;** component of the type that suits your needs.
 
 
 

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

 # <list> Development
 
 
-The <list> component provides a list container that presents a series of list items arranged in a column with the same width. Lists can be used for presenting the same type of data in a multiple and coherent row style. For details, see [list](../reference/arkui-js/js-components-container-list.md).
+The **<list>** component provides a list container that presents a series of list items arranged in a column with the same width. Lists can be used for presenting the same type of data in a multiple and coherent row style. For details, see [list](../reference/arkui-js/js-components-container-list.md).
 
 
 ## Creating a <list> Component
 
-Create a <list> component in the .hml file under pages/index.
+Create a **<list>** component in the .hml file under **pages/index**.
 
 
 ```
 <!-- index.hml -->
 <div class="container"> 
- <list>    <list-item class="listItem"></list-item>
+ <list><list-item class="listItem"></list-item>
    <list-item class="listItem"></list-item>
    <list-item class="listItem"></list-item>
    <list-item class="listItem"></list-item>
@@ -24,6 +24,8 @@ Create a &lt;list&gt; component in the .hml file under pages/index.
 ```
 /* xxx.css */
 .container {
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   align-items: center;
   background-color: #F1F3F5;
@@ -37,21 +39,21 @@ Create a &lt;list&gt; component in the .hml file under pages/index.
 
 ![en-us_image_0000001223287680](figures/en-us_image_0000001223287680.png)
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
-> - &lt;list-item-group&gt; is a child component of the &lt;list&gt; component and is used to group items in a list. It can have a &lt;list-item&gt; nested inside, but not &lt;list&gt;.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
+> - **&lt;list-item-group&gt;** is a child component of the **&lt;list&gt;** component and is used to group items in a list. It can have a **&lt;list-item&gt;** nested inside, but not **&lt;list&gt;**.
 > 
-> - &lt;list-item&gt; is a child component of the &lt;list&gt; component and is used to display items in a list.
+> - **&lt;list-item&gt;** is a child component of the **&lt;list&gt;** component and is used to display items in a list.
 
 
 ## Adding a Scrollbar
 
-To display a scrollbar on the right side of the screen, set scrollbar to on. The side scrollbar can be used to scroll a long list or the screen up or down.
+To display a scrollbar on the right side of the screen, set **scrollbar** to **on**. The side scrollbar can be used to scroll a long list or the screen up or down.
 
 
 ```
 <!-- index.hml -->
 <div class="container">
-  <list class="listCss" scrollbar="on" >
+  <list class="listCss" scrollbar="on">
     <list-item class="listItem"></list-item>
     <list-item class="listItem"></list-item>
     <list-item class="listItem"></list-item>
@@ -66,6 +68,8 @@ To display a scrollbar on the right side of the screen, set scrollbar to on. The
 ```
 /* index.css */
 .container {
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   background-color: #F1F3F5;
 }
@@ -86,7 +90,7 @@ To display a scrollbar on the right side of the screen, set scrollbar to on. The
 
 ## Adding a Side Index Bar
 
-Set a custom indexer component to add an index bar at the right boundary of a list. By default, an alphabetical indexer is used.
+Set a custom **indexer** component to add an index bar at the right boundary of a list. By default, an alphabetical indexer is used.
 
 
 ```
@@ -114,15 +118,15 @@ Set a custom indexer component to add an index bar at the right boundary of a li
 
 ![en-us_image_0000001223127716](figures/en-us_image_0000001223127716.png)
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
-> - This indexer attribute is valid only when flex-direction is set to column and columns is set to 1.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
+> - This **indexer** attribute is valid only when **flex-direction** is set to **column** and **columns** is set to **1**.
 > 
-> - You must include "\#" when using a customized indexer.
+> - You must include **"\#"** when using a customized indexer.
 
 
 ## Collapsing or Expanding a List
 
-To allow a &lt;list&gt; component to collapse and expand, add groupcollapse and groupexpand events.
+To allow a **&lt;list&gt;** component to collapse and expand, add **groupcollapse** and **groupexpand** events.
 
 
 ```
@@ -200,14 +204,16 @@ export default {
 
 ![en-us_image_0000001267887845](figures/en-us_image_0000001267887845.gif)
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
-> - The groupcollapse and groupexpand events can be used only by the list-item-group component.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
+> - The **groupcollapse** and **groupexpand** events can be used only by the **list-item-group** component.
 
 
 ## Example Scenario
 
 Search for contacts by using an alphabetical indexer.
 
+
+
 ```
 <!-- index.hml -->
 <div class="doc-page"> 
@@ -219,7 +225,7 @@ Search for contacts by using an alphabetical indexer.
       <div class="container"> 
         <div class="in-container"> 
           <text class="name">{{$item.name}}</text> 
-          <text class="number">18888888888</text> 
+          <text class="phone">18888888888</text> 
         </div> 
       </div> 
     </list-item> 
@@ -232,6 +238,8 @@ Search for contacts by using an alphabetical indexer.
 </div>
 ```
 
+
+
 ```
 /* index.css */
 .doc-page {
@@ -251,7 +259,7 @@ Search for contacts by using an alphabetical indexer.
   color: #000000;
   font-size: 39px;
 }
-.number {
+.phone {
   color: black;
   font-size: 25px;
 }
@@ -265,6 +273,8 @@ Search for contacts by using an alphabetical indexer.
 }
 ```
 
+
+
 ```
 // xxx.js
 export default { 

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

+# <marquee> Development
+
+
+The **<marquee>** component displays single-line scrolling text. For details, see [marquee](../reference/arkui-js/js-components-basic-marquee.md).
+
+
+## Creating a <marquee> Component
+
+Create a **<marquee>** component in the .hml file under **pages/index**.
+
+
+```
+<!-- xxx.hml -->
+<div class="container">
+ <marquee style="width: 100%;height: 80px; color: #ffffff; background-color: #0820ef;padding-left: 200px;">This is a marquee.</marquee>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container {
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #F1F3F5;
+}
+```
+
+![en-us_image_0000001231683172](figures/en-us_image_0000001231683172.png)
+
+
+## Setting Attributes and Styles
+
+Set the **color** and **font-weight** attributes to define the color, font weight, and border style of marquee text.
+
+
+```
+<!-- xxx.hml -->
+<div class="container">
+ <marquee class="customMarquee">It's a racing lamp.</marquee>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container {
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #F1F3F5;
+}
+.customMarquee {
+  width: 100%;
+  height: 80px;
+  padding: 10px;
+  margin: 20px;
+  border: 4px solid #6712f1;
+  border-radius: 20px;
+  font-size: 40px;
+ color: #ffffff;
+  font-weight: bolder;
+  font-family: serif;
+  background-color: #1567f3;
+}
+```
+
+![en-us_image_0000001275803193](figures/en-us_image_0000001275803193.png)
+
+Set the **scrollamount**, **loop**, and **direction** attributes to define the maximum scroll length, number of scrolling times, and text scrolling direction.
+
+
+```
+<!-- xxx.hml -->
+<div class="tutorial-page">
+  <div class="mymarquee">
+    <marquee loop="{{loopval}}" scrollamount="{{scroll}}" direction="{{isleft}}" class="marqueetext" id="testmarquee" onclick="makestart">
+      It's a racing lamp
+    </marquee>
+  </div>
+  <div style="width: 600px;height: 150px;flex-direction: row;justify-content: space-around;">
+    <button onclick="setleft"  value="left"></button>
+    <button onclick="setright" value="right"></button>
+  </div>
+</div>
+```
+
+
+```
+/* xxx.css */
+.tutorial-page {
+  width: 750px;
+  height: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #F1F3F5;
+}
+.marqueetext {
+  color: #ffffff;
+  font-family: serif;
+  font-size: 37px;
+}
+.mymarquee {
+  margin-top: 20px;
+  width:100%;
+  height: 100px;
+  margin-left: 50px;
+  margin-right: 50px;
+  border: 1px solid #6712f1;
+  background-color: #1567f3;
+  border-radius: 15px;
+  align-items: center;
+}
+button{
+  width: 200px;
+  height: 80px;
+  margin-top: 100px;
+}
+```
+
+
+```
+// xxx.js
+export default {
+  private: {
+    loopval: -1,
+    scroll: 10,
+    isleft: "left",
+  },
+  onInit(){
+  },
+  setleft(e) {
+    this.isleft = "left"
+  },
+  setright(e) {
+    this.isleft = "right"
+  },
+  makestart(e) {
+    this.$element('testmarquee').start()
+  }
+}
+```
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
+> When the value of **loop** is less than or equal to 0, the marquee scrolls continuously. If **loop** is not set, the default value **-1** is used.
+
+![en-us_image_0000001276162773](figures/en-us_image_0000001276162773.gif)
+
+
+## Example Scenario
+
+In this example, you can control the scrolling of marquee text.
+
+Set **loop** to **1**. When scrolling ends, trigger a **finish** event to increase the number of scrolling times by 1 and change the font color to a random color. Then, call the **start** method to start scrolling again.
+
+
+```
+<!-- xxx.hml -->
+<div class="tutorial-page">
+  <div class="mymarquee">
+    <marquee  style="color: {{color1}}" loop="{{loopval}}" scrollamount="{{scroll}}" direction="{{isleft}}" class="marqueetext" 
+    id="testmarquee" onfinish="setfinish">
+      It's a racing lamp
+    </marquee>
+  </div>
+  <div style="width: 600px;height: 150px;flex-direction: row;justify-content: space-around;">
+    <button onclick="makestart"  value="start"></button>
+    <button onclick="makestop" value="stop"></button>
+  </div>
+</div>
+```
+
+
+```
+/* xxx.css */
+.tutorial-page {
+  width: 750px;
+  height: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.marqueetext {
+  font-size: 37px;
+}
+.mymarquee {
+  margin-top: 20px;
+  width:100%;
+  height: 100px;
+  margin-left: 50px;
+  margin-right: 50px;
+  border: 1px solid #dc0f27;
+  border-radius: 15px;
+  align-items: center;
+}
+button{
+  width: 200px;
+  height: 80px;
+  margin-top: 100px;
+}
+```
+
+
+```
+// xxx.js
+export default {
+  private: {
+    loopval: 1,
+    scroll: 8,
+    color1: 'red'
+  },
+  onInit(){
+  },
+  setfinish(e) {
+    this.loopval=  this.loopval + 1,
+    this.r = Math.floor(Math.random()*255),
+    this.g = Math.floor(Math.random()*255),
+    this.b = Math.floor(Math.random()*255),
+    this.color1 = 'rgba('+ this.r +','+ this.g +','+ this.b +',0.8)',
+    this.$element('testmarquee').start(),
+    this.loopval=  this.loopval - 1
+  },
+  makestart(e) {
+    this.$element('testmarquee').start()
+  },
+  makestop(e) {
+    this.$element('testmarquee').stop()
+  }
+}
+```
+
+![en-us_image_0000001276003541](figures/en-us_image_0000001276003541.gif)

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

+# <menu> Development
+
+
+The <menu> component serves as a temporary pop-up window to display operations that users can perform. For details, see [menu](../reference/arkui-js/js-components-basic-menu.md).
+
+
+## Creating a <menu> Component
+
+Create a **<menu>** component in the .hml file under **pages/index** and add the **target**, **type**, and **title** attributes.
+
+
+```
+<!-- xxx.hml-->
+<div class="container">
+  <text class="title-text" id="textId">show menu</text>
+  <menu target="textId" type="click" title="title">
+    <option value="Item 1">Item 1</option>
+    <option value="Item 2">Item 2</option>
+    <option value="Item 3">Item 3</option>
+  </menu>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container{
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  background-color: #F1F3F5;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+.title-text{
+  font-size: 35px;
+}
+```
+
+![en-us_image_0000001232162284](figures/en-us_image_0000001232162284.gif)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
+> - The **&lt;menu&gt;** component supports only the [option](../reference/arkui-js/js-components-basic-option.md) child component.
+> 
+> - The **&lt;menu&gt;** component does not support the **focusable** and **disabled** attributes.
+
+
+## Setting Styles
+
+Set the style for the **&lt;menu&gt;** component, such as the font color, size, and character spacing.
+
+
+```
+<!-- xxx.hml-->
+<div class="container">
+  <text class="title-text" id="textId">show menu</text>
+  <menu target="textId" type="click" title="title">
+    <option value="Item 1">Item 1</option>
+    <option value="Item 2">Item 2</option>
+    <option value="Item 3">Item 3</option>
+  </menu>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container{
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  background-color: #F1F3F5;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+.title-text{
+  font-size: 35px;
+  background-color: #5a5aee;
+  color: white;
+  width: 70%;
+  text-align: center;
+  height: 85px;
+  border-radius: 12px;
+}
+menu{
+  text-color: blue;
+  font-size: 35px;
+  letter-spacing: 2px;
+}
+option{
+  color: #6a6aef;
+  font-size: 30px;
+}
+```
+
+![en-us_image_0000001275803137](figures/en-us_image_0000001275803137.gif)
+
+
+## Binding Events
+
+Bind the **&lt;menu&gt;** component with the **onselected** event (triggered when a value in the menu is selected) and the **oncancel** event (triggered when an operation is canceled). Click the **&lt;text&gt;** component to call the **show** method to set the coordinates of the **&lt;menu&gt;** component.
+
+
+```
+<!-- xxx.hml-->
+<div class="container">
+  <text  class="title-text" id="textId" onclick="textClick">show menu</text>
+  <menu  title="title" onselected="select" oncancel="cancel" id="menuId">
+    <option value="Item 1">Item 1</option>
+    <option value="Item 2">Item 2</option>
+    <option value="Item 3">Item 3</option>
+  </menu>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container{
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  background-color: #F1F3F5;
+  width: 100%;
+}
+.title-text{
+  font-size: 35px;
+  background-color: #5a5aee;
+  color: white;
+  width: 70%;
+  text-align: center;
+  height: 85px;
+  border-radius: 12px;
+  margin-top: 500px;
+  margin-left: 15%;
+}
+menu{
+  text-color: blue;
+  font-size: 35px;
+  letter-spacing: 2px;
+}
+option{
+  color: #6a6aef;
+  font-size: 30px;
+}
+```
+
+
+```
+// index.js
+import prompt from '@system.prompt';
+export default {
+  select(e) {
+    prompt.showToast({
+      message: e.value
+    })
+  },
+  cancel(){
+    prompt.showToast({
+      message: "cancel"
+    })
+  },
+  textClick() {
+    this.$element("menuId").show({x:175,y:590});
+  },
+}
+```
+
+![en-us_image_0000001276162713](figures/en-us_image_0000001276162713.gif)
+
+
+## Example Scenario
+
+Click the **&lt;toggle&gt;** component to change the text color and select the **&lt;menu&gt;** component to change the size of the gradient color block.
+
+
+```
+<!-- xxx.hml-->
+<div class="container">
+  <div class="contentToggle">
+    <toggle class="toggle" for="{{item in togglesList}}" onclick="toggleClick({{$idx}})" checked="{{item.checked}}">{{item.name}}</toggle>
+  </div>
+  <text class="size" style="color: {{color}};">width:{{width}},height:{{height}}</text>
+  <div style="width: {{width}}'px';height: {{height}}px;background:linear-gradient(to right,#FF0000,#0000FF);"></div>
+  <text id="menuId" class="text">change size</text>
+  <menu onselected="select" oncancel="cancel" target="menuId">
+    <option value="{{item.value}}" for="item in optionList">{{item.text}}</option>
+  </menu>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container{
+  flex-direction: column;
+  background-color: #F1F3F5;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+}
+.contentToggle{
+  width: 100%;
+  justify-content: space-around;
+}
+.toggle{
+  padding: 10px;
+  height:80px;
+  font-size: 35px;
+  width: 200px;
+  height: 85px;
+}
+.size{
+  width: 100%;
+  height: 200px;
+  text-align: center;
+  font-size: 40px;
+  text-align: center;
+}
+.text{
+  width: 300px;
+  height: 80px;
+  background-color: #615def;
+  color: white;
+  font-size: 35px;
+  text-align: center;
+  margin-top: 100px;
+}
+menu{
+  text-color: blue;
+  font-size: 35px;
+  letter-spacing: 2px;
+}
+option{
+  color: #6a6aef;
+  font-size: 30px;
+}
+```
+
+
+```
+// index.js
+import prompt from '@system.prompt';
+export default {
+  data:{
+    fresh: false,
+    width: 200,
+    height: 200,
+    color: '',
+    optionList:[
+      {text:'200 x 200',value:2},
+      {text:'300 x 300',value:3},
+      {text:'500 x 500',value:5},
+    ],
+    togglesList:[
+      {name:"red", checked:false},
+      {name:"blue", checked:false},
+      {name: "black", checked:false},
+    ],
+  },
+  toggleClick(index){
+    for(let i=0;i<this.togglesList.length;i++){
+      if(i == index){
+        this.color = this.togglesList[index].name;
+        this.togglesList[i].checked = true;
+      }else{
+        this.togglesList[i].checked = false;
+      }
+    }
+  },
+  select(e) {
+    this.width = e.value * 100;
+    this.height = e.value * 100;
+  }
+}
+```
+
+![en-us_image_0000001276003485](figures/en-us_image_0000001276003485.gif)

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

+# OffscreenCanvas
+
+
+Create an **OffscreenCanvas** canvas and create a **getContext2d** object on the canvas. Then, create an image and set the **filter** attribute to change the image style.
+
+
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <canvas ref="canvas1"></canvas>
+  <select @change="change()">
+    <option value="blur(5px)">blur</option>
+    <option value="grayscale(50%)">grayscale</option>
+    <option value="hue-rotate(45deg)">hue-rotate</option>
+    <option value="invert(100%)">invert</option>
+    <option value="drop-shadow(8px 8px 10px green)">drop-shadow</option>
+    <option value="brightness(0.4)">brightness</option>
+    <option value="opacity(0.25)">opacity</option>
+    <option value="saturate(30%)">saturate</option>
+    <option value="sepia(60%)">sepia</option>
+    <option value="contrast(200%)">contrast</option>
+  </select>
+</div>
+```
+
+
+
+```
+/* xxx.css */
+.container{
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #F1F3F5;
+}
+canvas{
+  width: 600px;
+  height: 500px;
+  background-color: #fdfdfd;
+  border: 5px solid red;
+}
+select{
+  margin-top: 50px;
+  width: 250px;
+  height: 100px;
+  background-color: white;
+}
+```
+
+
+
+```
+// xxx.js
+import prompt from '@system.prompt';
+export default {
+  data:{
+    el: null,
+    ctx: null,
+    offscreen: null,
+    offCanvas: null,
+    img: null,
+  },
+  onShow(){
+    this.ctx = this.$refs.canvas1.getContext("2d");
+    this.offscreen = new OffscreenCanvas(600, 500);
+    this.offCanvas = this.offscreen.getContext("2d");
+    this.img = new Image();
+    this.img.src = 'common/images/2.png';
+    // Invoked when the image is successfully obtained.
+    let _this = this;
+    this.img.onload = function() {
+      _this.offCanvas.drawImage(_this.img, 100, 100, 400, 300);
+    };
+    this.img.onerror = function() {
+      prompt.showToast({message:"error",duration:2000})
+    };
+    var bitmap = this.offscreen.transferToImageBitmap();
+    this.ctx.transferFromImageBitmap(bitmap);
+  },
+  change(e){
+    this.offCanvas.filter = e.newValue;
+    this.offCanvas.drawImage(this.img, 100, 100, 400, 300);
+    var bitmap = this.offscreen.transferToImageBitmap();
+    this.ctx.transferFromImageBitmap(bitmap);
+  },
+}
+```
+
+
+![en-us_image_0000001232162292](figures/en-us_image_0000001232162292.gif)
+
+
+## Determining the Position
+
+Use **isPointInPath** and **isPointInStroke** to determine and show whether a coordinate is within the path area and whether a coordinate is on the edge of the path.
+
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <div class="content">
+    <text>Coordinate: {{X}}, {{Y}}</text>
+    <text>In path:{{textValue}}</text>
+    <text>In stroke:{{textValue1}}</text>
+  </div>
+  <canvas ref="canvas"></canvas>
+  <button onclick="change">Add(50)</button>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container{
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #F1F3F5;
+}
+canvas{
+  width: 600px;
+  height: 500px;
+  background-color: #fdfdfd;
+  border: 5px solid red;
+}
+.content{
+  flex-direction: column;
+  justify-content: center;
+  align-items: center; 
+}
+text{
+  font-size: 30px;
+  width: 300px;
+  height: 80px;
+  text-align: center;
+}
+button{
+  width: 180px;
+  height: 75px;
+  margin-top: 50px;
+}
+```
+
+
+```
+// xxx.js
+export default {
+  data: {
+    textValue: 0,
+    textValue1: 0,
+    X:0,
+    Y:250,
+  },
+  onShow(){
+    let canvas = this.$refs.canvas.getContext('2d');
+    let offscreen = new OffscreenCanvas(500,500);
+    let offscreenCanvasCtx = offscreen.getContext("2d");
+    let offscreenCanvasCtx1 = offscreen.getContext("2d");
+    offscreenCanvasCtx1.arc(this.X, this.Y, 2, 0, 6.28);
+    offscreenCanvasCtx.lineWidth=20;
+    offscreenCanvasCtx.rect(200,150, 200, 200);
+    offscreenCanvasCtx.stroke();
+    this.textValue1 = offscreenCanvasCtx.isPointInStroke(this.X, this.Y)?'true':'false';
+    this.textValue = offscreenCanvasCtx.isPointInPath(this.X, this.Y)?'true':'false';
+    let bitmap = offscreen.transferToImageBitmap();
+    canvas.transferFromImageBitmap(bitmap);
+  },
+  change(){
+    if(this.X < 500){
+      this.X = this.X+50;
+    }else{
+      this.X = 0;
+    }
+    let canvas = this.$refs.canvas.getContext('2d');
+    let offscreen = new OffscreenCanvas(500,500);
+    let offscreenCanvasCtx = offscreen.getContext("2d");
+    let offscreenCanvasCtx1 = offscreen.getContext("2d");
+    offscreenCanvasCtx1.arc(this.X, this.Y, 1, 0, 6.28)
+    offscreenCanvasCtx.lineWidth=20
+    offscreenCanvasCtx.rect(200,150, 200, 200);
+    offscreenCanvasCtx.stroke();
+    this.textValue1 = offscreenCanvasCtx.isPointInStroke(this.X, this.Y)?'true':'false';
+    this.textValue = offscreenCanvasCtx.isPointInPath(this.X, this.Y)?'true':'false';
+    let bitmap = offscreen.transferToImageBitmap();
+    canvas.transferFromImageBitmap(bitmap);
+  }
+}
+```
+
+![en-us_image_0000001276003489](figures/en-us_image_0000001276003489.gif)

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

+# Path2D
+
+**<Path2D>** allows you to describe a path through an existing path. This path can be drawn through the **stroke** API of **Canvas**. For details, see [Path2D](../reference/arkui-js/js-components-canvas-path2d.md).
+
+
+## Drawing Line Segments
+
+Create a **<Path2D>** object and use line segments to create different shapes.
+
+
+
+```
+<!-- xxx.hml --> 
+<div class="container">
+  <canvas ref="canvas"></canvas>
+</div>
+```
+
+
+
+```
+/* xxx.css */
+.container{
+  flex-direction: column;
+  background-color: #F1F3F5;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+canvas{
+  width: 600px;
+  height: 600px;
+  background-color: #fdfdfd;
+  border: 5px solid red;
+}
+```
+
+
+
+```
+// xxx.js
+import prompt from '@system.prompt';
+export default {
+  onShow(){
+    let ctx = this.$refs.canvas.getContext('2d',{antialias: true});
+    let path = ctx.createPath2D();
+    // Roof
+    path.moveTo(10, 300);
+    path.lineTo(210,100);
+    path.lineTo(410, 300);
+    // House
+    path.moveTo(10, 300);
+    path.lineTo(410, 300);
+    path.lineTo(410, 600);
+    path.lineTo(10, 600);
+    path.closePath();
+    // Window
+    path.moveTo(50, 450);
+    path.bezierCurveTo(70, 350, 130, 350, 150, 450);
+    path.closePath();
+    // Door
+    path.moveTo(250, 450);
+    path.rect(250, 450, 350, 600);
+    path.closePath();
+    // Chimney
+    path.moveTo(365, 250);
+    path.ellipse(310, 215, 30, 130,0, Math.PI * 0.04, Math.PI * 1.1, 1);
+    // Tree
+    path.moveTo(485, 450);
+    path.quadraticCurveTo(510, 500, 485, 600);
+    path.moveTo(550, 450);
+    path.quadraticCurveTo(525, 500, 550, 600);
+    path.moveTo(600, 535);
+    path.arc(520, 450, 85, 0, 6);
+    ctx.stroke(path);
+  },
+}
+```
+
+
+![en-us_image_0000001232002968](figures/en-us_image_0000001232002968.png)
+
+
+## Drawing Graphs
+
+Use **createPath2D** to create a path object and draw only **path1** so that only **path1** is displayed on the canvas. Click the **&lt;text&gt;** component to trigger the **addPath** method. The **path2** object is passed to **path1** as a parameter. After the **stroke** operation is performed on the **path1** object, **path1** and **path2** are displayed on the canvas. Click **Change** to change the value of **setTransform** to** setTransform(2, 0.1, 0.1, 2, 0,0)**. The graph is enlarged and tilted to the left.
+
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <canvas ref="canvas"></canvas>
+  <div class="content">
+    <text onclick="addPath">{{ isAdd }}</text>
+    <text onclick="setTransform">{{textName}}</text>
+  </div>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container{
+  flex-direction: column;
+  background-color: #F1F3F5;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+canvas{
+  width: 600px;
+  height: 600px;
+  background-color: #fdfdfd;
+  border: 5px solid red;
+}
+.content{
+  width: 80%;
+  margin-top: 50px;
+  margin-bottom: 50px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+text{
+  width: 150px;
+  height: 80px;
+  color: white;
+  border-radius: 20px;
+  text-align: center;
+  background-color: #6060e7;
+  margin-bottom: 30px;
+}
+```
+
+
+```
+// xxx.js
+import prompt from '@system.prompt';
+export default {
+  data:{
+    ctx: null,
+    path1: null,
+    path2: null,
+    path3: null,
+    isAdd: "addPath2",
+    isChange: true,
+    textName: 'change'
+  },
+  onShow(){
+    this.ctx = this.$refs.canvas.getContext('2d',{antialias:true});
+    this.path1 = this.ctx.createPath2D();
+    this.path1.moveTo(200, 200);
+    this.path1.lineTo(400, 200);
+    this.path1.lineTo(400, 400);
+    this.path1.lineTo(200, 400);
+    this.path1.closePath();
+    this.path2 = this.ctx.createPath2D();
+    this.path2.arc(300, 300, 75, 0, 6.28)
+    this.ctx.stroke(this.path1);
+  },
+  addPath(){
+    if(this.isAdd == "addPath2"){
+      this.ctx.clearRect(0,0,600,600)
+      this.ctx.beginPath();
+      this.path2.addPath(this.path1)
+      this.ctx.stroke(this.path2);
+      this.isAdd = "clearPath2"
+    }else{
+      this.ctx.clearRect(0,0,600,600)
+      this.ctx.stroke(this.path1);
+      this.isAdd = "addPath2"
+    }
+  },
+  setTransform(){
+    if(this.isChange){
+      this.ctx.clearRect(0,0,600,600)
+      this.path3 = this.ctx.createPath2D();
+      this.path3.arc(150, 150, 100, 0, 6.28)
+      this.path3.setTransform(2, 0.1, 0.1, 2, 0,0);
+      this.ctx.stroke(this.path3);
+      this.isChange =  !this.isChange;
+      this.textName = "back"
+    }else{
+      this.ctx.clearRect(0,0,600,600)
+      this.path3.setTransform(0.5, -0.1, -0.1, 0.5, 0,0);
+      this.ctx.stroke(this.path3);
+      this.isChange =  !this.isChange;
+      this.textName = "change"
+    }
+  },
+}
+```
+
+![en-us_image_0000001231683112](figures/en-us_image_0000001231683112.gif)

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

 # <picker> Development
 
 
-The <picker> component supports common, date, time, data and time, and multi-column text selectors. For details, see [picker](../reference/arkui-js/js-components-basic-picker.md).
+The **<picker>** component supports common, date, time, data and time, and multi-column text selectors. For details, see [picker](../reference/arkui-js/js-components-basic-picker.md).
 
 
 ## Creating a <picker> Component
 
-Create a <picker> component in the .hml file under pages/index.
+Create a **<picker>** component in the .hml file under **pages/index**.
 
 
 ```
 <!-- index.hml -->
 <div class="container">
-  <picker>    picker  </picker>
+  <picker>
+    picker
+  </picker>
 <div>
 ```
 
@@ -20,6 +22,8 @@ Create a &lt;picker&gt; component in the .hml file under pages/index.
 ```
 /* index.css */
 .container {
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -32,7 +36,7 @@ Create a &lt;picker&gt; component in the .hml file under pages/index.
 
 ## Setting the Picker Type
 
-Set the type attribute of the &lt;picker&gt; component. For example, set it to date.
+Set the **type** attribute of the **&lt;picker&gt;** component. For example, set it to **date**.
 
 
 ```
@@ -47,6 +51,8 @@ Set the type attribute of the &lt;picker&gt; component. For example, set it to d
 ```
 /* index.css */
 .container {
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -71,14 +77,15 @@ export default {
 
 ![en-us_image_0000001267647893](figures/en-us_image_0000001267647893.gif)
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
+> - When setting the value range of a common selector, you must use the data binding mode.
 > 
-> When setting the value range of a common selector, you must use the data binding mode.
+> - The **lunarswitch** attribute of the date selector is only supported on phones and tablets.
 
 
 ## Setting the Time Format
 
-Set the hours attribute to specify the time format used by the time selector. Available values include 12 and 24, indicating the 12-hour format and 24-hour format, respectively.
+Set the **hours** attribute to specify the time format used by the time selector. Available values include **12** and **24**, indicating the 12-hour format and 24-hour format, respectively.
 
 
 ```
@@ -93,6 +100,8 @@ Set the hours attribute to specify the time format used by the time selector. Av
 ```
 /* index.css */
 .container {
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -107,15 +116,15 @@ Set the hours attribute to specify the time format used by the time selector. Av
 
 ![en-us_image_0000001222807808](figures/en-us_image_0000001222807808.gif)
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
-> - When hours is set to 12, the time is displayed in 12-hour format and distinguished by a.m. and p.m.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
+> - When **hours** is set to **12**, the time is displayed in 12-hour format and distinguished by a.m. and p.m.
 > 
-> - When hours is set to 24, the time is displayed in 24-hour format.
+> - When **hours** is set to **24**, the time is displayed in 24-hour format.
 
 
 ## Adding Response Events
 
-To confirm and cancel selection, add change and cancel events.
+To confirm and cancel selection, add **change** and **cancel** events.
 
 
 ```
@@ -130,6 +139,8 @@ To confirm and cancel selection, add change and cancel events.
 ```
 /* index.css */
 .container {
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -170,7 +181,9 @@ export default {
 ## Example Scenario
 
 
-Implement a health check-in application by using the &lt;picker&gt; component.
+Implement a health check-in application by using the **&lt;picker&gt;** component.
+
+
 
 ```
 <!-- index.hml -->
@@ -202,6 +215,8 @@ Implement a health check-in application by using the &lt;picker&gt; component.
 </div>
 ```
 
+
+
 ```
 /* index.css */
 .doc-page {
@@ -244,6 +259,8 @@ Implement a health check-in application by using the &lt;picker&gt; component.
 }
 ```
 
+
+
 ```
 // xxx.js
 import pmt from '@system.prompt'

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

+# <qrcode> Development
+
+
+The **<qrcode>** component is used to generate and display a QR code. For details, see [qrcode](../reference/arkui-js/js-components-basic-qrcode.md).
+
+
+## Creating a <qrcode> Component
+
+Create a **<qrcode>** component in the .hml file under **pages/index**.
+
+
+```
+<!-- xxx.hml-->
+<div class="container">
+  <qrcode value="Hello"></qrcode>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container {
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #F1F3F5;
+}
+```
+
+![en-us_image_0000001275803133](figures/en-us_image_0000001275803133.png)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
+> The **value** parameter must be set.
+
+
+## Setting the Component Type
+
+Set the **type** attribute to select the QR code type from rectangle and circle.
+
+
+```
+<!-- xxx.hml-->
+<div class="container">
+  <select onchange="settype">
+    <option for="{{bcol_list}}" value="{{$item}}">{{$item}}</option>
+  </select>
+  <qrcode value="Hello" type="{{qr_type}}"></qrcode>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container {
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #F1F3F5;
+}
+select{
+  margin-top: 50px;
+  margin-bottom: 50px;
+}
+```
+
+
+```
+// index.js
+export default {
+  data: {
+    qr_type: 'rect',
+    bcol_list: ['rect','circle']
+  },
+  settype(e) {
+    this.qr_type = e.newValue 
+  },
+}
+```
+
+![en-us_image_0000001275922965](figures/en-us_image_0000001275922965.gif)
+
+
+## Setting Styles
+
+Set the **color** and **background-color** attributes to set the color and background color of a QR code.
+
+
+```
+<!-- xxx.hml-->
+<div class="container">
+  <qrcode value="Hello" type="rect"></qrcode>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container {
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #F1F3F5;
+}
+qrcode{
+  width: 300px;
+  height: 300px;
+ color: blue;
+  background-color: #ffffff;
+}
+```
+
+![en-us_image_0000001231683116](figures/en-us_image_0000001231683116.png)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **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 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 of 200 px is used.
+> 
+
+
+## Example Scenario
+
+In this example, you can bind a QR code to a text box, and change the QR code by replacing the content in the text box.
+
+
+```
+<!-- xxx.hml-->
+<div class="container">
+  <input style="margin-bottom: 100px;" onchange="change"></input>
+  <qrcode value="{{textVal}}"></qrcode>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container {
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #F1F3F5;
+}
+qrcode{
+  width: 400px;
+  height: 400px;
+}
+```
+
+
+```
+// index.js
+export default{
+  data: {
+    textVal: ''
+  },
+  change(e){
+    this.textVal = e.value
+  }
+}
+```
+
+![en-us_image_0000001232002972](figures/en-us_image_0000001232002972.gif)

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

+# <rating> Development
+
+
+The **<rating>** component provides a rating bar used for reviews and ratings. For details, see [rating](../reference/arkui-js/js-components-basic-rating.md).
+
+
+## Creating a <rating> Component
+
+Create a **<rating>** component in the .hml file under **pages/index**.
+
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <rating></rating>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #F1F3F5;
+}
+rating {
+  width: 80%;
+  height: 150px;
+}
+```
+
+![en-us_image_0000001231843116](figures/en-us_image_0000001231843116.gif)
+
+
+## Setting the Rating Level
+
+Use the **&lt;rating&gt;** component to set the number of stars in a rating bar and the current rating using the **numstars** and **rating** attributes, respectively.
+
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <ratingnumstars="6" rating="5">
+  </rating>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #F1F3F5;
+}
+rating {
+  width: 80%;
+  height: 150px;
+}
+```
+
+![en-us_image_0000001232003012](figures/en-us_image_0000001232003012.gif)
+
+
+## Setting the Rating Style
+
+Use the **&lt;rating&gt;** component to set the background images when a rating star is unselected, selected, and partially selected using the **star-background**, **star-foreground**, and **star-secondary** attributes, respectively.
+
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <div style="width: 500px;height: 500px;align-items: center;justify-content: center;flex-direction: column;;">
+    <rating numstars="5" rating="1" class="myrating" style="width: {{ratewidth}}; height:{{rateheight}};
+    star-background: {{backstar}}; star-secondary: {{secstar}};star-foreground: {{forestar}};rtl-flip: true;">
+    </rating>
+  </div>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container {
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #F1F3F5;
+}
+```
+
+
+```
+/* index.js */
+export default {
+  data: {
+    backstar: 'common/love.png',
+    secstar: 'common/love.png',
+    forestar: 'common/love1.png',
+    ratewidth: '400px',
+    rateheight: '150px'
+  },
+  onInit(){
+  }
+}
+```
+
+![en-us_image_0000001275803173](figures/en-us_image_0000001275803173.gif)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
+> - You must set **star-background**, **star-secondary**, and **star-foreground**. Otherwise, the grey rating star applies, indicating that the image source is incorrectly set.
+> 
+> - The **star-background**, **star-secondary**, and **star-foreground** attributes support only PNG and JPG images in the local path.
+
+
+## Binding Events
+
+Add the **change** event to the &lt;rating&gt; component to print the current rating.
+
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <rating numstars="5" rating="0" onchange="showrating"></rating>
+</div>
+```
+
+
+```
+.container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #F1F3F5;
+}
+rating {
+  width: 80%;
+  height: 150px;
+}
+```
+
+
+```
+import prompt from '@system.prompt';
+export default {
+  showrating(e) {
+    prompt.showToast({
+      message:'Current Rating' + e.rating
+    })
+  }
+}
+```
+
+![en-us_image_0000001276003525](figures/en-us_image_0000001276003525.gif)
+
+
+## Example Scenario
+
+Change the switch status to toggle between the star background images and drag the slider to adjust the rating values.
+
+
+```
+<!-- xxx.hml -->
+<div style="width: 100%;height:100%;flex-direction: column;align-items: center;background-color: #F1F3F5;">
+  <div style="width: 500px;height: 500px;align-items: center;justify-content: center;flex-direction: column;;">
+    <rating numstars="{{stars}}" rating="{{rate}}" stepsize="{{step}}" onchange="showrating" class="myrating"
+    style="width: {{ratewidth}};height:{{rateheight}};star-background: {{backstar}};star-secondary: {{secstar}};
+    star-foreground: {{forestar}};rtl-flip: true;"></rating>
+  </div>
+  <div style="flex-direction: column;width: 80%;align-items: center;">
+    <div style="width: 100%;height: 100px;align-items: center;justify-content: space-around;">
+      <text>Replacing a custom image</text>
+      <switch checked="false" showtext="true" onchange="setstar"></switch>
+    </div>
+    <div style="width: 100%;height:120px;margin-top: 50px;margin-bottom: 50px;flex-direction: column;align-items: center;
+    justify-content: space-around;">
+      <text>numstars   {{stars}}</text>
+      <slider id="sli1" min="-1" max="10" value="5" step="1" onchange="setnumstars"></slider>
+    </div>
+    <div style="width: 100%;height:120px;flex-direction: column;align-items: center;justify-content: space-around;">
+      <text>rating   {{rate}}</text>
+      <slider id="sli2" min="-1" max="10" value="0" step="1" onchange="setrating"></slider>
+    </div>
+  </div>
+</div>
+```
+
+
+```
+/* xxx.css */
+.myrating:active {
+  width: 500px;
+  height: 100px;
+}
+switch{
+  font-size: 40px;
+}
+```
+
+
+```
+/* index.js */
+import prompt from '@system.prompt';
+export default {
+  data: {
+    backstar: '',
+    secstar: '',
+    forestar: '',
+    stars: 5,
+    ratewidth: '300px',
+    rateheight: '60px',
+    step: 0.5,
+    rate: 0
+  },
+  onInit(){
+  },
+  setstar(e) {
+    if (e.checked == true) {
+      this.backstar = 'common/love.png'
+      this.secstar = 'common/love.png'
+      this.forestar = 'common/love1.png'
+    } else {
+      this.backstar = ''
+      this.secstar = ''
+      this.forestar = ''
+    }
+  },
+  setnumstars(e) {
+    this.stars = e.progress
+    this.ratewidth = 60 * parseInt(this.stars) + 'px'
+  },
+  setstep(e) {
+    this.step = e.progress
+  },
+  setrating(e){
+    this.rate = e.progress
+  },
+  showrating(e) {
+    prompt.showToast({
+      message:'Current Rating' + e.rating
+    })
+  }
+}
+```
+
+![en-us_image_0000001275923005](figures/en-us_image_0000001275923005.gif)

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

+# <search> Development
+
+
+The **<search>** component provides an input area for users to search. For details, see [search](../reference/arkui-js/js-components-basic-search.md).
+
+
+## Creating a <search> Component
+
+Create a **<search>** component in the .hml file under **pages/index**.
+
+
+```
+<!-- xxx.hml-->
+<div class="container">
+ <search></search>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container {
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #F1F3F5;
+}
+```
+
+![en-us_image_0000001276003537](figures/en-us_image_0000001276003537.png)
+
+
+## Setting Attributes
+
+Set the **hint**, **icon**, and **searchbutton** to define the hint text, icon, and search button at the end of the search box.
+
+
+```
+<!-- xxx.hml-->
+<div class="container">
+  <search hint="Please enter the search content"  searchbutton="search" icon="/common/search1.png"></search>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container {
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #F1F3F5;
+}
+```
+
+![en-us_image_0000001275923017](figures/en-us_image_0000001275923017.png)
+
+
+## Adding Styles
+
+Set **color**, **placeholder**, and **caret-color** to set the text color, hint text color, and cursor color of the search box.
+
+
+```
+<!-- xxx.hml-->
+<div class="container">
+  <search hint="Please enter the search content"  searchbutton="search" ></search>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container {
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #F1F3F5;
+}
+search{
+ color: black;
+  placeholder-color: black;
+  caret-color: red;
+}
+```
+
+![en-us_image_0000001232003020](figures/en-us_image_0000001232003020.gif)
+
+
+## Binding Events
+
+Add the **change**, **search**, **submit**, **share**, and **translate** events to the **&lt;search&gt;** component to perform operations on the input information.
+
+
+```
+<!-- xxx.hml-->
+<div class="container">
+  <text style="margin-left: -7px;">
+    <span>Enter text and then touch and hold what you've entered</span>
+  </text>
+  <search hint="Please enter the search content"  searchbutton="search" onsearch="search" onchange="change" ontranslate="translate" onshare="share" 
+  onsubmit="submit">
+  </search>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container {
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #F1F3F5;
+}
+text{
+  width: 100%;
+  font-size: 25px;
+  text-align: center;
+  margin-bottom: 100px;
+}
+```
+
+
+```
+// index.js
+import prompt from '@system.prompt'
+export default {
+  search(e){
+    prompt.showToast({
+      message:  e.value,
+      duration: 3000,
+    });
+  },
+  translate(e){
+    prompt.showToast({
+      message:  e.value,
+      duration: 3000,
+    });
+  },
+  share(e){
+    prompt.showToast({
+      message:  e.value,
+      duration: 3000,
+    });
+  },
+  change(e){
+    prompt.showToast({
+      message:  e.value,
+      duration: 3000,
+    });
+  },
+  submit(e){
+    prompt.showToast({
+      message: 'submit',
+      duration: 3000,
+    });
+  }
+}
+```
+
+![en-us_image_0000001231683164](figures/en-us_image_0000001231683164.gif)
+
+
+## Example Scenario
+
+In this example, you can select the **&lt;search&gt;**, **&lt;textarea&gt;**, or **&lt;input&gt;** component from the drop-down list box to implement the respective function.
+
+
+```
+<!-- xxx.hml-->
+<div style="flex-direction: column;align-items: center;justify-content: center; width: 100%;">
+  <select class="slt1" id="slt1" onchange="setfield">
+    <option value="search">Search</option>
+    <option value="textarea">Textarea</option>
+    <option value="input">Input</option>
+  </select>
+  <div if="{{showsearch}}" style="flex-direction: column;align-items: center;margin-top: 50px;height: 400px;justify-content: space-around;">
+    <search class="field" id="search1" hint="search1" onsubmit="submit" onchange="change" ></search>
+    <search class="field" id="search2" icon="common/search1.png" hint="search2" show="{{showsec}}" onsubmit="submit" onchange="change" ></search>
+  </div>
+  <div if="{{showtextarea}}" style="flex-direction: column;align-items: center;margin-top: 50px;height: 400px;justify-content: space-around;">
+    <textarea class="field" id="textarea1" extend="true" placeholder="textarea1" onchange="change" ></textarea>
+    <textarea class="field" id="textarea2" extend="true" placeholder="textarea2" onchange="change" show="{{showsec}}"></textarea>
+  </div>
+  <div if="{{showinput}}" style="flex-direction: column;align-items: center;margin-top: 50px;height: 400px;justify-content: space-around;">
+    <input type="text" class="field" id="input1" placeholder="input1" onchange="change" ></input>
+    <input type="text" class="field" id="input2" placeholder="input2" onchange="change" show="{{showsec}}"></input>
+  </div>
+</div>
+```
+
+
+```
+/* xxx.css */
+.field {
+  width: 80%;
+  color: mediumaquamarine;
+  font-weight: 600;
+  placeholder-color: orangered;
+}
+.slt1{
+  font-size: 50px;
+  position: absolute;
+  left: 50px;
+  top: 50px;
+}
+```
+
+
+```
+// index.js
+import prompt from '@system.prompt';
+export default {
+  data: {
+    showsearch: true,
+    showtextarea: false,
+    showinput: false,
+    showsec: true,
+  },
+  setfield(e) {
+    this.field = e.newValue
+    if (e.newValue == 'search') {
+      this.showsearch = true
+      this.showtextarea = false
+      this.showinput = false
+    } else if (e.newValue == 'textarea') {
+      this.showsearch = false
+      this.showtextarea = true
+      this.showinput = false
+    } else {
+      this.showsearch = false
+      this.showtextarea = false
+      this.showinput = true
+    }
+  },
+  submit(e) {
+    prompt.showToast({
+      message: 'Search!',
+      duration: 2000
+    })
+  },
+  change(e) {
+    prompt.showToast({
+      message: 'Content:'+ e.text,
+      duration: 2000
+    })
+  }
+}
+```
+
+![en-us_image_0000001232003024](figures/en-us_image_0000001232003024.gif)

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

+# <slider> Development
+
+
+The **<slider>** component is used to quickly adjust settings, such as the volume and brightness. For details, see [slider](../reference/arkui-js/js-components-basic-slider.md).
+
+
+## Creating a <slider> Component
+
+Create a **<slider>** component in the .hml file under **pages/index**.
+
+
+
+```
+<!-- xxx.hml -->
+<div class="container">
+<slider></slider>
+</div>
+```
+
+
+
+```
+/* xxx.css */
+.container {
+  width: 100%;
+  height: 100%;
+  background-color: #F1F3F5;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+```
+
+
+![en-us_image_0000001232162312](figures/en-us_image_0000001232162312.gif)
+
+
+## Setting Styles and Attributes
+
+Use the **&lt;slider&gt;** component to set the background color, selected color, and slider color using the **color**, **selected-color**, and **block-color** attributes, respectively.
+
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <slider class= "sli"></slider>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container {
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #F1F3F5;
+}
+.sli{
+  color: #fcfcfc;
+  scrollbar-color: aqua;
+  background-color: #b7e3f3;
+}
+```
+
+![en-us_image_0000001232003000](figures/en-us_image_0000001232003000.gif)
+
+Add the **mix**, **max**, **value**, **step**, and **mode** attributes to set the minimum value, maximum value, initial value, step, and style of the slider.
+
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <slider min="0" max="100" value="1" step="2" mode="inset" showtips="true"></slider>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container {
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #F1F3F5;
+}
+```
+
+![en-us_image_0000001276003517](figures/en-us_image_0000001276003517.gif)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
+> Set the **mode** attribute to specify the slider style, which takes effect only on mobile phones and tablets. It can be set to:
+> 
+> - **outset**: The slider is on the sliding bar.
+> 
+> - **inset**: The slider is inside the sliding bar.
+
+
+## Binding Events
+
+Add the **change** event to the **&lt;rating&gt;** component and pass the ChangeEvent attribute when adding the event.
+
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <text>slider start value is {{startValue}}</text>
+  <text>slider current value is {{currentValue}}</text>
+  <text>slider end value is {{endValue}}</text>
+  <slider min="0" max="100" value="{{value}}" onchange="setvalue"></slider>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container {
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #F1F3F5;
+}
+```
+
+
+```
+// xxx.js
+export default {
+  data: {
+    value: 0,
+    startValue: 0,
+    currentValue: 0,
+    endValue: 0,
+  },
+  setvalue(e) {
+    if (e.mode == "start") {
+      this.value = e.value;
+      this.startValue = e.value;
+    } else if (e.mode == "move") {
+      this.value = e.value;
+      this.currentValue = e.value;
+    } else if (e.mode == "end") {
+      this.value = e.value;
+      this.endValue = e.value;
+    }
+  }
+}
+```
+
+![en-us_image_0000001275803169](figures/en-us_image_0000001275803169.gif)
+
+
+## Example Scenario
+
+Adjust the value of the slider to change the image size and dynamically print the width and height of the current image.
+
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <image src="common/landscape3.jpg" style=" width: {{WidthVal}}px;height:{{HeightVal}}px;margin-top: -150px;"></image>
+  <div class="txt">
+    <slider min="0" max="100" value="{{value}}" onchange="setvalue"></slider>
+    <text>The width of this picture is    {{WidthVal}}</text>
+    <text>The height of this picture is  {{HeightVal}}</text>
+  </div>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container {
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #F1F3F5;
+}
+.txt{
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 65%;
+}
+text{
+  margin-top: 30px;
+}
+```
+
+
+```
+// xxx.js
+export default{
+  data: {
+    value: 0,
+    WidthVal: 200,
+    HeightVal: 200
+  },
+  setvalue(e) {
+    this.WidthVal = 200 + e.value;
+    this.HeightVal = 200 + e.value
+  }
+}
+```
+
+![en-us_image_0000001275922997](figures/en-us_image_0000001275922997.gif)

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

 # <stepper> Development
 
 
-When multiple steps are required to complete a task, you can use the <stepper> component to navigate your users through the whole process. For details, see [stepper](../reference/arkui-js/js-components-container-stepper.md).
+When multiple steps are required to complete a task, you can use the **<stepper>** component to navigate your users through the whole process. For details, see [stepper](../reference/arkui-js/js-components-container-stepper.md).
 
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
 > This component is supported since API version 5.
 
 
 ## Creating a <stepper> Component
 
-Create a <stepper> component in the .hml file under pages/index.
+Create a **<stepper>** component in the .hml file under **pages/index**.
 
 
 ```
 <!-- index.hml -->
 <div class="container"> 
- <stepper>    <stepper-item>     
+ <stepper><stepper-item>     
      <text>Step 1</text>
    </stepper-item> 
    <stepper-item>     
      <text>Step 2</text>
    </stepper-item> 
- </stepper> 
+</stepper>
 </div>
 ```
 
@@ -30,6 +30,8 @@ Create a &lt;stepper&gt; component in the .hml file under pages/index.
 ```
 /* xxx.css */
 .container {
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -47,7 +49,7 @@ text{
 
 ## Setting the Index
 
-Set index to the index value of the step that you want to display by default.
+Set **index** to the index value of the step that you want to display by default.
 
 
 ```
@@ -71,6 +73,8 @@ Set index to the index value of the step that you want to display by default.
 ```
 /* index.css */
 .container {
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   background-color:#F1F3F5;
 }
@@ -83,7 +87,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 button text for the **&lt;stepper-item&gt;**.
 
 
 ```
@@ -110,6 +114,8 @@ Set the label attribute to customize the button text for the &lt;stepper-item&gt
 ```
 /* index.css */
 .container {
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   background-color:#F1F3F5;
 }
@@ -125,7 +131,10 @@ text{
 /* index.js */
 export default { 
   data: {
-    label_1:{      nextLabel: 'NEXT',      status: 'normal'    },
+   label_1:{
+      nextLabel: 'NEXT',
+      status: 'normal'
+    },
     label_2:{
       prevLabel: 'BACK',
       nextLabel: 'NEXT',
@@ -143,9 +152,9 @@ export default {
 ![en-us_image_0000001267767841](figures/en-us_image_0000001267767841.gif)
 
 
-## Setting the Style
+## 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 **&lt;stepper&gt;** component fills entire space of its container. The sample code below shows how to set the border and background color using the **border** and **background-color** attributes.
 
 ```
 <!-- index.hml -->
@@ -164,6 +173,8 @@ export default {
 ```
 /* index.css */
 .container {
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   align-items: center;
   justify-content: center;
@@ -174,7 +185,8 @@ export default {
   height: 300px;
 }
 .stepperClass{
-  border:1px solid silver ;  background-color: white;
+ border:1px solid silver;
+  background-color: white;
 }
 text{
   width: 100%;
@@ -188,11 +200,12 @@ text{
 
 ## Adding Events
 
-The &lt;stepper&gt; component supports the finish, change, next, back, and skip events.
+The **&lt;stepper&gt;** component supports the **finish**, **change**, **next**, **back**, and **skip** events.
+
+- When the **change** and **next** or **back** events exist at the same time, the **next** or **back** event is executed before the **change** event.
 
-- When the change and next or back events exist at the same time, the next or back event is executed before the change event.
+- Before resetting the **index** attribute, you must remove the current value. Otherwise, the value change cannot be detected.
 
-- Before resetting the index attribute, you must remove the current value. Otherwise, the value change cannot be detected.
   
 ```
 <!-- index.hml -->
@@ -219,6 +232,8 @@ The &lt;stepper&gt; component supports the finish, change, next, back, and skip
 ```
 /* xxx.css */
 .doc-page {
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   align-items: center;
   justify-content: center;
@@ -339,6 +354,8 @@ Use the &lt;stepper&gt; component to navigate through the steps. Create a [&lt;t
 ```
 /* xxx.css */
 .container {
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   align-items: center;
   justify-content: center;

en/application-dev/ui/ui-js-components-svg-graphics.md

+# Graph Drawing
+
+
+The **<svg>** component can be used to draw simple shapes, such as rectangles, circles, and lines. For details about the supported shapes, see <svg>.
+
+
+In this example, you can draw different shapes and stitch them to form a house graph.
+
+  
+```
+<!-- xxx.hml -->
+<div class="container">
+  <svg width="1000" height="1000">
+    <polygon points="100,400 300,200 500,400" fill="red"></polygon>     // Rooftop
+    <polygon points="375,275 375,225 425,225 425,325" fill="orange"></polygon>   // Chimney
+    <rect width="300" height="300" x="150" y="400" fill="orange">      // Main body
+    </rect>
+    <rect width="100" height="100" x="180" y="450" fill="white">    // Window
+    </rect>
+    <line x1="180" x2="280" y1="500" y2="500" stroke-width="4" fill="white" stroke="black"></line>     // Window frame
+    <line x1="230" x2="230" y1="450" y2="550" stroke-width="4" fill="white" stroke="black"></line>     // Window frame
+    <polygon points="325,700 325,550 400,550 400,700" fill="red"></polygon>     // Door
+    <circle cx="380" cy="625" r="20" fill="black"></circle>      // Doorknob
+  </svg>
+</div>
+```
+
+  
+```
+/* xxx.css */
+.container {
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #F1F3F5;
+}
+```
+
+![en-us_image_0000001232162288](figures/en-us_image_0000001232162288.png)

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

+# Basics
+
+
+The **<svg>** component is used as the root node of the SVG canvas and can be nested in the SVG. For details, see [svg](../reference/arkui-js/js-components-svg.md).
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
+> - The APIs of this component are supported since API version 7.
+> 
+> - The width and height must be defined for the **<svg>** parent component or **<svg>** component. Otherwise, the component is not drawn.
+
+
+## Creating an <svg> Component
+
+Create a **<svg>** component in the .hml file under **pages/index**.
+
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <svg width="400" height="400">  </svg>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container{
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #F1F3F5;
+}
+svg{
+  background-color: blue;
+}
+```
+
+![en-us_image_0000001232162324](figures/en-us_image_0000001232162324.png)
+
+
+## Setting Attributes
+
+Set the **width**, **height**, **x**, **y**, and **viewBox** attributes to define the width, height, X coordinate, Y coordinate, and SVG viewport of the **&lt;svg&gt;** component.
+
+
+```
+<!-- xxx.hml -->
+<div class="container">
+ <svg width="400" height="400" viewBox="0 0 100 100">
+    <svg class="rect" width="100" height="100" x="20" y="10">
+    </svg>
+  </svg>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container{
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #F1F3F5;
+}
+svg{
+  background-color: yellow;
+}
+.rect{
+  background-color: red;
+}
+```
+
+![en-us_image_0000001231683152](figures/en-us_image_0000001231683152.png)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
+> - If the **&lt;svg&gt;** component is the root node, the X-axis and Y-axis attributes are invalid.
+> 
+> - If the width and height of **viewBox** are inconsistent with those of the **&lt;svg&gt;** component, the view box will be scaled in center-aligned mode.

en/application-dev/ui/ui-js-components-svg-path.md

+# Path Drawing
+
+
+The **<svg>** component uses instructions **M** (start point), **H** (horizontal line), and **a** (drawing an arc to a specified position) to control a path and sets the fill colors to create a pie chart.
+
+
+  
+```
+<!-- xxx.hml -->
+<div class="container">
+  <svg fill="#00FF00" x="100" y="400">
+    <path d="M300,200 h-150 a150 150 0 1 0 150 -150 z" fill="red" stroke="blue" stroke-width="5" >
+    </path>
+    <path d="M275,175 v-150 a150 150 0 0 0 -150 150 z" fill="yellow" stroke="blue" stroke-width="5">
+    </path>
+  </svg>
+</div>
+```
+
+
+  
+```
+/* xxx.css */
+.container {
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+  height: 1200px;
+  width: 600px;
+  background-color: #F1F3F5;
+}
+```
+
+
+![en-us_image_0000001232162340](figures/en-us_image_0000001232162340.png)
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
+> - M/m = moveto   The **x** and **y** parameters indicate the destination X and Y coordinates of a point. The **M** command only moves the brush, but does not draw a line between two points. Therefore, the **M** command is often used at the beginning of a path to indicate the start point.
+> 
+> - L/l = lineto   The **x** and **y** parameters indicate the X and Y coordinates of a point. The **L** command draws a line between the current position and the destination position (the previous point of the brush).
+> 
+> - H/h = horizontal lineto    Draws a horizontal line.
+> 
+> - V/v = vertical lineto   Draws a vertical line.
+> 
+> - C/c = curveto  Draws a cubic Bezier curve. Three groups of coordinate parameters are required: **x1 y1**, **x2 y2**, **x y**.
+> 
+> - S/s = smooth curveto  Draws a cubic Bezier curve. Two groups of coordinate parameters are required: **x2 y2**, **x y**.
+> 
+> - Q/q = quadratic Belzier curve  Draws a quadratic Bezier curve. Two groups of coordinate parameters are required: **x1 y1**, **x y**.
+> 
+> - T/t = smooth quadratic Belzier curveto  Draws a quadratic Bezier curve. One group of coordinate parameters are required: **x y**.
+> 
+> - A/a = elliptical Arc  Draw an arc. The following parameters are required: **rx ry x-axis-rotation** (rotation angle), **large-arc-flag** (angle), **sweep-flag** (arc direction), and **x y**. **large-arc-flag** determines whether the arc is less than 180 degrees. **0** indicates yes, and **1** indicates no. **sweep-flag** indicates the direction in which an arc is drawn. **0** indicates that the arc is drawn counterclockwise from the start point to the end point. **1** indicates that the arc is drawn clockwise from the start point to the end point.
+> 
+> - Z/z = closepath  Draws a straight line from the current point to the start point of the path.

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

+# Text Drawing
+
+
+The **<svg>** component can also be used to draw text.
+
+
+## Text
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
+> - The text content must be written in the **<text>** area. The **<tspan>** child element label can be nested.
+> 
+> - **<text>** can be nested only by the parent element label **svg**.
+> 
+> - Only the default font **sans-serif** is supported.
+
+Set the following attributes to define text styles: **x** (X coordinate), **y** (Y coordinate), **dx** (x-axis offset of the text), **dy** (y-axis offset of the text), **fill** (font fill color), **stroke** (text border color), and **stroke-width** (text border width).
+
+  
+```
+<!-- xxx.hml -->
+<div class="container">
+  <svg>
+    <text x="200" y="300" font-size="80px" fill="blue" >Hello World</text>
+    <text x="200" y="300" dx="20" dy="80" font-size="80px" fill="blue" fill-opacity="0.5" stroke="red" stroke-width="2">Hello World</text>
+    <text x="20" y="550" fill="#D2691E">
+      <tspan dx="40" fill="red" font-size="80" fill-opacity="0.4">Hello World </tspan>
+    </text>
+  </svg>
+</div>
+```
+
+![en-us_image_0000001275803145](figures/en-us_image_0000001275803145.png)
+
+
+## Drawing Text Along the Path
+
+Set **textpath** to draw text along the path.
+
+  
+```
+<!-- xxx.hml -->
+<div class="container">
+  <svg fill="#00FF00" x="100" y="400">
+    <path d="M40,360 Q360,360 360,180 Q360,20 200,20 Q40,40 40,160 Q40,280 180,180 Q180,180 200,100" stroke="red" fill="none"></path>
+      <text>
+        <textpath fill="blue" startOffset="20%" path="M40,360 Q360,360 360,180 Q360,20 200,20 Q40,40 40,160 Q40,280 180,180 Q180,180 200,100" font-size="30px">
+          This is textpath test.
+        </textpath>
+      </text>
+  </svg>
+</div>
+```
+
+![en-us_image_0000001231843084](figures/en-us_image_0000001231843084.png)

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

+# <swiper> Development
+
+
+The **<swiper>** component is a sliding container used to switch between child components. For details, see [swiper](../reference/arkui-js/js-components-container-swiper.md).
+
+
+## Creating a <swiper> Component
+
+Create a **<swiper>** component in the .hml file under **pages/index**.
+
+
+
+```
+<!-- xxx.hml-->
+<div class="container">
+  <swiper>
+    <div class="item" style="background-color: #bf45ea;">
+      <text>item1</text>
+    </div>
+    <div class="item" style="background-color: #088684;">
+      <text>item2</text>
+    </div>
+    <div class="item" style="background-color: #7786ee;">
+      <text>item3</text>
+    </div>
+  </swiper>
+</div>
+```
+
+
+
+```
+/* xxx.css */
+.container{
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  background-color: #F1F3F5;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+swiper{
+  height: 30%;
+}
+.item{
+  width: 100%;
+  height: 500px;
+}
+text{
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  font-size: 50px;
+  color: white;
+}
+```
+
+
+![en-us_image_0000001232003028](figures/en-us_image_0000001232003028.gif)
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
+> The **&lt;swiper&gt;** component supports child components except **&lt;list&gt;**.
+
+
+## Adding Attributes
+
+When **loop** is set to **false**, the **autoplay** attribute is added to the **&lt;swiper&gt;** component and the autoplay interval (**interval**) is set. The component automatically switches between child components and stops at the last one. Add the **digital** attribute to enable the digital navigation point and set **scrolleffect** to **fade**.
+
+
+```
+<!-- xxx.hml-->
+<div class="container">
+  <swiper index="1"  autoplay="true" interval="2000" indicator="true" digital="true" duration="500"
+  scrolleffect="fade" loop="false">
+    <div class="item" style="background-color: #bf45ea;">
+      <text>item1</text>
+    </div>
+    <div class="item" style="background-color: #088684;">
+      <text>item2</text>
+    </div>
+    <div class="item" style="background-color: #7786ee;">
+      <text>item3</text>
+    </div>
+    <div class="item" style="background-color: #c88cee;">
+      <text>item4</text>
+    </div>
+  </swiper>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container{
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  background-color: #F1F3F5;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+swiper{
+  height: 30%;
+}
+.item{
+  width: 100%;
+  height: 500px;
+}
+text{
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  font-size: 50px;
+  color: white;
+}
+```
+
+![en-us_image_0000001275923021](figures/en-us_image_0000001275923021.gif)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
+> - The **digital** attribute takes effect only when the **indicator** attribute is set to **true**.
+> 
+> - The **loop** attribute takes effect only when there are two or more than two child components of the **&lt;swiper&gt;** component.
+> 
+> - The **scrolleffect** attribute takes effect only when the **loop** attribute value is set to **false**.
+
+
+## Setting Styles
+
+Set the width and height of the **&lt;swiper&gt;** component, the indicator's size (**indicator-size**), color (**indicator-color**), relative position (**indicator-top**), and color when it is selected (**indicator-selected-color**).
+
+
+```
+<!-- xxx.hml-->
+<div class="container">
+  <swiper index="1" autoplay="true" interval="2000"  duration="500" >
+    <div class="item" style="background: linear-gradient(to right,#806dd9,#5d44ea,#2eb9d5)">
+      <text>item1</text>
+    </div>
+    <div class="item" style="background: linear-gradient( to right,#2eb9d5,#0e7db4,#2673d9)">
+      <text>item2</text>
+    </div>
+    <div class="item" style="background: linear-gradient( to right,#2673d9,#0c89af,#806dd9)">
+      <text>item3</text>
+    </div>
+  </swiper>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container{
+  flex-direction: column;
+  background-color: #F1F3F5;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+swiper{
+  width:  500px;
+  height: 500px;
+  border-radius: 250px;
+  indicator-color: white;
+  indicator-selected-color: blue;
+  indicator-size: 40px;
+  indicator-top: 100px;
+  overflow: hidden ;
+}
+.item{
+  width: 100%;
+  height: 500px;
+}
+text{
+  width: 100%;
+  text-align: center;
+  margin-top: 150px;
+  font-size: 50px;
+  color: white;
+}
+```
+
+![en-us_image_0000001275803189](figures/en-us_image_0000001275803189.gif)
+
+
+## Binding Events
+
+Create two **&lt;text&gt;** components and bind click events. Clicking the component will call **showPrevious** to display the previous child component or **showNext** to display the next child component. Add a **&lt;select&gt;** component. A **change** event is triggered when a user selects a value from the drop-down list box and the **swipeTo** method is called to go to the specified page. Bind the **&lt;swiper&gt;** component with the **change** event (triggered when the index of the currently displayed component changes) and the **finish** event (triggered when the switchover animation ends).
+
+
+```
+<!-- xxx.hml-->
+<div class="container">
+  <swiper interval="2000" onchange="change" loop="false" onanimationfinish="finish" id="swiper">
+    <div class="item" style="background-color: #bf45ea">
+      <text>item1</text>
+    </div>
+    <div class="item" style="background-color: #088684;">
+      <text>item2</text>
+    </div>
+    <div class="item" style="background-color: #7786ee;">
+      <text>item3</text>
+    </div>
+    <div class="item" style="background-color: #c88cee;">
+      <text>item4</text>
+    </div>
+  </swiper>
+  <div class="content">
+      <button class="pnbtn" onclick="previous">Previous</button>
+      <select onchange="selectChange">
+          <option value="0">swipeTo 1</option>
+          <option value="1">swipeTo 2</option>
+          <option value="2">swipeTo 3</option>
+          <option value="3">swipeTo 4</option>
+      </select>
+    <button class="pnbtn" onclick="next">Next</button>
+  </div>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container{
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  background-color: #F1F3F5;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+swiper{
+  height: 30%;
+}
+.item{
+  width: 100%;
+  height: 500px;
+}
+text{
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  font-size: 50px;
+  color: white;
+}
+select{
+  background-color: white;
+  width: 250px;
+  height: 80px;
+}
+.content{
+  margin-top: 100px;
+  justify-content: space-around;
+}
+.pnbtn{
+  width: 200px;
+  height: 80px;
+  font-size: 30px; 
+}
+```
+
+
+```
+import prompt from '@system.prompt';
+export default{
+  change(e){
+    prompt.showToast({duration:2000,message:"current index:"+e.index});
+  },
+  finish(){
+    prompt.showToast({duration:2000,message:"The switchover ends"});
+  },
+  selectChange(e){
+    this.$element('swiper').swipeTo({index: Number(e.newValue)});
+  },
+  previous(){
+    this.$element('swiper').showPrevious();
+  },
+  next(){
+    this.$element('swiper').showNext();
+  }
+}
+```
+
+![en-us_image_0000001231843128](figures/en-us_image_0000001231843128.gif)
+
+
+## Example Scenario
+
+Use the **&lt;swiper&gt;** component to create an image carousel and a thumbnail module at the bottom of the carousel. After a thumbnail is clicked, the **swipeTo** method is called to switch to the corresponding image.
+
+
+```
+<!-- xxx.hml-->
+<div class="container">
+  <swiper duration="500" indicator="false" id="swiper" onchange="change">
+    <div class="item" for="item in list">
+      <image src="{{item.src}}"></image>
+    </div>
+  </swiper>
+  <div class="content">
+    <div class="content_item {{index == $idx?'actived':''}}" for="item in list" onclick="imageTo({{$idx}})">
+      <image src="{{item.src}}"></image>
+    </div>
+  </div>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container{
+  flex-direction: column;
+  background-color: #F1F3F5;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+swiper{
+  width: 100%;
+  height: 500px;
+}
+.item{
+  width: 100%;
+  height: 500px;
+}
+.content{
+  margin-top: -120px;
+  width: 70%;
+  display: flex;
+  justify-content: space-around;
+  height: 100px;
+}
+.content_item{
+  padding: 5px;
+  transform: scale(0.5);
+}
+.actived{
+  transform: scale(1);
+  border: 1px solid #b20937ea;
+}
+```
+
+
+```
+// index.js
+import prompt from '@system.prompt';
+export default {
+  data:{
+    index: 0,
+    list:[
+      {src: 'common/images/1.png'},
+      {src: 'common/images/2.png'},
+      {src: 'common/images/3.png'},
+      {src: 'common/images/4.png'},]
+    },
+  imageTo(index){
+    this.index = index;
+    this.$element('swiper').swipeTo({index: index});
+  },
+  change(e){
+    this.index = e.index;
+  }
+}
+```
+
+![en-us_image_0000001231843132](figures/en-us_image_0000001231843132.gif)

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

+# <switch> Development
+
+
+The **<switch>** component is used to switch between the on and off states. For details, see [switch](../reference/arkui-js/js-components-basic-switch.md).
+
+
+## Creating a <switch> Component
+
+Create a **<switch>** component in the .hml file under **pages/index**.
+
+
+```
+<div class="container">
+    <switch></switch>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #F1F3F5;
+}
+```
+
+![en-us_image_0000001231843096](figures/en-us_image_0000001231843096.png)
+
+
+## Adding Attributes and Methods
+
+  Use the **textoff** and **showtext** attributes to set the status when text is selected and unselected. Set the **checked** attribute to **true** (indicating that the component is on). Add the **change** event that is triggered when the component status changes. After the event is triggered, the **switchChange** function is executed to obtain the current component status (on or off).
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <switch showtext="true" texton="open" textoff="close" checked="true" @change="switchChange"></switch>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #F1F3F5;
+}
+switch{
+  // Color of the selected text
+  texton-color: #002aff;
+  // Color of the unselected text
+textoff-color: silver;
+  text-padding: 20px; 
+  font-size: 50px;
+}
+```
+
+
+```
+// xxx.js
+import prompt from '@system.prompt';
+export default {
+  switchChange(e){
+    if(e.checked){
+      prompt.showToast({
+        message: "open"
+      });
+    }else{
+      prompt.showToast({
+        message: "close"
+      });
+    }
+  }
+}
+```
+
+
+![en-us_image_0000001276003505](figures/en-us_image_0000001276003505.gif)
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
+> The text set by **texton** and **textoff** takes effect only when **showtext** is set to **true**.
+
+
+## Example Scenario
+
+Turn on the switch and the default delivery address is used. When the switch is turned off, the address selection button is displayed on the page. Clicking the button can change the delivery address.
+
+  Implementation method: Create a **&lt;switch&gt;** component, set the **checked** attribute to **true**, and change the delivery address through data binding. Set the **display** attribute (the default value is **none**). When the switch is turned off and the **display** attribute is set to **flex**, the address module is displayed and clicking the button can change the color.
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <div class="change">
+    <text>Choose default address:</text>
+    <switch showtext="true" texton="on" textoff="off" checked="true" @change="switchChange"></switch>
+  </div>
+  <div class="content">
+    <text class="address"><span>Shipping address:</span><span class="textSpan">{{address}}</span></text>
+  </div>
+  <div class="myAddress" style="display: {{addressDisplay}};">
+    <text style="font-size: 30px;margin-bottom: 50px;">Choose an address:</text>
+    <text class="addressText" style="background-color: {{item == address?'#0fabe7':''}};color: {{item == address?'white':'black'}};" 
+    for="item in addressList"@click="changeAddress({{$idx}}})">{{item}}</text>
+  </div>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container {
+  width: 100%;
+  height: 100%;
+  background-color: #F1F3F5;
+  flex-direction: column;
+  padding: 50px;
+}
+.change{
+  margin-top: 20%;
+  width: 100%;
+  justify-content: center;
+}
+switch{
+  texton-color: #002aff;
+  textoff-color: silver;
+  text-padding: 20px;
+}
+.content{
+  width: 70%;
+  text-align: center;
+  flex-direction: column;
+  border: 1px solid #002aff;
+  margin-left: 15%;
+  text-align: center;
+}
+.address{
+  width: 100%;
+  height: 100px;
+  line-height: 100px;
+  text-align: center;
+  font-size: 28px;
+  margin-bottom: 50px;
+}
+.textSpan{
+  color: #0aa9f1;
+}
+.myAddress{
+  flex-direction: column;
+  margin-top: 50px;
+}
+.addressText{
+  margin-left: 35%;
+  width: 30%;
+  height: 75px;
+  text-align: center;
+  color: white;
+  margin-bottom: 30px;
+  border-radius: 10px;
+  border: 1px solid #0fabe7;
+}
+```
+
+
+```
+// xxx.js
+import prompt from '@system.prompt';
+export default {
+  data:{
+    address: '',
+    addressDisplay: 'none',
+    addressList: ['family','company','commissary'],
+  },
+  onInit(){
+    // Initialize the default address to the first one in the address list.
+    this.address = this.addressList[0];
+  },
+  switchChange(e){
+    if(e.checked){
+        this.addressDisplay = "none";
+    }else{
+        this.addressDisplay = "flex";
+    }
+  },
+  changeAddress(i){
+    this.address= this.addressList[i];
+  }
+}
+```
+
+![en-us_image_0000001231843100](figures/en-us_image_0000001231843100.gif)

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

 # <text> Development
 
 
-The <text> component is used to display a piece of textual information. For details, see [text](../reference/arkui-js/js-components-basic-text.md).
+The **<text>** component is used to display a piece of textual information. For details, see [text](../reference/arkui-js/js-components-basic-text.md).
 
 
 ## Creating a <text> Component
 
-Create a <text> component in the .hml file under pages/index.
+Create a **<text>** component in the .hml file under **pages/index**.
 
 
 ```
 <!-- xxx.hml -->
 <div class="container" style="text-align: center;justify-content: center; align-items: center;">
-  <text>Hello World</text>
+ <text>   
+     Hello World  
+  </text>
 </div>
 ```
 
@@ -35,10 +37,9 @@ Create a &lt;text&gt; component in the .hml file under pages/index.
 ## Setting the Text Style and Attributes
 
 - Adding a text style
+  Set the color, font-size, allow-scale, word-spacing and text-align properties to add the color, size, zoom, text spacing, and vertical alignment of the text.
 
   
-  Set the color, font-size, allow-scale, word-spacing, and text-valign attributes to apply the color, size, zoom, spacing, and vertical alignment styles to the text.
-
   ```
   <!-- xxx.hml -->
   <div class="container" style="background-color:#F1F3F5;flex-direction: column;justify-content: center; align-items: center;">   
@@ -52,7 +53,6 @@ Create a &lt;text&gt; component in the .hml file under pages/index.
   ```
 
   
-
   ```
   /* xxx.css */
   .container {
@@ -65,13 +65,12 @@ Create a &lt;text&gt; component in the .hml file under pages/index.
   }
   ```
 
-
     ![en-us_image_0000001222967764](figures/en-us_image_0000001222967764.png)
 
-- Adding a text modifier
 
+- Adding a text modifier
+  Set the **text-decoration** and **text-decoration-color** attributes to add an underline, overline, line-through, or a combination of lines in the specified color to selected text. For values of **text-decoration**, see [Text Style](../reference/arkui-js/js-components-basic-text.md).
 
-  Set the text-decoration attribute to add a line to selected text. Set the text-decoration-color attribute to apply specific color to the added line. For values of text-decoration, see [Text Style](../reference/arkui-js/js-components-basic-text.md).
   
   ```
   <!-- xxx.hml -->
@@ -85,6 +84,7 @@ Create a &lt;text&gt; component in the .hml file under pages/index.
   </div>
   ```
 
+  
   ```
   /* xxx.css */
   .container {
@@ -99,13 +99,12 @@ Create a &lt;text&gt; component in the .hml file under pages/index.
   }
   ```
 
-
   ![en-us_image_0000001223287688](figures/en-us_image_0000001223287688.png)
 
-- Hiding text content
 
+- Hiding text content
+  Set the **text-overflow** attribute to **ellipsis** so that overflowed text is displayed as an ellipsis.
 
-  Set the text-overflow attribute to ellipsis so that overflowed text is displayed as an ellipsis.
   
   ```
   <!-- xxx.hml -->
@@ -116,6 +115,7 @@ Create a &lt;text&gt; component in the .hml file under pages/index.
   </div>
   ```
 
+  
   ```
   /* xxx.css */
   .container {
@@ -133,21 +133,18 @@ Create a &lt;text&gt; component in the .hml file under pages/index.
   }
   ```
 
-
-  > ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
-  > - text-overflow must be used together with max-lines.
+  > ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
+  > - **text-overflow** must be used together with **max-lines**.
   > 
-  > - max-lines indicates the maximum number of lines in the text.
-
+  > - **max-lines** indicates the maximum number of lines in the text.
 
-![en-us_image_0000001267647865](figures/en-us_image_0000001267647865.png)
+  ![en-us_image_0000001267647865](figures/en-us_image_0000001267647865.png)
 
 
 - Setting the text line breaking mode
+  Set the **word-break** attribute to specify how to break lines of text. For values of **word-break**, see [Text Styles](../reference/arkui-js/js-components-basic-text.md).
 
   
-  Set the word-break attribute to specify how to break lines of text. For values of word-break, see [Text Styles](../reference/arkui-js/js-components-basic-text.md).
-
   ```
   <!-- xxx.hml -->
   <div class="container">
@@ -162,6 +159,7 @@ Create a &lt;text&gt; component in the .hml file under pages/index.
   </div>
   ```
 
+  
   ```
   /* xxx.css */
   .container {
@@ -193,41 +191,47 @@ Create a &lt;text&gt; component in the .hml file under pages/index.
   }
   ```
 
-
     ![en-us_image_0000001267767865](figures/en-us_image_0000001267767865.png)
 
-- Setting the [&lt;span&gt;](../reference/arkui-js/js-components-basic-span.md)child component
 
-```
-<!-- xxx.hml -->
-<div class="container" style="justify-content: center; align-items: center;flex-direction: column;background-color: #F1F3F5;">
+- Setting the [&lt;span&gt;](../reference/arkui-js/js-components-basic-span.md) child component.
+  
+  ```
+  <!-- xxx.hml -->
+  <div class="container" style="justify-content: center; align-items: center;flex-direction: column;background-color: #F1F3F5; width: 100%;height: 100%;">
     <text style="font-size: 45px;">
       This is a passage
     </text>
     <text style="font-size: 45px;">
-    <span style="color: aqua;">This </span><span style="color: #F1F3F5;">      1    </span>    <span style="color: blue;"> is a </span>    <span style="color: #F1F3F5;">      1    </span>    <span style="color: red;">  passage </span>
+      <span style="color: aqua;">This </span>
+      <span style="color: #F1F3F5;">
+        1
+      </span>
+      <span style="color: blue;"> is a </span>
+      <span style="color: #F1F3F5;">
+        1
+      </span>
+      <span style="color: red;">  passage </span>
     </text>
-</div>
-```
-
-
-![en-us_image_0000001223127720](figures/en-us_image_0000001223127720.png)
+  </div>
+  ```
 
+  ![en-us_image_0000001223127720](figures/en-us_image_0000001223127720.png)
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
-> - When the &lt;span&gt; child component is used to form a text paragraph, incorrect &lt;span&gt; attribute settings (for example, setting of font-weight to 1000) will result in abnormal display of the text paragraph.
-> 
-> - When the &lt;span&gt; child component is being used, do not include any text you want to show in the &lt;text&gt; component, as such text will not be displayed if you do so.
+  > ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
+  > - When the **&lt;span&gt;** child component is used to form a text paragraph, incorrect **&lt;span&gt;** attribute settings (for example, setting of **font-weight** to **1000**) will result in abnormal display of the text paragraph.
+  > 
+  > - When the **&lt;span&gt;** child component is being used, do not include any text you want to show in the **&lt;text&gt;** component, as such text will not be displayed if you do so.
 
 
 ## Example Scenario
 
-Use the &lt;text&gt; component to display text content through data binding. Use the &lt;span&gt; child component to hide or display text content by setting the show attribute.
+Use the **&lt;text&gt;** component to display text content through data binding. Use the **&lt;span&gt;** child component to hide or display text content by setting the **show** attribute.
 
 
-    ```
-    <!-- xxx.hml -->
-    <div class="container">
+```
+<!-- xxx.hml -->
+<div class="container">
   <div style="align-items: center;justify-content: center;">
     <text class="title">
       {{ content }}
@@ -241,13 +245,15 @@ Use the &lt;text&gt; component to display text content through data binding. Use
     </span>
     <span style="color: #f76160">Hide clip </span>
   </text>
-    </div>
-    ```
+</div>
+```
 
 
 ```
 /* xxx.css */
 .container {
+  width: 100%;
+  height: 100%;
   align-items: center;
   flex-direction: column;
   justify-content: center;

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

+# <toolbar> Development
+
+
+The **<toolbar>** component shows actions available on the current screen and can be used for level-1 navigation. For details, see [toolbar](../reference/arkui-js/js-components-basic-toolbar.md).
+
+
+## Creating a <toolbar> Component
+
+Create a **<toolbar>** component in the .hml file under **pages/index**.
+
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <toolbar style="background-color: #F1F3F5;">
+    <toolbar-item value="item1"></toolbar-item>
+    <toolbar-item value="item2"></toolbar-item>
+  </toolbar>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container {
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #F1F3F5;
+}
+toolbar-item{
+  font-size: 35px;
+}
+```
+
+![en-us_image_0000001275922977](figures/en-us_image_0000001275922977.gif)
+
+
+## Add Child Components
+
+  The **&lt;toolbar&gt;** component supports only the **&lt;toolbar-item&gt;** child component and can display a maximum of five **&lt;toolbar-item&gt;** child components on a page. If there are six or more **&lt;toolbar-item&gt;** child components, the first four child components are retained, and the rest are moved to the **More** option on the toolbar and can be displayed on a pop-up window by clicking **More**. Under **More**, the child components are displayed in the default style; the custom style settings do not take effect.
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <toolbar>
+    <toolbar-item value="item1"></toolbar-item>
+    <toolbar-item value="item2"></toolbar-item>
+    <toolbar-item value="item3"></toolbar-item>
+    <toolbar-item value="item4"></toolbar-item>
+    <toolbar-item value="item5"></toolbar-item>
+    <toolbar-item value="item6"></toolbar-item>
+  </toolbar>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container {
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #F1F3F5;
+}
+toolbar-item{
+  font-size: 35px;
+}
+```
+
+![en-us_image_0000001232002988](figures/en-us_image_0000001232002988.gif)
+
+
+## Setting Styles
+
+Set the **position** style for the **&lt;toolbar&gt;** component and set the font color, size, and background color of **&lt;toolbar-item&gt;** child components.
+
+
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <toolbar style="position: fixed;bottom: 5%;width: 100%;background-color: #F1F3F5;">
+    <toolbar-item value="item1" icon="common/images/1.png" class="toolbarActive"></toolbar-item>
+    <toolbar-item value="item2" icon="common/images/2.png"></toolbar-item>
+    <toolbar-item value="item3" icon="common/images/1.png"></toolbar-item>
+    <toolbar-item value="item4" icon="common/images/2.png"></toolbar-item>
+  </toolbar>
+</div>
+```
+
+
+
+```
+/* xxx.css */
+.container {
+  background-color: #F1F3F5;
+  flex-direction: column;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+}
+toolbar-item{
+  font-size: 35px;
+}
+.toolbarActive{
+  color: red;
+  background-color: #daebef;
+}
+```
+
+
+![en-us_image_0000001275803149](figures/en-us_image_0000001275803149.png)
+
+
+## Binding Events
+
+Bind the click event and long press event to the **&lt;toolbar-item&gt;** child components, so that the text of these components turns red upon click and turns blue upon long press.
+
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <toolbar style="position: fixed;top: 50%;width: 100%;background-color: #F1F3F5;">
+    <toolbar-item value="item1" icon="common/images/1.png" style="color: {{itemColor}};" onclick="itemClick"></toolbar-item>
+    <toolbar-item value="item2" icon="common/images/2.png"  style="color: {{itemColor}}"></toolbar-item>
+    <toolbar-item value="item3" icon="common/images/3.png"  style="color: {{itemColor}}" onlongpress="itemLongPress"></toolbar-item>
+  </toolbar>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container {
+  background-color: #F1F3F5;   
+  flex-direction: column;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+}
+toolbar-item{
+  font-size: 35px;
+}
+```
+
+
+```
+// xxx.js
+import prompt from '@system.prompt';
+export default {
+  data:{
+    itemColor:'black'
+  },
+  itemClick(){
+    this.itemColor= "red";
+    prompt.showToast({duration:2000,message:'item click'});
+  },
+  itemLongPress(){
+    prompt.showToast({duration:2000,message:'item long press'});
+    this.itemColor= "blue";
+  },
+}
+```
+
+![en-us_image_0000001275803153](figures/en-us_image_0000001275803153.gif)
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
+> The **&lt;toolbar&gt;** component does not allow adding of events or methods, but its child components do.
+
+
+## Example Scenario
+
+In this example, you'll implement a **&lt;toolbar-item&gt;** component, clicking which will trigger a change in the text color and the image corresponding to the component.
+
+  Use the **for** loop to create a **&lt;toolbar-item&gt;** component and bind a click event to it, so that clicking the component will obtain and store an index value. When setting the text color, the system checks whether the current index value is the stored value. If yes, the system sets the color to red. If no, the system uses the default color.
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <image src="{{imgList[active]}}"></image>
+  <toolbar style="position: fixed;bottom: 5%;width: 100%;background-color: #F1F3F5;">
+    <toolbar-item value="{{ item.option}}" icon="{{item.icon}}" style="color: {{active == $idx?'red':'black'}};background-color: {{active
+      == $idx?'#dbe7f1':'#F1F3F5'}};" for="{{item in itemList}}" onclick="itemClick({{$idx}})"></toolbar-item>
+  </toolbar>
+</div>
+```
+
+
+```
+/* xxx.css */
+.container {
+  background-color: #F1F3F5;   
+  flex-direction: column;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+}
+toolbar-item{
+  font-size: 35px;
+}
+```
+
+
+```
+// xxx.js
+import prompt from '@system.prompt';
+export default {
+  data:{
+    active: 0,
+    imgList:["common/images/1.png","common/images/2.png","common/images/3.png","common/images/4.png"],
+    itemList:[
+      {option:'item1',icon:'common/images/1.png'},
+      {option:'item2',icon:'common/images/2.png'},
+      {option:'item3',icon:'common/images/3.png'},
+      {option:'item4',icon:'common/images/4.png'},
+    ]
+  },
+  itemClick(id){
+    this.active= id;
+  },
+}
+```
+
+![en-us_image_0000001231683128](figures/en-us_image_0000001231683128.gif)

en/application-dev/website.md

@@ -51,17 +51,38 @@
         - [Defining Page Routes](ui/ui-js-building-ui-routes.md)
       - Common Component Development Guidelines
         - Container Components
-          - [List](ui/ui-js-components-list.md)
-          - [Dialog](ui/ui-js-components-dialog.md)
-          - [Form](ui/ui-js-components-form.md)
-          - [Stepper](ui/ui-js-components-stepper.md)
-          - [Tabs](ui/ui-js-component-tabs.md)
+          - [<list> Development](ui/ui-js-components-list.md)
+          - [<dialog> Development](ui/ui-js-components-dialog.md)
+          - [<form> Development](ui/ui-js-components-form.md)
+          - [<stepper> Development](ui/ui-js-components-stepper.md)
+          - [<tabs> Development](ui/ui-js-component-tabs.md)
+          - [<swiper> Development](ui/ui-js-components-swiper.md)
         - Basic Components
-          - [Text](ui/ui-js-components-text.md)
-          - [Input](ui/ui-js-components-input.md)
-          - [Button](ui/ui-js-components-button.md)
-          - [Picker](ui/ui-js-components-picker.md)
-          - [Image](ui/ui-js-components-images.md)
+          - [<text> Development](ui/ui-js-components-text.md)
+          - [<input> Development](ui/ui-js-components-input.md)
+          - [<button> Development](ui/ui-js-components-button.md)
+          - [<picker> Development](ui/ui-js-components-picker.md)
+          - [<image> Development](ui/ui-js-components-images.md)
+          - [<image-animator> Development](ui/ui-js-components-image-animator.md)
+          - [<rating> Development](ui/ui-js-components-rating.md)
+          - [<slider> Development](ui/ui-js-components-slider.md)
+          - [<chart> Development](ui/ui-js-components-chart.md)
+          - [<switch> Development](ui/ui-js-components-switch.md)
+          - [<toolbar> Development](ui/ui-js-components-toolbar.md)
+          - [<menu> Development](ui/ui-js-components-menu.md)
+          - [<marquee> Development](ui/ui-js-components-marquee.md)
+          - [<qrcode> Development](ui/ui-js-components-qrcode.md)
+          - [<search> Development](ui/ui-js-components-search.md)
+        - <canvas> Development
+          - [CanvasRenderingContext2D](ui/ui-js-components-canvasrenderingcontext2d.md)
+          - [Path2D](ui/ui-js-components-path2d.md)
+          - [OffscreenCanvas](ui/ui-js-components-offscreencanvas.md)
+        - [<grid-container> Development](ui/ui-js-components-calendar.md)
+        - Svg
+          - [Basics](ui/ui-js-components-svg-overview.md)
+          - [Graph Drawing](ui/ui-js-components-svg-graphics.md)
+          - [Path Drawing](ui/ui-js-components-svg-path.md)
+          - [Text Drawing](ui/ui-js-components-svg-text.md)
        - Animation Development Guidelines
            - CSS Animation
              - [Defining Attribute Style Animations](ui/ui-js-animate-attribute-style.md)
@@ -128,6 +149,13 @@
           - [Custom Component Lifecycle Callbacks](ui/ts-custom-component-lifecycle-callbacks.md)
           - [Example: Component Creation and Re-Initialization](ui/ts-component-creation-re-initialization.md)
         - [Syntactic Sugar](ui/ts-syntactic-sugar.md)
+      - Common Component Development Guidelines
+        - [Button](ui/ui-ts-basic-components-button.md)
+        - [Web](ui/ui-ts-components-web.md)
+      - Common Layout Development Guidelines
+        - [Flex Layout](ui/ui-ts-layout-flex.md)
+        - [Grid Layout](ui/ui-ts-layout-grid-container.md)
+        - [Media Query](ui/ui-ts-layout-mediaquery.md)
       - Experiencing the Declarative UI
         - [Creating a Declarative UI Project](ui/ui-ts-creating-project.md)
         - [Getting to Know Components](ui/ui-ts-components.md)