diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/sidebarContainer1.gif b/zh-cn/application-dev/reference/arkui-ts/figures/sidebarContainer1.gif
deleted file mode 100644
index a4aa68ab14725566201a701b3fd10e6e11a868f3..0000000000000000000000000000000000000000
Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/sidebarContainer1.gif and /dev/null differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/sidebarContainer2.gif b/zh-cn/application-dev/reference/arkui-ts/figures/sidebarContainer2.gif
deleted file mode 100644
index bd91fd96b60f83ca9b1afd0bd6e61390b311b520..0000000000000000000000000000000000000000
Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/sidebarContainer2.gif and /dev/null differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/sidebarcontainer.png b/zh-cn/application-dev/reference/arkui-ts/figures/sidebarcontainer.png
new file mode 100644
index 0000000000000000000000000000000000000000..3ffdcfd3f49600ab53aa5b2a1fb11c4ce5078386
Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/sidebarcontainer.png differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md
index c2fa88f621581a8f6d4e97251a341ee2019e8a71..59ea8bf4922847804e96d2dad708696fb5885d85 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md
@@ -44,8 +44,8 @@ ScrollBar(value: { scroller: Scroller, direction?: ScrollBarDirection, state?: B
 @Entry
 @Component
 struct ScrollBarExample {
-  private scroller: Scroller = new Scroller();
-  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+  private scroller: Scroller = new Scroller()
+  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
 
   build() {
     Column() {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-select.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-select.md
index 7ae1069f787a189102acc00b989cc8d25dc125d8..055451e0feea7c6140d477b19e42ed09a352c661 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-select.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-select.md
@@ -61,7 +61,7 @@ struct SelectExample {
         .selectedOptionFont({ size: 40, weight: 500, family: 'serif', style: FontStyle.Normal })
         .optionFont({ size: 30, weight: 400, family: 'serif', style: FontStyle.Normal })
         .onSelect((index: number) => {
-          console.info("Select:" + index);
+          console.info("Select:" + index)
         })
     }
   }
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md
index 67ca4f9ba5dbe8e217c59b5bbd7fd549dbade31b..feea880eb6a5486c8bbf2263ecfdc93bcb520ed6 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md
@@ -48,14 +48,14 @@ TextPicker(options?: {range: string[]|Resource, selected?: number, value?: strin
 @Entry
 @Component
 struct TextPickerExample {
-  private select: number = 1;
-  private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4'];
+  private select: number = 1
+  private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4']
 
   build() {
     Column() {
       TextPicker({range: this.fruits, selected: this.select})
         .onChange((value: string, index: number) => {
-          console.info('Picker item changed, value: ' + value + ', index: ' + index);
+          console.info('Picker item changed, value: ' + value + ', index: ' + index)
         })
     }
   }
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-refresh.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-refresh.md
index 06b80c46bafca15944c3de474a6262e36cc32f77..d03a2a041999f38c12d8dad5d2cd1f70e8656a7d 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-container-refresh.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-refresh.md
@@ -50,8 +50,8 @@ Refresh\(value: \{ refreshing: boolean, offset?:  number | string , fr
 @Entry
 @Component
 struct RefreshExample {
-  @State isRefreshing: boolean = false;
-  @State counter: number = 0;
+  @State isRefreshing: boolean = false
+  @State counter: number = 0
 
   build() {
     Column() {
@@ -61,14 +61,14 @@ struct RefreshExample {
           .margin(10)
       }
       .onStateChange((refreshStatus: RefreshStatus) => {
-        console.info('Refresh onStatueChange state is ' + refreshStatus);
+        console.info('Refresh onStatueChange state is ' + refreshStatus)
       })
       .onRefreshing(() => {
         setTimeout(() => {
-          this.counter++;
-          this.isRefreshing = false;
+          this.counter++
+          this.isRefreshing = false
         }, 1000)
-        console.log('onRefreshing test');
+        console.log('onRefreshing test')
       })
     }
   }
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md
index 4b92197e06d287a71eb73d2119eee436813d10a1..3ef11f73e3e90adfc0eccd69fa76bbf51027be4d 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md
@@ -20,27 +20,27 @@ SideBarContainer( type?: SideBarContainerType )
 
 | 参数名 | 参数类型 | 必填 | 参数描述 |
 | -------- | -------- | -------- | -------- |
-| type | [SideBarContainerType](#SideBarContainerType枚举说明) | 否 | 设置侧边栏的显示类型。<br/>默认值：SideBarContainerType.Embed |
+| type | SideBarContainerType | 否 | 设置侧边栏的显示类型。<br/>默认值：SideBarContainerType.Embed |
 
 ## SideBarContainerType枚举说明
 
 | 名称 | 描述 |
 | -------- | -------- |
 | Embed | 侧边栏嵌入到组件内，和内容区并列显示。 |
-| Overlay | 侧边栏悬浮在内容区上面显示。 |
+| Overlay | 侧边栏浮在内容区上面。 |
 
 ## 属性
 
 | 名称 | 参数类型 | 描述 |
 | -------- | -------- | -------- |
-| showSideBar | boolean | 设置是否显示侧边栏。<br/>默认值：false |
-| controlButton | [ButtonStyle](#buttonstyle对象说明)                  | 设置侧边栏控制按钮的属性，包括定位，尺寸，图表等。 |
+| showSideBar | boolean | 设置是否显示侧边栏。<br/>默认值：true |
+| controlButton | ButtonStyle                                                | 设置侧边栏控制按钮的属性。 |
 | showControlButton | boolean | 设置是否显示控制按钮。<br/>默认值：true |
-| sideBarWidth | number&nbsp;\|&nbsp;[Length](ts-types.md#length) | 设置侧边栏的宽度。<br/>默认值：200，单位vp |
-| minSideBarWidth | number&nbsp;\|&nbsp;[Length](ts-types.md#length) | 设置侧边栏最小宽度。<br/>默认值：200，单位vp |
-| maxSideBarWidth | number&nbsp;\|&nbsp;[Length](ts-types.md#length) | 设置侧边栏最大宽度。<br/>默认值：280，单位vp |
+| sideBarWidth | number&nbsp;\|&nbsp;Length<sup>9+</sup> | 设置侧边栏的宽度。<br/>默认值：200，单位vp |
+| minSideBarWidth | number&nbsp;\|&nbsp;Length<sup>9+</sup> | 设置侧边栏最小宽度。<br/>默认值：200，单位vp |
+| maxSideBarWidth | number&nbsp;\|&nbsp;Length<sup>9+</sup> | 设置侧边栏最大宽度。<br/>默认值：280，单位vp |
 | autoHide<sup>9+</sup> | boolean | 设置当侧边栏拖拽到小于最小宽度后，是否自动隐藏。<br/>默认值：true |
-| sideBarPosition<sup>9+</sup> | [SideBarPosition](#sidebarposition9枚举说明) | 设置侧边栏显示位置。<br/>默认值：SideBarPosition.Start |
+| sideBarPosition<sup>9+</sup> | SideBarPosition | 设置侧边栏显示位置。<br/>默认值：SideBarPosition.Start |
 
 ## ButtonStyle对象说明
 
@@ -59,6 +59,13 @@ SideBarContainer( type?: SideBarContainerType )
 | Start | 侧边栏位于容器左侧。 |
 | End | 侧边栏位于容器右侧。 |
 
+## SideBarPosition<sup>9+</sup>枚举说明
+
+| 名称 | 描述 |
+| -------- | -------- |
+| Start | 侧边栏位于容器左侧。 |
+| End | 侧边栏位于容器右侧。 |
+
 ## 事件
 
 | 名称 | 功能描述 |
@@ -73,13 +80,14 @@ SideBarContainer( type?: SideBarContainerType )
 @Entry
 @Component
 struct SideBarContainerExample {
-  normalIcon: Resource = $r("app.media.icon");
-  selectedIcon: Resource = $r("app.media.icon");
-  @State arr: number[] = [1, 2, 3];
-  @State current: number = 1;
+  normalIcon : Resource = $r("app.media.icon")
+  selectedIcon: Resource = $r("app.media.icon")
+  @State arr: number[] = [1, 2, 3]
+  @State current: number = 1
 
   build() {
-    SideBarContainer(SideBarContainerType.Embed) {
+    SideBarContainer(SideBarContainerType.Embed)
+    {
       Column() {
         ForEach(this.arr, (item, index) => {
           Column({ space: 5 }) {
@@ -90,41 +98,28 @@ struct SideBarContainerExample {
               .fontFamily('source-sans-pro,cursive,sans-serif')
           }
           .onClick(() => {
-            this.current = item;
+            this.current = item
           })
         }, item => item)
       }.width('100%')
       .justifyContent(FlexAlign.SpaceEvenly)
       .backgroundColor('#19000000')
 
+
       Column() {
-        Text('SideBarContainer content text.').fontSize(20)
+        Text('SideBarContainer content text1').fontSize(25)
+        Text('SideBarContainer content text2').fontSize(25)
       }
       .margin({ top: 50, left: 20, right: 30 })
     }
-    .showSideBar(true) // 显示侧边栏
-    .controlButton({
-      width: 30,
-      height: 30,
-      left: 30,
-      top: 30
-    }) // 控制按钮属性
-    .showControlButton(true) // 展示控制按钮
-    .sideBarWidth(150) // 侧边栏宽度
-    .minSideBarWidth(50) // 侧边栏最小宽度
-    .maxSideBarWidth(300) //侧边栏最大宽度
-    .autoHide(true)
-    .sideBarPosition(SideBarPosition.Start) //侧边栏位于容器左侧
+    .sideBarWidth(150)
+    .minSideBarWidth(50)
+    .maxSideBarWidth(300)
     .onChange((value: boolean) => {
-      console.info('status:' + value);
+      console.info('status:' + value)
     })
   }
 }
 ```
-SideBarContainerType为Embed效果如下：
-
-![](figures/sidebarContainer1.gif)
-
-SideBarContainerType为Ovelay时效果如下：
 
-![](figures/sidebarContainer2.gif)
+![](figures/sidebarcontainer.png)
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-click.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-click.md
index 6df927abab9572f70a4d3d3374aad1ea960b88be..d1610c4254088fc5cb2dc1497ad665de8f80cb49 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-click.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-click.md
@@ -22,22 +22,22 @@
 @Entry
 @Component
 struct TouchAbleExample {
-  @State text1: string = '';
-  @State text2: string = '';
+  @State text1: string = ''
+  @State text2: string = ''
 
   build() {
     Stack() {
       Rect()
         .fill(Color.Gray).width(150).height(150)
         .onClick(() => {
-          console.info(this.text1 = 'Rect Clicked');
+          console.info(this.text1 = 'Rect Clicked')
         })
         .overlay(this.text1, { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
       Ellipse()
         .fill(Color.Pink).width(150).height(80)
         .touchable(false) // 点击Ellipse区域，不会打印 “Ellipse Clicked”
         .onClick(() => {
-          console.info(this.text2 = 'Ellipse Clicked');
+          console.info(this.text2 = 'Ellipse Clicked')
         })
         .overlay(this.text2, { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
     }.margin(100)
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md
index b61a90f7ebf593043ba4e970471e0fc9610d544f..cb99c14a586d282f17134f82cc7c26ef405ae8dd 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md
@@ -47,8 +47,8 @@
 @Entry
 @Component
 struct PopupExample {
-  @State handlePopup: boolean = false;
-  @State customPopup: boolean = false;
+  @State handlePopup: boolean = false
+  @State customPopup: boolean = false
 
   // popup构造器定义弹框内容
   @Builder popupBuilder() {
@@ -63,7 +63,7 @@ struct PopupExample {
       // PopupOptions 类型设置弹框内容
       Button('PopupOptions')
         .onClick(() => {
-          this.handlePopup = !this.handlePopup;
+          this.handlePopup = !this.handlePopup
         })
         .bindPopup(this.handlePopup, {
           message: 'This is a popup with PopupOptions',
@@ -72,22 +72,22 @@ struct PopupExample {
           primaryButton: {
             value: 'confirm',
             action: () => {
-              this.handlePopup = !this.handlePopup;
-              console.info('ok Button click')
+              this.handlePopup = !this.handlePopup
+              console.info('confirm Button click')
             }
           },
           // 第二个按钮
           secondaryButton: {
-            value: 'cancle',
+            value: 'cancel',
             action: () => {
               this.handlePopup = !this.handlePopup;
-              console.info('cancle Button click')
+              console.info('cancel Button click')
             }
           },
           onStateChange: (e) => {
             console.info(e.isVisible.toString())
             if (!e.isVisible) {
-              this.handlePopup = false;
+              this.handlePopup = false
             }
           }
         })
@@ -97,7 +97,7 @@ struct PopupExample {
       // CustomPopupOptions 类型设置弹框内容
       Button('CustomPopupOptions')
         .onClick(() => {
-          this.customPopup = !this.customPopup;
+          this.customPopup = !this.customPopup
         })
         .bindPopup(this.customPopup, {
           builder: this.popupBuilder,
@@ -108,7 +108,7 @@ struct PopupExample {
           showInSubWindow: false,
           onStateChange: (e) => {
             if (!e.isVisible) {
-              this.customPopup = false;
+              this.customPopup = false
             }
           }
         })
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-click.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-click.md
index d1442f932d74fb733e403d8b626a7fc1b648e220..33f2d964f4432eecd591abb1d4d0992328f2b0ff 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-click.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-click.md
@@ -39,7 +39,7 @@
 @Entry
 @Component
 struct ClickExample {
-  @State text: string = '';
+  @State text: string = ''
 
   build() {
     Column() {