ion-searchbar
搜索栏表示可用于在集合中搜索的文本字段。它们可以显示在工具栏或主要内容中。
<!--t.146.13.4.1-->应该使用搜索栏来代替搜索列表的输入。在搜索栏的文本字段中输入内容时,会显示一个清除按钮。点击清除按钮将删除文本字段,输入将保持焦点。可以启用一个取消按钮,它将清除输入并在单击时失去焦点。
<!--t.146.16.4.3-->键盘显示器
安卓
默认情况下,点击输入将导致键盘与一个放大镜图标出现在提交按钮上。您可以选择设置
inputmode
财产
“搜索”
,它将把图标从放大镜变成回车。
iOS
默认情况下,点击输入将导致键盘出现在灰色提交按钮上的文本“return”。您可以选择设置
inputmode
财产
“搜索”
,将文本从“return”改为“go”,并将按钮颜色从灰色改为蓝色。或者,您可以包装
ion-searchbar
在一个
形式
元素
行动
财产。这将导致键盘出现一个蓝色的提交按钮,上面写着“搜索”。
使用
<!——默认搜索栏——>
<
ion-searchbar
>
ion-searchbar
>
<!搜索栏总是显示取消按钮->
<
ion-searchbar
showCancelButton
=
"
总是
"
>
ion-searchbar
>
<!搜索栏取消按钮从未显示->
<
ion-searchbar
showCancelButton
=
"
从来没有
"
>
ion-searchbar
>
<!搜索栏与取消按钮显示在焦点->
<
ion-searchbar
showCancelButton
=
"
焦点
"
>
ion-searchbar
>
<!——搜索栏带有危险颜色——>
<
ion-searchbar
颜色
=
"
危险
"
>
ion-searchbar
>
<!——搜索栏值——>
<
ion-searchbar
价值
=
"
betway东盟体育app
"
>
ion-searchbar
>
<!——电话类型的搜索栏——>
<
ion-searchbar
类型
=
"
电话
"
>
ion-searchbar
>
<!——搜索栏与数字输入模式——>
<
ion-searchbar
inputmode
=
"
数字
"
>
ion-searchbar
>
<!——搜索栏禁用
<
ion-searchbar
禁用
=
"
真正的
"
>
ion-searchbar
>
<!——搜索栏与取消按钮和自定义取消按钮文本->
<
ion-searchbar
showCancelButton
=
"
焦点
"
cancelButtonText
=
"
自定义取消
"
>
ion-searchbar
>
<!——搜索栏自定义debounce——>
<
ion-searchbar
防反跳
=
"
500
"
>
ion-searchbar
>
<!——动画搜索栏——>
<
ion-searchbar
动画
>
ion-searchbar
>
<!——带有占位符的搜索栏——>
<
ion-searchbar
占位符
=
"
过滤器时间表
"
>
ion-searchbar
>
<!——工具栏中的搜索栏——>
<
ion-toolbar
>
<
ion-searchbar
>
ion-searchbar
>
ion-toolbar
>
<!——默认搜索栏——>
<
ion-searchbar
>
ion-searchbar
>
<!搜索栏总是显示取消按钮->
<
ion-searchbar
show-cancel-button
=
"
总是
"
>
ion-searchbar
>
<!搜索栏取消按钮从未显示->
<
ion-searchbar
show-cancel-button
=
"
从来没有
"
>
ion-searchbar
>
<!搜索栏与取消按钮显示在焦点->
<
ion-searchbar
show-cancel-button
=
"
焦点
"
>
ion-searchbar
>
<!——搜索栏带有危险颜色——>
<
ion-searchbar
颜色
=
"
危险
"
>
ion-searchbar
>
<!——搜索栏值——>
<
ion-searchbar
价值
=
"
betway东盟体育app
"
>
ion-searchbar
>
<!——电话类型的搜索栏——>
<
ion-searchbar
类型
=
"
电话
"
>
ion-searchbar
>
<!——搜索栏与数字输入模式——>
<
ion-searchbar
inputmode
=
"
数字
"
>
ion-searchbar
>
<!——搜索栏禁用
<
ion-searchbar
禁用
=
"
真正的
"
>
ion-searchbar
>
<!——搜索栏与取消按钮和自定义取消按钮文本->
<
ion-searchbar
show-cancel-button
=
"
焦点
"
cancel-button-text
=
"
自定义取消
"
>
ion-searchbar
>
<!——搜索栏自定义debounce——>
<
ion-searchbar
防反跳
=
"
500
"
>
ion-searchbar
>
<!——动画搜索栏——>
<
ion-searchbar
动画
>
ion-searchbar
>
<!——带有占位符的搜索栏——>
<
ion-searchbar
占位符
=
"
过滤器时间表
"
>
ion-searchbar
>
<!——工具栏中的搜索栏——>
<
ion-toolbar
>
<
ion-searchbar
>
ion-searchbar
>
ion-toolbar
>
进口
反应
,
{
useState
}
从
“反应”
;
进口
{
IonContent
,
IonHeader
,
IonPage
,
IonTitle
,
IonToolbar
,
IonSearchbar
,
IonFooter
}
从
“@betway东盟体育appionic /反应”
;
出口
常量
SearchBarExamples
:
反应
.
足球俱乐部
=
(
)
=>
{
常量
[
searchText
,
setSearchText
]
=
useState
(
''
)
;
返回
(
<
IonPage
>
<
IonHeader
>
<
IonToolbar
>
<
IonTitle
>
IonSearchBar例子
IonTitle
>
IonToolbar
>
IonHeader
>
<
IonContent
>
<
p
>
默认Searchbar
p
>
<
IonSearchbar
价值
=
{
searchText
}
onIonChange
=
{
e
=>
setSearchText
(
e
.
细节
.
价值
!
)
}
>
IonSearchbar
>
<
p
>
搜索栏与取消按钮总是显示
p
>
<
IonSearchbar
价值
=
{
searchText
}
onIonChange
=
{
e
=>
setSearchText
(
e
.
细节
.
价值
!
)
}
showCancelButton
=
"
总是
"
>
IonSearchbar
>
<
p
>
搜索栏取消按钮从未显示
p
>
<
IonSearchbar
价值
=
{
searchText
}
onIonChange
=
{
e
=>
setSearchText
(
e
.
细节
.
价值
!
)
}
showCancelButton
=
"
从来没有
"
>
IonSearchbar
>
<
p
>
搜索栏与取消按钮显示在焦点
p
>
<
IonSearchbar
价值
=
{
searchText
}
onIonChange
=
{
e
=>
setSearchText
(
e
.
细节
.
价值
!
)
}
showCancelButton
=
"
焦点
"
>
IonSearchbar
>
<
p
>
搜索栏与危险的颜色
p
>
<
IonSearchbar
价值
=
{
searchText
}
onIonChange
=
{
e
=>
setSearchText
(
e
.
细节
.
价值
!
)
}
颜色
=
"
危险
"
>
IonSearchbar
>
<
p
>
搜索栏与电话类型
p
>
<
IonSearchbar
价值
=
{
searchText
}
onIonChange
=
{
e
=>
setSearchText
(
e
.
细节
.
价值
!
)
}
类型
=
"
电话
"
>
IonSearchbar
>
<
p
>
搜索栏与数字输入模式
p
>
<
IonSearchbar
价值
=
{
searchText
}
onIonChange
=
{
e
=>
setSearchText
(
e
.
细节
.
价值
!
)
}
inputmode
=
"
数字
"
>
IonSearchbar
>
<
p
>
Searchbar禁用
p
>
<
IonSearchbar
价值
=
{
searchText
}
onIonChange
=
{
e
=>
setSearchText
(
e
.
细节
.
价值
!
)
}
禁用
=
{
真正的
}
>
IonSearchbar
>
<
p
>
带有取消按钮和自定义取消按钮文本的搜索栏
p
>
<
IonSearchbar
价值
=
{
searchText
}
onIonChange
=
{
e
=>
setSearchText
(
e
.
细节
.
价值
!
)
}
showCancelButton
=
"
焦点
"
cancelButtonText
=
"
自定义取消
"
>
IonSearchbar
>
<
p
>
搜索栏与自定义debounce -注意:debounce只工作在onIonChange事件
p
>
<
IonSearchbar
价值
=
{
searchText
}
onIonChange
=
{
e
=>
setSearchText
(
e
.
细节
.
价值
!
)
}
防反跳
=
{
1000
}
>
IonSearchbar
>
<
p
>
动画Searchbar
p
>
<
IonSearchbar
价值
=
{
searchText
}
onIonChange
=
{
e
=>
setSearchText
(
e
.
细节
.
价值
!
)
}
动画
>
IonSearchbar
>
<
p
>
带有占位符的搜索栏
p
>
<
IonSearchbar
价值
=
{
searchText
}
onIonChange
=
{
e
=>
setSearchText
(
e
.
细节
.
价值
!
)
}
占位符
=
"
过滤器时间表
"
>
IonSearchbar
>
<
p
>
工具栏中的搜索栏
p
>
<
IonToolbar
>
<
IonSearchbar
价值
=
{
searchText
}
onIonChange
=
{
e
=>
setSearchText
(
e
.
细节
.
价值
!
)
}
>
IonSearchbar
>
IonToolbar
>
IonContent
>
<
IonFooter
>
<
IonToolbar
>
搜索文本:
{
searchText
??
“(一)”
}
IonToolbar
>
IonFooter
>
IonPage
>
)
;
}
;
进口
{
组件
,
h
}
从
“@stencil /核心”
;
@
组件
(
{
标签
:
“searchbar-example”
,
styleUrl
:
“searchbar-example.css”
}
)
出口
类
SearchbarExample
{
渲染
(
)
{
返回
[
/ /默认Searchbar
<
ion-searchbar
>
ion-searchbar
>
,
//搜索栏总是显示取消按钮
<
ion-searchbar
showCancelButton
=
"
总是
"
>
ion-searchbar
>
,
//搜索栏的取消按钮从未显示
<
ion-searchbar
showCancelButton
=
"
从来没有
"
>
ion-searchbar
>
,
//搜索栏与取消按钮显示在焦点
<
ion-searchbar
showCancelButton
=
"
焦点
"
>
ion-searchbar
>
,
//搜索栏有危险的颜色
<
ion-searchbar
颜色
=
"
危险
"
>
ion-searchbar
>
,
//搜索栏的值
<
ion-searchbar
价值
=
"
betway东盟体育app
"
>
ion-searchbar
>
,
//搜索栏与电话类型
<
ion-searchbar
类型
=
"
电话
"
>
ion-searchbar
>
,
//搜索栏与数字输入模式
<
ion-searchbar
inputmode
=
"
数字
"
>
ion-searchbar
>
,
/ / Searchbar禁用
<
ion-searchbar
禁用
=
{
真正的
}
>
ion-searchbar
>
,
//搜索栏与取消按钮和自定义取消按钮文本
<
ion-searchbar
showCancelButton
=
"
焦点
"
cancelButtonText
=
"
自定义取消
"
>
ion-searchbar
>
,
//搜索栏与自定义debounce
<
ion-searchbar
防反跳
=
{
500
}
>
ion-searchbar
>
,
/ /动画Searchbar
<
ion-searchbar
动画
=
{
真正的
}
>
ion-searchbar
>
,
//带有占位符的搜索栏
<
ion-searchbar
占位符
=
"
过滤器时间表
"
>
ion-searchbar
>
,
//工具栏中的搜索栏
<
ion-toolbar
>
<
ion-searchbar
>
ion-searchbar
>
ion-toolbar
>
]
;
}
}
<
模板
>
<!——默认搜索栏——>
<
ion-searchbar
>
ion-searchbar
>
<!搜索栏总是显示取消按钮->
<
ion-searchbar
show-cancel-button
=
"
总是
"
>
ion-searchbar
>
<!搜索栏取消按钮从未显示->
<
ion-searchbar
show-cancel-button
=
"
从来没有
"
>
ion-searchbar
>
<!搜索栏与取消按钮显示在焦点->
<
ion-searchbar
show-cancel-button
=
"
焦点
"
>
ion-searchbar
>
<!——搜索栏带有危险颜色——>
<
ion-searchbar
颜色
=
"
危险
"
>
ion-searchbar
>
<!——搜索栏值——>
<
ion-searchbar
价值
=
"
betway东盟体育app
"
>
ion-searchbar
>
<!——电话类型的搜索栏——>
<
ion-searchbar
类型
=
"
电话
"
>
ion-searchbar
>
<!——搜索栏与数字输入模式——>
<
ion-searchbar
inputmode
=
"
数字
"
>
ion-searchbar
>
<!——搜索栏禁用
<
ion-searchbar
禁用
=
"
真正的
"
>
ion-searchbar
>
<!——搜索栏与取消按钮和自定义取消按钮文本->
<
ion-searchbar
show-cancel-button
=
"
焦点
"
cancel-button-text
=
"
自定义取消
"
>
ion-searchbar
>
<!——搜索栏自定义debounce——>
<
ion-searchbar
防反跳
=
"
500
"
>
ion-searchbar
>
<!——动画搜索栏——>
<
ion-searchbar
动画
>
ion-searchbar
>
<!——带有占位符的搜索栏——>
<
ion-searchbar
占位符
=
"
过滤器时间表
"
>
ion-searchbar
>
<!——工具栏中的搜索栏——>
<
ion-toolbar
>
<
ion-searchbar
>
ion-searchbar
>
ion-toolbar
>
模板
>
<
脚本
>
进口
{
IonSearchbar
,
IonToolbar
}
从
“@betway东盟体育appionic / vue”
;
进口
{
defineComponent
}
从
“vue”
;
出口
默认的
defineComponent
(
{
组件
:
{
IonSearchbar
,
IonToolbar
}
}
)
;
脚本
>
属性
动画 |
|
---|---|
描述 |
如果 |
属性 |
动画 |
类型 |
布尔 |
默认的 |
假 |
自动完成 |
|
描述 |
设置输入的自动完成属性。 |
属性 |
自动完成 |
类型 |
“on”|“关闭”|“name”|“honorific-prefix”|“名字”|“additional-name”|“姓”|“honorific-suffix”|“昵称”|“电子邮件”|“用户名”|“新密码”|“当前口令”|“one-time-code”|“organization-title”|“组织”|“街道地址”|“address-line1”|“address-line2”|“address-line3”| |“address-level4”“|”|“address-level3 address-level2 address-level1”|“国家”|“国家的名称”|“邮政编码”|“cc-name”|“cc-given-name”|“cc-additional-name”|“cc-family-name”|“cc值”|“cc-exp”|“cc-exp-month”|“cc-exp-year”|“cc-csc”|“cc-type”|“结算货币”|“交易量”|“语言”|“bday”|“bday-day”|“bday-month”| "bday-year" | "sex" | "tel" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "url" | "photo" |
默认的 |
“关闭” |
自动更正 |
|
描述 |
设置输入的自动更正属性。 |
属性 |
自动更正 |
类型 |
“关闭”|“on” |
默认的 |
“关闭” |
cancelButtonIcon |
|
描述 |
设置取消按钮图标。只适用于 |
属性 |
cancel-button-icon |
类型 |
字符串 |
默认的 |
配置。get('backButtonIcon', 'arrow-back-sharp')作为字符串 |
cancelButtonText |
|
描述 |
设置取消按钮文本。只适用于 |
属性 |
cancel-button-text |
类型 |
字符串 |
默认的 |
“取消” |
clearIcon |
|
描述 |
设置清除图标。默认为 |
属性 |
clear-icon |
类型 |
字符串|未定义 |
颜色 |
|
描述 |
应用程序调色板中要使用的颜色。默认的选项是: |
属性 |
颜色 |
类型 |
字符串|未定义 |
防反跳 |
|
描述 |
设置等待触发的时间(以毫秒为单位) |
属性 |
防反跳 |
类型 |
数量 |
默认的 |
250 |
禁用 |
|
描述 |
如果 |
属性 |
禁用 |
类型 |
布尔 |
默认的 |
假 |
enterkeyhint |
|
描述 |
一个提示给浏览器的回车键显示。可能的值: |
属性 |
enterkeyhint |
类型 |
"done" | "enter" | "go" | "next" | "previous" | "search" | "send" | undefined |
inputmode |
|
描述 |
提示浏览器显示哪个键盘。可能的值: |
属性 |
inputmode |
类型 |
"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url" |未定义 |
模式 |
|
描述 |
模式决定使用哪种平台样式。 |
属性 |
模式 |
类型 |
“ios”|“医学博士” |
占位符 |
|
描述 |
设置输入的占位符。 更多信息:安全文档 |
属性 |
占位符 |
类型 |
字符串 |
默认的 |
“搜索” |
searchIcon |
|
描述 |
要用作搜索图标的图标。默认为 |
属性 |
search图标 |
类型 |
字符串|未定义 |
showCancelButton |
|
描述 |
设置取消按钮的行为。默认为 |
属性 |
show-cancel-button |
类型 |
"always" "focus" " | " "never" |
默认的 |
“永远” |
showClearButton |
|
描述 |
设置清除按钮的行为。默认为 |
属性 |
show-clear-button |
类型 |
"always" "focus" " | " "never" |
默认的 |
“焦点” |
解释清楚 |
|
描述 |
如果 |
属性 |
解释清楚 |
类型 |
布尔 |
默认的 |
假 |
类型 |
|
描述 |
设置输入的类型。 |
属性 |
类型 |
类型 |
"email" | "number" | "password" | "search" | "tel" | "text" | "url" |
默认的 |
“搜索” |
价值 |
|
描述 |
搜索栏的值。 |
属性 |
价值 |
类型 |
Null | string | undefined |
默认的 |
'' |
事件
的名字 | 描述 |
---|---|
ionBlur |
当输入失去焦点时触发。 |
ionCancel |
单击取消按钮时触发。 |
ionChange |
当值更改时发出。 |
ionClear |
单击清除输入按钮时触发。 |
ionFocus |
当输入有焦点时触发。 |
ionInput |
当键盘输入发生时触发。 |
方法
getInputElement |
|
---|---|
描述 |
返回本地 |
签名 |
getInputElement () = > < HTMLInputElement承诺> |
setFocus |
|
描述 |
将焦点设置为指定的 |
签名 |
setFocus() = > <承诺无效> |
CSS自定义属性
的名字 | 描述 |
---|---|
——背景 |
搜索栏输入的背景 |
——这个特性 |
搜索栏输入的边界半径 |
——不必 |
搜索栏输入框的阴影 |
——cancel-button-color |
搜索栏取消按钮的颜色 |
——clear-button-color |
搜索栏清除按钮的颜色 |
——颜色 |
搜索栏文本的颜色 |
——icon-color |
搜索栏图标的颜色 |
——placeholder-color |
搜索栏占位符的颜色 |
——placeholder-font-style |
搜索栏占位符的字体样式 |
——placeholder-font-weight |
搜索栏占位符的字体权重 |
——placeholder-opacity |
搜索栏占位符的不透明度 |