update ui en

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

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

@@ -51,28 +51,49 @@
         - [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)
-          - [Defining Animations with the transform Attribute](ui/ui-js-animate-transform.md)
-          - [Defining Animations with the background-position Attribute](ui/ui-js-animate-background-position-style.md)
-          - [Defining Animations for SVG Components](ui/ui-js-animate-svg.md)
-        - JS Animation
-          - [Component Animation](ui/ui-js-animate-component.md)
-          - Interpolator Animation
-            - [Animation Effect](ui/ui-js-animate-dynamic-effects.md)
-            - [Animation Frame](ui/ui-js-animate-frame.md)
+           - CSS Animation
+             - [Defining Attribute Style Animations](ui/ui-js-animate-attribute-style.md)
+             - [Defining Animations with the transform Attribute](ui/ui-js-animate-transform.md)
+             - [Defining Animations with the background-position Attribute](ui/ui-js-animate-background-position-style.md)
+             - [Defining Animations for SVG Components](ui/ui-js-animate-svg.md)
+           - JS Animation
+             - [Component Animation](ui/ui-js-animate-component.md)
+             - Interpolator Animation
+               - [Animation Effect](ui/ui-js-animate-dynamic-effects.md)
+               - [Animation Frame](ui/ui-js-animate-frame.md)
       - [Custom Components](ui/ui-js-custom-components.md)
     - TypeScript-based Declarative Development Paradigm
       - [Overview](ui/ui-ts-overview.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**.
 
 
 ```
 <!-- index.hml -->
 <div class="container" >
   <tabs>
-   <tab-bar>
+ <tab-bar>
       <text>item1</text>
       <text>item2</text>
     </tab-bar>
@@ -25,7 +25,7 @@ Create a &lt;tabs&gt; component in the .hml file under pages/index.
         <text>content2</text>
       </div>
     </tab-content>
-  </tabs>
+</tabs>
 </div>
 ```
 
@@ -51,13 +51,13 @@ 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**.
 
 
 ```
 <!-- index.hml -->
 <div class="container" style="background-color:#F1F3F5;">
-  <tabs index="1"  vertical="true">
+  <tabs index="1" vertical="true">
     <tab-bar >
       <text>item1</text>
       <text style="margin-top: 50px;">item2</text>
@@ -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-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> <input type="text" style="width:80%"></input>
+</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,24 +88,24 @@ 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;">
-        <label>Option 1</label>
-        <input type='radio' name='radioGroup' value='radio1'></input>
-        <label>Option 2</label>
-        <input type='radio' name='radioGroup' value='radio2'></input>
-      </div>
-      <div style="margin-top: 30px;justify-content: center; align-items: center;">
-        <input type="submit" value="Submit" style="width:100px; margin-right:20px;" ></input>
-        <input type="reset" value="Reset" style="width:100px;"></input>
-      </div>
-    </div> 
+<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>
+      <input type='radio' name='radioGroup' value='radio2'></input>
+    </div>
+    <div style="margin-top: 30px;justify-content: center; align-items: center;">
+      <input type="submit" value="Submit" style="width:100px; margin-right:20px;" ></input>
+      <input type="reset" value="Reset" style="width:100px;"></input>
+    </div>
+    
   </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,31 +44,37 @@ 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;
+ object-fit: contain;
   match-text-direction:true;
 
 }
 ```
 
 
+
 ![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;.
->
-> - &lt;list-item&gt; is a child component of the &lt;list&gt; component and is used to display items in a list.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
+> - **&lt;list-item-group&gt;** is a child component of the **&lt;list&gt;** component and is used to group items in a list. It can have a **&lt;list-item&gt;** nested inside, but not **&lt;list&gt;**.
+> 
+> - **&lt;list-item&gt;** is a child component of the **&lt;list&gt;** component and is used to display items in a list.
 
 
 ## Adding a Scrollbar
 
-To display a scrollbar on the right side of the screen, set scrollbar to on. The side scrollbar can be used to scroll a long list or the screen up or down.
+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.
->
-> - You must include "\#" when using a customized indexer.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
+> - This **indexer** attribute is valid only when **flex-direction** is set to **column** and **columns** is set to **1**.
+> 
+> - You must include **"\#"** when using a customized indexer.
 
 
 ## Collapsing or Expanding a List
 
-To allow a &lt;list&gt; component to collapse and expand, add groupcollapse and groupexpand events.
+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**:
->
-> When setting the value range of a common selector, you must use the data binding mode.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
+> - When setting the value range of a common selector, you must use the data binding mode.
+> 
+> - The **lunarswitch** attribute of the date selector is only supported on phones and tablets.
 
 
 ## Setting the Time Format
 
-Set the hours attribute to specify the time format used by the time selector. Available values include 12 and 24, indicating the 12-hour format and 24-hour format, respectively.
+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.
->
-> - When hours is set to 24, the time is displayed in 24-hour format.
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
+> - When **hours** is set to **12**, the time is displayed in 12-hour format and distinguished by a.m. and p.m.
+> 
+> - When **hours** is set to **24**, the time is displayed in 24-hour format.
 
 
 ## Adding Response Events
 
-To confirm and cancel selection, add change and cancel events.
+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-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.