IBest-UI-V2

Appearance

Search 搜索 ​

介绍 ​

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

TIP

阅读该组件文档前请确保已认真阅读快速上手章节的每一个字。

引入 ​

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

代码演示 ​

基础用法 ​

基础用法

TIP

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

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

圆角 ​

圆角

点我查看代码
ts
@Entry
@ComponentV2
struct DemoPage {
  @Local value: string = ""
  build() {
    Column(){
      IBestSearch({
        value: this.value!!,
        placeholder: "请输入关键词",
        radius: 12
      })
    }
  }
}

禁用 ​

禁用

点我查看代码
ts
@Entry
@ComponentV2
struct DemoPage {
  @Local value: string = ""
  build() {
    Column(){
      IBestSearch({
        value: this.value!!,
        placeholder: "请输入关键词",
        disabled: true
      })
    }
  }
}

自定义样式 ​

自定义样式

点我查看代码
ts
@Entry
@ComponentV2
struct DemoPage {
  @Local value: string = ""
  build() {
    Column(){
      IBestSearch({
        value: this.value!!,
        placeholder: "请输入关键词",
        isRound: true,
        outBgColor: "#4fc08d",
        innerBgColor: "#F29C73"
      })
    }
  }
}

事件监听 ​

事件监听

点我查看代码
ts
import { IBestToast } from "@ibestservices/ibest-ui-v2";
@Entry
@ComponentV2
struct DemoPage {
  @Local value: string = ""
  build() {
    Column(){
      IBestSearch({
        value: this.value!!,
        placeholder: "请输入关键词",
        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
@ComponentV2
struct DemoPage {
  @Local value: string = ""
  @Builder customBtn(){
    Text("自定义按钮")
      .height("100%")
      .padding({ left: 10, right: 10 })
      .backgroundColor("#eee")
  }
  build() {
    Column({ space: 20 }){
      IBestSearch({
        value: this.value!!,
        placeholder: "请输入关键词",
        label: "地址",
        showRightButton: true,
        rightButtonText: "搜索"
      })
      IBestSearch({
        value: this.value!!,
        label: "地址",
        customRightButton: (): void => this.customBtn()
      })
    }
  }
}

API ​

@Props ​

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

Events ​

事件名说明事件类型
onInput输入时触发(value: string) => void
onSearch点击输入法右下角按钮触发() => void
onInputBlur搜索框失焦时触发() => void
onInputFocus搜索框聚焦时触发() => void
onClear点击清除图标时触发() => void
onRightButtonClick点击右侧按钮时触发() => void

主题定制 ​

组件提供了下列颜色变量，可用于自定义深色/浅色模式样式，使用方法请参考 颜色模式 章节，如需要其它颜色变量可提 issue。

名称描述默认值
ibest_search_outer_background外部背景色#fff
ibest_search_inner_background内部背景色#f7f8fa
ibest_search_label_color输入框左侧文本文字颜色#323233
ibest_search_left_icon_color输入框左侧图标颜色#969799