Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
58cd0627
D
Docs
项目概览
OpenHarmony
/
Docs
1 年多 前同步成功
通知
159
Star
292
Fork
28
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
Docs
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
未验证
提交
58cd0627
编写于
10月 11, 2022
作者:
L
luoying_ace
提交者:
Gitee
10月 11, 2022
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update zh-cn/application-dev/reference/arkui-ts/ts-basic-components-search.md.
Signed-off-by:
N
luoying_ace
<
luoying19@huawei.com
>
上级
713de50a
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
39 addition
and
32 deletion
+39
-32
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-search.md
...tion-dev/reference/arkui-ts/ts-basic-components-search.md
+39
-32
未找到文件。
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-search.md
浏览文件 @
58cd0627
# 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
(
'
S
earch
'
)
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
(
'
S
EARCH
'
)
.
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
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录