All Products
Search

This Product

    Stepper

    Document Center
    Product Details

    Stepper

    Last Updated: Feb 04, 2021

    The stepper is used to increase or decrease the current value.

    Property Description Type Default value Mandatory
    min The minimum value. Number 0 true
    max The maximum value. Number 10000 true
    value Initial value Number 10 true
    step Number of steps changed each time, which can be a decimal. Number 1 false
    onChange Callback when a change occurs. (value: Number) => void - false
    disabled Whether the function is disabled. Boolean false false
    readOnly Whether the input is readonly. Boolean false false
    showNumber Whether to display the value. The value is not displayed by default. Boolean false false

    Sample code

    1. {
    2.   "defaultTitle": "Stepper",
    3.   "usingComponents":{
    4.     "stepper": "mini-antui/es/stepper/index",
    5.     "list": "mini-antui/es/list/index",
    6.     "list-item": "mini-antui/es/list/list-item/index"
    7.   }
    8. }
    1. <list>
    2.   <list-item disabled="{{true}}">
    3.     Show number value
    4.     <view slot="extra">
    5.       <stepper onChange="callBackFn" step="{{1}}" showNumber readOnly="{{false}}" value="{{value}}" min="{{2}}" max="{{12}}" />
    6.     </view>
    7.   </list-item>
    8.   <list-item disabled="{{true}}">
    9.     Do not show number value
    10.     <view slot="extra">
    11.       <stepper onChange="callBackFn" step="{{1}}" readOnly="{{false}}" value="{{value}}" min="{{2}}" max="{{12}}" />
    12.     </view>
    13.   </list-item>
    14.   <list-item disabled="{{true}}">
    15.     Disabled
    16.     <view slot="extra">
    17.       <stepper onChange="callBackFn" showNumber value="{{11}}" min="{{2}}" max="{{12}}" disabled />
    18.     </view>
    19.   </list-item>
    20.   <list-item disabled="{{true}}">
    21.     readOnly
    22.     <view slot="extra">
    23.       <stepper onChange="callBackFn" showNumber value="{{11}}" min="{{2}}" max="{{12}}" readOnly />
    24.     </view>
    25.   </list-item>
    26.   <list-item>
    27.     <button onTap="modifyValue">Change the initial value of stepper.</button>
    28.   </list-item>
    29. </list>
    1. Page({
    2.   data: {
    3.     value: 8,
    4.   },
    5.   callBackFn(value){
    6.    console.log(value);
    7.   },
    8.   modifyValue() {
    9.     this.setData({
    10.       value: this.data.value + 1,
    11.     });
    12.   }
    13. });