IBest-UI

Appearance

CarInput 车牌输入框 ​

介绍 ​

用于输入车牌号码。

引入 ​

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

代码演示 ​

基础用法 ​

基础用法

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State value: string = ''
  build() {
    Column(){
      IBestCarInput({
        value: $value
      })
    }
  }
}

自定义键盘配置 ​

自定义键盘配置

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State value: string = ''
  build() {
    Column(){
      IBestCarInput({
        value: $value,
        keyboardConfig: {
          title: '车牌键盘',
          keyHeight: 36
        }
      })
    }
  }
}

格子间距 ​

格子间距

TIP

通过 space 属性可以设置格子间距, 以下属性仅在space不为0时生效:
• radius 设置单个格子圆角;
• isHighlightCurrent 设置是否高亮当前正在输入的格子;
• highlightColor 设置高亮颜色。

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State value: string = ''
  build() {
    Column(){
      IBestCarInput({
        value: $value,
        space: 6
      })
    }
  }
}

自定义样式 ​

自定义样式

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State value: string = ''
  build() {
    Column({space: 14}){
      IBestCarInput({
        value: $value,
        bdColor: '#3d8af2',
        textColor: '#3d8af2',
        cursorPosition: "bottom",
        cursorColor: "#3d8af2"
      })
      IBestCarInput({
        value: $value,
        space: 6,
        bgColor: "#1c1c1e",
        textColor: "#fff",
        highlightType: "shadow"
      })
    }
  }
}

API ​

@Props ​

参数说明类型默认值
value当前输入框的值, 支持双向绑定string''
autoFocus自动聚焦booleanfalse
showCursor是否显示闪烁光标booleantrue
cursorPosition光标位置, 可选值为 center bottomstringcenter
cursorColor光标颜色, 默认跟随字体色ResourceColor``
inputHeight输入框高度number | string50
space格子间距number | string0
radius格子圆角,当 space 不为0时有效number | string5
isShowBorder是否显示边框线booleantrue
bdColor边框线颜色ResourceColor#ebedf0
bgColor背景色ResourceColor#fff
textColor文字颜色ResourceColor#323233
fontSize文字大小number | string20
isHighlightCurrent是否高亮当前正在输入的格子,当 space 不为0时有效booleantrue
highlightType格子高亮类型, 可选值为 shadow borderstringborder
highlightColor格子高亮颜色,当 space 不为0时有效ResourceColor#3D8AF2
keyboardConfig自定义键盘配置项IBestCarKeyboardConfig-

IBestCarKeyboardConfig 数据结构 ​

参数说明类型
title键盘标题string
confirmBtnText确认按钮文字string
keyHeight按键高度string | number

Events ​

事件名说明回调参数
onConfirm点击完成触发-