IBest-UI

Appearance

Stepper 步进器 ​

介绍 ​

步进器由增加按钮、减少按钮和输入框组成，用于在一定范围内输入、调整数字。

TIP

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

引入 ​

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

代码演示 ​

基础用法 ​

基础用法

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State value: number = 1
  build() {
    Column(){
      IBestStepper({
        value: $value
      })
    }
  }
}

步长设置 ​

步长设置

TIP

通过 step 属性设置每次点击增加或减少按钮时变化的值，默认为 1。

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State value: number = 1
  build() {
    Column(){
      IBestStepper({
        value: $value,
        step: 2
      })
    }
  }
}

限制输入范围 ​

限制输入范围

TIP

通过 min 和 max 属性限制输入值的范围，默认超出范围后会自动校正最大值或最小值，通过 autoFixed 可以关闭自动校正。

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State value: number = 1
  build() {
    Column(){
      IBestStepper({
        value: $value,
        min: 5,
        max: 8
      })
    }
  }
}

限制输入整数 ​

限制输入整数

TIP

设置 integer 属性后，输入框将限制只能输入整数。

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State value: number = 1
  build() {
    Column(){
      IBestStepper({
        value: $value,
        integer: true
      })
    }
  }
}

禁用状态 ​

禁用状态

TIP

通过设置 disabled 属性来禁用步进器，禁用状态下无法点击按钮或修改输入框。

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

禁用输入框 ​

禁用输入框

TIP

通过设置 disableInput 属性来禁用输入框，此时按钮仍然可以点击。

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State value: number = 1
  build() {
    Column(){
      IBestStepper({
        value: $value,
        disableInput: true
      })
    }
  }
}

固定小数位数 ​

固定小数位数

TIP

通过设置 decimalLength 属性可以保留固定的小数位数。

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State value: number = 1
  build() {
    Column(){
      IBestStepper({
        value: $value,
        step: 0.2,
        decimalLength: 1
      })
    }
  }
}

自定义大小 ​

自定义大小

TIP

通过 inputWidth 属性设置输入框宽度，通过 buttonSize 属性设置按钮大小和输入框高度。

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State value: number = 1
  build() {
    Column(){
      IBestStepper({
        value: $value,
        inputWidth: 40,
        buttonSize: 32
      })
    }
  }
}

自定义样式 ​

自定义样式

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State value: number = 1
  build() {
    Column(){
      IBestStepper({
        value: $value,
        buttonRadius: 999,
        minusBtnBgColor: "#fff",
        minusBtnIconColor: "#1989fa",
        minusBtnBorderColor: "#1989fa",
        plusBtnBgColor: "#1989fa",
        plusBtnIconColor: "#fff",
        inputBgColor: "transparent"
      })
    }
  }
}

API ​

@Props ​

参数说明类型默认值
value绑定值, 支持双向绑定number-
min最小值string | number1
max最大值string | numberInfinity
autoFixed是否自动校正超出限制范围的数值booleantrue
step步长，每次点击时改变的值string | number1
inputWidth输入框宽度string | number32
buttonSize按钮大小以及输入框高度string | number27
decimalLength固定显示的小数位数string | number0
integer是否只允许输入整数booleanfalse
disabled是否禁用步进器booleanfalse
disablePlus是否禁用增加按booleanfalse
disableMinus是否禁用减少按钮booleanfalse
disableInput是否禁用输入框booleanfalse
showPlus是否显示增加按钮booleantrue
showMinus是否显示减少按钮booleantrue
showInput是否显示输入框booleantrue
longPress是否开启长按手势，开启后可以长按增加和减少按钮booleantrue
validateTime多少毫秒触发自动校验修正，为 0 时不修正，单位 msnumber1000
iconSize输入框中图标的宽度string | number20
buttonRadius按钮的圆角string | number2
minusBtnBgColor 2.1.9减少按钮背景色ResourceColor#f2f3f5
plusBtnBgColor 2.1.9增加按钮背景色ResourceColor#f2f3f5
minusBtnBorderColor 2.1.9减少按钮边框色ResourceColor''
plusBtnBorderColor 2.1.9增加按钮边框色ResourceColor''
minusBtnIconColor 2.1.9减少按钮图标颜色ResourceColor#323233
plusBtnIconColor 2.1.9增加按钮图标颜色ResourceColor#323233

Events ​

事件名说明事件类型
onChange当值变化时触发的事件(val: number) => void
onPlus点击增加按钮时触发() => void
onMinus点击较少按钮时触发() => void

主题定制 ​

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

名称描述默认值
ibest_stepper_background背景颜色#f2f3f5
ibest_stepper_disabled_background禁用时背景颜色#f7f8fa
ibest_stepper_disabled_text_color禁用时文字颜色#c8c9cc