diff --git 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 index 7c462124413e61c899dd88140eaece424090c9d0..0cca0fe858775769a3d1e49e826978f7c5849f52 100644 --- 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 @@ -1,6 +1,6 @@ # 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) | 设置搜索框内文本样式。 | -| copyOption9+ | [CopyOptions](ts-appendix-enums.md#copyoptions9) | 设置文本是否可复制。 | -| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | 设置文本对齐方式。
默认值：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) | 设置文本在搜索框中的对齐方式。
默认值：TextAlign.Start | +| copyOption9+ | [CopyOptions](ts-appendix-enums.md#copyoptions9) | 设置输入的文本是否可复制。 | ## 事件 +除支持[通用事件](ts-universal-events-click.md)外，还支持以下事件： + | 名称 | 功能描述 | | ---------------------------------------- | ---------------------------------------- | -| onSubmit(callback: (value: string) => void) | 点击搜索图标、搜索按钮或者按下软键盘搜索按钮时触发。
-value: 当前输入文本框的内容。 | -| onChange(callback: (value: string) => void) | 输入内容发生变化时，触发回调。
-value: 当前输入文本框的内容。 | -| onCopy(callback: (value: string) => void) | 组件触发系统剪切板复制操作。
-value: 复制的文本内容。 | -| onCut(callback: (value: string) => void) | 组件触发系统剪切板剪切操作。
-value: 剪切的文本内容。 | -| onPaste(callback: (value: string) => void) | 组件触发系统剪切板粘贴操作。
-value: 粘贴的文本内容。 | +| onSubmit(callback: (value: string) => void) | 点击搜索图标、搜索按钮或者按下软键盘搜索按钮时触发该回调。
-value: 当前搜索框中输入的文本内容。 | +| onChange(callback: (value: string) => void) | 输入内容发生变化时，触发该回调。
-value: 当前搜索框中输入的文本内容。 | +| onCopy(callback: (value: string) => void) | 长按搜索框弹出剪切板之后，点击剪切板的复制按钮触发该回调。
-value: 复制的文本内容。 | +| onCut(callback: (value: string) => void) | 长按搜索框弹出剪切板之后，点击剪切板的剪切按钮触发该回调。
-value: 剪切的文本内容。 | +| onPaste(callback: (value: string) => void) | 长按搜索框弹出剪切板之后，点击剪切板的粘贴按钮触发该回调。
-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