How to set up a Stepper-Mobile Platform as a Service(mPaaS)-阿里云帮助中心

A control for increasing or decreasing a numerical value. If you enter a value outside the allowed range, no prompt is displayed. When the component loses focus, an out-of-bounds value is automatically reset to the maximum or minimum. To use this component in a form with the Form and FormItem components, set the `mode` property to `form`.

Properties

Property	Type	Required	Default	Description
controlled	boolean	No	false	Whether the component is controlled.
value	number	No	-	The input box value, used on form submission.
type	'number' \| 'digit'	No	-	The input box type, used on form submission.
min	number	No	-	The minimum value.
max	number	No	-	The maximum value.
step	number	No	1	The step size.
inputWidth	string	No	-	The width of the input box.
precision	number	No	-	The number of decimal places to retain.
autoFocus	boolean	No	false	Automatically focuses the input box on render. May not work as expected on iOS.
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	'normal' \| 'form'	No	'normal'	Set to 'form' when used with the Form and FormItem components.
className	string	No	-	The custom class name.

Events

Event name	Description	Type
onFocus	Triggered when the component gains focus.	`( e: number ) => void`
onBlur	Triggered when the component loses focus.	`( e: number ) => void`
onChange	Triggered after the data changes.	`( e: number, dataSet: Record<string, any> ) => void`

Style classes

Class Name	Description
amd-stepper	Overall component style.
amd-stepper-disabled	Overall component style in the disabled state.
amd-stepper-handler	Style for the increment (+) and decrement (-) button area.
amd-stepper-handler-up	Style for the increment (+) button area.
amd-stepper-handler-up	- Area styles
amd-stepper-handler-disabled	Style for the increment and decrement button area in the disabled state.
amd-stepper-handler-up-inner	Style for the increment and decrement icons.
amd-stepper-input-wrap	Style for the input box wrapper.
amd-stepper-input	Style for the input box.

Code examples

Basic usage

The following is a code example for index.axml:

<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="Set Step Size">
    <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 State">
    <stepper 
      value="{{0}}"
      disabled/>
  </demo-block>
</view>

The following is a code example for index.js:

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 is a code example for index.acss:

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

The following is a code example for index.json:

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