!2790 docs测试修改

Merge pull request !2790 from wangshuainan1/docs/3.29

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

@@ -12,7 +12,8 @@
   <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" />
-    &lt;input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="antialias" /&gt;</div>
+    <input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="antialias">
+  </div>
   ```
 
   ```
@@ -27,9 +28,14 @@
     },
     antialias() {
       const el = this.$refs.canvas1;
-      const ctx = el.getContext('2d', { antialias: true });    ctx.beginPath();    ctx.arc(100, 75, 50, 0, 6.28);    ctx.stroke();  }}
+      const ctx = el.getContext('2d', { antialias: true });
+      ctx.beginPath();   ]
+      ctx.arc(100, 75, 50, 0, 6.28);
+      ctx.stroke(); 
+      }
+    }
   ```
-
+  
 - 示意图（关闭抗锯齿）
   ![zh-cn_image_0000001214837333](figures/zh-cn_image_0000001214837333.png)
 
@@ -62,12 +68,13 @@
 
 ### fillStyle
 
-```
+  ```
 <!-- xxx.hml -->
+
 <div>
   <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
 </div>
-```
+  ```
 
 ```
 //xxx.js
@@ -103,6 +110,7 @@ export default {
     ctx.strokeRect(25, 25, 85, 105);
   }
 }
+
 ```
 
 ![zh-cn_image_0000001166484430](figures/zh-cn_image_0000001166484430.png)
@@ -260,22 +268,21 @@ export default {
     ctx.moveTo(140, 10);
     ctx.lineTo(140, 160);
     ctx.stroke();
-
-    ctx.font = '18px sans-serif';    
-
-  // Show the different textAlign values
-    ctx.textAlign = 'start';      
-    ctx.fillText('textAlign=start', 140, 60);        
-    ctx.textAlign = 'end';      
-    ctx.fillText('textAlign=end', 140, 80);  
-    ctx.textAlign = 'left';      
+    ctx.font = '18px sans-serif'; 
+    // Show the different textAlign values
+    ctx.textAlign = 'start'; 
+    ctx.fillText('textAlign=start', 140, 60);
+    ctx.textAlign = 'end';
+    ctx.fillText('textAlign=end', 140, 80);
+    ctx.textAlign = 'left'; 
     ctx.fillText('textAlign=left', 140, 100);
-    ctx.textAlign = 'center';     
-    ctx.fillText('textAlign=center',140, 120);              
-    ctx.textAlign = 'right';      
+    ctx.textAlign = 'center'; 
+    ctx.fillText('textAlign=center',140, 120);
+    ctx.textAlign = 'right';
     ctx.fillText('textAlign=right',140, 140);
   }
 }
+
 ```
 
 
@@ -300,9 +307,7 @@ export default {
     ctx.moveTo(0, 120);
     ctx.lineTo(400, 120);
     ctx.stroke();
-
     ctx.font = '20px sans-serif';
-
     ctx.textBaseline = 'top'; 
     ctx.fillText('Top', 10, 120); 
     ctx.textBaseline = 'bottom'; 
@@ -339,7 +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;
@@ -1922,7 +1927,7 @@ transferFromImageBitmap(bitmap: ImageBitmap): void
       var offscreen = new OffscreenCanvas(500,500);
       var offscreenCanvasCtx = offscreen.getContext("2d");
       offscreenCanvasCtx.fillRect(0, 0, 200, 200); 
-  
+
       var bitmap = offscreen.transferToImageBitmap();
       canvas.transferFromImageBitmap(bitmap);
     }
@@ -1930,3 +1935,7 @@ 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-animate-component.md

@@ -104,7 +104,30 @@ export default {
     this.options = {
       duration: 4000,
     };
-    this.keyframes = [      {        transform: {          translate: '-120px -0px',          scale: 1,          rotate: 0        },        transformOrigin: '100px 100px',        offset: 0.0,        width: 200,        height: 200      },      {        transform: {          translate: '120px 0px',          scale: 1.5,          rotate: 90        },        transformOrigin: '100px 100px',        offset: 1.0,        width: 300,        height: 300      }    ];
+    this.keyframes = [
+    {
+      transform: {
+        translate: '-120px -0px',   
+        scale: 1,        
+        rotate: 0
+        },   
+        transformOrigin: '100px 100px',  
+        offset: 0.0, 
+        width: 200,  
+        height: 200   
+      }, 
+      {
+        transform: {      
+          translate: '120px 0px',     
+          scale: 1.5,     
+          rotate: 90   
+          },
+          transformOrigin: '100px 100px',
+          offset: 1.0,
+          width: 300,
+          height: 300   
+      }    
+    ];
   },
   Show() {
     this.animation = this.$element('content').animate(this.keyframes, this.options);

zh-cn/application-dev/ui/ui-js-animate-dynamic-effects.md

@@ -25,6 +25,8 @@
 ```
 /* xxx.css */
 .container {
+  width:100%;
+  height:100%;
   flex-direction: column;
   align-items: center;
   justify-content: center;
@@ -90,7 +92,7 @@ animator支持事件和接口，可以通过添加frame、cancel、repeat、fini
 
 ```
 <!-- xxx.hml -->
-<div style="flex-direction: column;align-items: center;">
+<div style="flex-direction: column;align-items: center;width: 100%;height: 100%;">
   <div style="width:200px;height: 200px;margin-top: 100px;background: linear-gradient(#b30d29, #dcac1b);
   transform: scale({{scaleVal}});"></div>
   <div style="width: {{DivWidth}};height: {{DivHeight}};margin-top: 200px;
@@ -113,11 +115,6 @@ animator支持事件和接口，可以通过添加frame、cancel、repeat、fini
 
 ```
 /* xxx.css */
-.container {
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
 button{
   width: 200px;
 }
@@ -128,7 +125,7 @@ button{
   justify-content: space-between;
   margin-top: 150px;
   position: fixed;
-  top: 55%;
+  top: 52%;
   left: 120px;
 }
 .row1{

zh-cn/application-dev/ui/ui-js-animate-transform.md

@@ -25,6 +25,8 @@
 ```
 /* xxx.css */
 .container {
+  width:100%;
+  height:100%;
   background-color:#F1F3F5;
   align-items: center;
   flex-direction: column;
@@ -105,6 +107,8 @@
 ```
 /* xxx.css */
 .container {
+  width:100%;
+  height:100%;
   background-color:#F1F3F5;
   display: flex;
   justify-content: center;

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,4 +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-button.md

@@ -17,6 +17,8 @@ Button是按钮组件，其类型包括胶囊按钮、圆形按钮、文本按
 ```
 /* xxx.css */
 .container {
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -44,6 +46,8 @@ Button是按钮组件，其类型包括胶囊按钮、圆形按钮、文本按
 ```
 /* xxx.css */
 .container {  
+  width: 100%;
+  height: 100%;
   background-color: #F1F3F5;
   flex-direction: column;
   align-items: center;
@@ -106,6 +110,8 @@ Button是按钮组件，其类型包括胶囊按钮、圆形按钮、文本按
 ```
 /* xxx.css */
 .container { 
+  width: 100%;
+  height: 100%;
   background-color: #F1F3F5;  
   flex-direction: column;
   align-items: center;

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

@@ -60,7 +60,10 @@ Canvas组件设置宽（width）、高（height）、背景色（background-colo
   background-color: #F1F3F5;
 }
 canvas{
-  width: 500px;  height: 500px;  background-color: #fdfdfd;  border: 5px solid red;
+  width: 500px;
+  height: 500px;  
+  background-color: #fdfdfd;  
+  border: 5px solid red;
 }
 ```
 
@@ -83,9 +86,29 @@ Canvas添加长按事件，长按后可获取Canvas组件的dataUrl值（toDataU
 
 
 ```
-/* 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.css */
+.container{
+  width:100%;
+  height:100%;
+  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;
+}
 ```
 
 
@@ -99,7 +122,9 @@ export default {
     porc:'open',
   },
   onShow(){
-    let el = this.$refs.canvas1    let ctx = el.getContext("2d")    ctx.strokeRect(100,100,300,300)
+    let el = this.$refs.canvas1;
+    let ctx = el.getContext("2d"); 
+    ctx.strokeRect(100,100,300,300);
   },
   getUrl(){
     let el = this.$refs.canvas1

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';
@@ -395,7 +395,10 @@ export default {
       this.ctx.fillRect(100, 100, 400, 300);
     }else if(e.newValue == 'value3'){
       this.ctx.clearRect(0,0,600,500);
-      let gradient = this.ctx.createLinearGradient(100,100, 400,400);      gradient.addColorStop(0.0, 'red');      gradient.addColorStop(0.5, 'white');      gradient.addColorStop(1, '#17ea35');
+      let gradient = this.ctx.createLinearGradient(100,100, 400,400);             
+      gradient.addColorStop(0.0, 'red');    
+      gradient.addColorStop(0.5, 'white');    
+      gradient.addColorStop(1, '#17ea35');
       // 设置绘制阴影时的模糊级别
       this.ctx.shadowBlur = 30;
       // 绘制阴影时的阴影颜色
@@ -405,9 +408,13 @@ export default {
     }else if(e.newValue == 'value4'){
       this.ctx.clearRect(0,0,600,500);
       this.ctx.clearRect(0,0,600,500);
-      let gradient = this.ctx.createRadialGradient(300,250,20,300,250,200);      gradient.addColorStop(0.0, 'red');      gradient.addColorStop(0.5, 'white');      gradient.addColorStop(1, '#17ea35');
+      let gradient = this.ctx.createRadialGradient(300,250,20,300,250,200);      
+      gradient.addColorStop(0.0, 'red');     
+      gradient.addColorStop(0.5, 'white');     
+      gradient.addColorStop(1, '#17ea35');
       // 设置绘制阴影时的模糊级别
-      this.ctx.shadowBlur = 30;      this.ctx.shadowOffsetY = 30;
+      this.ctx.shadowBlur = 30;     
+      this.ctx.shadowOffsetY = 30;
       // 绘制阴影时的阴影颜色
       this.ctx.shadowColor = 'rgb(23, 1, 1)';
       this.ctx.fillStyle = gradient;

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

@@ -9,7 +9,7 @@ Dialog组件用于创建自定义弹窗，通常用来展示用户当前需要
 ```
 <!-- xxx.hml -->
 <div class="doc-page">
-  <dialog class="dialogClass" id="dialogId"><div class="content">
+  <dialog class="dialogClass" id="dialogId"><div class="content" dragable="ture">
       <text>this is a dialog</text>
     </div>
   </dialog>
@@ -20,6 +20,8 @@ Dialog组件用于创建自定义弹窗，通常用来展示用户当前需要
 ```
 /* xxx.css */
 .doc-page {
+  width:100%;
+  height:100%;
   flex-direction: column;
   align-items: center;
   justify-content: center;
@@ -83,6 +85,8 @@ export default {
 ```
 /* xxx.css */
 .doc-page {
+  width:100%;
+  height:100%;
   flex-direction: column;
   align-items: center;
   justify-content: center;

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

@@ -13,7 +13,8 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp
 ```
 <!-- xxx.hml -->
 <div class="container">
-  <form>  <input type="text" style="width:80%"></input>
+  <form style="width: 100%; height: 20%">  
+    <input type="text" style="width:80%"></input>
   </form>
 </div>
 ```
@@ -21,6 +22,8 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp
 ```
 /* xxx.css */
 .container {
+  width:100%;
+  height:100%;
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -59,9 +62,8 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp
   background-color: #F1F3F5;
 }
 .formClass{
-  width: 80%;
-  padding: 10px;
-  border: 1px solid #c3d3e7;
+  width: 100%;
+  height: 20%;
 }
 ```
 
@@ -72,26 +74,46 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp
 ## 添加响应事件
 
 为Form组件添加submit和reset事件，来提交表单内容或重置表单选项。
+
 ```
 <!-- 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 class="container">
+  <form onsubmit='onSubmit' onreset='onReset' class="form">
+    <div style="width: 100%;justify-content: 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="width: 100%;justify-content: center;">
+      <input type="submit" value="Submit" style="width:100px; margin-right:20px;" >   
+      </input>
+      <input type="reset" value="Reset" style="width:100px;"></input>
+    </div>
     </div> 
   </form>
 </div>
 ```
 
+```
+/* index.css */
+.container{
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  justify-items: center
+  align-items: center;
+  background-color: #F1F3F5;
+}
+.form{
+  width: 100%;
+  height: 30%;
+  flex-direction: column;
+  justify-items: center
+  align-items: center;
+}
+```
+
 ```
 /* xxx.js */
 import prompt from '@system.prompt';

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

@@ -9,13 +9,15 @@ Image是图片组件，用来渲染展示图片。具体用法请参考[Image AP
 ```
 <!-- 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>
 ```
 
 ```
 /* xxx.css */
 .container {
+  width: 100%;
+  height: 100%; 
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -45,15 +47,15 @@ Image是图片组件，用来渲染展示图片。具体用法请参考[Image AP
   flex-direction: column;
   align-items: center;
   justify-content: center;
-background-color:#F1F3F5;
+  background-color:#F1F3F5;
 }
 image{
-  width: 80%;  height: 500px;
+  width: 80%;  
+  height: 500px;
   border: 5px solid saddlebrown;
   border-radius: 20px;
   object-fit: contain;
   match-text-direction:true;
-
 }
 ```
 
@@ -69,10 +71,13 @@ image{
 <div class="page-container">
   <list>
     <list-item class="item-container" for="{{list}}">
-      <image class="testimage" src="{{url[$idx]}}" style="object-fit: {{fit}};"></image>
-      <div class="text-container">
-        <text style="font-size: 32px;color:#7b68ee;">image{{$idx}}</text>
-        <text style="font-size: 23px;color: orange;font-style: italic;">content</text>
+      <div>
+        <image class="testimage" src="{{url[$idx]}}" style="object-fit: {{fit}};">  
+        </image>
+        <div class="text-container">
+          <text style="font-size: 32px;color:#7b68ee;">image{{$idx}}</text>
+          <text style="font-size: 23px;color: orange;font-style: italic;">content</text>
+        </div>
       </div>
     </list-item>
   </list>
@@ -235,7 +240,10 @@ export default {
   justify-content: space-between;
 }
 .testimage {
-  width: 100%;  height: 400px;   object-fit: scale-down;  border-radius: 20px;}
+  width: 100%;  height: 400px;   
+  object-fit: scale-down;  
+  border-radius: 20px;
+}
 ```
 
 ```

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

@@ -17,6 +17,8 @@ Input是交互式组件，用于接收用户数据。其类型可设置为日期
 ```
 /* xxx.css */
 .container {
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -54,6 +56,8 @@ Input是交互式组件，用于接收用户数据。其类型可设置为日期
 ```
 /* xxx.css */
 .container {
+  width: 100%;
+  height: 100%;
   align-items: center;
   flex-direction: column;
   justify-content: center;
@@ -120,6 +124,7 @@ export default {
 /* xxx.css */
 .content {
   width: 100%;
+  height: 100%;
   flex-direction: column;
   align-items: center;
   justify-content: center;
@@ -176,6 +181,7 @@ export default {
 /* xxx.css */
 .content {
   width: 100%;
+  height: 100%;
   flex-direction: column;
   align-items: center;
   justify-content: center;

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

@@ -10,7 +10,8 @@ List是用来显示列表的组件，包含一系列相同宽度的列表项，
 ```
 <!-- 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>
@@ -21,6 +22,8 @@ List是用来显示列表的组件，包含一系列相同宽度的列表项，
 ```
 /* xxx.css */
 .container {
+  width:100%;
+  height:100%;
   flex-direction: column;
   align-items: center;
   background-color: #F1F3F5;
@@ -191,6 +194,7 @@ export default {
 ![zh-cn_image_0000001162911958](figures/zh-cn_image_0000001162911958.gif)
 
 > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>
 > - groupcollapse和groupexpand事件仅支持list-item-group组件使用。
 
 

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

@@ -25,6 +25,8 @@
 ```
 /* xxx.css */
 .container{
+  width: 100%;
+  height: 100%; 
   flex-direction: column;
   background-color: #F1F3F5;
   align-items: center;
@@ -65,6 +67,8 @@
 ```
 /* xxx.css */
 .container{
+  width: 100%;
+  height: 100%; 
   flex-direction: column;
   background-color: #F1F3F5;
   align-items: center;
@@ -115,6 +119,8 @@ option{
 ```
 /* xxx.css */
 .container{
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   background-color: #F1F3F5;
   width: 100%;
@@ -254,7 +260,16 @@ export default {
       {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;      }    }  },
+  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;

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

@@ -17,6 +17,8 @@ Picker是滑动选择器组件，类型支持普通选择器、日期选择器
 ```
 /* index.css */
 .container {
+  width: 100%;
+  height: 100%; 
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -42,6 +44,8 @@ Picker是滑动选择器组件，类型支持普通选择器、日期选择器
 ```
 /* index.css */
 .container {
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -86,6 +90,8 @@ Picker的hours属性定义时间的展现格式，可选类型有12小时制和2
 ```
 /* index.css */
 .container {
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -121,6 +127,8 @@ Picker的hours属性定义时间的展现格式，可选类型有12小时制和2
 ```
 /* index.css */
 .container {
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   justify-content: center;
   align-items: center;

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

@@ -17,8 +17,6 @@ Slider为滑动条组件，用来快速调节音量、亮度等。具体用法
 </div>
 ```
 
-
-
 ```
 /* xxx.css */
 .container {
@@ -119,6 +117,8 @@ Slider组件通过color、selected-color、block-color样式分别为滑动条
 ```
 /* xxx.css */
 .container {
+  width: 100%;
+  height: 100%; 
   flex-direction: column;
   justify-content: center;
   align-items: center;

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

@@ -14,7 +14,8 @@
 ```
 <!-- index.hml -->
 <div class="container"> 
- <stepper>    <stepper-item>     
+ <stepper>    
+   <stepper-item>     
      <text>Step 1</text>
    </stepper-item> 
    <stepper-item>     
@@ -27,6 +28,8 @@
 ```
 /* xxx.css */
 .container {
+  width:100%;
+  height:100%;
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -66,6 +69,8 @@ text{
 ```
 /* index.css */
 .container {
+  width:100%;
+  height:100%;
   flex-direction: column;
   background-color:#F1F3F5;
 }
@@ -102,7 +107,9 @@ text{
 
 ```
 /* index.css */
-.container {
+.container {  
+  width:100%;
+  height:100%;
   flex-direction: column;
   background-color:#F1F3F5;
 }
@@ -154,6 +161,8 @@ Stepper组件默认填充父容器，通过border和background-color设置边框
 ```
 /* index.css */
 .container {
+  width:100%;
+  height:100%;
   flex-direction: column;
   align-items: center;
   justify-content: center;
@@ -208,6 +217,8 @@ Stepper分别添加finish，change，next，back，skip事件。
 ```
 /* xxx.css */
 .doc-page {
+  width:100%;
+  height:100%;
   flex-direction: column;
   align-items: center;
   justify-content: center;
@@ -325,6 +336,8 @@ export default {
 ```
 /* xxx.css */
 .container {
+  width:100%;
+  height:100%;
   flex-direction: column;
   align-items: center;
   justify-content: center;

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

@@ -28,18 +28,24 @@ Swiper为滑动容器，提供切换显示子组件的能力。具体用法请
 ```
 /* xxx.css */
 .container{
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   background-color: #F1F3F5;
   align-items: center;
   justify-content: center;
   width: 100%;
 }
+swiper{
+  height: 30%;
+}
 .item{
   width: 100%;
   height: 500px;
 }
 text{
   width: 100%;
+  height: 100%;
   text-align: center;
   font-size: 50px;
   color: white;
@@ -84,11 +90,15 @@ Swiper组件当不开启循环播放（loop="false"）时添加自动播放属
 ```
 /* xxx.css */
 .container{
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   background-color: #F1F3F5;
   align-items: center;
   justify-content: center;
-  width: 100%;
+}
+swiper{
+  height: 30%;
 }
 .item{
   width: 100%;
@@ -96,6 +106,7 @@ Swiper组件当不开启循环播放（loop="false"）时添加自动播放属
 }
 text{
   width: 100%;
+  height: 100%;
   text-align: center;
   font-size: 50px;
   color: white;
@@ -138,11 +149,12 @@ text{
 ```
 /* xxx.css */
 .container{
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   background-color: #F1F3F5;
   align-items: center;
   justify-content: center;
-  width: 100%;
 }
 swiper{
   width:  500px;
@@ -205,11 +217,15 @@ text{
 ```
 /* xxx.css */
 .container{
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   background-color: #F1F3F5;
   align-items: center;
   justify-content: center;
-  width: 100%;
+}
+swiper{
+  height: 30%;
 }
 .item{
   width: 100%;
@@ -217,6 +233,7 @@ text{
 }
 text{
   width: 100%;
+  height: 100%;
   text-align: center;
   font-size: 50px;
   color: white;

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

@@ -44,6 +44,8 @@ Switch为开关选择器，切换开启或关闭状态。具体用法请参考[S
 ```
 /* xxx.css */
 .container {
+  width: 100%;
+  height: 100%; 
   display: flex;
   justify-content: center;
   align-items: center;
@@ -53,7 +55,7 @@ switch{
   // 选中时的字体颜色
   texton-color: #002aff;
   // 未选中时的字体颜色
-textoff-color: silver;
+  textoff-color: silver;
   text-padding: 20px; 
   font-size: 50px;
 }
@@ -114,6 +116,8 @@ export default {
 ```
 /* xxx.css */
 .container {
+  width: 100%;
+  height: 100%; 
   background-color: #F1F3F5;
   flex-direction: column;
   padding: 50px;

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

@@ -34,45 +34,41 @@ 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;">   
-      <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>
-    ```
-    
-    
-    ```
-    /* 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)
+    设置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;">   
+  <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> 
+```
+
+```
+/* 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">
@@ -80,46 +76,38 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex
       </text>
       <text style="text-decoration:line-through;text-decoration-color: red">
         This is a passage
-      </text>
+       </text>
     </div>
-    ```
-    
-    
-    ```
-    /* xxx.css */
-    .container {
-      width: 100%;
-      height: 100%;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-    }
-    text{
-      font-size: 50px;
-    }
-    ```
-    
-    
-    ![zh-cn_image_0000001220856725](figures/zh-cn_image_0000001220856725.png)
+```
+/* xxx.css */
+.container {
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+text{
+  font-size: 50px;
+}
+```
+
+  ![zh-cn_image_0000001220856725](figures/zh-cn_image_0000001220856725.png)
 
 
 - 隐藏文本内容
 
+  当文本内容过多而显示不全时，添加text-overflow属性将隐藏内容以省略号的形式展现
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <text class="text">
+    This is a passage
+  </text>
+</div>
+```
 
-    当文本内容过多而显示不全时，添加text-overflow属性将隐藏内容以省略号的形式展现。
-    
-    
-    ```
-    <!-- xxx.hml -->
-    <div class="container">
-      <text class="text">
-        This is a passage
-      </text>
-    </div>
-    ```
-    
-    
-    ```
     /* xxx.css */
     .container {
       width: 100%;
@@ -127,47 +115,42 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex
       flex-direction: column;
       align-items: center;
       background-color: #F1F3F5;
-      justify-content: center;
+      justify-content: center; 
     }
     .text{
       width: 200px;
       max-lines: 1;
       text-overflow:ellipsis;
     }
-    ```
-    
-    
-    > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-    > - text-overflow样式需要与max-lines样式配套使用，设置了最大行数的情况下生效。
-    > 
-    > - max-lines属性设置文本最多可以展示的行数。
-    
-    
-    ![zh-cn_image_0000001163656706](figures/zh-cn_image_0000001163656706.png)
+
+ **说明：**
+
+-  text-overflow样式需要与max-lines样式配套使用，设置了最大行数的情况下生效。
+- max-lines属性设置文本最多可以展示的行数。
+
+
+​    ![zh-cn_image_0000001163656706](figures/zh-cn_image_0000001163656706.png)
 
 
 - 设置文本折行
 
+​      设置word-break属性对文本内容做断行处理，word-break枚举值请参考Text自有样式。
+
+```
+<!-- xxx.hml -->
+<div class="container">
+  <div class="content">
+    <text class="text1">
+      Welcome to the world
+    </text>
+      <text class="text2">
+        Welcome to the world
+      </text>
+  </div>
+</div
+```
+
 
-    设置word-break属性对文本内容做断行处理，word-break枚举值请参考Text自有样式。
-    
-    
-    ```
-    <!-- xxx.hml -->
-    <div class="container">
-      <div class="content">
-        <text class="text1">
-          Welcome to the world
-        </text>
-        <text class="text2">
-          Welcome to the world
-        </text>
-      </div>
-    </div>
-    ```
-    
-    
-    ```
     /* xxx.css */
     .container {
       background-color: #F1F3F5;
@@ -196,23 +179,25 @@ 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)子组件
 
-    
+  
     ```
     <!-- xxx.hml -->
-    <div class="container" style="justify-content: center; align-items: center;flex-direction: column;background-color: #F1F3F5;">
+    <div class="container" style="justify-content: center; align-items: center;flex-direction: column;background-color: #F1F3F5;  width: 100%;height: 100%;">
       <text style="font-size: 45px;">
         This is a passage
       </text>
       <text style="font-size: 45px;">
-        <span style="color: aqua;">This </span><span style="color: #F1F3F5;">      1    </span>    <span style="color: blue;"> is a </span>    <span style="color: #F1F3F5;">      1    </span>    <span style="color: red;">  passage </span>
+        <span style="color: aqua;">This </span><span style="color: #F1F3F5;">      1       
+        </span>   
+        <span style="color: blue;"> is a </span>    <span style="color: #F1F3F5;">      1    </span>    
+        <span style="color: red;">  passage </span>
       </text>
     </div>
     ```
@@ -253,6 +238,8 @@ Text组件通过数据绑定展示文本内容，Span组件通过设置show属
 ```
 /* xxx.css */
 .container {
+  width: 100%;
+  height: 100%;
   align-items: center;
   flex-direction: column;
   justify-content: center;

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

@@ -23,6 +23,8 @@ Toolbar为页面工具栏组件，用于展示针对当前界面的操作选项
 ```
 /* xxx.css */
 .container {
+  width: 100%;
+  height: 100%; 
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -44,7 +46,12 @@ toolbar-item{
 <!-- xxx.hml -->
 <div class="container">
   <toolbar>
-    <toolbar-item value="item1"></toolbar-item>    <toolbar-item value="item2"></toolbar-item>    <toolbar-item value="item3"></toolbar-item>    <toolbar-item value="item4"></toolbar-item>    <toolbar-item value="item5"></toolbar-item>    <toolbar-item value="item6"></toolbar-item>
+    <toolbar-item value="item1"></toolbar-item>    
+    <toolbar-item value="item2"></toolbar-item>    
+    <toolbar-item value="item3"></toolbar-item>    
+    <toolbar-item value="item4"></toolbar-item>    
+    <toolbar-item value="item5"></toolbar-item>    
+    <toolbar-item value="item6"></toolbar-item>
   </toolbar>
 </div>
 ```
@@ -53,6 +60,8 @@ toolbar-item{
 ```
 /* xxx.css */
 .container {
+  width: 100%;
+  height: 100%; 
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -92,6 +101,7 @@ toolbar-item{
   background-color: #F1F3F5;
   flex-direction: column;
   width: 100%;
+  height: 100%; 
   justify-content: center;
   align-items: center;
 }
@@ -131,6 +141,7 @@ toolbar-item{
   background-color: #F1F3F5;   
   flex-direction: column;
   width: 100%;
+  height: 100%; 
   justify-content: center;
   align-items: center;
 }

zh-cn/application-dev/ui/ui-ts-layout-grid-container.md

@@ -108,8 +108,8 @@ GridContainer() {
 struct GridContainerExample {
   build() {
     Column({ space: 5 }) {
-      GridContainer({ columns: 6, sizeType: SizeType.Auto, gutter: 10, margin: 20 }) {
-        Row() {
+      GridContainer({ columns: 6 }) {
+        Flex({justifyContent:FlexAlign.SpaceAround}) {
           Text('1')
             .useSizeType({
               xs: { span: 2, offset: 0 },
@@ -120,18 +120,18 @@ struct GridContainerExample {
             .height(100).backgroundColor(0x4682B4).textAlign(TextAlign.Center)
           Text('2')
             .useSizeType({
-              xs: { span: 2, offset: 2 },
-              sm: { span: 2, offset: 2 },
-              md: { span: 4, offset: 1 },
-              lg: { span: 4, offset: 1 },
+              xs: { span: 2, offset: 0 },
+              sm: { span: 2, offset: 0 },
+              md: { span: 4, offset: 0 },
+              lg: { span: 4, offset: 0 },
             })
             .height(100).backgroundColor(0x46F2B4).textAlign(TextAlign.Center)
           Text('3')   
             .useSizeType({
-              xs: { span: 2, offset: 4 },
-              sm: { span: 2, offset: 4 },
-              md: { span: 1, offset: 5 },
-              lg: { span: 1, offset: 5 },
+              xs: { span: 2, offset: 0 },
+              sm: { span: 2, offset: 0 },
+              md: { span: 1, offset: 0 },
+              lg: { span: 1, offset: 0 },
             })
             .height(100).backgroundColor(0x46A2B4).textAlign(TextAlign.Center)
         }