!3095 updata docs

Merge pull request !3095 from wangshuainan1/master

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

@@ -11,8 +11,8 @@
   <!-- 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">
+    <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>
   ```
 
@@ -29,7 +29,7 @@
     antialias() {
       const el = this.$refs.canvas1;
       const ctx = el.getContext('2d', { antialias: true });
-      ctx.beginPath();   ]
+      ctx.beginPath();   
       ctx.arc(100, 75, 50, 0, 6.28);
       ctx.stroke(); 
       }

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

@@ -72,4 +72,4 @@ 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,12 +89,11 @@ 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>
+      <input type="reset" value="Reset" style="width:120px;"></input>
     </div>
-    </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;