!10496 示例代码整改1011

Merge pull request !10496 from luoying_ace/master

!10496 示例代码整改1011
Merge pull request !10496 from luoying_ace/master
0134a76b · openharmony_ci · Gitee · 9d66e5f2 · e673fdb4 · 0134a76b
6 changed file
--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-patternlock.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-patternlock.md
 # PatternLock

-图案密码锁组件，以宫格图案的方式输入密码，用于密码验证。手指触碰图案密码锁时开始进入输入状态，手指离开屏幕时结束输入状态并向应用返回输入的密码。
+图案密码锁组件，以九宫格图案的方式输入密码，用于密码验证场景。手指在PatternLock组件区域按下时开始进入输入状态，手指离开屏幕时结束输入状态完成密码输入。

 >  **说明：** 
 >
@@ -18,22 +18,22 @@ PatternLock(controller?: PatternLockController)

 | 参数名     | 参数类型                                        | 必填 | 描述                                                         |
 | ---------- | ----------------------------------------------- | ---- | ------------------------------------------------------------ |
-| controller | [PatternLockController](#patternlockcontroller) | 否   | 给组件绑定一个控制器，用来控制组件状态重置。<br/>默认值：null |
+| controller | [PatternLockController](#patternlockcontroller) | 否   | 设置PatternLock组件控制器，可用于控制组件状态重置。       |

 ## 属性

-不支持`backgroundColor`以外的通用属性设置。
+不支持除backgroundColor以外的通用属性设置。

 | 名称            | 参数类型                              | 描述                                                         |
 | --------------- | ------------------------------------- | ------------------------------------------------------------ |
-| sideLength      | [Length](ts-types.md#length)        | 设置组件的宽度和高度（相同值）。最小可以设置为0。<br/>默认值：300vp |
-| circleRadius    | [Length](ts-types.md#length)        | 设置宫格圆点的半径。<br/>默认值：14vp                        |
+| sideLength      | [Length](ts-types.md#length)        | 设置组件的宽度和高度（宽高相同）。设置为0或负数等非法值时组件不显示。<br/>默认值：300vp |
+| circleRadius    | [Length](ts-types.md#length)        | 设置宫格中圆点的半径。<br/>默认值：14vp                        |
 | regularColor    | [ResourceColor](ts-types.md#resourcecolor) | 设置宫格圆点在“未选中”状态的填充颜色。<br/>默认值：Color.Black |
 | selectedColor   | [ResourceColor](ts-types.md#resourcecolor) | 设置宫格圆点在“选中”状态的填充颜色。<br/>默认值：Color.Black |
-| activeColor     | [ResourceColor](ts-types.md#resourcecolor) | 设置宫格圆点在“激活”状态的填充颜色。<br/>默认值：Color.Black |
+| activeColor     | [ResourceColor](ts-types.md#resourcecolor) | 设置宫格圆点在“激活”状态的填充颜色（“激活”状态为手指经过圆点但还未选中的状态）。<br/>默认值：Color.Black |
 | pathColor       | [ResourceColor](ts-types.md#resourcecolor) | 设置连线的颜色。<br/>默认值：Color.Blue                      |
-| pathStrokeWidth | number&nbsp;\|&nbsp;string            | 设置连线的宽度。最小可以设置为0。<br/>默认值：34vp           |
-| autoReset       | boolean                               | 设置是否支持用户在完成输入后再次触屏重置组件状态。如果设置为true，用户可以通过触摸图案密码锁重置组件状态（清除之前的输入效果）；如果设置为false，用户手指离开屏幕完成输入后，再次触摸图案密码锁（包括圆点）不能改变之前的输入状态。<br/>默认值：true |
+| pathStrokeWidth | number&nbsp;\|&nbsp;string            | 设置连线的宽度。设置为0或负数等非法值时连线不显示。<br/>默认值：34vp           |
+| autoReset       | boolean                               | 设置在完成密码输入后再次在组件区域按下时是否重置组件状态。设置为true，完成密码输入后再次在组件区域按下时会重置组件状态（即清除之前输入的密码）；反之若设置为false，则不会重置组件状态。<br/>默认值：true |

 ## 事件

@@ -41,11 +41,11 @@ PatternLock(controller?: PatternLockController)

 | 名称                                       | 描述                                       |
 | ---------------------------------------- | ---------------------------------------- |
-| onPatternComplete(callback: (input: Array\<number\>) => void) | 密码输入结束时被调用的回调函数。<br />input: 与选中宫格圆点顺序一致的数字数组，数字为选中宫格的索引（0到8）。 |
+| onPatternComplete(callback: (input: Array\<number\>) => void) | 密码输入结束时触发该回调。<br />input: 与选中宫格圆点顺序一致的数字数组，数字为选中宫格圆点的索引值（第一行圆点从左往右依次为0,1,2，第二行圆点依次为3,4,5，第三行圆点依次为6,7,8）。 |

 ## PatternLockController

-PatternLock组件的控制器，可以将此对象绑定至PatternLock组件，然后通过它进行状态重置。
+PatternLock组件的控制器，可以通过它进行组件状态重置。

 ### 导入对象

@@ -66,49 +66,51 @@ reset(): void
 @Entry
 @Component
 struct PatternLockExample {
-  @State passwords: Number[] = []
-  @State message: string = 'please input password'
-  private patternLockController: PatternLockController = new PatternLockController()
-  
+  @State passwords: Number[] = [];
+  @State message: string = 'please input password!';
+  private patternLockController: PatternLockController = new PatternLockController();
+
  build() {
-    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-      Text(this.message).textAlign(TextAlign.Center)
+    Column() {
+      Text(this.message).textAlign(TextAlign.Center).margin(20).fontSize(20)
      PatternLock(this.patternLockController)
-        .sideLength(150)
-        .circleRadius(7)
-        .pathStrokeWidth(17)
-        .backgroundColor(Color.White)
+        .sideLength(200)
+        .circleRadius(9)
+        .pathStrokeWidth(18)
+        .activeColor('#B0C4DE')
+        .selectedColor('#228B22')
+        .pathColor('#90EE90')
+        .backgroundColor('#F5F5F5')
        .autoReset(true)
        .onPatternComplete((input: Array<number>) => {
-          // 判断输出的密码格式
+          // 输入的密码长度小于5时，提示重新输入
          if (input === null || input === undefined || input.length < 5) {
-            this.message = 'The password length needs to be greater than 5.'
-            // 重新触发该回调
-            return
+            this.message = 'The password length needs to be greater than 5, please enter again.';
+            return;
          }
          // 判断密码长度是否大于0
          if (this.passwords.length > 0) {
-              // 判断俩次输入的密码是否相等
+            // 判断两次输入的密码是否相同，相同则提示密码设置成功，否则提示重新输入
            if (this.passwords.toString() === input.toString()) {
-              this.passwords = input
-              this.message = 'Set password successfully: ' + this.passwords.toString()
+              this.passwords = input;
+              this.message = 'Set password successfully: ' + this.passwords.toString();
            } else {
-              this.message = 'Inconsistent passwords, please enter again.'
+              this.message = 'Inconsistent passwords, please enter again.';
            }
          } else {
-            this.passwords = input
-            this.message = "Please enter again."
+            // 提示第二次输入密码
+            this.passwords = input;
+            this.message = "Please enter again.";
          }
        })
-      Button('reset button').margin(30).onClick(() => {
-        this.patternLockController.reset()
-        this.passwords = []
-        this.message = 'Please input password'
+      Button('Reset PatternLock').margin(30).onClick(() => {
+        // 重置密码锁
+        this.patternLockController.reset();
+        this.passwords = [];
+        this.message = 'Please input password';
      })
    }.width('100%').height('100%')
  }
 }
 ```

-![patternlock](figures/patternlock.gif)
-
--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-search.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-search.md
 #  Search

-提供搜索框组件，用于提供用户搜索内容的输入区域。
+搜索框组件，适用于浏览器的搜索内容输入框等应用场景。

 > **说明：**
 >
@@ -18,10 +18,10 @@ Search(options?: { value?: string; placeholder?: string; icon?: string; controll

 | 参数名      | 参数类型         | 必填 | 参数描述                                                     |
 | ----------- | ---------------- | ---- | ------------------------------------------------------------ |
-| value       | string           | 否   | 搜索文本值。                                                 |
-| placeholder | string           | 否   | 无输入时的提示文本。                                         |
-| icon        | string           | 否   | 搜索图标路径，默认使用系统搜索图标，支持的图标格式: svg、jpg和png。 |
-| controller  | SearchController | 否   | 控制器。                                                     |
+| value       | string           | 否   | 设置当前显示的搜索文本内容。                                                 |
+| placeholder | string           | 否   | 设置无输入时的提示文本。                                         |
+| icon        | string           | 否   | 设置搜索图标路径，默认使用系统搜索图标，图标支持的图源格式: svg、jpg和png。 |
+| controller  | SearchController | 否   | 设置Search组件控制器。                                                     |

 ## 属性

@@ -29,26 +29,28 @@ Search(options?: { value?: string; placeholder?: string; icon?: string; controll

 | 名称                    | 参数类型                                         | 描述                                           |
 | ----------------------- | ------------------------------------------------ | ---------------------------------------------- |
-| searchButton            | string                                           | 搜索框末尾搜索按钮文本值，默认无搜索按钮。         |
-| placeholderColor        | [ResourceColor](ts-types.md#resourcecolor)      | 设置placeholder颜色。                           |
-| placeholderFont         | [Font](ts-types.md#font)                     | 设置placeholder文本样式。                           |
-| textFont                | [Font](ts-types.md#font)                     | 设置搜索框内文本样式。                               |
-| copyOption<sup>9+</sup> | [CopyOptions](ts-appendix-enums.md#copyoptions9) | 设置文本是否可复制。                             |
-| textAlign               | [TextAlign](ts-appendix-enums.md#textalign)      | 设置文本对齐方式。<br/>默认值：TextAlign.Start    |
+| searchButton            | string                                           | 搜索框末尾搜索按钮文本内容，默认无搜索按钮。         |
+| placeholderColor        | [ResourceColor](ts-types.md#resourcecolor)       | 设置placeholder文本颜色。                           |
+| placeholderFont         | [Font](ts-types.md#font)                         | 设置placeholder文本样式。                           |
+| textFont                | [Font](ts-types.md#font)                         | 设置搜索框内输入文本样式。                               |
+| textAlign               | [TextAlign](ts-appendix-enums.md#textalign)      | 设置文本在搜索框中的对齐方式。<br/>默认值：TextAlign.Start    |
+| copyOption<sup>9+</sup> | [CopyOptions](ts-appendix-enums.md#copyoptions9) | 设置输入的文本是否可复制。                             |

 ## 事件

+除支持[通用事件](ts-universal-events-click.md)外，还支持以下事件：
+
 | 名称                                       | 功能描述                                     |
 | ---------------------------------------- | ---------------------------------------- |
-| onSubmit(callback: (value: string) => void) | 点击搜索图标、搜索按钮或者按下软键盘搜索按钮时触发。<br> -value: 当前输入文本框的内容。 |
-| onChange(callback: (value: string) => void) | 输入内容发生变化时，触发回调。<br> -value: 当前输入文本框的内容。  |
-| onCopy(callback: (value: string) => void) | 组件触发系统剪切板复制操作。<br> -value: 复制的文本内容。      |
-| onCut(callback: (value: string) => void) | 组件触发系统剪切板剪切操作。<br> -value: 剪切的文本内容。      |
-| onPaste(callback: (value: string) => void) | 组件触发系统剪切板粘贴操作。<br> -value: 粘贴的文本内容。      |
+| onSubmit(callback: (value: string) => void) | 点击搜索图标、搜索按钮或者按下软键盘搜索按钮时触发该回调。<br> -value: 当前搜索框中输入的文本内容。 |
+| onChange(callback: (value: string) => void) | 输入内容发生变化时，触发该回调。<br> -value: 当前搜索框中输入的文本内容。  |
+| onCopy(callback: (value: string) => void) | 长按搜索框弹出剪切板之后，点击剪切板的复制按钮触发该回调。<br> -value: 复制的文本内容。      |
+| onCut(callback: (value: string) => void)  | 长按搜索框弹出剪切板之后，点击剪切板的剪切按钮触发该回调。<br> -value: 剪切的文本内容。      |
+| onPaste(callback: (value: string) => void) | 长按搜索框弹出剪切板之后，点击剪切板的粘贴按钮触发该回调。<br> -value: 粘贴的文本内容。      |

 ## SearchController

-Search组件的控制器，通过它操作Search组件。
+Search组件的控制器，目前通过它可控制Search组件的光标位置。

 ### 导入对象
 ```
@@ -73,30 +75,35 @@ caretPosition(value: number): void
 @Entry
 @Component
 struct SearchExample {
-  @State changeValue: string = ''
-  @State submitValue: string = ''
-  controller: SearchController = new SearchController()
+  @State changeValue: string = '';
+  @State submitValue: string = '';
+  controller: SearchController = new SearchController();

  build() {
-    Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
-      Text(this.submitValue)
-      Text(this.changeValue)
-      Search({value: this.changeValue, placeholder: 'Type to search', controller: this.controller})
-        .searchButton('Search')
+    Column() {
+      Text('onSubmit:' + this.submitValue).fontSize(18).margin(15)
+      Text('onChange:' + this.changeValue).fontSize(18).margin(15)
+      Search({ value: this.changeValue, placeholder: 'Type to search...', controller: this.controller })
+        .searchButton('SEARCH')
        .width(400)
-        .height(35)
+        .height(40)
        .backgroundColor(Color.White)
        .placeholderColor(Color.Grey)
-        .placeholderFont({ size: 26, weight: 10, family: 'serif', style: FontStyle.Normal })
+        .placeholderFont({ size: 14, weight: 400 })
+        .textFont({ size: 14, weight: 400 })
        .onSubmit((value: string) => {
-          this.submitValue = value
+          this.submitValue = value;
        })
        .onChange((value: string) => {
-          this.changeValue = value
+          this.changeValue = value;
+        })
+        .margin(20)
+      Button('Set caretPosition 1')
+        .onClick(() => {
+          // 设置光标位置到输入的第一个字符后
+          this.controller.caretPosition(1);
        })
-        .margin({ top: 30, left:10, right:10 })
-    }
+    }.width('100%')
  }
 }
 ```
-![search](figures/search.png)
\ No newline at end of file
--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-slider.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-slider.md
 # Slider

-滑动条组件，用来快速调节设置值，如音量、亮度等。
+滑动条组件，通常用于快速调节设置值，如音量调节、亮度调节等应用场景。

 >  **说明：**
 >
@@ -23,10 +23,10 @@ Slider(options?: {value?: number, min?: number, max?: number, step?: number, sty
 | value | number | 否 | 当前进度值。<br/>默认值：0 |
 | min | number | 否 | 设置最小值。<br/>默认值：0 |
 | max | number | 否 | 设置最大值。<br/>默认值：100 |
-| step | number | 否 | 设置Slider滑动跳动值，当设置相应的step时，Slider为间歇滑动。<br/>默认值：1 |
-| style | SliderStyle | 否 | 设置Slider的滑块样式。<br/>默认值：SliderStyle.OutSet |
+| step | number | 否 | 设置Slider滑动步长。<br/>默认值：1 |
+| style | SliderStyle | 否 | 设置Slider的滑块与滑轨显示样式。<br/>默认值：SliderStyle.OutSet |
 | direction<sup>8+</sup> | [Axis](ts-appendix-enums.md#axis) | 否 | 设置滑动条滑动方向为水平或竖直方向。<br/>默认值：Axis.Horizontal |
-| reverse<sup>8+</sup> | boolean | 否 | 设置滑动条取值范围是否反向。<br/>默认值：false |
+| reverse<sup>8+</sup> | boolean | 否 | 设置滑动条取值范围是否反向，横向Slider默认为从左往右滑动，竖向Slider默认为从上往下滑动。<br/>默认值：false |

 ## SliderStyle枚举说明

@@ -38,34 +38,34 @@ Slider(options?: {value?: number, min?: number, max?: number, step?: number, sty

 ## 属性

-不支持触摸热区设置。
+支持除触摸热区以外的通用属性设置。

 | 名称 | 参数类型 | 描述 |
 | -------- | -------- | -------- |
 | blockColor | [ResourceColor](ts-types.md#resourcecolor) | 设置滑块的颜色。 |
 | trackColor | [ResourceColor](ts-types.md#resourcecolor) | 设置滑轨的背景颜色。 |
-| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | 设置滑轨的已滑动颜色。 |
+| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | 设置滑轨的已滑动部分颜色。 |
 | showSteps | boolean | 设置当前是否显示步长刻度值。<br/>默认值：false |
-| showTips | boolean | 设置滑动时是否显示气泡提示百分比。<br/>默认值：false |
+| showTips | boolean | 设置滑动时是否显示百分比气泡提示。<br/>默认值：false |
 | trackThickness      | [Length](ts-types.md#length) | 设置滑轨的粗细。 |


 ## 事件

-通用事件仅支持：OnAppear，OnDisAppear。
+通用事件仅支持挂载卸载事件：OnAppear，OnDisAppear。

 | 名称 | 功能描述 |
 | -------- | -------- |
-| onChange(callback:&nbsp;(value:&nbsp;number,&nbsp;mode:&nbsp;SliderChangeMode)&nbsp;=&gt;&nbsp;void) | Slider滑动时触发事件回调。<br/>value：当前进度值。若返回值有小数，可使用Math.toFixed()将数据处理为想要的精度。<br/>mode：拖动状态。 |
+| onChange(callback:&nbsp;(value:&nbsp;number,&nbsp;mode:&nbsp;SliderChangeMode)&nbsp;=&gt;&nbsp;void) | Slider滑动时触发事件回调。<br/>value：当前滑动进度值。若返回值有小数，可使用Math.toFixed()方法将数据处理为预期的精度。<br/>mode：拖动状态。 |

 ## SliderChangeMode枚举说明

 | 名称 | 值 | 描述 |
 | -------- | -------- | -------- |
-| Begin | 0 | 用户开始拖动滑块。 |
-| Moving | 1 | 用户拖动滑块中。 |
-| End | 2 | 用户结束拖动滑块。 |
-| Click    | 3    | 用户点击滑动条使滑块位置移动。 |
+| Begin | 0 | 开始拖动滑块。 |
+| Moving | 1 | 正在拖动滑块过程中。 |
+| End | 2 | 结束拖动滑块。 |
+| Click    | 3    | 点击滑动条使滑块位置移动。 |


 ## 示例
@@ -75,105 +75,150 @@ Slider(options?: {value?: number, min?: number, max?: number, step?: number, sty
 @Entry
 @Component
 struct SliderExample {
-  @State outSetValue: number = 40
-  @State inSetValue: number = 40
-  @State outVerticalSetValue: number = 40
-  @State inVerticalSetValue: number = 40
+  @State outSetValueOne: number = 40;
+  @State inSetValueOne: number = 40;
+  @State outSetValueTwo: number = 40;
+  @State inSetValueTwo: number = 40;
+  @State vOutSetValueOne: number = 40;
+  @State vInSetValueOne: number = 40;
+  @State vOutSetValueTwo: number = 40;
+  @State vInSetValueTwo: number = 40;

  build() {
-    Column({ space: 5 }) {
-      Text('slider out set').fontSize(9).fontColor(0xCCCCCC).width('90%')
+    Column({ space: 8 }) {
+      Text('outset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15)
      Row() {
        Slider({
-          value: this.outSetValue,
+          value: this.outSetValueOne,
          min: 0,
          max: 100,
-          step: 1,
          style: SliderStyle.OutSet
        })
-        .blockColor(Color.Blue)
-        .trackColor(Color.Gray)
-        .selectedColor(Color.Blue)
-        .showSteps(true)
-        .showTips(true)
-        .onChange((value: number, mode: SliderChangeMode) => {
-          this.outSetValue = value
-          console.info('value:' + value + 'mode:' + mode.toString())
+          .showTips(true)
+          .onChange((value: number, mode: SliderChangeMode) => {
+            this.outSetValueOne = value;
+            console.info('value:' + value + 'mode:' + mode.toString());
+          })
+        // toFixed(0)将滑动条返回值处理为整数精度
+        Text(this.outSetValueOne.toFixed(0)).fontSize(12)
+      }
+      .width('80%')
+      Row() {
+        Slider({
+          value: this.outSetValueTwo,
+          step: 10,
+          style: SliderStyle.OutSet
        })
-        Text(this.outSetValue.toFixed(0)).fontSize(16)
+          .showSteps(true)
+          .onChange((value: number, mode: SliderChangeMode) => {
+            this.outSetValueTwo = value;
+            console.info('value:' + value + 'mode:' + mode.toString());
+          })
+        Text(this.outSetValueTwo.toFixed(0)).fontSize(12)
      }
-      .padding({ top: 50 })
      .width('80%')

-      Text('slider in set').fontSize(9).fontColor(0xCCCCCC).width('90%')
+      Text('inset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15)
      Row() {
        Slider({
-          value: this.inSetValue,
+          value: this.inSetValueOne,
          min: 0,
          max: 100,
-          step: 1,
          style: SliderStyle.InSet
        })
-        .blockColor(0xCCCCCC)
-        .trackColor(Color.Black)
-        .selectedColor(0xCCCCCC)
-        .showSteps(false)
-        .showTips(false)
-        .onChange((value: number, mode: SliderChangeMode) => {
-          this.inSetValue = value
-          console.info('value:' + value + 'mode:' + mode.toString())
-        })
-        Text(this.inSetValue.toFixed(0)).fontSize(16)
+          .blockColor('#191970')
+          .trackColor('#ADD8E6')
+          .selectedColor('#4169E1')
+          .showTips(true)
+          .onChange((value: number, mode: SliderChangeMode) => {
+            this.inSetValueOne = value;
+            console.info('value:' + value + 'mode:' + mode.toString());
+          })
+        Text(this.inSetValueOne.toFixed(0)).fontSize(12)
      }
      .width('80%')
-
      Row() {
-        Column() {
-          Text('slider out direction set').fontSize(9).fontColor(0xCCCCCC).width('50%')
-          Slider({
-            value: this.outVerticalSetValue,
-            min: 0,
-            max: 100,
-            step: 1,
-            style: SliderStyle.OutSet,
-            direction: Axis.Vertical
-          })
-          .blockColor(Color.Blue)
-          .trackColor(Color.Gray)
-          .selectedColor(Color.Blue)
+        Slider({
+          value: this.inSetValueTwo,
+          step: 10,
+          style: SliderStyle.InSet
+        })
+          .blockColor('#191970')
+          .trackColor('#ADD8E6')
+          .selectedColor('#4169E1')
          .showSteps(true)
-          .showTips(true)
          .onChange((value: number, mode: SliderChangeMode) => {
-            this.outVerticalSetValue = value
-            console.info('value:' + value + 'mode:' + mode.toString())
+            this.inSetValueTwo = value;
+            console.info('value:' + value + 'mode:' + mode.toString());
          })
-          Text(this.outVerticalSetValue.toFixed(0)).fontSize(16)
+        Text(this.inSetValueTwo.toFixed(0)).fontSize(12)
+      }
+      .width('80%')
+
+      Row() {
+        Column() {
+          Text('vertical outset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15)
+          Row() {
+            Slider({
+              value: this.vOutSetValueOne,
+              style: SliderStyle.OutSet,
+              direction: Axis.Vertical
+            })
+              .blockColor('#191970')
+              .trackColor('#ADD8E6')
+              .selectedColor('#4169E1')
+              .showTips(true)
+              .onChange((value: number, mode: SliderChangeMode) => {
+                this.vOutSetValueOne = value;
+                console.info('value:' + value + 'mode:' + mode.toString());
+              })
+            Slider({
+              value: this.vOutSetValueTwo,
+              step: 10,
+              style: SliderStyle.OutSet,
+              direction: Axis.Vertical
+            })
+              .blockColor('#191970')
+              .trackColor('#ADD8E6')
+              .selectedColor('#4169E1')
+              .showSteps(true)
+              .onChange((value: number, mode: SliderChangeMode) => {
+                this.vOutSetValueTwo = value;
+                console.info('value:' + value + 'mode:' + mode.toString());
+              })
+          }
        }.width('50%').height(300)

        Column() {
-          Text('slider in direction set').fontSize(9).fontColor(0xCCCCCC).width('50%')
-          Slider({
-            value: this.inVerticalSetValue,
-            min: 0,
-            max: 100,
-            step: 1,
-            style: SliderStyle.InSet,
-            direction: Axis.Vertical
-          })
-          .blockColor(0xCCCCCC)
-          .trackColor(Color.Black)
-          .selectedColor(0xCCCCCC)
-          .showSteps(false)
-          .showTips(false)
-          .onChange((value: number, mode: SliderChangeMode) => {
-            this.inVerticalSetValue = value
-            console.info('value:' + value + 'mode:' + mode.toString())
-          })
-          Text(this.inVerticalSetValue.toFixed(0)).fontSize(16)
+          Text('vertical inset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15)
+          Row() {
+            Slider({
+              value: this.vInSetValueOne,
+              style: SliderStyle.InSet,
+              direction: Axis.Vertical,
+              reverse: true // 竖向的Slider默认是上端是min值，下端是max值，因此想要从下往上滑动，需要设置reverse为true
+            })
+              .showTips(true)
+              .onChange((value: number, mode: SliderChangeMode) => {
+                this.vInSetValueOne = value;
+                console.info('value:' + value + 'mode:' + mode.toString());
+              })
+            Slider({
+              value: this.vInSetValueTwo,
+              step: 10,
+              style: SliderStyle.InSet,
+              direction: Axis.Vertical,
+              reverse: true
+            })
+              .showSteps(true)
+              .onChange((value: number, mode: SliderChangeMode) => {
+                this.vInSetValueTwo = value;
+                console.info('value:' + value + 'mode:' + mode.toString());
+              })
+          }
        }.width('50%').height(300)
      }
-
-    }.width('100%').margin({ top: 5 })
+    }.width('100%')
  }
 }
 ```

--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepper.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepper.md
 # Stepper

-应用步骤方式切换页面的组件。
+步骤导航器组件，适用于引导用户按照步骤完成任务的导航场景。


 >  **说明：**
@@ -8,8 +8,6 @@
 > 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。


-
-
 ## 子组件

 仅能包含子组件[StepperItem](ts-basic-components-stepperitem.md)。
@@ -24,7 +22,7 @@ Stepper(value?: { index?: number })

 | 参数名 | 参数类型 | 必填  | 参数描述 |
 | ------| -------- | --------------- | -------- |
-| index | number   | 否 | 设置步骤导航器显示第几个StepperItem。<br/>默认值：0 |
+| index | number   | 否 | 设置步骤导航器当前显示StepperItem的索引值。<br/>默认值：0 |


 ## 属性
@@ -38,9 +36,9 @@ Stepper(value?: { index?: number })
 | -------- | -------- |
 | onFinish(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 步骤导航器最后一个StepperItem的nextLabel被点击时触发该回调&nbsp;。 |
 | onSkip(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 当前显示的StepperItem状态为ItemState.Skip时，nextLabel被点击时触发该回调。 |
-| onChange(callback:&nbsp;(prevIndex?:&nbsp;number,&nbsp;index?:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 点击左边或者右边文本按钮进行步骤切换时触发该事件。<br/>-&nbsp;prevIndex：切换前的步骤页索引值。<br/>-&nbsp;index：切换后的步骤页（前一页或者下一页）索引值。 |
-| onNext(callback:&nbsp;(index?:&nbsp;number,&nbsp;pendingIndex?:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 点击切换下一步骤时触发该事件。<br/>-&nbsp;index：当前步骤页索引值。<br/>-&nbsp;pendingIndex：下一步骤页索引值。 |
-| onPrevious(callback:&nbsp;(index?:&nbsp;number,&nbsp;pendingIndex?:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 点击切换上一步骤时触发该事件。<br/>-&nbsp;index：当前步骤页索引值。<br/>-&nbsp;pendingIndex：上一步骤页索引值。 |
+| onChange(callback:&nbsp;(prevIndex?:&nbsp;number,&nbsp;index?:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 点击当前StepperItem的prevLabel或nextLabel进行步骤切换时触发该回调。<br/>-&nbsp;prevIndex：切换前的步骤页索引值。<br/>-&nbsp;index：切换后的步骤页（前一页或者下一页）索引值。 |
+| onNext(callback:&nbsp;(index?:&nbsp;number,&nbsp;pendingIndex?:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 点击StepperItem的nextLabel切换下一步骤时触发该回调。<br/>-&nbsp;index：当前步骤页索引值。<br/>-&nbsp;pendingIndex：下一步骤页索引值。 |
+| onPrevious(callback:&nbsp;(index?:&nbsp;number,&nbsp;pendingIndex?:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 点击StepperItem的prevLabel切换上一步骤时触发该回调。<br/>-&nbsp;index：当前步骤页索引值。<br/>-&nbsp;pendingIndex：上一步骤页索引值。 |


 ## 示例
@@ -50,76 +48,86 @@ Stepper(value?: { index?: number })
 @Entry
 @Component
 struct StepperExample {
-  @State currentIndex: number = 0
-  @State firstState: ItemState = ItemState.Normal
-  @State secondState: ItemState = ItemState.Normal
+  @State currentIndex: number = 0;
+  @State firstState: ItemState = ItemState.Normal;
+  @State secondState: ItemState = ItemState.Normal;
+  @State thirdState: ItemState = ItemState.Normal;

  build() {
    Stepper({
      index: this.currentIndex
    }) {
+      // 第一个步骤页
      StepperItem() {
-        Text('Page One')
-          .fontSize(35)
-          .fontColor(Color.Blue)
-          .width(200)
-          .lineHeight(50)
-          .margin({ top: 250 })
+        Column() {
+          Text('Page One')
+            .fontSize(35)
+            .fontColor(Color.Blue)
+            .lineHeight(50)
+            .margin({ top: 250, bottom: 50 })
+          Button('change status:' + this.firstState)
+            .onClick(() => {
+              this.firstState = this.firstState === ItemState.Skip ? ItemState.Normal : ItemState.Skip;
+            })
+        }.width('100%')
      }
-      .nextLabel('')
-      .position({ x: '35%', y: 0 })
-
+      .nextLabel('Next')
+      .status(this.firstState)
+      // 第二个步骤页
      StepperItem() {
-        Text('Page Two')
-          .fontSize(35)
-          .fontColor(Color.Blue)
-          .width(200)
-          .lineHeight(50)
-          .margin({ top: 250 })
-          .onClick(() => {
-            this.firstState = this.firstState === ItemState.Skip ? ItemState.Normal : ItemState.Skip
-          })
+        Column() {
+          Text('Page Two')
+            .fontSize(35)
+            .fontColor(Color.Blue)
+            .lineHeight(50)
+            .margin({ top: 250, bottom: 50 })
+          Button('change status:' + this.secondState)
+            .onClick(() => {
+              this.secondState = this.secondState === ItemState.Disabled ? ItemState.Normal : ItemState.Disabled;
+            })
+        }.width('100%')
      }
      .nextLabel('Next')
      .prevLabel('Previous')
-      .status(this.firstState)
-      .position({ x: '35%', y: 0 })
-
+      .status(this.secondState)
+      // 第三个步骤页
      StepperItem() {
-        Text('Page Three')
-          .fontSize(35)
-          .fontColor(Color.Blue)
-          .width(200)
-          .lineHeight(50)
-          .margin({ top: 250 })
-          .onClick(() => {
-            this.secondState = this.secondState === ItemState.Waiting ? ItemState.Normal : ItemState.Waiting
-          })
+        Column() {
+          Text('Page Three')
+            .fontSize(35)
+            .fontColor(Color.Blue)
+            .lineHeight(50)
+            .margin({ top: 250, bottom: 50 })
+          Button('change status:' + this.thirdState)
+            .onClick(() => {
+              this.thirdState = this.thirdState === ItemState.Waiting ? ItemState.Normal : ItemState.Waiting;
+            })
+        }.width('100%')
      }
-      .position({ x: '35%', y: 0 })
-      .status(this.secondState)
-
+      .status(this.thirdState)
+      // 第四个步骤页
      StepperItem() {
        Text('Page four')
          .fontSize(35)
          .fontColor(Color.Blue)
-          .width(200)
+          .width('100%')
+          .textAlign(TextAlign.Center)
          .lineHeight(50)
          .margin({ top: 250 })
      }
-      .position({ x: '35%', y: 0 })
      .nextLabel('Finish')
    }
    .onFinish(() => {
-      console.log('onFinish')
+      // 此处可处理点击最后一页的Finish时的逻辑，例如路由跳转等
+      console.info('onFinish');
    })
    .onSkip(() => {
-      console.log('onSkip')
+      // 此处可处理点击跳过时的逻辑，例如动态修改Stepper的index值使其跳转到某一步骤页等
+      console.info('onSkip');
    })
    .onChange((prevIndex: number, index: number) => {
-      this.currentIndex = index
+      this.currentIndex = index;
    })
-    .align(Alignment.Center)
  }
 }
 ```

--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepperitem.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepperitem.md
@@ -22,18 +22,18 @@ StepperItem()

 | 参数名 | 参数类型 | 参数描述 |
 | -------- | -------- | -------- |
-| prevLabel | string | 当步骤导航器大于一页，除第一页默认值都为“返回”。 |
-| nextLabel | string | 步骤导航器大于一页时，最后一页默认值为“开始”，其余页默认值为“下一步”。 |
-| status | ItemState | 步骤导航器元素的状态。<br/>默认值：ItemState.Normal |
+| prevLabel | string | 设置左侧文本按钮内容，第一页没有左侧文本按钮，当步骤导航器大于一页时，除第一页外默认值都为“返回”。 |
+| nextLabel | string | 设置右侧文本按钮内容，最后一页默认值为“开始”，其余页默认值为“下一步”。 |
+| status | ItemState | 步骤导航器nextLabel的显示状态。<br/>默认值：ItemState.Normal |

 ## ItemState枚举说明

-| 名称 | 描述 |
-| -------- | -------- |
-| Normal | 正常状态，右侧文本按钮正常显示，可点击进入下一个StepperItem。 |
-| Disabled | 不可用状态，右侧文本按钮灰度显示，不可点击进入下一个StepperItem。 |
-| Waiting | 等待状态，右侧文本按钮不显示，使用等待进度条，不可点击进入下一个StepperItem。 |
-| Skip | 跳过状态，表示跳过当前步骤,&nbsp;进入下一个StepperItem。 |
+|   名称    |   值    | 描述 |
+| -------- | -------- |-------- |
+| Normal |  0  |正常状态，右侧文本按钮正常显示，可点击进入下一个StepperItem。 |
+| Disabled |  1  |不可用状态，右侧文本按钮灰度显示，不可点击进入下一个StepperItem。 |
+| Waiting |  2  | 等待状态，右侧文本按钮不显示，显示等待进度条，不可点击进入下一个StepperItem。 |
+| Skip |  3  |跳过状态，右侧文本按钮显示“跳过”，此时可在Stepper的onSkip回调中自定义相关逻辑。 |


 ## 示例

--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md
 # TextInput

-可以输入单行文本并支持响应输入事件的组件。
+单行文本输入框组件。

 >  **说明：**
 >
@@ -20,38 +20,38 @@ TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: Te

 | 参数名                     | 参数类型                                     | 必填   | 参数描述            |
 | ----------------------- | ---------------------------------------- | ---- | --------------- |
-| placeholder   | [ResourceStr](ts-types.md#resourcestr)       | 否    | 无输入时的提示文本。      |
+| placeholder   | [ResourceStr](ts-types.md#resourcestr)       | 否    | 设置无输入时的提示文本。      |
 | text          | [ResourceStr](ts-types.md#resourcestr)       | 否    | 设置输入框当前的文本内容。     |
 | controller<sup>8+</sup> | [TextInputController](#textinputcontroller8) | 否    | 设置TextInput控制器。 |


 ## 属性

-除支持通用属性以及[文本样式设置](ts-universal-attributes-text-style.md)的属性外，还支持以下属性：
+除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：

 | 名称                       | 参数类型                                     | 描述                                       |
 | ------------------------ | ---------------------------------------- | ---------------------------------------- |
 | type                     | InputType                                | 设置输入框类型。<br/>默认值：InputType.Normal        |
-| placeholderColor         | [ResourceColor](ts-types.md#resourcecolor)     | 设置placeholder颜色。|
+| placeholderColor         | [ResourceColor](ts-types.md#resourcecolor)     | 设置placeholder文本颜色。|
 | placeholderFont          | [Font](ts-types.md#font) | 设置placeholder文本样式。 |
 | enterKeyType             | EnterKeyType                             | 设置输入法回车键类型。<br/>默认值：EnterKeyType.Done    |
 | caretColor               | [ResourceColor](ts-types.md#resourcecolor)    | 设置输入框光标颜色。                               |
 | maxLength                | number                                   | 设置文本的最大输入字符数。                            |
-| inputFilter<sup>8+</sup> | {<br/>value:&nbsp;[ResourceStr](ts-types.md#resourcestr),<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/>默认值：TextInputStyle.Default |
-| textAlign<sup>9+</sup>   | [TextAlign](ts-appendix-enums.md#textalign) | 设置文本水平对齐式。<br/>默认值：TextAlign.Start  |
+| inputFilter<sup>8+</sup> | {<br/>value:&nbsp;[ResourceStr](ts-types.md#resourcestr),<br/>error?:&nbsp;(value:&nbsp;string)&nbsp;=&gt;&nbsp;void<br/>} | 正则表达式，匹配表达式的输入允许显示，不匹配的输入将被过滤。目前仅支持单个字符匹配，不支持字符串匹配。<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 | 设置输入框为默认风格或内联输入风格。<br/>默认值：TextInputStyle.Default |
+| textAlign<sup>9+</sup>   | [TextAlign](ts-appendix-enums.md#textalign) | 设置输入文本在输入框中的对齐方式。<br/>默认值：TextAlign.Start  |

 ## EnterKeyType枚举说明

 | 名称                  | 描述        |
 | ------------------- | --------- |
-| Go     | 显示Go文本。   |
+| Go     | 显示为前往样式。   |
 | Search | 显示为搜索样式。  |
 | Send   | 显示为发送样式。  |
 | Next   | 显示为下一个样式。 |
-| Done   | 标准样式。     |
+| Done   | 显示为确认样式。     |

 ## InputType枚举说明

@@ -59,7 +59,7 @@ TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: Te
 | ------------------ | ------------- |
 | Normal   | 基本输入模式。<br/>支持输入数字、字母、下划线、空格、特殊字符。 |
 | Password | 密码输入模式。       |
-| Email    | e-mail地址输入模式。 |
+| Email    | 邮箱地址输入模式。 |
 | Number   | 纯数字输入模式。      |
 | PhoneNumber<sup>9+</sup> | 电话号码输入模式。<br/>支持输入数字、+ 、-、*、#，长度不限。 |

@@ -67,20 +67,22 @@ TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: Te

 | 名称                 | 描述            |
 | ------------------ | ------------- |
-| Default   | 默认风格，光标宽1.5vp，光标高度和字体大小高度相关，字体越大光标越高。       |
-| Inline | 内联输入风格。文字选中时底板与输入框同高。      |
+| Default   | 默认风格，光标宽1.5vp，光标高度与文本选中底板高度和字体大小相关。   |
+| Inline    | 内联输入风格。文本选中底板高度与输入框高度相同。      |

 ## 事件

+除支持[通用事件](ts-universal-events-click.md)外，还支持以下事件：
+
 | 名称                                       | 功能描述                                     |
 | ---------------------------------------- | ---------------------------------------- |
-| onChange(callback:&nbsp;(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 输入发生变化时，触发回调。              |
-| onSubmit(callback:&nbsp;(enterKey:&nbsp;EnterKeyType)&nbsp;=&gt;&nbsp;void) | 回车键或者软键盘回车键触发该回调，参数为当前软键盘回车键类型。          |
-| onEditChanged(callback:&nbsp;(isEditing:&nbsp;boolean)&nbsp;=&gt;&nbsp;void)<sup>(deprecated) </sup> | 输入状态变化时，触发回调。                            |
-| onEditChange(callback:&nbsp;(isEditing:&nbsp;boolean)&nbsp;=&gt;&nbsp;void) <sup>8+</sup> | 输入状态变化时，触发回调。                            |
-| onCopy<sup>8+</sup>(callback:(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 长按输入框内部区域弹出剪贴板后，点击剪切板复制按钮，触发回调。<br/>value：复制的文本内容。 |
-| onCut<sup>8+</sup>(callback:(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 长按输入框内部区域弹出剪贴板后，点击剪切板剪切按钮，触发回调。<br/>value：剪切的文本内容。 |
-| onPaste<sup>8+</sup>(callback:(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 长按输入框内部区域弹出剪贴板后，点击剪切板粘贴按钮，触发回调。<br/>value：粘贴的文本内容。 |
+| onChange(callback:&nbsp;(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 输入内容发生变化时，触发该回调。              |
+| onSubmit(callback:&nbsp;(enterKey:&nbsp;EnterKeyType)&nbsp;=&gt;&nbsp;void) | 按下输入法回车键触发该回调，返回值为当前输入法回车键的类型。          |
+| onEditChanged(callback:&nbsp;(isEditing:&nbsp;boolean)&nbsp;=&gt;&nbsp;void)<sup>(deprecated)</sup> | 输入状态变化时，触发该回调。从API 8开始，建议使用onEditChange。          |
+| onEditChange(callback:&nbsp;(isEditing:&nbsp;boolean)&nbsp;=&gt;&nbsp;void)<sup>8+</sup> | 输入状态变化时，触发该回调。isEditing为true表示正在输入。        |
+| onCopy(callback:(value:&nbsp;string)&nbsp;=&gt;&nbsp;void)<sup>8+</sup> | 长按输入框内部区域弹出剪贴板后，点击剪切板复制按钮，触发该回调。<br/>value：复制的文本内容。 |
+| onCut(callback:(value:&nbsp;string)&nbsp;=&gt;&nbsp;void)<sup>8+</sup> | 长按输入框内部区域弹出剪贴板后，点击剪切板剪切按钮，触发该回调。<br/>value：剪切的文本内容。 |
+| onPaste(callback:(value:&nbsp;string)&nbsp;=&gt;&nbsp;void)<sup>8+</sup> | 长按输入框内部区域弹出剪贴板后，点击剪切板粘贴按钮，触发该回调。<br/>value：粘贴的文本内容。 |

 ## TextInputController<sup>8+</sup>

@@ -105,60 +107,52 @@ caretPosition(value:&nbsp;number): void

 ## 示例

-
-### 单行文本输入
-
 ```ts
 // xxx.ets
 @Entry
 @Component
-struct TextInputExample1 {
-  @State text: string = ''
+struct TextInputExample {
+  @State text: string = '';
+  controller: TextInputController = new TextInputController();

  build() {
    Column() {
-      TextInput({ placeholder: 'input your word' })
-        .placeholderColor("rgb(0,0,225)")
-        .placeholderFont({ size: 30, weight: 100, family: 'cursive', style: FontStyle.Italic })
+      TextInput({ placeholder: 'input your word...', controller: this.controller })
+        .placeholderColor(Color.Grey)
+        .placeholderFont({ size: 14, weight: 400 })
        .caretColor(Color.Blue)
-        .height(50)
-        .fontSize(30)
-        .fontWeight(FontWeight.Bold)
-        .fontFamily("sans-serif")
-        .fontStyle(FontStyle.Normal)
-        .fontColor(Color.Red)
+        .width(400)
+        .height(40)
+        .margin(20)
+        .fontSize(14)
+        .fontColor(Color.Black)
        .onChange((value: string) => {
-          this.text = value
+          this.text = value;
+        })
+      Text(this.text)
+      Button('Set caretPosition 1')
+        .margin(15)
+        .onClick(() => {
+          // 将光标移动至第一个字符后
+          this.controller.caretPosition(1);
        })
-      Text(this.text).width('90%')
-    }
+      // 密码输入框
+      TextInput({ placeholder: 'input your password...' })
+        .width(400)
+        .height(40)
+        .margin(20)
+        .type(InputType.Password)
+        .maxLength(9)
+        .showPasswordIcon(true)
+      // 内联风格输入框
+      TextInput({ placeholder: 'inline style' })
+        .width(400)
+        .height(50)
+        .margin(20)
+        .borderRadius(0)
+        .style(TextInputStyle.Inline)
+    }.width('100%')
  }
 }
 ```

-
-![zh-cn_image_0000001252769643](figures/zh-cn_image_0000001252769643.gif)
-
-
-### 设置光标
-
-```ts
-// xxx.ets
-@Entry
-@Component
-struct TextInputExample2 {
-    @State text: string = ''
-    controller: TextInputController = new TextInputController()
-    build() {
-        Column() {
-            TextInput({ placeholder: 'Please input your words.', controller:this.controller})
-            Button('caretPosition')
-                .onClick(() => {
-                this.controller.caretPosition(4)
-            })
-        }
-    }
-}
-```
-
-![zh-cn_image_0000001208256092](figures/zh-cn_image_0000001208256092.png)