diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263259399.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263259399.png
index c9e2e084909884daa701f5e967050c849c036e5a..dc4a266c02708116362da21577d5b1e582a011fd 100644
Binary files a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263259399.png and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263259399.png differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263259399.png:Zone.Identifier b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263259399.png:Zone.Identifier
new file mode 100644
index 0000000000000000000000000000000000000000..5014c60c73db838c90d6285f59594ffeae398275
--- /dev/null
+++ b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263259399.png:Zone.Identifier
@@ -0,0 +1,4 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=https://gitee.com/openharmony/docs/pulls/2845/files
+HostUrl=https://gitee.com/openharmony/docs/raw/32dae5064fb2c1d43eb8a383be7af76c9d8c4d44/zh-cn/application-dev/ui/figures/zh-cn_image_0000001263259399.png
diff --git a/zh-cn/application-dev/ui/ui-js-animate-component.md b/zh-cn/application-dev/ui/ui-js-animate-component.md
index 674d3c3b9c5aea8f80b913189dce383836805dbe..91baf79e1993a469e46f03560e64d79e3c14e0ae 100644
--- a/zh-cn/application-dev/ui/ui-js-animate-component.md
+++ b/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);
diff --git a/zh-cn/application-dev/ui/ui-js-animate-dynamic-effects.md b/zh-cn/application-dev/ui/ui-js-animate-dynamic-effects.md
index b4d2bf487d7fd39890b98e6311b2bf9bfbfc58c2..b5b8a275fc48d3b404b54a1acffdb4edd4751bf2 100644
--- a/zh-cn/application-dev/ui/ui-js-animate-dynamic-effects.md
+++ b/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{
diff --git a/zh-cn/application-dev/ui/ui-js-animate-transform.md b/zh-cn/application-dev/ui/ui-js-animate-transform.md
index 84ba60eeeb7f9b199b2db5bf6f138318965e6fee..7f1b5f194090db2b67e9874181b58ae71c0dc760 100644
--- a/zh-cn/application-dev/ui/ui-js-animate-transform.md
+++ b/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;
diff --git a/zh-cn/application-dev/ui/ui-js-component-tabs.md b/zh-cn/application-dev/ui/ui-js-component-tabs.md
index dde5e27d490661f3ed06920e05fce19b3cc04142..f074c9f5c2a24454d8396d3f26ed33f1136bc5ea 100644
--- a/zh-cn/application-dev/ui/ui-js-component-tabs.md
+++ b/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)
diff --git a/zh-cn/application-dev/ui/ui-js-components-button.md b/zh-cn/application-dev/ui/ui-js-components-button.md
index ea30278322fffc7e711ecde9c53a588fad1bf680..15b0919cb1823ed7ad29dd2df8d051c39aaddb32 100644
--- a/zh-cn/application-dev/ui/ui-js-components-button.md
+++ b/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;
diff --git a/zh-cn/application-dev/ui/ui-js-components-canvas.md b/zh-cn/application-dev/ui/ui-js-components-canvas.md
index a661e145b8798638dce291fcf2bc962ae69e479d..af17ad1a6e310f59778272bb3dfd044a7fcbf775 100644
--- a/zh-cn/application-dev/ui/ui-js-components-canvas.md
+++ b/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
diff --git a/zh-cn/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md b/zh-cn/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md
index 02ff012214964e60d5d128a23ce2188adc39a909..3865c41f1e740d805909dee85c0d5b0d62ea8c53 100644
--- a/zh-cn/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md
+++ b/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;
diff --git a/zh-cn/application-dev/ui/ui-js-components-dialog.md b/zh-cn/application-dev/ui/ui-js-components-dialog.md
index dea91fd511d9598d723dd9a720551119453a6583..8995652ec1459364030b145d1cc385148b3deebf 100644
--- a/zh-cn/application-dev/ui/ui-js-components-dialog.md
+++ b/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;
diff --git a/zh-cn/application-dev/ui/ui-js-components-form.md b/zh-cn/application-dev/ui/ui-js-components-form.md
index 6c84b6395881489bb419cd9d057628315f7a5234..43eb0538f1c58edbbbb3c5ab5e1a7acaaff4f69b 100644
--- a/zh-cn/application-dev/ui/ui-js-components-form.md
+++ b/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';
diff --git a/zh-cn/application-dev/ui/ui-js-components-images.md b/zh-cn/application-dev/ui/ui-js-components-images.md
index f6833719256cbaab51cf8ae84e9f58e351ca74df..10a8f05bdc30869c07d65f17f70cf0e4119379b3 100644
--- a/zh-cn/application-dev/ui/ui-js-components-images.md
+++ b/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;
+}
 ```
 
 ```
diff --git a/zh-cn/application-dev/ui/ui-js-components-input.md b/zh-cn/application-dev/ui/ui-js-components-input.md
index b37afa8a946c8886352ca77754c0ad1acc3f8cd8..b8afcf6a8a0939b862935e7aa17c8c71ed5e519d 100644
--- a/zh-cn/application-dev/ui/ui-js-components-input.md
+++ b/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;
diff --git a/zh-cn/application-dev/ui/ui-js-components-list.md b/zh-cn/application-dev/ui/ui-js-components-list.md
index c0bc55579ab778df91329c6cfcc1ba586aba0f03..45287a52316872090ed15ddb4a53a14729a138af 100644
--- a/zh-cn/application-dev/ui/ui-js-components-list.md
+++ b/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组件使用。
 
 
diff --git a/zh-cn/application-dev/ui/ui-js-components-menu.md b/zh-cn/application-dev/ui/ui-js-components-menu.md
index d364094b02bfbcfd9d5db511251e48bc0bf3b86d..0ea286c5d05009fa0c147059a3ae069a8e823d23 100644
--- a/zh-cn/application-dev/ui/ui-js-components-menu.md
+++ b/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;
diff --git a/zh-cn/application-dev/ui/ui-js-components-picker.md b/zh-cn/application-dev/ui/ui-js-components-picker.md
index 47037d75d91308a780692b2eb6da4d9f5fd942ad..7d0e4b91b6cf6011f776b1f75d75eb0890099c23 100644
--- a/zh-cn/application-dev/ui/ui-js-components-picker.md
+++ b/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;
diff --git a/zh-cn/application-dev/ui/ui-js-components-slider.md b/zh-cn/application-dev/ui/ui-js-components-slider.md
index 8c889388e26498991e37f0fd1f0ca5b3ded1f18b..7b724f90b67e27752e4d5174221bd5eccfb0ddad 100644
--- a/zh-cn/application-dev/ui/ui-js-components-slider.md
+++ b/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;
diff --git a/zh-cn/application-dev/ui/ui-js-components-stepper.md b/zh-cn/application-dev/ui/ui-js-components-stepper.md
index 22479506c1f62bb740356386eaa4ef374e1ad704..15c8e42a4a754135e2b00941b493561c1add216a 100644
--- a/zh-cn/application-dev/ui/ui-js-components-stepper.md
+++ b/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;
diff --git a/zh-cn/application-dev/ui/ui-js-components-swiper.md b/zh-cn/application-dev/ui/ui-js-components-swiper.md
index de6c56907cf20ef9484c5101ffff11494f984909..de9f3aa008425bd06e50e3c7865e5a764aabb2f7 100644
--- a/zh-cn/application-dev/ui/ui-js-components-swiper.md
+++ b/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;
diff --git a/zh-cn/application-dev/ui/ui-js-components-switch.md b/zh-cn/application-dev/ui/ui-js-components-switch.md
index 4991f8587af2f5e0526245f7dc2b1171f4c50574..aa7e7e71cb4f1e7d7e9a1b850fa5cff7c533bc46 100644
--- a/zh-cn/application-dev/ui/ui-js-components-switch.md
+++ b/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;
diff --git a/zh-cn/application-dev/ui/ui-js-components-text.md b/zh-cn/application-dev/ui/ui-js-components-text.md
index 96dfb5a196b80a0cf9f24d836bb71c8668159927..b6b79dffe348edec5ab3ff51f76aaf3dc1a52088 100644
--- a/zh-cn/application-dev/ui/ui-js-components-text.md
+++ b/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;
diff --git a/zh-cn/application-dev/ui/ui-js-components-toolbar.md b/zh-cn/application-dev/ui/ui-js-components-toolbar.md
index cfbe78bf94d912ae2fcac8ad8c3e7bf2cb593cc6..09f8c17ff06b5d686d2367da9eb3014b70bac79f 100644
--- a/zh-cn/application-dev/ui/ui-js-components-toolbar.md
+++ b/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;
 }
diff --git a/zh-cn/application-dev/ui/ui-ts-layout-grid-container.md b/zh-cn/application-dev/ui/ui-ts-layout-grid-container.md
index 23a040c5169edcdc73f6837dd9bbd89c39019d12..df9383f16bbd3f62f6de1e8dd6d148ca19d0dedc 100644
--- a/zh-cn/application-dev/ui/ui-ts-layout-grid-container.md
+++ b/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)
         }