Stepper

2022-07-29 06:08

Increase or decrease the current value

Note:
• No prompt for input of maximum. If it exceeds the maximum, the system automatically displays the value as the maximum.
• Input of decimal is not supported. It is possible to use + and - to change value.

Scanning Experience

Scan QR code to try:

Stepper

Sample Code

copy

    // API-DEMO page/component/stepper/stepper.json
    {
      "defaultTitle": "Stepper",
      "usingComponents":{
        "stepper": "mini-antui/es/stepper/index",
        "list": "mini-antui/es/list/index",
        "list-item": "mini-antui/es/list/list-item/index"
      }
    }

copy

    <!-- API-DEMO page/component/stepper/stepper.axml -->
    <list>
      <list-item disabled="{{true}}">
        Show number value
        <view slot="extra">
          <stepper onChange="callBackFn" step="{{1}}" showNumber readOnly="{{false}}" value="{{value}}" min="{{2}}" max="{{12}}" />
        </view>
      </list-item>
      <list-item disabled="{{true}}">
        Do not show number value
        <view slot="extra">
          <stepper onChange="callBackFn" step="{{1}}" readOnly="{{false}}" value="{{value}}" min="{{2}}" max="{{12}}" />
        </view>
      </list-item>
      <list-item disabled="{{true}}">
        Disabled
        <view slot="extra">
          <stepper onChange="callBackFn" showNumber value="{{11}}" min="{{2}}" max="{{12}}" disabled />
        </view>
      </list-item>
      <list-item disabled="{{true}}">
        readOnly
        <view slot="extra">
          <stepper onChange="callBackFn" showNumber value="{{11}}" min="{{2}}" max="{{12}}" readOnly />
        </view>
      </list-item>
      <list-item>
        <button onTap="modifyValue">Modify stepper initial value</button>
      </list-item>
    </list>

copy

    // API-DEMO page/component/stepper/stepper.js
    Page({
      data: {
        value: 8,
      },
      callBackFn(value){
       console.log(value);
      },
      modifyValue() {
        this.setData({
          value: this.data.value + 1,
        });
      }
    });

Attributes

Attribute Name	Description	Type	Default	Mandatory
min	Minimum	Number	0	Yes
max	Maximum	Number	10000	Yes
value	Initial value	Number	10	Yes
step	Change step, can be a decimal	Number	1	No
onChange	Change callback function	(value: Number) => void	-	No
disabled	Disabled	Boolean	false	No
readOnly	Input read-only	Boolean	false	No
showNumber	Show number or not, not shown by default	Boolean	false	No