iBest-UI@HarmonyOS

Appearance

Search 搜索 ​

介绍 ​

用于搜索场景的输入框组件。

引入 ​

ts
import { IBestSearch } from "@ibestservices/ibest-ui";

代码演示 ​

基础用法 ​

基础用法

TIP

通过 autoFocus 属性，可以设置搜索框自动获取焦点。

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State value: string = ""
  build() {
    Column(){
      IBestSearch({
        value: $value,
        placeholder: "请输入关键词",
        autoFocus: true
      })
    }
  }
}

圆角 ​

圆角

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State value: string = ""
  build() {
    Column(){
      IBestSearch({
        value: $value,
        radius: 12
      })
    }
  }
}

禁用 ​

禁用

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State value: string = ""
  build() {
    Column(){
      IBestSearch({
        value: $value,
        disabled: true
      })
    }
  }
}

自定义样式 ​

自定义样式

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State value: string = ""
  build() {
    Column(){
      IBestSearch({
        value: $value,
        isRound: true,
        outBgColor: "#4fc08d",
        innerBgColor: "#F29C73"
      })
    }
  }
}

事件监听 ​

事件监听

点我查看代码
ts
import { IBestToast } from "@ibestservices/ibest-ui";
@Entry
@Component
struct DemoPage {
  @State value: string = ""
  build() {
    Column(){
      IBestSearch({
        value: $value,
        showRightButton: true,
        clearable: true,
        onRightButtonClick: () => {
          IBestToast.show("rightIconClick")
        },
        onClear: () => {
          IBestToast.show("clear")
        },
        onSearch: () => {
          IBestToast.show(`search: ${this.value}`)
        },
        onInput: (value: string) => {
          console.log(`输入的值为: ${value}`)
        }
      })
    }
  }
}

自定义按钮 ​

自定义按钮

TIP

通过 label 属性可设置左侧文本, 通过 rightButtonText 属性可设置右侧按钮文本, 通过 customRightButton 属性可自定义右侧按钮。

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State value: string = ""
  @Builder customBtn(){
    Text("自定义按钮")
      .height("100%")
      .padding({ left: 10, right: 10 })
      .backgroundColor("#eee")
  }
  build() {
    Column({ space: 20 }){
      IBestSearch({
        value: $value,
        label: "地址",
        showRightButton: true,
        rightButtonText: "搜索"
      })
      IBestSearch({
        value: $value,
        label: "地址",
        customRightButton: (): void => this.customBtn()
      })
    }
  }
}

API ​

@Props ​

参数说明类型默认值
value当前输入的值, 支持双向绑定string''
label输入框左侧文本string''
placeholder占位文字string请输入搜索关键词
placeholderColor占位文字颜色string#c8c9cc
contentHeight搜索框高度,单位lpxnumber108
outBgColor外侧背景色string#fff
innerBgColor内侧背景色string#f7f8fa
isRound是否为胶囊搜索框booleanfalse
radius圆角大小, 优先级大于isRound, 单位lpxnumber0
leftIcon左侧图标string | Resource-
leftIconColor左侧图标颜色string#969799
clearable是否可清空booleantrue
clearIcon清除图标string | Resource-
clearTrigger清除图标显示时机, 可选值 always focusstringfocus
autoFocus是否自定聚焦booleanfalse
showRightButton是否显示右侧按钮booleanfalse
rightButtonText右侧按钮文本string取消
disabled是否禁用booleanfalse
readOnly是否只读booleanfalse
enterKeyType输入法回车键类型, 详见EnterKeyType枚举说明EnterKeyTypeSearch
customRightButton 1.14.0自定义右侧按钮CustomBuilder-

Events ​

事件名说明回调参数
onInput输入时触发value: string
onSearch点击输入法右下角按钮触发-
onInputBlur搜索框失焦时触发-
onInputFocus搜索框聚焦时触发-
onClear点击清除图标时触发-
onRightButtonClick点击右侧按钮时触发-