All Products
Search
Document Center

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. });