update docs

Signed-off-by: Nwangshuainan <wangshuainan1@huawei.com>

zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md

@@ -11,8 +11,9 @@
   <!-- xxx.hml -->
   <div>
     <canvas ref="canvas1" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
-    <input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="handleClick" />
-    <input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="antialias" />;</div>
+    <input type="button" style="width: 180px; height: 60px;" value="handleClick" onclick="handleClick" />
+    <input type="button" style="width: 180px; height: 60px;" value="antialias" onclick="antialias" />
+  </div>
   ```
 
   ```
@@ -67,12 +68,13 @@
 
 ### fillStyle
 
-```
+  ```
 <!-- xxx.hml -->
+
 <div>
   <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
 </div>
-```
+  ```
 
 ```
 //xxx.js
@@ -108,6 +110,7 @@ export default {
     ctx.strokeRect(25, 25, 85, 105);
   }
 }
+
 ```
 
 ![zh-cn_image_0000001166484430](figures/zh-cn_image_0000001166484430.png)
@@ -279,6 +282,7 @@ export default {
     ctx.fillText('textAlign=right',140, 140);
   }
 }
+
 ```
 
 
@@ -340,6 +344,7 @@ export default {
     ctx.globalAlpha = 0.4;
     ctx.fillStyle = 'rgb(0,0,255)'; 
     ctx.fillRect(50, 50, 50, 50);
+
   }
 }
 ```
@@ -389,12 +394,12 @@ export default {
   | xor | 使用异或操作对新绘制内容与现有绘制内容进行融合。 |
 
 - 示例
-  ```
+```
   <!-- xxx.hml -->
   <div>
     <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
   </div>
-  ```
+```
 
   ```
   //xxx.js
@@ -423,12 +428,12 @@ export default {
 
 ### shadowBlur
 
-```
+  ```
 <!-- xxx.hml -->
 <div>
   <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
 </div>
-```
+  ```
 
 ```
 //xxx.js
@@ -571,12 +576,12 @@ fillRect(x: number, y: number, width:number, height: number): void
   | height | number | 指定矩形的高度。 |
 
 - 示例
-  ```
+```
   <!-- xxx.hml -->
   <div>
     <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
   </div>
-  ```
+```
 
   ```
   //xxx.js
@@ -1740,8 +1745,8 @@ createImageData(width: number, height: number, imageData: Object): Object
     onShow() {
       const el =this.$refs.canvas;
       const ctx = el.getContext('2d');
-      imageData = ctx.createImageData(50, 100);  // Create ImageData with 50px width and 100px height
-      newImageData = ctx.createImageData(imageData);  // Create ImageData using the input imageData
+      var imageData = ctx.createImageData(50, 100);  // Create ImageData with 50px width and 100px height
+      var newImageData = ctx.createImageData(imageData);  // Create ImageData using the input imageData
     }
   }
   ```
@@ -1777,8 +1782,8 @@ getImageData(sx: number, sy: number, sw: number, sh: number): Object
   //xxx.js
   export default {
     onShow() {
-      var test = this.$element('getImageData')
-      var ctx = test.getContext('2d');
+      const test = this.$element('getImageData')
+      const ctx = test.getContext('2d');
       var imageData = ctx.getImageData(0, 0, 280, 300);
     }
   }
@@ -1813,8 +1818,8 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX: number, dirtyY:
   //xxx.js
   export default {
     onShow() {
-      var test = this.$element('getImageData')
-      var ctx = test.getContext('2d');
+      const test = this.$element('getImageData')
+      const ctx = test.getContext('2d');
       var imgData = ctx.createImageData(100, 100);
       for (var i = 0; i < imgData.data.length; i += 4) {
         imgData.data[i + 0] = 255;

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md

@@ -71,5 +71,3 @@ struct ImageEffectsExample {
   }
 }
 ```
-
-![zh-cn_image_0000001219864157](figures/zh-cn_image_0000001219864157.png)

zh-cn/application-dev/ui/ts-system-resource-access.md

@@ -8,13 +8,13 @@
 
 ```
 Text('Hello')
-    .fontColor($r('sys.color.id_color_emphasize'))
-    .fontSize($r('sys.float.id_text_size_headline1'))
-    .fontFamily($r('sys.string.id_text_font_family_medium'))
-    .backgroundColor($r('sys.color.id_color_palette_aux1'))
-Image($r('sys.media.ic_app'))
-    .border({color: $r('sys.color.id_color_palette_aux1'), radius: $r('sys.float.id_corner_radius_button'), width: 2})
-    .margin({top: $r('sys.float.id_elements_margin_horizontal_m'), bottom: $r('sys.float.id_elements_margin_horizontal_l')})
+    .fontColor($r('sys.color.ohos_id_color_emphasize'))
+    .fontSize($r('sys.float.ohos_id_text_size_headline1'))
+    .fontFamily($r('sys.string.ohos_id_text_font_family_medium'))
+    .backgroundColor($r('sys.color.ohos_id_color_palette_aux1'))
+Image($r('sys.media.ohos_app_icon'))
+    .border({color: $r('sys.color.ohos_id_color_palette_aux1'), radius: $r('sys.float.ohos_id_corner_radius_button'), width: 2})
+    .margin({top: $r('sys.float.ohos_id_elements_margin_horizontal_m'), bottom: $r('sys.float.ohos_id_elements_margin_horizontal_l')})
     .height(200)
     .width(300)
 ```

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

@@ -17,6 +17,7 @@
 ```
 /* xxx.css */
 .container {
+  height: 100%;
   background-color:#F1F3F5;
   display: flex;
   flex-direction: column;
@@ -81,3 +82,5 @@
 
 > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
 > background-position仅支持背景图片的移动，不支持背景颜色（background-color）。
+
+![zh-cn_image_background_img.gif](figures/zh-cn_image_background_img.gif)
\ No newline at end of file

zh-cn/application-dev/ui/ui-js-component-tabs.md

@@ -142,7 +142,8 @@ Tabs默认展示索引为index的标签及内容。通过设置vertical属性使
   margin-top: 10px;
   height: 300px;
   color: blue;   
-  justify-content: center;  align-items: center;
+  justify-content: center;  
+  align-items: center;
 }
 ```
 
@@ -306,4 +307,4 @@ export default {
 }
 ```
 
-![zh-cn_image_tab](figures\zh-cn_image_tab.gif)
+![zh-cn_image_tab.gif](figures/zh-cn_image_tab.gif)
\ No newline at end of file

zh-cn/application-dev/ui/ui-js-components-button.md

@@ -157,7 +157,7 @@ export default {
  setProgress(e) {
     if(this.isPaused){
       prompt.showToast({
-        message: "Download started"
+        message: "Started Ddownloading"
       })
       this.star();
       this.isPaused = false;

zh-cn/application-dev/ui/ui-js-components-chart.md

@@ -117,6 +117,9 @@ Chart组件通过设置type属性定义图表t类型，如将图表设置为柱
   justify-content: center;
   background-color: #F1F3F5;
 }
+.tab-bar{
+  background-color: #F1F3F5;
+}
 .chart-data {
   width: 700px;
   height: 600px;
@@ -494,6 +497,7 @@ export default {
     interval: null,
     title: "数据展示",
     allowScale: true,
+    dataLength: 30,
     barGroup: 3,
     lineData: null,
     lineOps: {

zh-cn/application-dev/ui/ui-js-components-dialog.md

@@ -9,7 +9,8 @@ Dialog组件用于创建自定义弹窗，通常用来展示用户当前需要
 ```
 <!-- xxx.hml -->
 <div class="doc-page">
-  <dialog class="dialogClass" id="dialogId"><div class="content" dragable="ture">
+  <dialog class="dialogClass" id="dialogId" dragable="true">
+    <div class="content">
       <text>this is a dialog</text>
     </div>
   </dialog>
@@ -71,7 +72,7 @@ export default {
 ```
 <!-- xxx.hml -->
 <div class="doc-page">
-  <dialog class="dialogClass" id="dialogId">
+  <dialog class="dialogClass" id="dialogId" oncancel="canceldialog">
     <div class="dialogDiv">
       <text>dialog</text>
       <button value="confirm" onclick="confirmClick"></button>
@@ -120,13 +121,21 @@ button{
 /* xxx.js */
 import prompt from '@system.prompt';
 export default {
+  canceldialog(e){
+    prompt.showToast({
+      message: 'dialogCancel'
+    })
+  },
   openDialog(){
     this.$element('dialogId').show()
+     prompt.showToast({
+      message: 'dialogShow'
+    })
   },
   confirmClick(e) {
     this.$element('dialogId').close()
     prompt.showToast({
-      message: 'Confirmed.'
+      message: 'dialogClose'
     })
   },
 }

zh-cn/application-dev/ui/ui-js-components-form.md

@@ -56,14 +56,18 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp
 ```
 /* xxx.css */
 .container {
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   background-color: #F1F3F5;
 }
 .formClass{
-  width: 100%;
-  height: 20%;
+  width: 80%;
+  height: 100px;
+  padding: 10px;
+  border: 1px solid #cccccc;
 }
 ```
 
@@ -85,11 +89,10 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp
       <label>Option 2</label>
       <input type='radio' name='radioGroup' value='radio2'></input>
     </div>
-    <div style="width: 100%;justify-content: center;">
-      <input type="submit" value="Submit" style="width:100px; margin-right:20px;" >   
+    <div style="width: 100%;justify-content: center; margin-top: 20px">
+      <input type="submit" value="Submit" style="width:120px; margin-right:20px;" >   
       </input>
-      <input type="reset" value="Reset" style="width:100px;"></input>
-    </div>
+      <input type="reset" value="Reset" style="width:120px;"></input>
     </div>
   </form>
 </div>
@@ -101,15 +104,16 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp
   width: 100%;
   height: 100%;
   flex-direction: column;
-  justify-items: center
+  justify-items: center;
   align-items: center;
   background-color: #F1F3F5;
 }
 .form{
   width: 100%;
   height: 30%;
+  margin-top: 40%;
   flex-direction: column;
-  justify-items: center
+  justify-items: center;
   align-items: center;
 }
 ```

zh-cn/application-dev/ui/ui-js-components-images.md

@@ -44,6 +44,8 @@ Image是图片组件，用来渲染展示图片。具体用法请参考[Image AP
 ```
 /* xxx.css */
 .container {
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   align-items: center;
   justify-content: center;
@@ -82,6 +84,8 @@ image{
 ```
 /* xxx.css */
 .container{
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   justify-content: center;
   align-self: center;
@@ -116,7 +120,8 @@ export default {
 }
 ```
 
-![zh-cn_image_0000001188931396](figures/zh-cn_image_0000001188931396.gif)
+![zh-cn_image_images](figures/zh-cn_image_images.gif)
+
 
 
 ## 场景示例
@@ -139,6 +144,8 @@ export default {
 ```
 /* xxx.css */
 .page-container {
+  width: 100%;
+  height: 100%;
   flex-direction:column;
   align-self: center;
   justify-content: center;

zh-cn/application-dev/ui/ui-js-components-list.md

@@ -231,12 +231,15 @@ export default {
 ```
 /* index.css */
 .doc-page {
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   background-color: #F1F3F5;
 }
 .list {
   width: 100%;
-  height: 100%;
+  height: 90%;
+  flex-grow: 1;
 }
 .item {
   height: 120px;

zh-cn/application-dev/ui/ui-js-components-stepper.md

@@ -72,7 +72,7 @@ text{
   width:100%;
   height:100%;
   flex-direction: column;
-  background-color:#F1F3F5;
+  background-color: #F1F3F5;
 }
 text{
   width: 100%;
@@ -87,7 +87,7 @@ text{
 
 ```
 <!-- index.hml -->
-<div class="container" style="background-color:#F1F3F5;"> 
+<div class="container"> 
  <stepper index="1">    
    <stepper-item label="{{label_1}}">     
      <text>stepper-item1</text>
@@ -111,7 +111,7 @@ text{
   width:100%;
   height:100%;
   flex-direction: column;
-  background-color:#F1F3F5;
+  background-color: #F1F3F5;
 }
 text{
   width: 100%;
@@ -124,7 +124,10 @@ text{
 /* index.js */
 export default { 
   data: {
-    label_1:{      nextLabel: 'NEXT',      status: 'normal'    },
+    label_1:{
+      nextLabel: 'NEXT',      
+      status: 'normal'    
+    },
     label_2:{
       prevLabel: 'BACK',
       nextLabel: 'NEXT',
@@ -173,7 +176,8 @@ Stepper组件默认填充父容器，通过border和background-color设置边框
   height: 300px;
 }
 .stepperClass{
-  border:1px solid silver ;  background-color: white;
+  border:1px solid silver ;
+  background-color: white;
 }
 text{
   width: 100%;

zh-cn/application-dev/ui/ui-js-components-swiper.md

@@ -159,7 +159,11 @@ text{
 swiper{
   width:  500px;
   height: 500px;
-  border-radius: 250px;indicator-color: white;  indicator-selected-color: blue;  indicator-size: 40px;  indicator-top: 100px;
+  border-radius: 250px;
+  indicator-color: white;
+  indicator-selected-color: blue;
+  indicator-size: 40px;
+  indicator-top: 100px;
   overflow: hidden ;
 }
 .item{
@@ -330,7 +334,8 @@ swiper{
   transform: scale(0.5);
 }
 .actived{
-  transform: scale(1);border: 1px solid #b20937ea;
+  transform: scale(1);
+  border: 1px solid #b20937ea;
 }
 ```
 

zh-cn/application-dev/ui/ui-js-components-text.md

@@ -155,6 +155,8 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex
   ```
   /* xxx.css */
   .container {
+    width: 100%;
+    height: 100%;
     background-color: #F1F3F5;
     flex-direction: column;
     align-items: center;
@@ -167,6 +169,7 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex
     justify-content: center;
   }
   .text1{
+    width: 100%;
     height: 200px;
     border:1px solid #1a1919;
     margin-bottom: 50px;
@@ -175,6 +178,7 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex
     font-size: 40px;
   }
   .text2{
+    width: 100%;
     height: 200px;
     border:1px solid #0931e8;
     text-align: center;