搜索文档 /
作用域

ion-searchbar

搜索栏表示可用于在集合中搜索的文本字段。它们可以显示在工具栏或主要内容中。

<!--t.146.13.4.1-->

应该使用搜索栏来代替搜索列表的输入。在搜索栏的文本字段中输入内容时,会显示一个清除按钮。点击清除按钮将删除文本字段,输入将保持焦点。可以启用一个取消按钮,它将清除输入并在单击时失去焦点。

<!--t.146.16.4.3-->

键盘显示器

安卓

默认情况下,点击输入将导致键盘与一个放大镜图标出现在提交按钮上。您可以选择设置 inputmode 财产 “搜索” ,它将把图标从放大镜变成回车。

<!--t.146.37.4.9-->

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

描述

设置取消按钮图标。只适用于医学博士模式。默认为“arrow-back-sharp”

属性 cancel-button-icon
类型 字符串
默认的 配置。get('backButtonIcon', 'arrow-back-sharp')作为字符串

cancelButtonText

描述

设置取消按钮文本。只适用于ios模式。

属性 cancel-button-text
类型 字符串
默认的 “取消”

clearIcon

描述

设置清除图标。默认为“小圈子”ios“close-sharp”医学博士

属性 clear-icon
类型 字符串|未定义

颜色

描述

应用程序调色板中要使用的颜色。默认的选项是:“主”“二级”“三级”“成功”“警告”“危险”“光”“媒介”,“黑暗”.有关颜色的更多信息,请参见 主题

属性 颜色
类型 字符串|未定义

防反跳

描述

设置等待触发的时间(以毫秒为单位)ionChange事件。这也会影响表单绑定,比如ngModelv模型

属性 防反跳
类型 数量
默认的 250

禁用

描述

如果真正的,则用户无法与输入进行交互。

属性 禁用
类型 布尔
默认的

enterkeyhint

描述

一个提示给浏览器的回车键显示。可能的值:“进入”“完成”“走”“下一个”“以前”“搜索”,“发送”

属性 enterkeyhint
类型 "done" | "enter" | "go" | "next" | "previous" | "search" | "send" | undefined

inputmode

描述

提示浏览器显示哪个键盘。可能的值:“没有”“文本”“电话”“url”“电子邮件”“数字”“小数”,“搜索”

属性 inputmode
类型 "decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url" |未定义

模式

描述

模式决定使用哪种平台样式。

属性 模式
类型 “ios”|“医学博士”

占位符

描述

设置输入的占位符。占位符可以接受明文或HTML作为字符串。要显示通常为HTML保留的字符,必须对它们进行转义。例如离betway东盟体育app子> <将成为& ltbetway东盟体育app; Ionic>

更多信息:安全文档

属性 占位符
类型 字符串
默认的 “搜索”

searchIcon

描述

要用作搜索图标的图标。默认为“search-outline”ios模式和“search-sharp”医学博士模式。

属性 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

描述

将焦点设置为指定的ion-searchbar.使用此方法而不是全局方法input.focus ()

签名 setFocus() = > <承诺无效>

CSS自定义属性

的名字 描述
——背景 搜索栏输入的背景
——这个特性 搜索栏输入的边界半径
——不必 搜索栏输入框的阴影
——cancel-button-color 搜索栏取消按钮的颜色
——clear-button-color 搜索栏清除按钮的颜色
——颜色 搜索栏文本的颜色
——icon-color 搜索栏图标的颜色
——placeholder-color 搜索栏占位符的颜色
——placeholder-font-style 搜索栏占位符的字体样式
——placeholder-font-weight 搜索栏占位符的字体权重
——placeholder-opacity 搜索栏占位符的不透明度
查看源代码
Baidu