docs修改

Signed-off-by: Nwangshuainan1 <wangshuainan1@huawei.com>
Change-Id: Ica0ffd68cf9250d2da182a105872466d21b9676a
Signed-off-by: Nwangshuainan1 <wangshuainan1@huawei.com>

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

@@ -15,9 +15,8 @@
     <input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="antialias">
   </div>
   ```
-```
 
-```
+  ```
   // xxx.js
   export default {
     handleClick() {
@@ -71,10 +70,11 @@
 
   ```
 <!-- xxx.hml -->
+
 <div>
   <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
 </div>
-```
+  ```
 
 ```
 //xxx.js
@@ -110,6 +110,7 @@ export default {
     ctx.strokeRect(25, 25, 85, 105);
   }
 }
+
 ```
 
 ![zh-cn_image_0000001166484430](figures/zh-cn_image_0000001166484430.png)
@@ -281,6 +282,7 @@ export default {
     ctx.fillText('textAlign=right',140, 140);
   }
 }
+
 ```
 
 
@@ -397,7 +399,7 @@ export default {
   <div>
     <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
   </div>
-  ```
+```
 
   ```
   //xxx.js
@@ -431,7 +433,7 @@ export default {
 <div>
   <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
 </div>
-```
+  ```
 
 ```
 //xxx.js
@@ -579,7 +581,7 @@ fillRect(x: number, y: number, width:number, height: number): void
   <div>
     <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
   </div>
-  ```
+```
 
   ```
   //xxx.js
@@ -1935,3 +1937,5 @@ transferFromImageBitmap(bitmap: ImageBitmap): void
   ![zh-cn_image_0000001168984882](figures/zh-cn_image_0000001168984882.png)
 
   ```
+  
+  ```
\ No newline at end of file

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

@@ -230,12 +230,16 @@ export default {
 ```
 /* xxx.css */
 .container{
+width: 100%;
+height: 100%;
 background-color:#F1F3F5;
 }
 .tab_bar {
   width: 100%;
+  height: 150px;
 }
 .tab_item {
+  height: 30%;
   flex-direction: column;
   align-items: center;
 }
@@ -302,9 +306,4 @@ export default {
 }
 ```
 
-![zh-cn_image_0000001163228602](figures/zh-cn_image_0000001163228602.gif)
-
-
-
-
-
+![zh-cn_image_tab](figures\zh-cn_image_tab.gif)

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

@@ -274,7 +274,7 @@ export default {
       this.ctx.setLineDash([0,0]);
       // 画具有边框的矩形
       this.ctx.strokeRect(200, 150, 200, 200);
-    }else if(e.newValue == 'value2'){
+    }else if (e.newValue == 'value2'){
       this.ctx.clearRect(0,0,600,500);
       this.ctx.lineWidth = 30;
       this.ctx.strokeStyle = '#0000ff';
@@ -283,12 +283,12 @@ export default {
       this.ctx.arc(300, 250, 150,0,6.28);
       //进行边框绘制
       this.ctx.stroke();
-    }else if(e.newValue == 'value3'){
+    }else if (e.newValue == 'value3'){
       this.ctx.clearRect(0,0,600,500);
       this.ctx.lineWidth = 5;
       this.ctx.setLineDash([5,5]);
       this.ctx.strokeRect(200, 150, 200, 200);
-    }else if(e.newValue == 'value4'){
+    }else if (e.newValue == 'value4'){
       this.ctx.clearRect(0,0,600,500);
       // 画一个有填充颜色的矩形
       this.ctx.fillStyle = '#0000ff';

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

@@ -260,12 +260,12 @@ export default {
       {name: "black", checked:false},
     ],
   },
-  toggleClick(index){   
-    for(let i=0;i<this.togglesList.length;i++){     
-      if(i == index){        
+  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{        
+      }else {        
         this.togglesList[i].checked = false;      
       }    
     }  

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

@@ -36,45 +36,39 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex
 
     设置color、font-size、allow-scale、word-spacing、text-valign属性分别为文本添加颜色、大小、缩放、文本之间的间距和文本在垂直方向的对齐方式。 
 
-
-​    
-    <!-- xxx.hml -->
-    <div class="container" style="background-color:#F1F3F5;flex-direction: column;justify-content: center; align-items: center;">   
+```
+<!-- xxx.hml -->
+<div class="container" style="background-color:#F1F3F5;flex-direction: column;justify-content: center; align-items: center;">   
   <text style="color: blueviolet; font-size: 40px; allow-scale:true"> 
     This is a passage
   </text>
   <text style="color: blueviolet; font-size: 40px; margin-top: 20px; allow-scale:true;word-spacing: 20px;" >
     This is a passage
   </text>
-    </div>
-    ```
-
+</div> 
+```
 
-​    
-    /* xxx.css */
-    .container {
+```
+/* xxx.css */
+.container {
   width: 100%;
   height: 100%;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   background-color: #F1F3F5;
-    }
-    ```
+}
+```
 
 
-​    
  ![zh-cn_image_0000001220778205](figures/zh-cn_image_0000001220778205.png)
 
 
 - 添加划线
 
+​    设置text-decoration和text-decoration-colo属性为文本添加划线和划线颜色，text-decoration枚举值请参考    Text自有样式。
 
-    设置text-decoration和text-decoration-colo属性为文本添加划线和划线颜色，text-decoration枚举值请参考Text自有样式。
 
-
-​    
-    ```
     <!-- xxx.hml -->
     <div class="container" style="background-color:#F1F3F5;">
       <text style="text-decoration:underline">
@@ -84,48 +78,36 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex
         This is a passage
        </text>
     </div>
-    ```
-
-
-​    
-    ```
-    /* xxx.css */
-    .container {
+```
+/* xxx.css */
+.container {
   width: 100%;
   height: 100%;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-    }
-    text{
+}
+text{
   font-size: 50px;
-    }
-    ```
-
+}
+```
 
-​    
   ![zh-cn_image_0000001220856725](figures/zh-cn_image_0000001220856725.png)
 
 
 - 隐藏文本内容
 
+  当文本内容过多而显示不全时，添加text-overflow属性将隐藏内容以省略号的形式展现
 
-    当文本内容过多而显示不全时，添加text-overflow属性将隐藏内容以省略号的形式展现。
-
-
-​    
-    ```
-    <!-- xxx.hml -->
-    <div class="container">
+```
+<!-- xxx.hml -->
+<div class="container">
   <text class="text">
     This is a passage
   </text>
-    </div>
-    ```
-
+</div>
+```
 
-​    
-    ```
     /* xxx.css */
     .container {
       width: 100%;
@@ -140,30 +122,23 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex
       max-lines: 1;
       text-overflow:ellipsis;
     }
-    ```
 
+ **说明：**
 
-​    
-    > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-    > - text-overflow样式需要与max-lines样式配套使用，设置了最大行数的情况下生效。
-    > 
-    > - max-lines属性设置文本最多可以展示的行数。
+-  text-overflow样式需要与max-lines样式配套使用，设置了最大行数的情况下生效。
+- max-lines属性设置文本最多可以展示的行数。
 
 
-​    
-    ![zh-cn_image_0000001163656706](figures/zh-cn_image_0000001163656706.png)
+​    ![zh-cn_image_0000001163656706](figures/zh-cn_image_0000001163656706.png)
 
 
 - 设置文本折行
 
+​      设置word-break属性对文本内容做断行处理，word-break枚举值请参考Text自有样式。
 
-    设置word-break属性对文本内容做断行处理，word-break枚举值请参考Text自有样式。
-
-
-​    
-    ```
-    <!-- xxx.hml -->
-    <div class="container">
+```
+<!-- xxx.hml -->
+<div class="container">
   <div class="content">
     <text class="text1">
       Welcome to the world
@@ -172,12 +147,10 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex
         Welcome to the world
       </text>
   </div>
-    </div>
-    ```
+</div
+```
 
 
-​    
-    ```
     /* xxx.css */
     .container {
       background-color: #F1F3F5;
@@ -206,11 +179,9 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex
       word-break: break-all;
       font-size: 40px;
     }
-    ```
 
 
-​    
-    ![zh-cn_image_0000001209033195](figures/zh-cn_image_0000001209033195.png)
+​    ![zh-cn_image_0000001209033195](figures/zh-cn_image_0000001209033195.png)
 
 
 - Text组件支持[Span](../reference/arkui-js/js-components-basic-span.md)子组件

zh-cn/application-dev/ui/ui-ts-layout-flex.md

@@ -120,7 +120,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap,  justifyContent?: F
   Flex({ wrap: FlexWrap.WrapReverse}) {
     Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
     Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
-    Text('3').width('50%').height(50).backgroundColor(0xD2B48C)
+    Text('3').width('50%').height(50).backgroundColor(0xF5DEB3)
   }
   .width('90%')
   .padding(10)