Stepper - Mobile Platform as a Service - Alibaba Cloud Documentation Center

A Stepper component is a two-segment UI control used to incrementally increase or decrease a numeric value. No prompt is displayed if you enter the maximum or minimum value into a stepper. However, when the stepper loses its focus and you enter a value larger than the maximum value or smaller than the minimum value, the system will automatically auto-fill a numeric value as the maximum or minimum value. When you use Stepper as a form component with a Form/FormItem component, you must set mode to form.

Property

Property	Type	Required	Default value	Description
controlled	boolean	No	false	Whether the stepper is controlled.
value	number	No	-	The value of the input box. The property takes effect when the form is submitted.
type	'number' \| 'digit'	No	-	The type of the input box. The property takes effect when the form is submitted.
min	number	No	-	The minimum value.
max	number	No	-	The maximum value.
step	number	No	1	The value you want to increment or decrement by every time.
inputWidth	string	No	-	The width of the input box.
precision	number	No	-	The precision for calculation. Several decimals are reserved.
autoFocus	boolean	No	false	Whether to enable auto-focus. This property may not take effect on iOS devices.
id	string	No	-	The ID of the form element.
name	string	No	-	The name of the form element.
disabled	boolean	No	false	Whether to disable the component.
mode	'noraml' \| 'form'	No	'normal'	You must set this property to form when you use a stepper component with a From/FormItem component.
className	string	No	-	The class name.

Event

Event name	Description	Type
onFocus	Callback fired when the focus is set on the stepper.	`( e: number ) => void`
onBlur	Callback fired when the stepper loses its focus.	`( e: number ) => void`
onChange	Callback fired when data changes.	`( e: number, dataSet: Record<string, any> ) => void`

Style class

Class name	Description
amd-stepper	The style of the entire stepper.
amd-stepper-disabled	The style of the entire stepper in disabled mode.
amd-stepper-handler	The style of the +/- icon area.
amd-stepper-handler-up	The style of the + icon area.
amd-stepper-handler-up	The style of the - icon area.
amd-stepper-handler-disabled	The style of the +/- icon area in disabled mode.
amd-stepper-handler-up-inner	The style of the +/- icon.
amd-stepper-input-wrap	The style of the input box area.
amd-stepper-input	The style of the input box.

Code sample

Basic usage

The following shows an example of the code in the index.axml file:

<view>
  <demo-block title="Basic usage">
    <stepper 
      step="{{1}}"
      value="{{0}}"
      inputWidth="60px"/>
  </demo-block>
  <demo-block title="Controlled component">
    <stepper 
      data-a="a"
      controlled
      step="{{1}}"
      value="{{value}}"
      inputWidth="60px"
      onChange="handleChange" />
  </demo-block>
  <demo-block title="Step size setting">
    <stepper 
      step="{{0.01}}"
      value="{{0}}"/>
  </demo-block>
  <demo-block title="Limit input range">
    <stepper 
      min="{{0}}"
      max="{{10}}"
      step="{{1}}"
      value="{{0}}"/>
  </demo-block>
  <demo-block title="Disabled status">
    <stepper 
      value="{{0}}"
      disabled/>
  </demo-block>
</view>

The following shows an example of the code in the index.js file:

Page({
  data: {
    value: 0,
  },
  handleChange(value, dataSet) {
    this.setData({ value });
    console.log(dataSet)
  },
  handleAddValue() {
    this.setData({ value: this.data.value + 1 });
  },
  handleMinusValue() {
    this.setData({ value: this.data.value - 1 });
  },
});

The following shows an example of the code in the index.acss file:

.actions {
  display: flex;
  justify-content: space-between;
  padding-top: 24rpx;
}
.actions .amd-button {
  width: 47%;
}

The following shows an example of the code in the index.json file:

{
  "defaultTitle": "Stepper",
  "usingComponents": {
    "stepper": "antd-mini/es/Stepper/index",
    "button": "antd-mini/es/Button/index",
    "demo-block": "../../components/DemoBlock/index"
  }
}