update docs

Signed-off-by: NHelloCrease <lian15@huawei.com>

zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md

@@ -12,11 +12,11 @@
 ## 导入模块
 
 ```
-import lottie from 'lottie-ohos-ets'
+import lottie from '@ohos/lottieETS'
 ```
 
 > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 在Terminal窗口使用 npm install 'lottie-ohos-ets'命令下载Lottie。
+> 在Terminal窗口使用 `npm install @ohos/lottieETS` 命令下载Lottie。
 
 
 ## lottie.loadAnimation

zh-cn/application-dev/ui/ui-ts-basic-components-button.md

@@ -8,10 +8,11 @@ Button是按钮组件，通常用于响应用户的点击操作，如提交表
 
 Button通过调用接口来创建，接口调用有以下两种形式：
 
-- Button(options?: {type?: ButtonType, stateEffect?: boolean})
-  该接口用于创建包含子组件的按钮，其中type用于设置Button类型，stateEffect属性设置Button是否开启点击效果。
+- 创建包含子组件的按钮
+
+  `Button(options?: {type?: ButtonType, stateEffect?: boolean})`，该接口用于创建包含子组件的按钮，其中type用于设置Button类型，stateEffect属性设置Button是否开启点击效果。
+
 
-  
   ```
   Button({ type: ButtonType.Normal, stateEffect: true }) {
     Row() {
@@ -23,10 +24,11 @@ Button通过调用接口来创建，接口调用有以下两种形式：
 
   ![zh-cn_image_0000001260555857](figures/zh-cn_image_0000001260555857.png)
 
-- Button(label?: string, options?: { type?: ButtonType, stateEffect?: boolean })
-  该接口用于创建不包含子组件的按钮，其中label确定所创建的Button是否包含子组件。
+- 创建不包含子组件的按钮
+
+  `Button(label?: string, options?: { type?: ButtonType, stateEffect?: boolean })`，该接口用于创建不包含子组件的按钮，其中label确定所创建的Button是否包含子组件。
+
 
-  
   ```
   Button('Ok', { type: ButtonType.Normal, stateEffect: true })
     .borderRadius(8)
@@ -42,7 +44,7 @@ Button通过调用接口来创建，接口调用有以下两种形式：
 Button有三种可选类型，分别为Capsule（胶囊类型）、Circle（圆形按钮）和Normal（普通按钮），通过type进行设置。
 
 - 胶囊按钮（默认类型）
-  
+
   ```
   Button('Disable', { type: ButtonType.Capsule, stateEffect: false })
     .backgroundColor(0x317aff)
@@ -52,7 +54,7 @@ Button有三种可选类型，分别为Capsule（胶囊类型）、Circle（圆
   ![zh-cn_image_0000001215645452](figures/zh-cn_image_0000001215645452.png)
 
 - 圆形按钮
-  
+
   ```
   Button('Circle', { type: ButtonType.Circle, stateEffect: false })
     .backgroundColor(0x317aff)
@@ -68,7 +70,7 @@ Button有三种可选类型，分别为Capsule（胶囊类型）、Circle（圆
 - 设置边框弧度
   一般使用通用属性来自定义按钮样式。例如通过borderRadius属性设置按钮的边框弧度。
 
-  
+
   ```
   Button('circle border', { type: ButtonType.Normal })
     .borderRadius(20)
@@ -79,7 +81,7 @@ Button有三种可选类型，分别为Capsule（胶囊类型）、Circle（圆
 - 设置文本样式
   通过添加文本样式设置按钮文本的展示样式。
 
-  
+
   ```
   Button('font style', { type: ButtonType.Normal })
     .fontSize(20)
@@ -92,7 +94,7 @@ Button有三种可选类型，分别为Capsule（胶囊类型）、Circle（圆
 - 设置背景颜色
   添加backgroundColor属性设置按钮的背景颜色。
 
-  
+
   ```
   Button('background color').backgroundColor(0xF55A42)
   ```
@@ -102,7 +104,7 @@ Button有三种可选类型，分别为Capsule（胶囊类型）、Circle（圆
 - 用作功能型按钮
   为删除操作创建一个按钮。
 
-  
+
   ```
   Button({ type: ButtonType.Circle, stateEffect: true }) {
     Image($r('app.media.ic_public_delete_filled')).width(30).height(30)
@@ -133,7 +135,7 @@ Button('Ok', { type: ButtonType.Normal, stateEffect: true })
 
   ```
   import router from '@ohos.router'
-  
+
   @Entry
   @Component
   struct ButtonCase1 {
@@ -144,13 +146,13 @@ Button('Ok', { type: ButtonType.Normal, stateEffect: true })
             router.push({ url: 'xxx' })
           })
         }
-  
+
         ListItem() {
           Button("Second").onClick(() => {
             router.push({ url: 'yyy' })
           })
         }
-  
+
         ListItem() {
           Button("Third").onClick(() => {
             router.push({ url: 'zzz' })
@@ -170,7 +172,7 @@ Button('Ok', { type: ButtonType.Normal, stateEffect: true })
 - 用于表单的提交
   在用户登录/注册页面，用户的登录或注册的提交操作会用按钮。
 
-  
+
   ```
   @Entry
   @Component
@@ -184,5 +186,5 @@ Button('Ok', { type: ButtonType.Normal, stateEffect: true })
     }
   }
   ```
-  
+
   ![zh-cn_image_0000001190466492](figures/zh-cn_image_0000001190466492.png)

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

@@ -8,7 +8,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容
 
 接口的调用形式如下：
 
-Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap,  justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign })
+`Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap,  justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign })`
 通过参数direction定义弹性布局的布局方向，justifyContent定义弹性布局方向上的子组件对齐方式， alignContent定义与布局方向垂直的方向上的子组件对齐方式，wrap定义内容超过一行时是否换行。
 
 ## 弹性布局方向
@@ -16,7 +16,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap,  justifyContent?: F
 弹性布局有两个方向，子组件放置的方向是主轴，与主轴垂直的方向是交叉轴。通过direction参数设置容器主轴的方向，可选值有：
 
 - FlexDirection.Row（默认值）：主轴为水平方向，子组件从起始端沿着水平方向开始排布。
-  
+
   ```
   Flex({ direction: FlexDirection.Row }) {
     Text('1').width('33%').height(50).backgroundColor(0xF5DEB3)
@@ -32,7 +32,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap,  justifyContent?: F
   ![zh-cn_image_0000001218579606](figures/zh-cn_image_0000001218579606.png)
 
 - FlexDirection.RowReverse：主轴为水平方向，子组件从终点端沿着FlexDirection.Row相反的方向开始排布。
-  
+
   ```
   Flex({ direction: FlexDirection.RowReverse }) {
     Text('1').width('33%').height(50).backgroundColor(0xF5DEB3)
@@ -48,7 +48,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap,  justifyContent?: F
   ![zh-cn_image_0000001218739566](figures/zh-cn_image_0000001218739566.png)
 
 - FlexDirection.Column：主轴为垂直方向，子组件从起始端沿着垂直方向开始排布。
-  
+
   ```
   Flex({ direction: FlexDirection.Column }) {
     Text('1').width('100%').height(50).backgroundColor(0xF5DEB3)
@@ -64,7 +64,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap,  justifyContent?: F
   ![zh-cn_image_0000001263019457](figures/zh-cn_image_0000001263019457.png)
 
 - FlexDirection.ColumnReverse：主轴为垂直方向，子组件从终点端沿着FlexDirection.Column相反的方向开始排布。
-  
+
   ```
   Flex({ direction: FlexDirection.ColumnReverse }) {
     Text('1').width('100%').height(50).backgroundColor(0xF5DEB3)
@@ -85,7 +85,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap,  justifyContent?: F
 默认情况下，子组件在Flex容器中都排在一条线（又称"轴线"）上。通过wrap参数设置其他换行方式，可选值有：
 
 - FlexWrap.NoWrap : 不换行。如果子元素的宽度总和大于父元素的宽度，则子元素会被压缩宽度。
-  
+
   ```
   Flex({ wrap: FlexWrap.NoWrap }) {
     Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
@@ -100,7 +100,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap,  justifyContent?: F
   ![zh-cn_image_0000001263139409](figures/zh-cn_image_0000001263139409.png)
 
 - FlexWrap.Wrap：换行。
-  
+
   ```
   Flex({ wrap: FlexWrap.Wrap }) {
     Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
@@ -115,7 +115,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap,  justifyContent?: F
   ![zh-cn_image_0000001218419614](figures/zh-cn_image_0000001218419614.png)
 
 - FlexWrap.WrapReverse：换行，且与行排列方向相反。
-  
+
   ```
   Flex({ wrap: FlexWrap.WrapReverse}) {
     Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
@@ -138,7 +138,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap,  justifyContent?: F
 可以通过justifyContent参数设置在主轴的对齐方式，可选值有：
 
 - FlexAlign.Start: 元素在主轴方向首端对齐, 第一个元素与行首对齐，同时后续的元素与前一个对齐。
-  
+
   ```
   Flex({ justifyContent: FlexAlign.Start }) {  
     Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)  
@@ -153,7 +153,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap,  justifyContent?: F
   ![zh-cn_image_0000001218259634](figures/zh-cn_image_0000001218259634.png)
 
 - FlexAlign.Center: 元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。
-  
+
   ```
   Flex({ justifyContent: FlexAlign.Center }) {  
     Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)  
@@ -168,7 +168,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap,  justifyContent?: F
   ![zh-cn_image_0000001218579608](figures/zh-cn_image_0000001218579608.png)
 
 - FlexAlign.End: 元素在主轴方向尾部对齐,  最后一个元素与行尾对齐，其他元素与后一个对齐。
-  
+
   ```
   Flex({ justifyContent: FlexAlign.End }) {  
     Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)  
@@ -183,7 +183,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap,  justifyContent?: F
   ![zh-cn_image_0000001218739568](figures/zh-cn_image_0000001218739568.png)
 
 - FlexAlign. SpaceBetween:  ，Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素与行首对齐，最后一个元素与行尾对齐。
-  
+
   ```
   Flex({ justifyContent: FlexAlign.SpaceBetween }) {  
     Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)  
@@ -198,7 +198,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap,  justifyContent?: F
   ![zh-cn_image_0000001263019461](figures/zh-cn_image_0000001263019461.png)
 
 - FlexAlign. SpaceAround:  Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。
-  
+
   ```
   Flex({ justifyContent: FlexAlign.SpaceAround }) {  
     Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)  
@@ -213,7 +213,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap,  justifyContent?: F
   ![zh-cn_image_0000001263339461](figures/zh-cn_image_0000001263339461.png)
 
 - FlexAlign. SpaceEvenly:  Flex主轴方向元素等间距布局， 相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。
-  
+
   ```
   Flex({ justifyContent: FlexAlign.SpaceEvenly }) {  
     Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)  
@@ -233,7 +233,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap,  justifyContent?: F
 可以通过alignItems参数设置在交叉轴的对齐方式，可选值有：
 
 - ItemAlign.Auto: 使用Flex容器中默认配置。
-  
+
   ```
   Flex({ alignItems: ItemAlign.Auto }) {  
     Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)  
@@ -248,7 +248,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap,  justifyContent?: F
   ![zh-cn_image_0000001218419616](figures/zh-cn_image_0000001218419616.png)
 
 - ItemAlign.Start: 交叉轴方向首部对齐。
-  
+
   ```
   Flex({ alignItems: ItemAlign.Start }) {  
     Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)  
@@ -263,7 +263,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap,  justifyContent?: F
   ![zh-cn_image_0000001263259401](figures/zh-cn_image_0000001263259401.png)
 
 - ItemAlign.Center: 交叉轴方向居中对齐。
-  
+
   ```
   Flex({ alignItems: ItemAlign.Center }) {  
     Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)  
@@ -278,7 +278,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap,  justifyContent?: F
   ![zh-cn_image_0000001218259636](figures/zh-cn_image_0000001218259636.png)
 
 - ItemAlign.End：交叉轴方向底部对齐。
-  
+
   ```
   Flex({ alignItems: ItemAlign.End }) {  
     Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)  
@@ -293,7 +293,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap,  justifyContent?: F
   ![zh-cn_image_0000001218579610](figures/zh-cn_image_0000001218579610.png)
 
 - ItemAlign. Stretch：交叉轴方向拉伸填充，在未设置尺寸时，拉伸到容器尺寸。
-  
+
   ```
   Flex({ alignItems: ItemAlign.Stretch }) {  
     Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)  
@@ -308,7 +308,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap,  justifyContent?: F
   ![zh-cn_image_0000001218739570](figures/zh-cn_image_0000001218739570.png)
 
 - ItemAlign.Baseline：交叉轴方向文本基线对齐。
-  
+
   ```
   Flex({ alignItems: ItemAlign.Baseline }) {  
     Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)  

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

@@ -8,7 +8,7 @@
 2. 给系统提供一种统一的定位标注，保证各模块各设备的布局一致性。
 3. 给应用提供一种灵活的间距调整方法，满足特殊场景布局调整的可能性。
 
-为实现栅格布局效果，声明式范式提供了GridContainer栅格容器组件，配合其子组件的通用属性useSizeType来实现栅格布局。
+为实现栅格布局效果，声明式范式提供了[GridContainer](../reference/arkui-ts/ts-container-gridcontainer.md)栅格容器组件，配合其子组件的通用属性useSizeType来实现栅格布局。
 
 ## 栅格系统
 
@@ -32,15 +32,13 @@
 
 系统以设备的水平宽度的屏幕密度像素值作为断点依据，根据当前设备水平宽度所在的断点范围，定义了设备的宽度类型。系统的栅格断点范围、设备宽度类型及其描述，以及对应的默认总列数(columns)，边距（gutter)，间隔(gutter)定义如下：
 
-<a id="grid_system_define">系统栅格定义</a>
 
-
-| 设备水平宽度断点范围 | 设备宽度类型 | 描述 | columns | gutter | margin |
-| -------- | -------- | -------- | -------- | -------- | -------- |
-| 0&lt;水平宽度&lt;320vp | XS | 最小宽度类型设备。 | 2 | 12vp | 12vp |
-| 320vp&lt;=水平宽度&lt;600vp | SM | 小宽度类型设备。 | 4 | 24vp | 24vp |
-| 600vp&lt;=水平宽度&lt;840vp | MD | 中等宽度类型设备。 | 8 | 24vp | 32vp |
-| 840&lt;=水平分辨率 | LG | 大宽度类型设备。 | 12 | 24vp | 48vp |
+| 设备水平宽度断点范围              | 设备宽度类型 | 描述        | columns | gutter | margin |
+| ----------------------- | ------ | --------- | ------- | ------ | ------ |
+| 0&lt;水平宽度&lt;320vp      | XS     | 最小宽度类型设备。 | 2       | 12vp   | 12vp   |
+| 320vp&lt;=水平宽度&lt;600vp | SM     | 小宽度类型设备。  | 4       | 24vp   | 24vp   |
+| 600vp&lt;=水平宽度&lt;840vp | MD     | 中等宽度类型设备。 | 8       | 24vp   | 32vp   |
+| 840&lt;=水平分辨率           | LG     | 大宽度类型设备。  | 12      | 24vp   | 48vp   |
 
 ## 如何使用
 
@@ -48,37 +46,40 @@
 
 ### 创建栅格容器
 
-通过接口：GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeType, gutter?: Length, margin?: Length})创建栅格容器，栅格容器内的所有子组件可以使用栅格布局。
+通过接口`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时使用默认的栅格系统定义，如：
+- 可以通过参数定义栅格布局的总列数（columns)，间隔（gutter)，两侧边距（margin)。例如栅格容器总共分为6列，列于列间隔为10vp, 两侧边距为20vp：
 
-```
-GridContainer() {}
-```
-上述例子中，默认在在小宽度类型设备(SizeType.SM)上，栅格容器被分为4列，列于列的间隔为24vp, 两侧边距是24vp。在中等宽度类型设备(SizeType.MD)上，栅格容器被分为8列，列于列的间隔为24vp，两侧边距是32vp。
+  ```
+  GridContainer({ columns: 6, gutter: 10, margin: 20 }) {}
+  ```
 
+  栅格容器不设置参数，或者sizeType设置为SizeType.Auto时使用默认的栅格系统定义，如：
 
+  ```
+  GridContainer() {}
+  ```
 
-也可以通过参数sizeType指定此栅格容器内的组件使用此设备宽度类型的栅格设置，如：
+  上述例子中，默认在在小宽度类型设备(SizeType.SM)上，栅格容器被分为4列，列于列的间隔为24vp, 两侧边距是24vp。在中等宽度类型设备(SizeType.MD)上，栅格容器被分为8列，列于列的间隔为24vp，两侧边距是32vp。
 
-```
-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列。
+- 也可以通过参数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列。
 
 ### 栅格容器内子组件的栅格设置
 
@@ -97,7 +98,7 @@ GridContainer() {
    }
 }
 ```
-其中sm: { span: 2, offset: 0 } 指在设备宽度类型为SM的设备上，Text组件占用3列，且放在栅格容器的第1列上。
+其中`sm: { span: 2, offset: 0 } `指在设备宽度类型为SM的设备上，Text组件占用3列，且放在栅格容器的第1列上。
 ## 场景示例
 
 使用栅格布局可以灵活地在不同的设备宽度类型下呈现合适的效果，而不必书写大量的代码兼容不同宽度类型的设备。