!9002 update docs

Merge pull request !9002 from 关明月/master

zh-cn/application-dev/reference/arkui-js/js-components-basic-qrcode.md

@@ -58,6 +58,8 @@
 <div class="container">
   <qrcode value="{{qr_value}}" type="{{qr_type}}"
   style="color: {{qr_col}};background-color: {{qr_bcol}};width: {{qr_size}};height: {{qr_size}};margin-bottom: 70px;"></qrcode>
+  <text class="txt">Value</text>
+  <input onChange="setValue">123</input>
   <text class="txt">Type</text>
   <switch showtext="true" checked="true" texton="rect" textoff="circle" onchange="settype"></switch>
   <text class="txt">Color</text>
@@ -94,6 +96,7 @@ select{
 /* index.js */
 export default {
   data: {
+    qr_value:'',
     qr_type: 'rect',
     qr_size: '300px',
     qr_col: '#87ceeb',

zh-cn/application-dev/reference/arkui-ts/ts-animatorproperty.md

 # 属性动画
 
+组件的某些通用属性变化时，可以通过属性动画实现渐变效果，提升用户体验。支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等。
+
 > **说明：**
 > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
-组件的通用属性发生变化时，可以创建属性动画进行渐变，提升用户体验。
-
-| 接口名称                       | 功能描述                                                     |
-| ------------------------------ | ------------------------------------------------------------ |
-| animation(value: AnimateParam) | 为组件添加动画属性，控制调用此属性的组件从一种状态到另一种状态的过渡效果。 |
+animation(value: {duration?: number, tempo?: number, curve?: string | Curve | ICurve, delay?:number, iterations: number, playMode?: PlayMode, onFinish?: () => void})
 
-## AnimateParam对象说明
+为组件添加属性动画，实现组件属性状态变化时的过渡动画效果。
 
-- 属性
+**参数：**
 
 
-| 名称         | 参数类型                                     | 默认值             | 描述                      |
-| ---------- | ---------------------------------------- | --------------- | ----------------------- |
-| duration   | number                                   | 1000            | 单位为毫秒，默认动画时长为1000毫秒。    |
-| curve      | [Curve](ts-appendix-enums.md#curve)        | Curve.Linear    | 默认曲线为线性。                |
-| delay      | number                                   | 0               | 单位为毫秒，默认不延时播放。          |
-| iterations | number                                   | 1               | 默认播放一次，设置为-1时表示无限次播放。   |
-| playMode   | [PlayMode](ts-appendix-enums.md#playmode) | PlayMode.Normal | 设置动画播放模式，默认播放完成后重头开始播放。 |
+| 名称       | 参数类型                                                     | 必填 | 描述                                                         |
+| ---------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
+| duration   | number                                                       | 否   | 设置动画时长。单位为毫秒，默认动画时长为1000毫秒。<br/>默认值：1000 |
+| tempo      | number                                                       | 否   | 动画播放速度。数值越大，动画播放速度越快，数值越小，播放速度越慢<br/>值为0时，表示不存在动画。<br/>默认值：1 |
+| curve      | string&nbsp;\|&nbsp;[Curve](ts-appendix-enums.md#curve)&nbsp;\|&nbsp;ICurve<sup>9+</sup> | 否   | 设置动画曲线。默认曲线为线性。<br/>默认值：Curve.Linear      |
+| delay      | number                                                       | 否   | 设置动画延迟执行的时长。单位为毫秒，默认不延时播放。<br/>默认值：0 |
+| iterations | number                                                       | 否   | 设置播放次数。默认播放一次，设置为-1时表示无限次播放。<br/>默认值：1 |
+| playMode   | [PlayMode](ts-appendix-enums.md#playmode)                    | 否   | 设置动画播放模式，默认播放完成后重头开始播放。<br/>默认值：PlayMode.Normal |
+| onFinish   | () => void                                                   | 否   | 状态回调，动画播放完成时触发。                               |
 
 
 ## 示例
@@ -30,9 +30,9 @@
 @Entry
 @Component
 struct AttrAnimationExample {
-  @State widthSize: number = 200
-  @State heightSize: number = 100
-  @State flag: boolean = true
+  @State widthSize: number = 200;
+  @State heightSize: number = 100;
+  @State flag: boolean = true;
 
   build() {
     Column() {

zh-cn/application-dev/reference/arkui-ts/ts-appendix-enums.md

@@ -100,10 +100,12 @@
 
 ## FillMode
 
-| 名称     | 描述                             |
-| -------- | -------------------------------- |
-| None     | 播放完成后恢复初始状态。         |
-| Forwards | 播放完成后保持动画结束时的状态。 |
+| 名称      | 描述                                                         |
+| --------- | ------------------------------------------------------------ |
+| None      | 动画未执行时不会将任何样式应用于目标，动画播放完成之后恢复初始默认状态。 |
+| Forwards  | 目标将保留动画执行期间最后一个关键帧的状态。                 |
+| Backwards | 动画将在应用于目标时立即应用第一个关键帧中定义的值，并在delay期间保留此值。第一个关键帧取决于playMode，playMode为Normal或Alternate时为from的状态，playMode为Reverse或AlternateReverse时为to的状态。 |
+| Both      | 动画将遵循Forwards和Backwards的规则，从而在两个方向上扩展动画属性。 |
 
 ## PlayMode
 

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-blank.md

 # Blank
 
->  **说明：**
-> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
 空白填充组件，在容器主轴方向上，空白填充组件具有自动填充容器空余部分的能力。仅当父组件为Row/Column时生效。
 
-
-## 权限列表
-
-无
+>  **说明：**
+>
+>  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
 ## 子组件
@@ -19,23 +14,21 @@
 
 ## 接口
 
-Blank(min?: number \| string)
+Blank(min?: number | string)
 
-- 参数
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
-  | -------- | -------- | -------- | -------- | -------- |
-  | min | number \| string | 否 | 0 | 空白填充组件在容器主轴上的最小大小。 |
+**参数：**
 
+| 参数名 | 参数类型 | 必填 | 参数描述 |
+| -------- | -------- | -------- | -------- |
+| min | number&nbsp;\|&nbsp;string | 否 | 空白填充组件在容器主轴上的最小大小。<br/>默认值：0 |
 
 ## 属性
 
-| 名称 | 参数类型 | 默认值 | 描述 |
-| -------- | -------- | -------- | -------- |
-| color | [ResourceColor](../../ui/ts-types.md) | 0xffffff | 设置空白填充的填充颜色。 |
+除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
 
->  **说明：**
->
->  - 不支持通用属性方法。
+| 名称 | 参数类型 | 描述 |
+| -------- | -------- | -------- |
+| color | [ResourceColor](../../ui/ts-types.md) | 设置空白填充的填充颜色。 |
 
 
 ## 示例

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-divider.md

 # Divider
 
->  **说明：**
-> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
 提供分隔器组件，分隔不同内容块/内容元素。
 
-
-## 权限列表
-
-无
+>  **说明：**
+>
+>  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
 ## 子组件
@@ -21,15 +16,16 @@
 
 Divider()
 
-
 ## 属性
 
-| 名称 | 参数类型 | 默认值 | 描述 |
-| -------- | -------- | -------- | -------- |
-| vertical | boolean | false | 使用水平分割线还是垂直分割线。false：水平分割线；true：垂直分割线。 |
-| color | [ResourceColor](../../ui/ts-types.md) | - | 分割线颜色。 |
-| strokeWidth | [Length](../../ui/ts-types.md) | 1 | 分割线宽度。 |
-| lineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 分割线的端点样式。 |
+除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
+
+| 名称 | 参数类型 | 描述 |
+| -------- | -------- | -------- |
+| vertical | boolean | 使用水平分割线还是垂直分割线。false：水平分割线；true：垂直分割线。<br/>默认值：false |
+| color | [ResourceColor](../../ui/ts-types.md) | 分割线颜色。 |
+| strokeWidth | number&nbsp;\|&nbsp;string | 分割线宽度。<br/>默认值：1 |
+| lineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | 分割线的端点样式。<br/>默认值：LineCapStyle.Butt |
 
 
 ## 事件

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-gauge.md

 # Gauge
 
-
->  **说明：**
-> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
 数据量规图表组件，用于将数据展示为环形图表。
 
 
-## 权限列表
-
-无
+>  **说明：**
+>
+>  该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
 ## 子组件
@@ -22,23 +17,25 @@
 
 Gauge(options:{value: number, min?: number, max?: number})
 
-- 参数
-    | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | value | number | 是 | - | 当前数据值。 | 
-  | min | number | 否 | 0 | 当前数据段最小值。 | 
-  | max | number | 否 | 100 | 当前数据段最大值。 | 
+**参数：**
 
+| 参数名 | 参数类型 | 必填 | 参数描述 |
+| -------- | -------- | -------- | -------- |
+| value | number | 是 | 当前数据值。 |
+| min | number | 否 | 当前数据段最小值。<br/>默认值：0 |
+| max | number | 否 | 当前数据段最大值。<br/>默认值：100 |
 
 ## 属性
 
-  | 名称 | 参数类型 | 默认值 | 描述 | 
-| -------- | -------- | -------- | -------- |
-| value | number | 0 | 设置当前数据图表的值。 | 
-| startAngle | number | -150 | 设置起始角度位置，时钟0点为0度，顺时针方向为正角度。 | 
-| endAngle | number | 150 | 设置终止角度位置，时钟0点为0度，顺时针方向为正角度。 | 
-| colors | Array&lt;ColorStop&gt; | - | 设置图表的颜色，支持分段颜色设置。 |
-| strokeWidth | Length | - | 设置环形图表的环形厚度。 |
+除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
+
+| 名称 | 参数类型 | 描述 |
+| -------- | -------- | -------- |
+| value | number | 设置当前数据图表的值。<br/>默认值：0 |
+| startAngle | number | 设置起始角度位置，时钟0点为0度，顺时针方向为正角度。<br/>默认值：-150 |
+| endAngle | number | 设置终止角度位置，时钟0点为0度，顺时针方向为正角度。<br/>默认值：150 |
+| colors | Array&lt;ColorStop&gt; | 设置图表的颜色，支持分段颜色设置。 |
+| strokeWidth | Length | 设置环形图表的环形厚度。 |
 
 ## ColorStop
 
@@ -51,7 +48,7 @@ Gauge(options:{value: number, min?: number, max?: number})
 
 ## 示例
 
-  
+
 ```ts
 // xxx.ets
 @Entry

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md

@@ -3,6 +3,7 @@
 图片组件，支持本地图片和网络图片的渲染展示。
 
 > **说明：**
+>
 > 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -24,31 +25,32 @@ Image(src: string | PixelMap | Resource)
 
 **参数：** 
 
-| 参数名  | 参数类型                                     | 必填   | 默认值  | 参数描述                                     |
-| ---- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
-| src  | string\|&nbsp;[PixelMap](../apis/js-apis-image.md#pixelmap7)&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 是    | -    | 图片的数据源，支持本地图片和网络图片。<br/>当使用相对路径引用图片资源时，例如`Image("common/test.jpg")`，不支持该Image组件被跨包/跨模块调用，建议使用`$r`方式来管理需全局使用的图片资源。<br/>\- 支持的图片格式包括png、jpg、bmp、svg和gif。<br/>\- 支持`Base64`字符串。格式`data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, 其中`[base64 data]`为`Base64`字符串数据。<br/>\- 支持`dataability://`路径前缀的字符串，用于访问通过data&nbsp;ability提供的图片路径。 |
+| 参数名 | 参数类型                                                     | 必填 | 参数描述                                                     |
+| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
+| src    | string\|&nbsp;[PixelMap](../apis/js-apis-image.md#pixelmap7)&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 是   | 图片的数据源，支持本地图片和网络图片。<br/>当使用相对路径引用图片资源时，例如`Image("common/test.jpg")`，不支持跨包/跨模块调用该Image组件，建议使用`$r`方式来管理需全局使用的图片资源。<br/>\- 支持的图片格式包括png、jpg、bmp、svg和gif。<br/>\- 支持`Base64`字符串。格式`data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, 其中`[base64 data]`为`Base64`字符串数据。<br/>\- 支持`dataability://`路径前缀的字符串，用于访问通过data&nbsp;ability提供的图片路径。 |
 
 ## 属性
 
 除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
 
-| 名称                       | 参数类型                                     | 默认值                      | 描述                                       |
-| ------------------------ | ---------------------------------------- | ------------------------ | ---------------------------------------- |
-| alt                      | string \| [Resource](../../ui/ts-types.md#resource类型) | -                        | 加载时显示的占位图，支持本地图片和网络图片。                   |
-| objectFit                | [ImageFit](ts-appendix-enums.md#imagefit) | ImageFit.Cover           | 设置图片的缩放类型。                               |
-| objectRepeat             | [ImageRepeat](ts-appendix-enums.md#imagerepeat) | NoRepeat                 | 设置图片的重复样式。<br/>> **说明：**<br/>>&nbsp;-&nbsp;svg类型图源不支持该属性。 |
-| interpolation            | [ImageInterpolation](#imageinterpolation) | ImageInterpolation.None  | 设置图片的插值效果，即减轻低清晰度图片在放大显示的时候出现的锯齿问题，仅针对图片放大插值。<br/>>&nbsp;**说明：**<br/>>&nbsp;-&nbsp;svg类型图源不支持该属性。<br/>>&nbsp;-&nbsp;PixelMap资源不支持该属性。 |
-| renderMode               | [ImageRenderMode](#imagerendermode)      | ImageRenderMode.Original | 设置图片渲染的模式。<br/>>&nbsp;**说明：**<br/>>&nbsp;-&nbsp;svg类型图源不支持该属性。 |
-| sourceSize               | {<br/>width:&nbsp;number,<br/>height:&nbsp;number<br/>} | -                        | 设置图片裁剪尺寸，将原始图片解码成pixelMap，指定尺寸的图片，单位为px。<br/>>&nbsp;**说明：**<br/>>&nbsp;PixelMap资源不支持该属性。 |
-| matchTextDirection       | boolean                                  | false                    | 设置图片是否跟随系统语言方向，在RTL语言环境下显示镜像翻转显示效果。      |
-| fitOriginalSize          | boolean                                  | true                     | 图片组件尺寸未设置时，其显示尺寸是否跟随图源尺寸。                |
-| fillColor                | [ResourceColor](../../ui/ts-types.md#resourcecolor8) | -                        | 仅对svg图源生效，设置后会替换svg图片的fill颜色。            |
-| autoResize               | boolean                                  | true                     | 是否需要在图片解码过程中对图源做resize操作，该操作会根据显示区域的尺寸决定用于绘制的图源尺寸，有利于减少内存占用。 |
-| syncLoad<sup>8+</sup>    | boolean                                  | false                    | 设置是否同步加载图片，默认是异步加载。同步加载时阻塞UI线程，不会显示占位图。  |
-| copyOption<sup>9+</sup>  | [CopyOptions](ts-appendix-enums.md#copyoptions9) | CopyOptions.None         | 设置图片是否可复制（SVG图片不支持复制）。<br/>当设置copyOption为非CopyOptions.None时，支持快捷组合键'CTRL+C'进行复制。 |
-| colorFilter<sup>9+</sup> | [ColorFilter](../../ui/ts-types.md#colorfilter9) | -                        | 给图像设置颜色滤镜效果。                             |
+| 名称                  | 参数类型                                                | 描述                                                         |
+| --------------------- | ------------------------------------------------------- | ------------------------------------------------------------ |
+| alt                   | string \| [Resource](../../ui/ts-types.md#resource类型) | 加载时显示的占位图，支持本地图片和网络图片。                 |
+| objectFit             | [ImageFit](ts-appendix-enums.md#imagefit)                           | 设置图片的缩放类型。<br/>默认值：ImageFit.Cover                  |
+| objectRepeat          | [ImageRepeat](ts-appendix-enums.md#imagerepeat)         | 设置图片的重复样式。<br/>默认值：NoRepeat<br/>**说明：**<br/>svg类型图源不支持该属性。 |
+| interpolation         | [ImageInterpolation](#imageinterpolation)               | 设置图片的插值效果，即减轻低清晰度图片在放大显示的时候出现的锯齿问题，仅针对图片放大插值。<br/>默认值：ImageInterpolation.None<br/>**说明：**<br/>svg类型图源不支持该属性。<br/>PixelMap资源不支持该属性。 |
+| renderMode            | [ImageRenderMode](#imagerendermode)                     | 设置图片渲染的模式。<br/>默认值：ImageRenderMode.Original<br/>**说明：**<br/>svg类型图源不支持该属性。 |
+| sourceSize            | {<br/>width:&nbsp;number,<br/>height:&nbsp;number<br/>} | 设置图片裁剪尺寸，将原始图片解码成pixelMap，指定尺寸的图片，单位为px。<br/>**说明：**<br/>PixelMap资源不支持该属性。 |
+| matchTextDirection     | boolean | 设置图片是否跟随系统语言方向，在RTL语言环境下显示镜像翻转显示效果。<br/>默认值：false   |
+| fitOriginalSize        | boolean | 图片组件尺寸未设置时，其显示尺寸是否跟随图源尺寸。<br/>默认值：true    |
+| fillColor              | [ResourceColor](../../ui/ts-types.md#resourcecolor8) | 填充颜色。设置的填充颜色会覆盖在图片上。仅对svg图源生效，设置后会替换svg图片的fill颜色。 |
+| autoResize             | boolean | 是否需要在图片解码过程中对图源做resize操作，该操作会根据显示区域的尺寸决定用于绘制的图源尺寸，有利于减少内存占用。<br/>默认值：true |
+| syncLoad<sup>8+</sup> | boolean                                  | 设置是否同步加载图片，默认是异步加载。同步加载时阻塞UI线程，不会显示占位图。<br/>默认值：false |
+| copyOption<sup>9+</sup> | [CopyOptions](ts-appendix-enums.md#copyoptions9)  | 设置图片是否可复制（SVG图片不支持复制）。<br/>当copyOption设置为非CopyOptions.None时，支持使用长按、鼠标右击、快捷组合键'CTRL+C'等方式进行复制。<br/>默认值：CopyOptions.None |
+| colorFilter<sup>9+</sup> | [ColorFilter](../../ui/ts-types.md#colorfilter9) | 给图像设置颜色滤镜效果。 |
 
 >  **说明：**
+>
 >  使用快捷组合键对Image组件复制的前提是，该组件必须处于获焦状态。将Image组件的属性focusable设置为true，即可使用TAB键将焦点切换到Image组件上，再将Image组件的focusOnTouch属性设置为true，即可实现点击获焦。
 
 ### ImageInterpolation

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-navigation.md

 # Navigation
 
-> **说明：**
-> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
 Navigation组件一般作为Page页面的根容器，通过属性设置来展示页面的标题、工具栏、菜单。
 
-
-## 权限列表
-
-无
+> **说明：**
+>
+> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
 ## 子组件
@@ -23,43 +18,47 @@ Navigation()
 
 创建可以根据属性设置，自动展示导航栏、标题、工具栏的组件。
 
-
 ## 属性
 
-| 名称             | 参数类型                                     | 默认值                      | 描述                                       |
-| -------------- | ---------------------------------------- | ------------------------ | ---------------------------------------- |
-| title          | string \| [CustomBuilder](../../ui/ts-types.md) | -                        | 页面标题。                                    |
-| subTitle       | string                                   | -                        | 页面副标题。                                   |
-| menus          | Array<NavigationMenuItem&gt;&nbsp;\|&nbsp;[CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | -                        | 页面右上角菜单。      |
-| titleMode      | NavigationTitleMode                      | NavigationTitleMode.Free | 页面标题栏显示模式。                               |
-| toolBar        | {<br/>items:Array&lt;Object&gt;&nbsp;}<br/>\|&nbsp;[CustomBuilder](../../ui/ts-types.md#custombuilder8)<sup>8+</sup> | -      | 设置工具栏内容。<br/>items:&nbsp;工具栏所有项。     |
-| hideToolBar    | boolean                                  | false                    | 设置隐藏/显示工具栏：<br/>true:&nbsp;隐藏工具栏。<br/>false:&nbsp;显示工具栏。 |
-| hideTitleBar   | boolean                                  | false                    | 隐藏标题栏。                                   |
-| hideBackButton | boolean                                  | false                    | 隐藏返回键。                                   |
-
-- NavigationMenuItem类型接口说明
-  | 名称     | 类型                      | 必填   | 默认值  | 描述              |
-  | ------ | ----------------------- | ---- | ---- | --------------- |
-  | value  | string                  | 是    | -    | 菜单栏单个选项的显示文本。   |
-  | icon   | string                  | 否    | -    | 菜单栏单个选项的图标资源路径。 |
-  | action | ()&nbsp;=&gt;&nbsp;void | 否    | -    | 当前选项被选中的事件回调。   |
-
-- Object类型说明
-  | 名称     | 类型                      | 必填   | 默认值  | 描述              |
-  | ------ | ----------------------- | ---- | ---- | --------------- |
-  | value  | string                  | 是    | -    | 工具栏单个选项的显示文本。   |
-  | icon   | string                  | 否    | -    | 工具栏单个选项的图标资源路径。 |
-  | action | ()&nbsp;=&gt;&nbsp;void | 否    | -    | 当前选项被选中的事件回调。   |
-
-- NavigationTitleMode枚举说明
-  | 名称   | 描述                                       |
-  | ---- | ---------------------------------------- |
-  | Free | 当内容为可滚动组件时，标题随着内容向上滚动而缩小（子标题的大小不变、淡出）。向下滚动内容到顶时则恢复原样。 |
-  | Mini | 固定为小标题模式（图标+主副标题）。                       |
-  | Full | 固定为大标题模式（主副标题）。                          |
-
-  > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-  > 目前可滚动组件只支持List。
+除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
+
+| 名称             | 参数类型                                     | 描述                                       |
+| -------------- | ---------------------------------------- | ---------------------------------------- |
+| title          | string&nbsp;\|&nbsp;[CustomBuilder](../../ui/ts-types.md) | 页面标题。                                    |
+| subTitle       | string                                   | 页面副标题。                                   |
+| menus          | Array<NavigationMenuItem&gt;&nbsp;\|&nbsp;[CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | 页面右上角菜单。      |
+| titleMode      | NavigationTitleMode                      | 页面标题栏显示模式。<br/>默认值：NavigationTitleMode.Free |
+| toolBar        | object&nbsp;\|&nbsp;[CustomBuilder](../../ui/ts-types.md#custombuilder8)<sup>8+</sup> | 设置工具栏内容。<br/>items:&nbsp;工具栏所有项。     |
+| hideToolBar    | boolean                                  | 设置隐藏/显示工具栏：<br/>默认值：false<br/>true:&nbsp;隐藏工具栏。<br/>false:&nbsp;显示工具栏。 |
+| hideTitleBar   | boolean                                  | 隐藏标题栏。<br/>默认值：false                     |
+| hideBackButton | boolean                                  | 隐藏返回键。<br/>默认值：false                     |
+
+## NavigationMenuItem类型说明
+
+| 名称   | 类型                    | 必填 | 描述                           |
+| ------ | ----------------------- | ---- | ------------------------------ |
+| value  | string                  | 是   | 菜单栏单个选项的显示文本。     |
+| icon   | string                  | 否   | 菜单栏单个选项的图标资源路径。 |
+| action | ()&nbsp;=&gt;&nbsp;void | 否   | 当前选项被选中的事件回调。     |
+
+## object类型说明
+
+| 名称   | 类型                    | 必填 | 描述                           |
+| ------ | ----------------------- | ---- | ------------------------------ |
+| value  | string                  | 是   | 工具栏单个选项的显示文本。     |
+| icon   | string                  | 否   | 工具栏单个选项的图标资源路径。 |
+| action | ()&nbsp;=&gt;&nbsp;void | 否   | 当前选项被选中的事件回调。     |
+
+## NavigationTitleMode枚举说明
+
+| 名称   | 描述                                       |
+| ---- | ---------------------------------------- |
+| Free | 当内容为可滚动组件时，标题随着内容向上滚动而缩小（子标题的大小不变、淡出）。向下滚动内容到顶时则恢复原样。 |
+| Mini | 固定为小标题模式（图标+主副标题）。                       |
+| Full | 固定为大标题模式（主副标题）。                          |
+
+>  **说明：**
+> 目前可滚动组件只支持List。
 
 
 ## 事件

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-patternlock.md

@@ -6,10 +6,6 @@
 >
 > 该组件从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
-## 权限列表
-
-无
-
 ## 子组件
 
 无
@@ -18,29 +14,31 @@
 
 PatternLock(controller?: PatternLockController)
 
-- 参数
+**参数:**
 
-  | 参数名        | 参数类型                                     | 必填   | 默认值  | 描述                     |
-  | ---------- | ---------------------------------------- | ---- | ---- | ---------------------- |
-  | controller | [PatternLockController](#patternlockcontroller) | 否    | null | 给组件绑定一个控制器，用来控制组件状态重置。 |
+| 参数名     | 参数类型                                        | 必填 | 描述                                                         |
+| ---------- | ----------------------------------------------- | ---- | ------------------------------------------------------------ |
+| controller | [PatternLockController](#patternlockcontroller) | 否   | 给组件绑定一个控制器，用来控制组件状态重置。<br/>默认值：null |
 
 ## 属性
 
 不支持`backgroundColor`以外的通用属性设置。
 
-| 名称              | 参数类型                                  | 默认值         | 描述                                       |
-| --------------- | ------------------------------------- | ----------- | ---------------------------------------- |
-| sideLength      | Length                                | 300vp       | 设置组件的宽度和高度（相同值）。最小可以设置为0。                |
-| circleRadius    | Length                                | 14vp        | 设置宫格圆点的半径。                               |
-| regularColor    | [ResourceColor](../../ui/ts-types.md) | Color.Black | 设置宫格圆点在“未选中”状态的填充颜色。                     |
-| selectedColor   | [ResourceColor](../../ui/ts-types.md) | Color.Black | 设置宫格圆点在“选中”状态的填充颜色。                      |
-| activeColor     | [ResourceColor](../../ui/ts-types.md) | Color.Black | 设置宫格圆点在“激活”状态的填充颜色。                      |
-| pathColor       | [ResourceColor](../../ui/ts-types.md) | Color.Blue  | 设置连线的颜色。                                 |
-| pathStrokeWidth | Length                                | 34vp        | 设置连线的宽度。最小可以设置为0。                        |
-| autoReset       | boolean                               | true        | 设置是否支持用户在完成输入后再次触屏重置组件状态。如果设置为true，用户可以通过触摸图案密码锁重置组件状态（清除之前的输入效果）；如果设置为false，用户手指离开屏幕完成输入后，再次触摸图案密码锁（包括圆点）不能改变之前的输入状态。 |
+| 名称            | 参数类型                              | 描述                                                         |
+| --------------- | ------------------------------------- | ------------------------------------------------------------ |
+| sideLength      | [Length](../../ui/ts-types.md)        | 设置组件的宽度和高度（相同值）。最小可以设置为0。<br/>默认值：300vp |
+| circleRadius    | [Length](../../ui/ts-types.md)        | 设置宫格圆点的半径。<br/>默认值：14vp                        |
+| regularColor    | [ResourceColor](../../ui/ts-types.md) | 设置宫格圆点在“未选中”状态的填充颜色。<br/>默认值：Color.Black |
+| selectedColor   | [ResourceColor](../../ui/ts-types.md) | 设置宫格圆点在“选中”状态的填充颜色。<br/>默认值：Color.Black |
+| activeColor     | [ResourceColor](../../ui/ts-types.md) | 设置宫格圆点在“激活”状态的填充颜色。<br/>默认值：Color.Black |
+| pathColor       | [ResourceColor](../../ui/ts-types.md) | 设置连线的颜色。<br/>默认值：Color.Blue                      |
+| pathStrokeWidth | number&nbsp;\|&nbsp;string            | 设置连线的宽度。最小可以设置为0。<br/>默认值：34vp           |
+| autoReset       | boolean                               | 设置是否支持用户在完成输入后再次触屏重置组件状态。如果设置为true，用户可以通过触摸图案密码锁重置组件状态（清除之前的输入效果）；如果设置为false，用户手指离开屏幕完成输入后，再次触摸图案密码锁（包括圆点）不能改变之前的输入状态。<br/>默认值：true |
 
 ## 事件
 
+除支持[通用事件](ts-universal-events-click.md)外，还支持以下事件：
+
 | 名称                                       | 描述                                       |
 | ---------------------------------------- | ---------------------------------------- |
 | onPatternComplete(callback: (input: Array\<number\>) => void) | 密码输入结束时被调用的回调函数。<br />input: 与选中宫格圆点顺序一致的数字数组，数字为选中宫格的索引（0到8）。 |

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-plugincomponent.md

 # PluginComponent
 
+提供外部应用组件嵌入式显示功能，即外部应用提供的UI可在本应用内显示。
+
 
 >  **说明：**
 >
@@ -8,14 +10,6 @@
 > - 本组件为系统接口。
 
 
-提供外部应用组件嵌入式显示功能，即外部应用提供的UI可在本应用内显示。
-
-
-## 权限列表
-
-无
-
-
 ## 子组件
 
 无
@@ -23,20 +17,22 @@
 
 ## 接口
 
-PluginComponent(value: { template: PluginComponentTemplate, data: any })
+PluginComponent(value: { template: PluginComponentTemplate, data: KVObject})
 
 创建插件组件，用于显示外部应用提供的UI。
 
-- 参数
-    | 参数名   | 参数类型                                     | 必填   | 默认值  | 参数描述                                     |
-    | ----- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
-    | value | {<br/>template:&nbsp;PluginComponentTemplate,<br/>data:&nbsp;KVObject<br/>} | 是    | -    | template:&nbsp;&nbsp;组件模板，用于跟提供者定义的组件绑定。<br/>data:&nbsp;传给插件组件提供者使用的数据。 |
+**参数：**
 
-- PluginComponentTemplate类型说明
-    | 参数      | 类型     | 描述                      |
-    | ------- | ------ | ----------------------- |
-    | source  | string | 组件模板名。                  |
-    | ability | string | 提供者Ability的abilityname。 |
+| 参数名 | 参数类型                                                     | 必填 | 参数描述                                                     |
+| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
+| value  | {<br/>template:&nbsp;PluginComponentTemplate,<br/>data:&nbsp;KVObject<br/>} | 是   | template:&nbsp;&nbsp;组件模板，用于跟提供者定义的组件绑定。<br/>data:&nbsp;传给插件组件提供者使用的数据。 |
+
+## PluginComponentTemplate类型说明
+
+| 参数      | 类型     | 描述                      |
+| ------- | ------ | ----------------------- |
+| source  | string | 组件模板名。                  |
+| ability | string | 提供者Ability的abilityname。 |
 
 
 ## 事件
@@ -66,24 +62,25 @@ push(param: PushParameters, callback: AsyncCallback&lt;void&gt;): void
 
 组件提供者向组件使用者主动发送组件与数据。
 
+**参数**
+
+| 参数名      | 类型                        | 必填   | 说明                               |
+| -------- | ------------------------- | ---- | -------------------------------- |
+| param    | PushParameters            | 是    | 组件使用者的详细信息，详见PushParameters参数说明。 |
+| callback | AsyncCallback&lt;void&gt; | 是    | 此次接口调用的异步回调。                     |
 
-- 参数
-    | 参数名      | 类型                        | 必填   | 说明                               |
-    | -------- | ------------------------- | ---- | -------------------------------- |
-    | param    | PushParameters            | 是    | 组件使用者的详细信息，详见PushParameters参数说明。 |
-    | callback | AsyncCallback&lt;void&gt; | 是    | 此次接口调用的异步回调。                     |
+**PushParameters参数说明**
 
-- PushParameters参数说明
-    | 参数名       | 类型       | 必填   | 说明              |
-    | --------- | -------- | ---- | --------------- |
-    | want      | Want     | 是    | 组件使用者Ability信息。 |
-    | name      | string   | 是    | 组件名称。           |
-    | data      | KVObject | 否    | 组件数据值。          |
-    | extraData | KVObject | 否    | 附加数据值。          |
+| 参数名       | 类型       | 必填   | 说明              |
+| --------- | -------- | ---- | --------------- |
+| want      | Want     | 是    | 组件使用者Ability信息。 |
+| name      | string   | 是    | 组件名称。           |
+| data      | KVObject | 否    | 组件数据值。          |
+| extraData | KVObject | 否    | 附加数据值。          |
 
-- 示例
+**示例**
 
-  见[Plugin组件提供方](#组件提供方)示例。
+见[Plugin组件提供方](#组件提供方)示例。
 
 
 ## request
@@ -92,35 +89,38 @@ request(param: RequestParameters, callback: AsyncCallback&lt;RequestCallbackPara
 
 组件使用者向组件提供者主动请求组件。
 
-- 参数
-    | 参数名      | 类型                                       | 必填   | 说明                                   |
-    | -------- | ---------------------------------------- | ---- | ------------------------------------ |
-    | param    | RequestParameters                        | 是    | 组件模板的详细请求信息，详见RequestParameters参数说明。 |
-    | callback | AsyncCallback<RequestCallbackParameters&nbsp;\|&nbsp;void&gt; | 是    | 此次请求的异步回调，&nbsp;通过回调接口的参数返回接受请求的数据。  |
+**参数：**
+
+| 参数名      | 类型                                       | 必填   | 说明                                   |
+| -------- | ---------------------------------------- | ---- | ------------------------------------ |
+| param    | RequestParameters                        | 是    | 组件模板的详细请求信息，详见RequestParameters参数说明。 |
+| callback | AsyncCallback<RequestCallbackParameters&nbsp;\|&nbsp;void&gt; | 是    | 此次请求的异步回调，&nbsp;通过回调接口的参数返回接受请求的数据。  |
+
+**RequestParameters参数说明**
 
-- RequestParameters参数说明
-    | 参数名  | 类型       | 必填   | 说明              |
-    | ---- | -------- | ---- | --------------- |
-    | want | Want     | 是    | 组件提供者Ability信息。 |
-    | name | string   | 是    | 请求组件名称。         |
-    | data | KVObject | 是    | 附加数据。           |
+| 参数名  | 类型       | 必填   | 说明              |
+| ---- | -------- | ---- | --------------- |
+| want | Want     | 是    | 组件提供者Ability信息。 |
+| name | string   | 是    | 请求组件名称。         |
+| data | KVObject | 是    | 附加数据。           |
 
-- RequestCallbackParameters说明
-    | 名称                | 类型                      | 说明    |
-    | ----------------- | ----------------------- | ----- |
-    | componentTemplate | PluginComponentTemplate | 组件模板。 |
-    | data              | KVObject                | 组件数据。 |
-    | extraData         | KVObject                | 附加数据。 |
+**RequestCallbackParameters说明**
 
-- KVObject类型说明
-    | 参数   | 类型                                       | 说明                                       |
-    | ---- | ---------------------------------------- | ---------------------------------------- |
-    | key  | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;boolean&nbsp;\|&nbsp;Array&nbsp;\|&nbsp;KVObject | KVObject用[key，value]来存储数据，key是string类型的，value可以是number，string，boolean，数组或者另外的一个KVObject。 |
+| 名称                | 类型                      | 说明    |
+| ----------------- | ----------------------- | ----- |
+| componentTemplate | PluginComponentTemplate | 组件模板。 |
+| data              | KVObject                | 组件数据。 |
+| extraData         | KVObject                | 附加数据。 |
 
+**KVObject类型说明**
 
-- 示例
+| 参数   | 类型                                       | 说明                                       |
+| ---- | ---------------------------------------- | ---------------------------------------- |
+| key  | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;boolean&nbsp;\|&nbsp;Array&nbsp;\|&nbsp;KVObject | KVObject用[key，value]来存储数据，key是string类型的，value可以是number，string，boolean，数组或者另外的一个KVObject。 |
 
-  见[Plugin组件使用方](#组件使用方)示例。
+**示例**
+
+见[Plugin组件使用方](#组件使用方)示例。
 
 
 ## on
@@ -129,28 +129,31 @@ on(eventType: string, callback: OnPushEventCallback | OnRequestEventCallback): v
 
 提供者监听"request"类型的事件，给使用者返回通过request接口主动请求的数据；使用者监听"push"类型的事件，接收提供者通过push接口主动推送的数据。
 
-- 参数
-    | 参数名       | 类型                                       | 必填   | 说明                                       |
-    | --------- | ---------------------------------------- | ---- | ---------------------------------------- |
-    | eventType | string                                   | 是    | 监听的事件类型，&nbsp;可选值为："push"&nbsp;、"request"。<br/>"push”：指组件提供者向使用者主动推送数据。<br/>"request”：指组件使用者向提供者主动请求数据。 |
-    | callback  | OnPushEventCallback&nbsp;\|&nbsp;OnRequestEventCallback | 是    | 见callback事件说明。                           |
+**参数**
+
+| 参数名       | 类型                                       | 必填   | 说明                                       |
+| --------- | ---------------------------------------- | ---- | ---------------------------------------- |
+| eventType | string                                   | 是    | 监听的事件类型，&nbsp;可选值为："push"&nbsp;、"request"。<br/>"push”：指组件提供者向使用者主动推送数据。<br/>"request”：指组件使用者向提供者主动请求数据。 |
+| callback  | OnPushEventCallback&nbsp;\|&nbsp;OnRequestEventCallback | 是    | 见callback事件说明。                           |
+
+**callback事件说明**
+
+| 参数名                    | 类型                                       | 说明                                       |
+| ---------------------- | ---------------------------------------- | ---------------------------------------- |
+| OnRequestEventCallback | (source:&nbsp;Want,<br/>name:&nbsp;string,<br/>data:&nbsp;KVObject&nbsp;)&nbsp;=>RequestEventResult | 数据请求事件的回调。<br/>source:&nbsp;组件请求方Ability信息。<br/>name:&nbsp;请求组件名称。<br/>data:&nbsp;附加数据。<br/>返回值：&nbsp;请求数据结果。 |
+| OnPushEventCallback    | (source:&nbsp;Want,<br/>template:&nbsp;PluginComponentTemplate,<br/>data:&nbsp;KVObject,<br/>extraData:&nbsp;KVObject<br/>)&nbsp;=&gt;&nbsp;void | 接收提供者主动推送的数据。<br/>source:&nbsp;组件提供者Ability信息。<br/>template:&nbsp;组件模板。<br/>data:&nbsp;组件更新数据。<br/>extraData:&nbsp;附加数据。 |
 
-- callback事件说明
-    | 参数名                    | 类型                                       | 说明                                       |
-    | ---------------------- | ---------------------------------------- | ---------------------------------------- |
-    | OnRequestEventCallback | (source:&nbsp;Want,<br/>name:&nbsp;string,<br/>data:&nbsp;KVObject&nbsp;)&nbsp;=>RequestEventResult | 数据请求事件的回调。<br/>source:&nbsp;组件请求方Ability信息。<br/>name:&nbsp;请求组件名称。<br/>data:&nbsp;附加数据。<br/>返回值：&nbsp;请求数据结果。 |
-    | OnPushEventCallback    | (source:&nbsp;Want,<br/>template:&nbsp;PluginComponentTemplate,<br/>data:&nbsp;KVObject,<br/>extraData:&nbsp;KVObject<br/>)&nbsp;=&gt;&nbsp;void | 接收提供者主动推送的数据。<br/>source:&nbsp;组件提供者Ability信息。<br/>template:&nbsp;组件模板。<br/>data:&nbsp;组件更新数据。<br/>extraData:&nbsp;附加数据。 |
+**RequestEventResult类型说明**
 
-- RequestEventResult类型说明
-    | 参数        | 类型       | 说明    |
-    | --------- | -------- | ----- |
-    | template  | string   | 组件名称。 |
-    | data      | KVObject | 组件数据。 |
-    | extraData | KVObjec  | 附加数据。 |
+| 参数      | 类型     | 说明       |
+| --------- | -------- | ---------- |
+| template  | string   | 组件名称。 |
+| data      | KVObject | 组件数据。 |
+| extraData | KVObject | 附加数据。 |
 
-- 示例
+**示例**
 
-  见[Plugin组件工具](#Plugin组件工具)示例。
+见[Plugin组件工具](#plugin组件工具)示例。
 
 
 ## 示例

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-progress.md

@@ -53,7 +53,7 @@ Progress(options: {value: number, total?: number, type?: ProgressType})
 | -------- | -------- | -------- |
 | value | number | 设置当前进度值。 |
 | color | [ResourceColor](../../ui/ts-types.md) | 设置进度条前景色。 |
-| style<sup>8+</sup> | {<br/>strokeWidth？:&nbsp;[Length](../../ui/ts-types.md#length),<br/>scaleCount？:&nbsp;number,<br/>scaleWidth？:&nbsp;[Length](../../ui/ts-types.md#length)<br/>} | 定义组件的样式。<br/>-&nbsp;strokeWidth:&nbsp;设置进度条宽度。<br/>-&nbsp;scaleCount:&nbsp;设置环形进度条总刻度数。<br/>-&nbsp;scaleWidth:&nbsp;设置环形进度条刻度粗细，刻度粗细大于进度条宽度时，为系统默认粗细。 |
+| style<sup>8+</sup> | {<br/>strokeWidth?:&nbsp;[Length](../../ui/ts-types.md#length),<br/>scaleCount?:&nbsp;number,<br/>scaleWidth?:&nbsp;[Length](../../ui/ts-types.md#length)<br/>} | 定义组件的样式。<br/>-&nbsp;strokeWidth:&nbsp;设置进度条宽度。<br/>-&nbsp;scaleCount:&nbsp;设置环形进度条总刻度数。<br/>-&nbsp;scaleWidth:&nbsp;设置环形进度条刻度粗细，刻度粗细大于进度条宽度时，为系统默认粗细。 |
 
 
 ## 示例

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-qrcode.md

@@ -6,11 +6,6 @@
 > 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
-## 权限列表
-
-无
-
-
 ## 子组件
 
 无
@@ -20,23 +15,25 @@
 
 QRCode(value: string)
 
-- 参数
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
-  | -------- | -------- | -------- | -------- | -------- |
-  | value | string | 是 | - | 二维码内容字符串。 |
+**参数:**
 
+| 参数名 | 参数类型 | 必填 | 参数描述 |
+| -------- | -------- | -------- | -------- |
+| value | string | 是 | 二维码内容字符串。 |
 
 ## 属性
 
-| 名称 | 参数类型 | 默认值 | 描述 |
-| -------- | -------- | -------- | -------- |
-| color | [ResourceColor](../../ui/ts-types.md) | Black | 设置二维码颜色。 |
-| backgroundColor | [ResourceColor](../../ui/ts-types.md) | - | 设置二维码背景颜色。 |
+除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性。
+
+| 名称 | 参数类型 | 描述 |
+| -------- | -------- | -------- |
+| color | [ResourceColor](../../ui/ts-types.md) | 设置二维码颜色。<br/>默认值：Color.Black |
+| backgroundColor | [ResourceColor](../../ui/ts-types.md) | 设置二维码背景颜色。<br/>默认值：Color.White |
 
 
 ## 事件
 
-通用事件仅支持点击事件。
+通用事件仅支持[点击事件](ts-universal-events-click.md)。
 
 
 ## 示例

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-radio.md

 # Radio
 
->  **说明：**
-> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
 单选框，提供相应的用户交互选择项。
 
-
-## 权限列表
-
-无
+>  **说明：**
+>
+>  该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
 ## 子组件
@@ -21,23 +16,26 @@
 
 Radio(options: {value: string, group: string})
 
-- 参数
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | value | string | 是 | - | 当前单选框的值。|
-  | group | string | 是 | - | 当前单选框的所属群组名称，相同group的Radio只能有一个被选中。|
+**参数:**
 
+| 参数名 | 参数类型 | 必填 | 参数描述 |
+| -------- | -------- | -------- | -------- |
+| value | string | 是 | 当前单选框的值。|
+| group | string | 是 | 当前单选框的所属群组名称，相同group的Radio只能有一个被选中。|
 
 ## 属性
 
-| 名称 | 参数类型 | 默认值 | 描述 | 
-| -------- | -------- | -------- | -------- |
-| checked | boolean | false | 设置单选框的选中状态。 | 
+除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
 
+| 名称 | 参数类型 | 描述 |
+| -------- | -------- | -------- |
+| checked | boolean | 设置单选框的选中状态。<br/>默认值：false |
 
 ## 事件
 
-| 名称 | 功能描述 | 
+除支持[通用事件](ts-universal-events-click.md)外，还支持以下事件：
+
+| 名称 | 功能描述 |
 | -------- | -------- |
 | onChange(callback: (isChecked: boolean) => void) | 单选框选中状态改变时触发回调。<br> -isChecked为true时，代表选中。<br> -isChecked为false时，代表未选中。 |
 

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-search.md

 #  Search
 
+提供搜索框组件，用于提供用户搜索内容的输入区域。
+
 > **说明：**
 >
 > 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
-提供搜索框组件，用于提供用户搜索内容的输入区域。
-
-## 权限列表
-
-无
-
 ## 子组件
 
 无
@@ -18,25 +14,27 @@
 
 Search(options?: { value?: string; placeholder?: string; icon?: string; controller?: SearchController })
 
-- 参数
-
-  | 参数名         | 参数类型             | 必填   | 默认值  | 参数描述                                     |
-  | ----------- | ---------------- | ---- | ---- | ---------------------------------------- |
-  | value       | string           | 否    | -    | 搜索文本值。                                   |
-  | placeholder | string           | 否    | -    | 无输入时的提示文本。                               |
-  | icon        | string           | 否    | -    | 搜索图标路径，默认使用系统搜索图标，支持的图标格式: svg, jpg和png。 |
-  | controller  | SearchController | 否    | -    | 控制器。                                     |
+**参数:**
 
+| 参数名      | 参数类型         | 必填 | 参数描述                                                     |
+| ----------- | ---------------- | ---- | ------------------------------------------------------------ |
+| value       | string           | 否   | 搜索文本值。                                                 |
+| placeholder | string           | 否   | 无输入时的提示文本。                                         |
+| icon        | string           | 否   | 搜索图标路径，默认使用系统搜索图标，支持的图标格式: svg、jpg和png。 |
+| controller  | SearchController | 否   | 控制器。                                                     |
 
 ## 属性
 
-| 名称                      | 参数类型                                     | 默认值  | 描述                    |
-| ----------------------- | ---------------------------------------- | ---- | --------------------- |
-| searchButton            | string                                   | 无    | 搜索框末尾搜索按钮文本值，默认无搜索按钮。 |
-| placeholderColor        | [ResourceColor](../../ui/ts-types.md)    | -    | 设置placeholder颜色。      |
-| placeholderFont         | [Font](../../ui/ts-types.md)             | -    | 设置placeholder文本样式。    |
-| textFont                | [Font](../../ui/ts-types.md)             | -    | 设置搜索框内文本样式。           |
-| copyOption<sup>9+</sup> | [CopyOptions](ts-basic-components-text.md) | CopyOptions.CrossDevice | 设置文本是否可复制。 |
+除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
+
+| 名称                    | 参数类型                                         | 描述                                           |
+| ----------------------- | ------------------------------------------------ | ---------------------------------------------- |
+| searchButton            | string                                           | 搜索框末尾搜索按钮文本值，默认无搜索按钮。     |
+| placeholderColor        | [ResourceColor](../../ui/ts-types.md)            | 设置placeholder颜色。                          |
+| placeholderFont         | [Font](../../ui/ts-types.md)                     | 设置placeholder文本样式。                      |
+| textFont                | [Font](../../ui/ts-types.md)                     | 设置搜索框内文本样式。                         |
+| copyOption<sup>9+</sup> | [CopyOptions](ts-appendix-enums.md#copyoptions9) | 设置文本是否可复制。                           |
+| textAlign               | [TextAlign](ts-appendix-enums.md#textalign)      | 设置文本对齐方式。<br/>默认值：TextAlign.Start |
 
 ## 事件
 
@@ -62,13 +60,11 @@ caretPosition(value: number): void
 
 设置输入光标的位置。
 
-- 参数
-
-  | 参数名   | 参数类型   | 必填   | 默认值  | 参数描述              |
-  | ----- | ------ | ---- | ---- | ----------------- |
-  | value | number | 是    | -    | 从字符串开始到光标所在位置的长度。 |
-
+**参数:**
 
+| 参数名 | 参数类型 | 必填 | 参数描述                           |
+| ------ | -------- | ---- | ---------------------------------- |
+| value  | number   | 是   | 从字符串开始到光标所在位置的长度。 |
 
 ##  示例
 

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md

@@ -40,7 +40,7 @@ TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: Te
 | inputFilter<sup>8+</sup>      | {<br/>value:&nbsp;[ResourceStr](../../ui/ts-types.md)<sup>8+</sup>,<br/>error?:&nbsp;(value:&nbsp;string)&nbsp;=&gt;&nbsp;void<br/>} | 正则表达式，满足表达式的输入允许显示，不满足正则表达式的输入被忽略。仅支持单个字符匹配，不支持字符串匹配。例如：^(?=.\*\d)(?=.\*[a-z])(?=.\*[A-Z]).{8,10}$，8到10位的强密码不支持过滤。<br/>-&nbsp;value：设置正则表达式。<br/>-&nbsp;error：正则匹配失败时，返回被忽略的内容。 |
 | copyOption<sup>9+</sup> | [CopyOptions](ts-appendix-enums.md#copyoptions9) | 设置文本是否可复制。 |
 | showPasswordIcon<sup>9+</sup> | boolean | 密码输入模式时，密码框末尾的图标是否显示。<br/>默认值：true |
-| style<sup>9+</sup> | TextInputStyle | TextInput风格。<br/>默认值：Default |
+| style<sup>9+</sup> | TextInputStyle | TextInput风格。<br/>默认值：TextInputStyle.Default |
 
 ## EnterKeyType枚举说明
 
@@ -56,7 +56,7 @@ TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: Te
 
 | 名称                 | 描述            |
 | ------------------ | ------------- |
-| Normal   | 基本输入模式。       |
+| Normal   | 基本输入模式。<br/>支持输入数字、字母、下划线、空格、特殊字符。 |
 | Password | 密码输入模式。       |
 | Email    | e-mail地址输入模式。 |
 | Number   | 纯数字输入模式。      |

zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md

@@ -66,8 +66,8 @@ RenderingContextSettings(antialias?: boolean)
 @Entry
 @Component
 struct FillStyleExample {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true)
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true);
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
 
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -96,8 +96,8 @@ struct FillStyleExample {
 @Entry
 @Component
 struct LineWidthExample {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true)
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true);
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
 
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -126,8 +126,8 @@ struct LineWidthExample {
 @Entry
 @Component
 struct StrokeStyleExample {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true)
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true);
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
 
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -158,8 +158,8 @@ struct StrokeStyleExample {
 @Entry
 @Component
 struct LineCapExample {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true)
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true);
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
 
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -192,8 +192,8 @@ struct LineCapExample {
 @Entry
 @Component
 struct LineJoinExample {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true)
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true);
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
 
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -227,8 +227,8 @@ struct LineJoinExample {
 @Entry
 @Component
 struct MiterLimit {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true)
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true);
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -262,8 +262,8 @@ struct MiterLimit {
 @Entry
 @Component
 struct Fonts {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true)
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true);
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -292,8 +292,8 @@ struct Fonts {
 @Entry
 @Component
 struct CanvasExample {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true)
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true);
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -337,8 +337,8 @@ struct CanvasExample {
 @Entry
 @Component
 struct TextBaseline {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true)
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true);
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -382,8 +382,8 @@ struct TextBaseline {
 @Entry
 @Component
 struct GlobalAlpha {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true)
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true);
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -415,8 +415,8 @@ struct GlobalAlpha {
 @Entry
 @Component
 struct LineDashOffset {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true)
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true);
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -461,8 +461,8 @@ struct LineDashOffset {
 @Entry
 @Component
 struct GlobalCompositeOperation {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true)
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true);
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -531,8 +531,8 @@ struct ShadowBlur {
 @Entry
 @Component
 struct ShadowColor {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true)
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true);
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -563,8 +563,8 @@ struct ShadowColor {
 @Entry
 @Component
 struct ShadowOffsetX {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true)
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true);
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -596,9 +596,8 @@ struct ShadowOffsetX {
 @Entry
 @Component
 struct ShadowOffsetY {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true)
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-
+  private settings: RenderingContextSettings = new RenderingContextSettings(true);
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
       Canvas(this.context)
@@ -629,9 +628,9 @@ struct ShadowOffsetY {
 @Entry
 @Component
 struct ImageSmoothingEnabled {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true)
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-  private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
+  private settings: RenderingContextSettings = new RenderingContextSettings(true);
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg");
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -678,8 +677,8 @@ fillRect(x: number, y: number, w: number, h: number): void
   @Entry
   @Component
   struct FillRect {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
     
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -722,9 +721,8 @@ strokeRect(x: number, y: number, w: number, h: number): void
   @Entry
   @Component
   struct StrokeRect {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
         Canvas(this.context)
@@ -766,9 +764,8 @@ clearRect(x: number, y: number, w: number, h: number): void
   @Entry
   @Component
   struct ClearRect {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
         Canvas(this.context)
@@ -812,9 +809,8 @@ fillText(text: string, x: number, y: number, maxWidth?: number): void
   @Entry
   @Component
   struct FillText {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
         Canvas(this.context)
@@ -857,9 +853,8 @@ strokeText(text: string, x: number, y: number, maxWidth?:number): void
   @Entry
   @Component
   struct StrokeText {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
         Canvas(this.context)
@@ -926,9 +921,8 @@ measureText(text: string): TextMetrics
   @Entry
   @Component
   struct MeasureText {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
         Canvas(this.context)
@@ -969,9 +963,9 @@ stroke(path?: Path2D): void
   @Entry
   @Component
   struct Stroke {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-  
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
         Canvas(this.context)
@@ -1007,9 +1001,9 @@ beginPath(): void
   @Entry
   @Component
   struct BeginPath {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-  
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
         Canvas(this.context)
@@ -1054,9 +1048,9 @@ moveTo(x: number, y: number): void
   @Entry
   @Component
   struct MoveTo {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-  
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
         Canvas(this.context)
@@ -1099,9 +1093,9 @@ lineTo(x: number, y: number): void
   @Entry
   @Component
   struct LineTo {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-  
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
         Canvas(this.context)
@@ -1137,9 +1131,9 @@ closePath(): void
   @Entry
   @Component
   struct ClosePath {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-  
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
         Canvas(this.context)
@@ -1190,10 +1184,10 @@ createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | nu
   @Entry
   @Component
   struct CreatePattern {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
-  
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg");
+
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
         Canvas(this.context)
@@ -1239,9 +1233,9 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
   @Entry
   @Component
   struct BezierCurveTo {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-  
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
         Canvas(this.context)
@@ -1335,9 +1329,9 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
   @Entry
   @Component
   struct Arc {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-  
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
         Canvas(this.context)
@@ -1382,9 +1376,9 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
   @Entry
   @Component
   struct ArcTo {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-  
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
         Canvas(this.context)
@@ -1432,9 +1426,9 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
   @Entry
   @Component
   struct CanvasExample {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-  
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
         Canvas(this.context)
@@ -1478,9 +1472,9 @@ rect(x: number, y: number, w: number, h: number): void
   @Entry
   @Component
   struct CanvasExample {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-  
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
         Canvas(this.context)
@@ -1521,8 +1515,8 @@ fill(fillRule?: CanvasFillRule): void
   @Entry
   @Component
   struct Fill {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1614,8 +1608,8 @@ clip(fillRule?: CanvasFillRule): void
   @Entry
   @Component
   struct Clip {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1706,9 +1700,9 @@ rotate(angle: number): void
   @Entry
   @Component
   struct Rotate {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-  
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
         Canvas(this.context)
@@ -1749,9 +1743,9 @@ scale(x: number, y: number): void
   @Entry
   @Component
   struct Scale {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-  
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
         Canvas(this.context)
@@ -1804,9 +1798,9 @@ transform方法对应一个变换矩阵，想对一个图形进行变化的时
   @Entry
   @Component
   struct Transform {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-  
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
         Canvas(this.context)
@@ -1857,9 +1851,9 @@ setTransfrom方法使用的参数和transform()方法相同，但setTransform()
   @Entry
   @Component
   struct SetTransform {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-  
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
         Canvas(this.context)
@@ -1908,9 +1902,9 @@ translate(x: number, y: number): void
   @Entry
   @Component
   struct Translate {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-  
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
         Canvas(this.context)
@@ -2090,9 +2084,9 @@ putImageData(imageData: ImageData, dx: number, dy: number, dirtyX: number, dirty
   @Entry
   @Component
   struct PutImageData {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-  
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
         Canvas(this.context)
@@ -2326,10 +2320,9 @@ restore(): void
   @Entry
   @Component
   struct CanvasExample {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
-  
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
         Canvas(this.context)
@@ -2360,9 +2353,9 @@ save(): void
   @Entry
   @Component
   struct CanvasExample {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-  
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
         Canvas(this.context)
@@ -2402,8 +2395,8 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void
   @Entry
   @Component
   struct CreateLinearGradient {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
     
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -2453,8 +2446,8 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
   @Entry
   @Component
   struct CreateRadialGradient {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
     
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {

zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md

 # Ellipse
 
->  **说明：**
-> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
 椭圆绘制组件。
 
-
-## 权限列表
-
-无
+>  **说明：**
+>
+>  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
 ## 子组件
@@ -21,12 +16,12 @@
 
 ellipse(options?: {width?: string | number, height?: string | number})
 
-- 参数
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | width | string \| number | 否 | 0 | 宽度。 | 
-  | height | string \| number | 否 | 0 | 高度。 | 
+**参数:**
 
+| 参数名 | 参数类型 | 必填 | 参数描述 |
+| -------- | -------- | -------- | -------- |
+| width | string \| number | 否 | 宽度。<br/>默认值：0 |
+| height | string \| number | 否 | 高度。<br/>默认值：0 |
 
 ## 属性
 
@@ -56,9 +51,9 @@ ellipse(options?: {width?: string | number, height?: string | number})
 struct EllipseExample {
   build() {
     Flex({ justifyContent: FlexAlign.SpaceAround }) {
-      // 在一个 150 * 70 的矩形框中绘制一个椭圆
+      // 在一个 150 * 80 的矩形框中绘制一个椭圆
       Ellipse({ width: 150, height: 80 })
-      // 在一个 150 * 70 的矩形框中绘制一个椭圆
+      // 在一个 150 * 80 的矩形框中绘制一个椭圆
       Ellipse().width(150).height(80)
     }.width('100%').margin({ top: 5 })
   }

zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md

@@ -3,14 +3,10 @@
 路径绘制组件，根据绘制路径生成封闭的自定义形状。
 
 > **说明：**
+>
 > 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
-## 权限列表
-
-无
-
-
 ## 子组件
 
 无
@@ -19,15 +15,13 @@
 
 Path(value?: { width?: number | string; height?: number | string; commands?: string })
 
-- 参数
-
-  | 参数名   | 参数类型 | 必填 | 默认值 | 参数描述             |
-  | -------- | -------- | ---- | ------ | -------------------- |
-  | width    | number \| string   | 否   | 0      | 路径所在矩形的宽度   |
-  | height   | number \| string   | 否   | 0      | 路径所在矩形的高度   |
-  | commands | string   | 否   | ''  | 路径绘制的命令字符串 |
+**参数:**
 
-  
+| 参数名   | 参数类型         | 必填 | 参数描述                            |
+| -------- | ---------------- | ---- | ----------------------------------- |
+| width    | number \| string | 否   | 路径所在矩形的宽度<br/>默认值：0    |
+| height   | number \| string | 否   | 路径所在矩形的高度<br/>默认值：0    |
+| commands | string           | 否   | 路径绘制的命令字符串<br/>默认值：'' |
 
 ## 属性
 

zh-cn/application-dev/reference/arkui-ts/ts-matrix-transformation.md

@@ -3,6 +3,7 @@
 可对图形进行平移、旋转和缩放等。
 
 > **说明：**
+>
 > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -13,125 +14,154 @@ import matrix4 from '@ohos.matrix4'
 ```
 
 
-## 权限列表
-
-无
-
-
 ## matrix4.init
 
-init(array: Array<number>): Object
+init(array: Array<number>): Matrix4Transit
 
 
 Matrix的构造函数，可以通过传入的参数创建一个四阶矩阵，矩阵为列优先。
 
+**参数：**
+
+| 参数名 | 类型                | 必填 | 说明                                                         |
+| ------ | ------------------- | ---- | ------------------------------------------------------------ |
+| array  | Array&lt;number&gt; | 是   | 参数为长度为16（4\*4）的number数组,&nbsp;详情见参数描述。<br/>默认值：<br/>[1,&nbsp;0,&nbsp;0,&nbsp;0,<br/>0,&nbsp;1,&nbsp;0,&nbsp;0,<br/>0,&nbsp;0,&nbsp;1,&nbsp;0,<br/>0,&nbsp;0,&nbsp;0,&nbsp;1] |
+
+**返回值：**
+
+| 类型           | 说明                         |
+| -------------- | ---------------------------- |
+| Matrix4Transit | 根据入参创建的四阶矩阵对象。 |
+
+**array参数说明：**
+
+| 参数名  | 类型     | 必填   | 说明                   |
+| ---- | ------ | ---- | -------------------- |
+| m00  | number | 是    | x轴缩放值，单位矩阵默认为1。      |
+| m01  | number | 是    | 第2个值，xyz轴旋转会影响这个值。   |
+| m02  | number | 是    | 第3个值，xyz轴旋转会影响这个值。   |
+| m03  | number | 是    | 无实际意义。               |
+| m10  | number | 是    | 第5个值，xyz轴旋转会影响这个值。   |
+| m11  | number | 是    | y轴缩放值，单位矩阵默认为1。      |
+| m12  | number | 是    | 第7个值，xyz轴旋转会影响这个值。   |
+| m13  | number | 是    | 无实际意义。               |
+| m20  | number | 是    | 第9个值，xyz轴旋转会影响这个值。   |
+| m21  | number | 是    | 第10个值，xyz轴旋转会影响这个值。  |
+| m22  | number | 是    | z轴缩放值，单位矩阵默认为1。      |
+| m23  | number | 是    | 无实际意义。               |
+| m30  | number | 是    | x轴平移值，单位px，单位矩阵默认为0。 |
+| m31  | number | 是    | y轴平移值，单位px，单位矩阵默认为0。 |
+| m32  | number | 是    | z轴平移值，单位px，单位矩阵默认为0。 |
+| m33  | number | 是    | 齐次坐标下生效，产生透视投影效果。    |
+
+**示例**
 
-- 参数
-  | 参数名   | 类型                  | 必填   | 默认值                                      | 说明                                     |
-  | ----- | ------------------- | ---- | ---------------------------------------- | -------------------------------------- |
-  | array | Array&lt;number&gt; | 是    | [1,&nbsp;0,&nbsp;0,&nbsp;0,<br/>0,&nbsp;1,&nbsp;0,&nbsp;0,<br/>0,&nbsp;0,&nbsp;1,&nbsp;0,<br/>0,&nbsp;0,&nbsp;0,&nbsp;1] | 参数为长度为16（4\*4）的number数组,&nbsp;详情见参数描述。 |
-
-- 返回值
-  | 类型     | 说明             |
-  | ------ | -------------- |
-  | Object | 根据入参创建的四阶矩阵对象。 |
-
-- 参数描述
-  | 参数名  | 类型     | 必填   | 说明                   |
-  | ---- | ------ | ---- | -------------------- |
-  | m00  | number | 是    | x轴缩放值，单位矩阵默认为1。      |
-  | m01  | number | 是    | 第2个值，xyz轴旋转会影响这个值。   |
-  | m02  | number | 是    | 第3个值，xyz轴旋转会影响这个值。   |
-  | m03  | number | 是    | 无实际意义。               |
-  | m10  | number | 是    | 第5个值，xyz轴旋转会影响这个值。   |
-  | m11  | number | 是    | y轴缩放值，单位矩阵默认为1。      |
-  | m12  | number | 是    | 第7个值，xyz轴旋转会影响这个值。   |
-  | m13  | number | 是    | 无实际意义。               |
-  | m20  | number | 是    | 第9个值，xyz轴旋转会影响这个值。   |
-  | m21  | number | 是    | 第10个值，xyz轴旋转会影响这个值。  |
-  | m22  | number | 是    | z轴缩放值，单位矩阵默认为1。      |
-  | m23  | number | 是    | 无实际意义。               |
-  | m30  | number | 是    | x轴平移值，单位px，单位矩阵默认为0。 |
-  | m31  | number | 是    | y轴平移值，单位px，单位矩阵默认为0。 |
-  | m32  | number | 是    | z轴平移值，单位px，单位矩阵默认为0。 |
-  | m33  | number | 是    | 齐次坐标下生效，产生透视投影效果。    |
-
-- 示例
-  ```ts
-  import matrix4 from '@ohos.matrix4'
-  // 创建一个四阶矩阵
-  let matrix = matrix4.init([1.0, 0.0, 0.0, 0.0,
-                            0.0, 1.0, 0.0, 0.0,
-                            0.0, 0.0, 1.0, 0.0,
-                            0.0, 0.0, 0.0, 1.0])
-  ```
+```ts
+import matrix4 from '@ohos.matrix4'
+// 创建一个四阶矩阵
+let matrix = matrix4.init([1.0, 0.0, 0.0, 0.0,
+                          0.0, 1.0, 0.0, 0.0,
+                          0.0, 0.0, 1.0, 0.0,
+                          0.0, 0.0, 0.0, 1.0])
+@Entry
+@Component
+struct Tests {
+  build() {
+    Column() {
+      Image($r("app.media.zh"))
+        .width("40%")
+        .height(100)
+        .transform(matrix)
+    }
+  }
+}
+```
 
 
 ## matrix4.identity
 
-identity(): Object
+identity(): Matrix4Transit
 
 
 Matrix的初始化函数，可以返回一个单位矩阵对象。
 
+**返回值**
 
-- 返回值
-  | 类型     | 说明      |
-  | ------ | ------- |
-  | Object | 单位矩阵对象。 |
+| 类型           | 说明           |
+| -------------- | -------------- |
+| Matrix4Transit | 单位矩阵对象。 |
 
-- 示例
-  ```ts
-  // matrix1 和 matrix2 效果一致
-  import matrix4 from '@ohos.matrix4'
-  let matrix = matrix4.init([1.0, 0.0, 0.0, 0.0,
-                            0.0, 1.0, 0.0, 0.0,
-                            0.0, 0.0, 1.0, 0.0,
-                            0.0, 0.0, 0.0, 1.0])
-  let matrix2 = matrix4.identity()
-  ```
+**示例**
+
+```ts
+// matrix1 和 matrix2 效果一致
+import matrix4 from '@ohos.matrix4'
+let matrix1 = matrix4.init([1.0, 0.0, 0.0, 0.0,
+                          0.0, 1.0, 0.0, 0.0,
+                          0.0, 0.0, 1.0, 0.0,
+                          0.0, 0.0, 0.0, 1.0])
+let matrix2 = matrix4.identity()
+@Entry
+@Component
+struct Tests {
+  build() {
+    Column() {
+      Image($r("app.media.zh"))
+        .width("40%")
+        .height(100)
+        .transform(matrix1)
+      Image($r("app.media.zh"))
+        .width("40%")
+        .height(100)
+        .margin({ top: 150 })
+        .transform(matrix2)
+    }
+  }
+}
+```
 
 
 ## matrix4.copy
 
-copy(): Object
+copy(): Matrix4Transit
 
 
 Matrix的拷贝函数，可以拷贝一份当前的矩阵对象。
 
+**返回值**
+
+| 类型           | 说明                 |
+| -------------- | -------------------- |
+| Matrix4Transit | 当前矩阵的拷贝对象。 |
+
+**示例**
 
-- 返回值
-  | 类型     | 说明         |
-  | ------ | ---------- |
-  | Object | 当前矩阵的拷贝对象。 |
-
-- 示例
-  ```ts
-  // xxx.ets
-  import matrix4 from '@ohos.matrix4'
-  @Entry
-  @Component
-  struct Test {
-    private matrix1 = matrix4.identity().translate({x:100})
-    private matrix2 = this.matrix1.copy().scale({x:2})
-
-    build() {
-      Column() {
-        Image($r("app.media.bg1"))
-          .width("40%")
-          .height(100)
-          .transform(this.matrix1)
-        Image($r("app.media.bg2"))
-          .width("40%")
-          .height(100)
-          .margin({top:50})
-          .transform(this.matrix2)
-      }
+```ts
+// xxx.ets
+import matrix4 from '@ohos.matrix4'
+@Entry
+@Component
+struct Test {
+  private matrix1 = Matrix4.identity().translate({x:100})
+  private matrix2 = this.matrix1.copy().scale({x:2})
+
+  build() {
+    Column() {
+      Image($r("app.media.bg1"))
+        .width("40%")
+        .height(100)
+        .transform(this.matrix1)
+      Image($r("app.media.bg2"))
+        .width("40%")
+        .height(100)
+        .margin({top:50})
+        .transform(this.matrix2)
     }
   }
-  ```
+}
+```
 
-  ![zh-cn_image_0000001219744181](figures/zh-cn_image_0000001219744181.png)
+![zh-cn_image_0000001219744181](figures/zh-cn_image_0000001219744181.png)
 
 
 ## Matrix4
@@ -139,201 +169,231 @@ Matrix的拷贝函数，可以拷贝一份当前的矩阵对象。
 
 ### combine
 
-combine(matrix: Matrix4): Object
+combine(matrix: Matrix4): Matrix4Transit
 
 
 Matrix的叠加函数，可以将两个矩阵的效果叠加起来生成一个新的矩阵对象。
 
+**参数：**
+
+| 参数名 | 类型    | 必填 | 说明               |
+| ------ | ------- | ---- | ------------------ |
+| matrix | Matrix4 | 是   | 待叠加的矩阵对象。 |
 
-- 参数
-  | 参数名    | 类型      | 必填   | 默认值  | 说明        |
-  | ------ | ------- | ---- | ---- | --------- |
-  | matrix | Matrix4 | 是    | -    | 待叠加的矩阵对象。 |
-
-- 返回值
-  | 类型     | 说明        |
-  | ------ | --------- |
-  | Object | 矩阵叠加后的对象。 |
-
-- 示例
-  ```ts
-  // xxx.ets
-  import matrix4 from '@ohos.matrix4'
-  @Entry
-  @Component
-  struct Test {
-    private matrix1 = matrix4.identity().translate({x:200}).copy()
-    private matrix2 = matrix4.identity().scale({x:2}).copy()
-
-    build() {
-      Column() {
-       // 先平移x轴100px，再缩放两倍x轴
-        Image($r("app.media.bg1")).transform(this.matrix1.combine(this.matrix2)) 
-          .width("40%")
-          .height(100)
-          .margin({top:50})
-      }
+**返回值**
+
+| 类型           | 说明               |
+| -------------- | ------------------ |
+| Matrix4Transit | 矩阵叠加后的对象。 |
+
+**示例**
+
+```ts
+// xxx.ets
+import matrix4 from '@ohos.matrix4'
+@Entry
+@Component
+struct Test {
+  private matrix1 = matrix4.identity().translate({x:200}).copy()
+  private matrix2 = matrix4.identity().scale({x:2}).copy()
+
+  build() {
+    Column() {
+      // 矩阵变换前
+      Image($r("app.media.icon"))
+        .width("40%")
+        .height(100)
+        .margin({top:50})
+      // 先平移x轴200px，再缩放两倍x轴，得到矩阵变换后的效果图
+      Image($r("app.media.icon"))
+        .transform(this.matrix1.combine(this.matrix2))
+        .width("40%")
+      .height(100)
+        .margin({top:50})
     }
   }
-  ```
+}
+```
 
-  ![zh-cn_image_0000001174582846](figures/zh-cn_image_0000001174582846.png)
+![zh-cn_image_0000001118642902](figures/zh-cn_image_0000001118642902.png)
 
 
 ### invert
 
-invert(): Object
+invert(): Matrix4Transit
 
 
 Matrix的逆函数，可以返回一个当前矩阵对象的逆矩阵，即效果正好相反。
 
+**返回值**
 
-- 返回值
-  | 类型     | 说明          |
-  | ------ | ----------- |
-  | Object | 当前矩阵的逆矩阵对象。 |
+| 类型           | 说明                   |
+| -------------- | ---------------------- |
+| Matrix4Transit | 当前矩阵的逆矩阵对象。 |
 
-- 示例
-  ```ts
-  import matrix4 from '@ohos.matrix4'
-  // matrix1(宽放大2倍) 和 matrix2(宽缩小2倍) 效果相反
-  let matrix1 = matrix4.identity().scale({x:2})
-  let matrix2 = matrix1.copy().invert()
-  ```
+**示例**
+
+```ts
+import matrix4 from '@ohos.matrix4'
+// matrix1(宽放大2倍) 和 matrix2(宽缩小2倍) 效果相反
+let matrix1 = matrix4.identity().scale({x:2})
+let matrix2 = matrix1.invert()
+@Entry
+@Component
+struct Tests {
+  build() {
+    Column() {
+      Image($r("app.media.zh"))
+        .width(200)
+        .height(100)
+        .transform(matrix1)
+        .margin({ top: 100 })
+      Image($r("app.media.zh"))
+        .width(200)
+        .height(100)
+        .margin({ top: 150 })
+        .transform(matrix2)
+    }
+  }
+}
+```
 
 
 ### translate
 
-translate({x?: number, y?: number, z?: number}): Object
+translate({x?: number, y?: number, z?: number}): Matrix4Transit
 
 
 Matrix的平移函数，可以为当前矩阵增加x轴/Y轴/Z轴平移效果。
 
+**参数**
+
+| 参数名 | 类型   | 必填 | 说明                                  |
+| ------ | ------ | ---- | ------------------------------------- |
+| x      | number | 否   | x轴的平移距离，单位px。<br/>默认值：0 |
+| y      | number | 否   | y轴的平移距离，单位px。<br/>默认值：0 |
+| z      | number | 否   | z轴的平移距离，单位px。<br/>默认值：0 |
+
+**返回值**
+
+| 类型           | 说明                         |
+| -------------- | ---------------------------- |
+| Matrix4Transit | 增加好平移效果后的矩阵对象。 |
 
-- 参数
-  | 参数名  | 类型     | 必填   | 默认值  | 说明            |
-  | ---- | ------ | ---- | ---- | ------------- |
-  | x    | number | 否    | 0    | x轴的平移距离，单位px。 |
-  | y    | number | 否    | 0    | y轴的平移距离，单位px。 |
-  | z    | number | 否    | 0    | z轴的平移距离，单位px。 |
-
-
-- 返回值
-  | 类型     | 说明             |
-  | ------ | -------------- |
-  | Object | 增加好平移效果后的矩阵对象。 |
-
-- 示例
-  ```ts
-  // xxx.ets
-  import matrix4 from '@ohos.matrix4'
-  @Entry
-  @Component
-  struct Test {
-    private matrix1 = matrix4.identity().translate({x:100, y:200, z:30})
-
-    build() {
-      Column() {
-        Image($r("app.media.bg1")).transform(this.matrix1)
-          .width("40%")
-          .height(100)
-      }
+**示例**
+
+```ts
+// xxx.ets
+import matrix4 from '@ohos.matrix4'
+@Entry
+@Component
+struct Test {
+  private matrix1 = matrix4.identity().translate({x:100, y:200, z:30})
+
+  build() {
+    Column() {
+      Image($r("app.media.bg1")).transform(this.matrix1)
+        .width("40%")
+        .height(100)
     }
   }
-  ```
+}
+```
 
-  ![zh-cn_image_0000001219662645](figures/zh-cn_image_0000001219662645.png)
+![zh-cn_image_0000001219662645](figures/zh-cn_image_0000001219662645.png)
 
 
 ### scale
 
-scale({x?: number, y?: number, z?: number, centerX?: number, centerY?: number}): Object
+scale({x?: number, y?: number, z?: number, centerX?: number, centerY?: number}): Matrix4Transit
 
 
 Matrix的缩放函数，可以为当前矩阵增加x轴/Y轴/Z轴缩放效果。
 
+**参数：**
 
-- 参数
-  | 参数名     | 类型     | 必填   | 默认值  | 说明         |
-  | ------- | ------ | ---- | ---- | ---------- |
-  | x       | number | 否    | 1    | x轴的缩放倍数。   |
-  | y       | number | 否    | 1    | y轴的缩放倍数。   |
-  | z       | number | 否    | 1    | z轴的缩放倍数。   |
-  | centerX | number | 否    | 0    | 变换中心点x轴坐标。 |
-  | centerY | number | 否    | 0    | 变换中心点y轴坐标。 |
-
-
-- 返回值
-  | 类型     | 说明             |
-  | ------ | -------------- |
-  | Object | 增加好缩放效果后的矩阵对象。 |
-
-- 示例
-  ```ts
-  // xxx.ets
-  import matrix4 from '@ohos.matrix4'
-  @Entry
-  @Component
-  struct Test {
-    private matrix1 = matrix4.identity().scale({x:2, y:3, z:4, centerX:50, centerY:50})
-
-    build() {
-      Column() { 
-        Image($r("app.media.bg1")).transform(this.matrix1)
-          .width("40%")
-          .height(100)
-      }
+| 参数名  | 类型   | 必填 | 说明                              |
+| ------- | ------ | ---- | --------------------------------- |
+| x       | number | 否   | x轴的缩放倍数。<br/>默认值：1     |
+| y       | number | 否   | y轴的缩放倍数。<br/>默认值：1     |
+| z       | number | 否   | z轴的缩放倍数。<br/>默认值：1     |
+| centerX | number | 否   | 变换中心点x轴坐标。<br/>默认值：0 |
+| centerY | number | 否   | 变换中心点y轴坐标。<br/>默认值：0 |
+
+**返回值**
+
+| 类型           | 说明                         |
+| -------------- | ---------------------------- |
+| Matrix4Transit | 增加好缩放效果后的矩阵对象。 |
+
+**示例**
+
+```ts
+// xxx.ets
+import matrix4 from '@ohos.matrix4'
+@Entry
+@Component
+struct Test {
+  private matrix1 = matrix4.identity().scale({x:2, y:3, z:4, centerX:50, centerY:50})
+
+  build() {
+    Column() { 
+      Image($r("app.media.bg1")).transform(this.matrix1)
+        .width("40%")
+        .height(100)
     }
   }
-  ```
+}
+```
 
-  ![zh-cn_image_0000001219864131](figures/zh-cn_image_0000001219864131.png)
+![zh-cn_image_0000001219864131](figures/zh-cn_image_0000001219864131.png)
 
 
 ### rotate
 
-rotate({x?: number, y?: number, z?: number, angle?: number, centerX?: Length, centerY?: Length}): Object
+rotate({x?: number, y?: number, z?: number, angle?: number, centerX?: Length, centerY?: Length}): Matrix4Transit
 
 
 Matrix的旋转函数，可以为当前矩阵增加x轴/Y轴/Z轴旋转效果。
 
+**参数：**
 
-- 参数
-  | 参数名     | 类型     | 必填   | 默认值  | 说明         |
-  | ------- | ------ | ---- | ---- | ---------- |
-  | x       | number | 否    | 1    | 旋转轴向量x坐标。  |
-  | y       | number | 否    | 1    | 旋转轴向量y坐标。  |
-  | z       | number | 否    | 1    | 旋转轴向量z坐标。  |
-  | angle   | number | 否    | 0    | 旋转角度。      |
-  | centerX | number | 否    | 0    | 变换中心点x轴坐标。 |
-  | centerY | number | 否    | 0    | 变换中心点y轴坐标。 |
-
-
-- 返回值
-  | 类型     | 说明             |
-  | ------ | -------------- |
-  | Object | 增加好旋转效果后的矩阵对象。 |
-
-- 示例
-  ```ts
-  // xxx.ets
-  import matrix4 from '@ohos.matrix4'
-  @Entry
-  @Component
-  struct Test {
-    private matrix1 = matrix4.identity().rotate({x:1, y:1, z:2, angle:30})
-
-    build() {
-      Column() {
-        Image($r("app.media.bg1")).transform(this.matrix1)
-          .width("40%")
-          .height(100)
-      }.width("100%").margin({top:50})
-    }
+| 参数名  | 类型   | 必填 | 说明                              |
+| ------- | ------ | ---- | --------------------------------- |
+| x       | number | 否   | 旋转轴向量x坐标。<br/>默认值：1   |
+| y       | number | 否   | 旋转轴向量y坐标。<br/>默认值：1   |
+| z       | number | 否   | 旋转轴向量z坐标。<br/>默认值：1   |
+| angle   | number | 否   | 旋转角度。<br/>默认值：0          |
+| centerX | number | 否   | 变换中心点x轴坐标。<br/>默认值：0 |
+| centerY | number | 否   | 变换中心点y轴坐标。<br/>默认值：0 |
+
+**返回值**
+
+| 类型           | 说明                         |
+| -------------- | ---------------------------- |
+| Matrix4Transit | 增加好旋转效果后的矩阵对象。 |
+
+**示例**
+
+```ts
+// xxx.ets
+import matrix4 from '@ohos.matrix4'
+@Entry
+@Component
+struct Test {
+  private matrix1 = matrix4.identity().rotate({x:1, y:1, z:2, angle:30})
+
+  build() {
+    Column() {
+      Image($r("app.media.bg1")).transform(this.matrix1)
+        .width("40%")
+        .height(100)
+    }.width("100%").margin({top:50})
   }
-  ```
+}
+```
 
-  ![zh-cn_image_0000001174422898](figures/zh-cn_image_0000001174422898.png)
+![zh-cn_image_0000001174422898](figures/zh-cn_image_0000001174422898.png)
 
 
 ### transformPoint
@@ -343,38 +403,39 @@ transformPoint(point: Point): Point
 
 Matrix的坐标点转换函数，可以将当前的变换效果作用到一个坐标点上。
 
+**参数：**
 
-- 参数
-  | 参数名   | 类型    | 必填   | 默认值  | 说明        |
-  | ----- | ----- | ---- | ---- | --------- |
-  | point | Point | 是    | -    | 需要转换的坐标点。 |
-
-
-- 返回值
-  | 类型    | 说明               |
-  | ----- | ---------------- |
-  | Point | 返回矩阵变换后的Point对象。 |
-
-- 示例
-  ```ts
-  // xxx.ets
-  import matrix4 from '@ohos.matrix4'
-  import prompt from '@system.prompt'
-
-  @Entry
-  @Component
-  struct Test {
-    private matrix1 = matrix4.identity().transformPoint([100, 10])
-    
-    build() {
-      Column() {
-       Button("get Point")
-        .onClick(() => {
-         prompt.showToast({message:JSON.stringify(this.matrix1),duration:2000})
-        }).backgroundColor(0x2788D9)
-      }.width("100%").padding(50)
-    }
+| 参数名 | 类型  | 必填 | 说明               |
+| ------ | ----- | ---- | ------------------ |
+| point  | Point | 是   | 需要转换的坐标点。 |
+
+**返回值**
+
+| 类型    | 说明               |
+| ----- | ---------------- |
+| Point | 返回矩阵变换后的Point对象。 |
+
+**示例**
+
+```ts
+// xxx.ets
+import matrix4 from '@ohos.matrix4'
+import prompt from '@system.prompt'
+
+@Entry
+@Component
+struct Test {
+  private matrix1 = matrix4.identity().transformPoint([100, 10])
+  
+  build() {
+    Column() {
+     Button("get Point")
+      .onClick(() => {
+       prompt.showToast({message:JSON.stringify(this.matrix1),duration:2000})
+      }).backgroundColor(0x2788D9)
+    }.width("100%").padding(50)
   }
-  ```
+}
+```
 
-  ![zh-cn_image_0000001219864133](figures/zh-cn_image_0000001219864133.gif)
+![zh-cn_image_0000001219864133](figures/zh-cn_image_0000001219864133.gif)
\ No newline at end of file

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md

@@ -3,20 +3,16 @@
 组件的Z序，指明了该组件在堆叠组件中的位置。
 
 >  **说明：**
-> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
-## 权限列表
-
-无
+>
+>  从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
 ## 属性
 
 
-| 名称 | 参数类型 | 默认值 | 描述 |
-| -------- | -------- | -------- | -------- |
-| zIndex | number | 0 | 同一容器中兄弟组件显示层级关系，z值越大，显示层级越高。 |
+| 名称 | 参数类型 | 描述 |
+| -------- | -------- | -------- |
+| zIndex | number | 同一容器中兄弟组件显示层级关系。zIndex值越大，显示层级越高，即zIndex值大的组件会覆盖在zIndex值小的组件上方。 |
 
 
 ## 示例