Number Stepper
数字微调器
WebMobileDesktop上手难度: 中等
一个数字加减的控件，左右是两个按钮，中间是当前数量。
Live Demo
真的可以点Live Demo Playground
导出数量
1
范围 1 – 99
你刚才看到的这个：购物车每行「− 1 +」的那个控件、外卖订单「份数」的加减。
它到底是什么
Number Stepper 解决的是「小幅调整」：购物车数量 1→2→3。它和 Slider 的区别在于——Stepper 适合离散小步长且要精确，Slider 适合连续大幅调整。
数字步进number stepper数量选择器加减器counter计数器
Anatomy · 它由什么组成
Decrement减号
到最小值时禁用
Value数值
居中，可编辑
Increment加号
到最大值时禁用
Bounds上下限
受 min/max 限制
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 在小的整数范围内增减 | 用 |
| 需要精确的数值（不能靠拖） | 用 |
| 数量有最小/最大值限制 | 用 |
| 需要在大范围内调整 | 不用 |
| 需要连续的小数精度 | 不用 |
减到 0 时要明确是「删除该行」还是「不可再减」。
最小值和最大值应该在到达时禁用对应按钮，给出视觉反馈。
Similar Patterns
别搞混一句话区分：一个数字加减的控件，左右是两个按钮，中间是当前数量。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
加一个数量选择器：左右加减按钮，中间显示数字，范围 1–99，减到 1 时减号禁用，加到 99 时加号禁用，中间数字可直接输入。
不要只对 AI 说
Bad → Better不要这样对 AI 说
加个可以加减数字的。
改成这样说
加 Number Stepper：左右加减 icon button + 中间数字，值 clamp 到 [min,max]，到达边界时对应按钮禁用并降透明度，热区 ≥44×44，数字用 tabular-nums 防跳动。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。