antd-mini
Version:
antd-mini 是支付宝小程序 UI 组件库，遵循 Ant Design 规范。
157 lines (131 loc) • 11.8 kB
Markdown
---
nav:
path: /components
group:
title: Information Entry
order: 10
toc: 'content'
---
# Stepper
A two-stage control used to increase, decrease, or modify values.
## Introduction
In `index.json` Introducing Components in
```json
"usingComponents": {
#if ALIPAY
"ant-stepper": "antd-mini/es/Stepper/index"
#endif
#if WECHAT
"ant-stepper": "antd-mini/Stepper/index"
#endif
}
```
## Code Sample
### Basic use
```xml
<ant-stepper
className="ant-stepper"
value="{{0}}"
min="{{0}}"
max="{{10}}"
step="{{1}}"
disabled="{{false}}"
#if ALIPAY
onChange="handleChange"
#endif
#if WECHAT
bindchange="handleChange"
#endif
/>
```
```js
Page({
handleChange(value) {
console.log(value);
},
});
```
### Custom Styles
```xml
<ant-stepper
style=""
className="ant-stepper"
inputStyle=""
inputClassName="ant-stepper-input"
/>
```
### Input box read-only
```xml
<ant-stepper
className="ant-stepper"
defaultValue="{{0}}"
inputReadOnly="{{true}}"
/>
```
### Input box auto focus
```xml
<ant-stepper
className="ant-stepper"
defaultValue="{{0}}"
focus="{{true}}"
/>
```
### Event Binding
```xml
<ant-stepper
value="{{value}}"
#if ALIPAY
onChange="handleChange"
onBlur="handleBlur"
onFocus="handleFocus"
onConfirm="handleConfirm"
onDisabledTap="handleDisabledTap"
#endif
#if WECHAT
bindchange="handleChange"
bindblur="handleBlur"
bindfocus="handleFocus"
bindconfirm="handleConfirm"
binddisabledtap="handleDisabledTap"
#endif
/>
```
### Demo Code
<code src='../../demo/pages/Stepper/index'></code>
## API
| Property | Description | Type | Default Value |
| --------------------------- | ----------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
| className | Class Name | string | - |
| disabled | Disable | boolean | false |
| inputReadOnly | Whether the input box is read-only | boolean | false |
| defaultValue | Initial value | number | - |
| focus | Input box check status | boolean | false |
| inputClassName | Input box type | string | - |
| inputStyle | Input box style | string | - |
| max | Maximum | number | - |
| min | Minimum | number | - |
| precision | Calculation accuracy, keep a few decimal places [See details in](https://github.com/ant-design/ant-design/issues/5998) | number | - |
| style | Style | string | - |
| step | Step distance, that is, the value of each addition and subtraction | number | 1 |
| type | Input box evokes keyboard type, optional `number` `digit` | string | `digit` |
| value | The value of the input box is valid when the form is submitted. | number | - |
| #if ALIPAY onBlur | Trigger this callback when the input box loses focus | (value: number | null, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void |
| #if ALIPAY onChange | Trigger this callback after data changes | ( value: number | null, [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void |
| #if ALIPAY onConfirm | This callback is triggered when the keyboard is clicked | (value: number | null, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void |
| #if ALIPAY onFocus | This callback is triggered when the input box is focused | (value: number | null, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void |
| #if ALIPAY onDisabledTap | Click departure callback when disabled | (event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void |
| #if WECHAT bindblur | Trigger this callback when the input box loses focus | (value: number | null, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void |
| #if WECHAT bindchange | Trigger this callback after data changes | ( value: number | null, [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void |
| #if WECHAT bindconfirm | This callback is triggered when the keyboard is clicked | (value: number | null, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void |
| #if WECHAT bindfocus | This callback is triggered when the input box is focused | (value: number | null, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void |
| #if WECHAT binddisabledtap | Click departure callback when disabled | (event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void |
### Theme customization
#### Style Variables
Component provides the following CSS variables, which can be used to customize styles. For more information, see ConfigProvider Components.
| Variable name | Default Value | Dark Mode Default | Remarks |
| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------ |
| --stepper-handler-tap-bg | <div style="width: 150px; height: 30px; background-color: #ddd; color: #333333;">#ddd</div> | <div style="width: 150px; height: 30px; background-color: #ddd; color: #333333;">#ddd</div> | stepper processor click background color |
| --stepper-handler-border-color | <div style="width: 150px; height: 30px; background-color: #e5e5e5; color: #333333;">#e5e5e5</div> | <div style="width: 150px; height: 30px; background-color: #444444; color: #ffffff;">#444444</div> | Step Processor Border Color |
| --stepper-border-color | <div style="width: 150px; height: 30px; background-color: #e5e5e5; color: #333333;">#e5e5e5</div> | <div style="width: 150px; height: 30px; background-color: #444444; color: #ffffff;">#444444</div> | Step Border Color |
| --stepper-background-color | <div style="width: 150px; height: 30px; background-color: #ffffff; color: #333333;">#ffffff</div> | <div style="width: 150px; height: 30px; background-color: #1a1a1a; color: #ffffff;">#1a1a1a</div> | stepper background color |
| --stepper-hover-bg | <div style="width: 150px; height: 30px; background-color: rgba(0, 0, 0, 0.92); color: #ffffff;">rgba(0, 0, 0, 0.92)</div> | <div style="width: 150px; height: 30px; background-color: rgba(0, 0, 0, 0.92); color: #ffffff;">rgba(0, 0, 0, 0.92)</div> | stepper hover background color |