Searchbar

优质
小牛编辑
134浏览
2023-12-01

管理一个搜索栏,可以搜索或筛选项目的显示。

使用方法

  1. <ion-searchbar
  2. [(ngModel)]="myInput"
  3. [hideCancelButton]="shouldHideCancel"
  4. (input)="onInput($event)"
  5. (cancel)="onCancel($event)">
  6. </ion-searchbar>

输入属性

属性名称类型描述
cancelButtonTextstring设置取消按钮的文本值
hideCancelButtonboolean是否隐藏取消按钮
debouncenumber每次键入字符等待触发事件的时间有多长,默认为250毫秒
placeholderstring占位提示符
ngModelany搜索栏值的双向绑定

输出事件

  • input

    当Searchbar中值变化的时候触发

  • blur

    当Searchbar失去焦点的时候触发

  • focus

    当Searchbar得到焦点的时候触发

  • cancel

    当取消按钮被点击的时候触发

  • clear

    当清空按钮被点击的时候触发