diff --git a/zh-cn/application-dev/ui/ui-js-components-swiper.md b/zh-cn/application-dev/ui/ui-js-components-swiper.md
new file mode 100644
index 0000000000000000000000000000000000000000..de9f3aa008425bd06e50e3c7865e5a764aabb2f7
--- /dev/null
+++ b/zh-cn/application-dev/ui/ui-js-components-swiper.md
@@ -0,0 +1,360 @@
+# Swiper开发指导
+
+
+Swiper为滑动容器，提供切换显示子组件的能力。具体用法请参考[Swiper](../reference/arkui-js/js-components-container-swiper.md)。
+
+
+## 创建Swiper组件
+
+在pages/index目录下的hml文件中创建一个Swiper组件。
+
+```
+
+
+
+
+ item1
+
+
+ item2
+
+
+ item3
+
+
+
+
+
+ item1
+
+
+ item2
+
+
+ item3
+
+
+ item4
+
+
+
+
+
+ item1
+
+
+ item2
+
+
+ item3
+
+
+
+
+
+ item1
+
+
+ item2
+
+
+ item3
+
+
+ item4
+
+
+
+
+
+
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background-color: #F1F3F5;
+}
+```
+
+
+
+
+## 添加属性和方法
+
+ witch组件通过textoff和showtext属性设置文本选中和未选中时的状态。设置checked属性值为true（组件为打开状态）。添加change事件，当组件状态改变时触发，触发后执行switchChange函数获取组件当前状态（关闭/打开）。
+
+```
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #F1F3F5;
+}
+switch{
+ // 选中时的字体颜色
+ texton-color: #002aff;
+ // 未选中时的字体颜色
+ textoff-color: silver;
+ text-padding: 20px;
+ font-size: 50px;
+}
+```
+
+
+```
+// xxx.js
+import prompt from '@system.prompt';
+export default {
+ switchChange(e){
+ if(e.checked){
+ prompt.showToast({
+ message: "open"
+ });
+ }else{
+ prompt.showToast({
+ message: "close"
+ });
+ }
+ }
+}
+```
+
+
+
+
+
+>  **说明：**
+> 当showtext属性值设置为true时，texton和textoff设置的文本才会生效。
+
+
+## 场景示例
+
+在下面示例中设置开关为打开状态（使用默认收货地址），关闭开关后页面显示选择地址按钮，点击按钮即可改变收货地址。
+
+ 实现方法：创建Switch开关，设置checked属性为true，通过数据绑定改变收货地址。设置display属性（默认为none），当关闭开关改变display属性值为flex后显示地址模块，点击按钮改变颜色。
+
+```
+
+
+
+ Choose default address:
+
+
+
+ Shipping address:{{address}}
+
+
+ Choose an address:
+ {{item}}
+
+
+ Hello World
+
+```
+
+```
+/* xxx.css */
+.container {
+ width: 100%;
+ height: 100%;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ background-color: #F1F3F5;
+}
+```
+
+
+
+
+## 设置Text组件样式和属性
+
+- 添加文本样式
+
+
+ 设置color、font-size、allow-scale、word-spacing、text-valign属性分别为文本添加颜色、大小、缩放、文本之间的间距和文本在垂直方向的对齐方式。
+
+```
+
+
+
+ This is a passage
+
+
+ This is a passage
+
+
+```
+
+```
+/* xxx.css */
+.container {
+ width: 100%;
+ height: 100%;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ background-color: #F1F3F5;
+}
+```
+
+
+ 
+
+
+- 添加划线
+
+ 设置text-decoration和text-decoration-colo属性为文本添加划线和划线颜色，text-decoration枚举值请参考 Text自有样式。
+
+
+
+
+
+ This is a passage
+
+
+ This is a passage
+
+
+```
+/* xxx.css */
+.container {
+ width: 100%;
+ height: 100%;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+text{
+ font-size: 50px;
+}
+```
+
+ 
+
+
+- 隐藏文本内容
+
+ 当文本内容过多而显示不全时，添加text-overflow属性将隐藏内容以省略号的形式展现
+
+```
+
+
+
+ This is a passage
+
+
+```
+
+ /* xxx.css */
+ .container {
+ width: 100%;
+ height: 100%;
+ flex-direction: column;
+ align-items: center;
+ background-color: #F1F3F5;
+ justify-content: center;
+ }
+ .text{
+ width: 200px;
+ max-lines: 1;
+ text-overflow:ellipsis;
+ }
+
+ **说明：**
+
+- text-overflow样式需要与max-lines样式配套使用，设置了最大行数的情况下生效。
+- max-lines属性设置文本最多可以展示的行数。
+
+
+ 
+
+
+- 设置文本折行
+
+ 设置word-break属性对文本内容做断行处理，word-break枚举值请参考Text自有样式。
+
+```
+
+
+
+
+ Welcome to the world
+
+
+ Welcome to the world
+
+
+
+
+ This is a passage
+
+
+ This 1
+
+ is a 1
+ passage
+
+
+ ```
+
+
+ 
+
+
+ >  **说明：**
+ > - 当使用Span子组件组成文本段落时，如果Span属性样式异常（例如：font-weight设置为1000），将导致文本段落显示异常。
+ >
+ > - 在使用Span子组件时，注意Text组件内不能存在文本内容，如果存在文本内容也只会显示子组件Span里的内容。
+
+
+## 场景示例
+
+Text组件通过数据绑定展示文本内容，Span组件通过设置show属性来实现文本内容的隐藏和显示。
+
+```
+
+
+
+
+ {{ content }}
+
+
+
+
+ {{ content }}
+
+ 1
+
+ Hide clip
+
+
+
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container {
+ width: 100%;
+ height: 100%;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background-color: #F1F3F5;
+}
+toolbar-item{
+ font-size: 35px;
+}
+```
+
+
+
+
+## 添加子组件
+
+ Toolbar组件仅支持toolbar-item为子组件，页面最多可以展示5个toolbar-item子组件，如果存在6个及以上toolbar-item，则保留前面4个，后续的将收纳到工具栏上的更多项中，通过点击更多项弹窗进行展示。并且更多项展示的组件样式采用系统默认样式，toolbar-item上设置的自定义样式不生效。
+
+```
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container {
+ width: 100%;
+ height: 100%;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background-color: #F1F3F5;
+}
+toolbar-item{
+ font-size: 35px;
+}
+```
+
+
+
+
+## 设置样式
+
+设置position样式控制Toolbar组件的位置，并设置子组件toolbar-item的字体颜色、大小及背景色。
+
+
+
+```
+
+
+
+
+
+
+
+
+
+```
+
+
+
+```
+/* xxx.css */
+.container {
+ background-color: #F1F3F5;
+ flex-direction: column;
+ width: 100%;
+ height: 100%;
+ justify-content: center;
+ align-items: center;
+}
+toolbar-item{
+ font-size: 35px;
+}
+.toolbarActive{
+ color: red;
+ background-color: #daebef;
+}
+```
+
+
+
+
+
+## 绑定事件
+
+分别给toolbar-item绑定单击事件和长按事件，单击后文本变红，长按时文本变蓝。
+
+
+```
+
+
+
+
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container {
+ background-color: #F1F3F5;
+ flex-direction: column;
+ width: 100%;
+ height: 100%;
+ justify-content: center;
+ align-items: center;
+}
+toolbar-item{
+ font-size: 35px;
+}
+```
+
+
+```
+// xxx.js
+import prompt from '@system.prompt';
+export default {
+ data:{
+ itemColor:'black'
+ },
+ itemClick(){
+ this.itemColor= "red";
+ prompt.showToast({duration:2000,message:'item click'});
+ },
+ itemLongPress(){
+ prompt.showToast({duration:2000,message:'item long press'});
+ this.itemColor= "blue";
+ },
+}
+```
+
+
+
+>  **说明：**
+> Toolbar组件不支持添加事件和方法，但其子组件toolbar-item支持。
+
+
+## 场景示例
+
+本场景中开发者可点击toolbar-item组件，改变当前组件文本颜色并更换相对应的图片内容。
+
+ 使用for循环创建toolbar-item组件并添加点击事件，点击后获得索引值进行存储。设置文本颜色时，判断当前索引值是否为储存的值，若相同则设置为红色，不同则使用默认颜色。
+
+```
+
+
+
+
+
+
+
+```
+
+
+```
+/* xxx.css */
+.container {
+ background-color: #F1F3F5;
+ flex-direction: column;
+ width: 100%;
+ justify-content: center;
+ align-items: center;
+}
+toolbar-item{
+ font-size: 35px;
+}
+```
+
+
+```
+// xxx.js
+import prompt from '@system.prompt';
+export default {
+ data:{
+ active: 0,
+ imgList:["common/images/1.png","common/images/2.png","common/images/3.png","common/images/4.png"],
+ itemList:[
+ {option:'item1',icon:'common/images/1.png'},
+ {option:'item2',icon:'common/images/2.png'},
+ {option:'item3',icon:'common/images/3.png'},
+ {option:'item4',icon:'common/images/4.png'},
+ ]
+ },
+ itemClick(id){
+ this.active= id;
+ },
+}
+```
+
+
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
new file mode 100644
index 0000000000000000000000000000000000000000..df9383f16bbd3f62f6de1e8dd6d148ca19d0dedc
--- /dev/null
+++ b/zh-cn/application-dev/ui/ui-ts-layout-grid-container.md
@@ -0,0 +1,151 @@
+# 栅格布局
+
+
+栅格系统作为一种辅助布局的定位工具，在平面设计和网站设计都起到了很好的作用，对移动设备的界面设计有较好的借鉴作用。总结栅格系统对于移动设备的优势主要有：
+
+
+1. 给布局提供一种可循的规律，解决多尺寸多设备的动态布局问题。
+2. 给系统提供一种统一的定位标注，保证各模块各设备的布局一致性。
+3. 给应用提供一种灵活的间距调整方法，满足特殊场景布局调整的可能性。
+
+为实现栅格布局效果，声明式范式提供了GridContainer栅格容器组件，配合其子组件的通用属性useSizeType来实现栅格布局。
+
+## 栅格系统
+
+栅格系统有Columns、Margins、Gutters三个概念。
+
+
+
+
+
+1. Gutters：
+ 用来控制元素与元素之间距离关系。可以根据设备的不同尺寸，定义不同的gutter值，作为栅格布局的统一规范。为了保证较好的视觉效果，通常gutter的取值不会大于margin的取值。
+2. Margins：
+ 离栅格容器边缘的距离。可以根据设备的不同尺寸，定义不同的margin值，作为栅格布局的统一规范。
+3. Columns:
+ 栅格布局的主要定位工具。根据设备的不同尺寸，把栅格容器分割成不同的列数，在保证margin和gutter符合规范的情况下，根据总Column的个数计算每个Column列的宽度。
+
+
+### 系统栅格断点
+
+系统根据不同水平宽度设备对应Columns的数量关系，形成了一套断点规则定义。
+
+系统以设备的水平宽度的屏幕密度像素值作为断点依据，根据当前设备水平宽度所在的断点范围，定义了设备的宽度类型。系统的栅格断点范围、设备宽度类型及其描述，以及对应的默认总列数(columns)，边距（gutter)，间隔(gutter)定义如下：
+
+系统栅格定义
+
+
+| 设备水平宽度断点范围 | 设备宽度类型 | 描述 | columns | gutter | margin |
+| -------- | -------- | -------- | -------- | -------- | -------- |
+| 0<水平宽度<320vp | XS | 最小宽度类型设备。 | 2 | 12vp | 12vp |
+| 320vp<=水平宽度<600vp | SM | 小宽度类型设备。 | 4 | 24vp | 24vp |
+| 600vp<=水平宽度<840vp | MD | 中等宽度类型设备。 | 8 | 24vp | 32vp |
+| 840<=水平分辨率 | LG | 大宽度类型设备。 | 12 | 24vp | 48vp |
+
+## 如何使用
+
+首先创建栅格容器组件，定义栅格布局，然后给栅格容器内的组件设置不同设备宽度类型下的占用列数。
+
+### 创建栅格容器
+
+通过接口：GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeType, gutter?: Length, margin?: Length})创建栅格容器，栅格容器内的所有子组件可以使用栅格布局。
+
+可以通过参数定义栅格布局的总列数（columns)，间隔（gutter)，两侧边距（margin)。例如栅格容器总共分为6列，列于列间隔为10vp, 两侧边距为20vp：
+```
+GridContainer({ columns: 6, gutter: 10, margin: 20 }) {}
+```
+栅格容器不设置参数，或者sizeType设置为SizeType.Auto时使用默认的栅格系统定义，如：
+
+```
+GridContainer() {}
+```
+上述例子中，默认在在小宽度类型设备(SizeType.SM)上，栅格容器被分为4列，列于列的间隔为24vp, 两侧边距是24vp。在中等宽度类型设备(SizeType.MD)上，栅格容器被分为8列，列于列的间隔为24vp，两侧边距是32vp。
+
+
+
+也可以通过参数sizeType指定此栅格容器内的组件使用此设备宽度类型的栅格设置，如：
+
+```
+GridContainer({ sizeType: SizeType.SM) {
+ Row() {
+ Text('1')
+ .useSizeType({
+ xs: { span: 2},
+ sm: { span: 3, offset: 1 },
+ md: { span: 6, offset: 2 },
+ lg: { span: 8, offset: 2 },
+ })
+ }
+}
+```
+上述例子中，不管在任何宽度类型的设备上， Text组件都使用SizeType.SM类型的栅格设置即占用3列，放置在第1列。
+
+### 栅格容器内子组件的栅格设置
+
+栅格容器中的组件使用通用属性useSizeType设置不同的设备宽度类型的占用列数和列偏移。其中span表示栅格容器组件占据columns的数量；offest表示列偏移量，指将组件放置在哪一个columns上。 如：
+
+```
+GridContainer() {
+ Row() {
+ Text('1')
+ .useSizeType({
+ xs: { span: 2},
+ sm: { span: 3, offset: 1 },
+ md: { span: 6, offset: 2 },
+ lg: { span: 8, offset: 2 },
+ })
+ }
+}
+```
+其中sm: { span: 2, offset: 0 } 指在设备宽度类型为SM的设备上，Text组件占用3列，且放在栅格容器的第1列上。
+## 场景示例
+
+使用栅格布局可以灵活地在不同的设备宽度类型下呈现合适的效果，而不必书写大量的代码兼容不同宽度类型的设备。
+
+```
+@Entry
+@Component
+struct GridContainerExample {
+ build() {
+ Column({ space: 5 }) {
+ GridContainer({ columns: 6 }) {
+ Flex({justifyContent:FlexAlign.SpaceAround}) {
+ Text('1')
+ .useSizeType({
+ xs: { span: 2, offset: 0 },
+ sm: { span: 2, offset: 0 },
+ md: { span: 1, offset: 0 },
+ lg: { span: 1, offset: 0 },
+ })
+ .height(100).backgroundColor(0x4682B4).textAlign(TextAlign.Center)
+ Text('2')
+ .useSizeType({
+ 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: 0 },
+ sm: { span: 2, offset: 0 },
+ md: { span: 1, offset: 0 },
+ lg: { span: 1, offset: 0 },
+ })
+ .height(100).backgroundColor(0x46A2B4).textAlign(TextAlign.Center)
+ }
+ }.width('80%').backgroundColor('gray')
+ }.width('100%').margin({ top: 15 })
+ }
+}
+```
+
+
+
+小宽度类型设备(SizeType.SM)运行效果：
+
+
+
+中等宽度类型设备(SizeType.MD)运行效果：
+