Stepper 步进器
数字步进控件——[−][ N ][+] 三段拼接，到达 min/max 自动禁用对应按钮。
实时预览
下方渲染的就是 src/components/ui/Stepper/Stepper.tsx 本体，通过 react-native-web 翻译成浏览器节点。
独立
12
min=1, max=99
下单清单
合计 62 箱 · ¥3,840统一冰红茶
¥120 / 箱 · 库存 50
12
阿萨姆奶茶
¥96 / 箱 · 库存 80
0
老坛酸菜面
¥48 / 箱 · 库存 30
30
视觉规范
| 元素 | 规则 |
|---|---|
| 高度 | 32px（默认）/ 28px（sm） |
| 圆角 | 8px（外层），中间数字框无独立圆角 |
| 按钮 | 32×32 描边，± 18px |
| 数字框 | min-width 48，1px 上下边线，无左右边线 |
| 描边 | 1px #EDEDED |
| 禁用 | 按钮 opacity: 0.4（达到 min/max 时） |
用法
import { Stepper } from '@unif/react-native-design';
const [qty, setQty] = useState(12);
<Stepper value={qty} onChange={setQty} min={1} max={99} />
{/* 自定义步长 */}
<Stepper value={packs} onChange={setPacks} step={6} min={0} max={120} />
{/* 小尺寸 */}
<Stepper size="sm" value={n} onChange={setN} min={0} max={9} />
API
| Prop | Type | 默认 | 说明 |
|---|---|---|---|
value | number | — | 当前值 |
onChange | (n) => void | — | 变更回调 |
min | number? | 0 | 下限（达到时 − 禁用） |
max | number? | 99 | 上限（达到时 + 禁用） |
step | number? | 1 | 步长 |
size | 'sm' | 'md' | 'md' | 高度 28 / 32 |
不要
- ❌ 不要在 Stepper 中间放可输入的 TextInput——下单场景请用专门的 InputNumber 控件（待规划）
- ❌ 不要去掉描边或圆角——Stepper 必须看起来"可点击"