Stepper 步进器

介绍

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

引入

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

代码演示

基础用法

点我查看代码

@Entry
@Component
struct DemoPage {
  @State value: number = 1
  build() {
    IBestStepper({
      value: $value
    })
  }
}

步长设置

TIP

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

点我查看代码

@Entry
@Component
struct DemoPage {
  @State value: number = 1
  build() {
    IBestStepper({
      value: $value,
      step: 2
    })
  }
}

限制输入范围

TIP

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

点我查看代码

@Entry
@Component
struct DemoPage {
  @State value: number = 1
  build() {
    IBestStepper({
      value: $value,
      min: 5,
      max: 8
    })
  }
}

限制输入整数

TIP

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

点我查看代码

@Entry
@Component
struct DemoPage {
  @State value: number = 1
  build() {
    IBestStepper({
      value: $value,
      integer: true
    })
  }
}

禁用状态

TIP

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

点我查看代码

@Entry
@Component
struct DemoPage {
  @State value: number = 1
  build() {
    IBestStepper({
      value: $value,
      disabled: true
    })
  }
}

禁用输入框

TIP

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

点我查看代码

@Entry
@Component
struct DemoPage {
  @State value: number = 1
  build() {
    IBestStepper({
      value: $value,
      disableInput: true
    })
  }
}

固定小数位数

TIP

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

点我查看代码

@Entry
@Component
struct DemoPage {
  @State value: number = 1
  build() {
    IBestStepper({
      value: $value,
      step: 0.2,
      decimalLength: 1
    })
  }
}

自定义大小

TIP

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

点我查看代码

@Entry
@Component
struct DemoPage {
  @State value: number = 1
  build() {
    IBestStepper({
      value: $value,
      inputWidth: 40,
      buttonSize: 32
    })
  }
}

API

@Props

参数	说明	类型	默认值
value	绑定值, 支持双向绑定	number	-
min	最小值	string | number	1
max	最大值	string | number	Infinity
autoFixed	是否自动校正超出限制范围的数值	boolean	true
step	步长，每次点击时改变的值	number | string	1
inputWidth	输入框宽度	number | string	32
buttonSize	按钮大小以及输入框高度	number | string	27
decimalLength	固定显示的小数位数	number | string	0
integer	是否只允许输入整数	boolean	false
disabled	是否禁用步进器	boolean	false
disablePlus	是否禁用增加按	boolean	false
disableMinus	是否禁用减少按钮	boolean	false
disableInput	是否禁用输入框	boolean	false
showPlus	是否显示增加按钮	boolean	true
showMinus	是否显示减少按钮	boolean	true
showInput	是否显示输入框	boolean	true
longPress	是否开启长按手势，开启后可以长按增加和减少按钮	boolean	true
validateTime	多少毫秒触发自动校验修正，为 0 时不修正，单位 ms	number	1000
iconSize	输入框中图标的宽度	number | string	20
buttonRadius	按钮的圆角	number | string	2

Events

事件名	说明	参数类型
onChange	当值变化时触发的事件	val: number
onPlus	点击增加按钮时触发	-
onMinus	点击较少按钮时触发	-