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 |
搜索栏占位符的不透明度 |