Stepper 步进器

/STEP-er/ · noun · 输入类模式 · #043

两个连体按钮,负责小而精确的加减——数量、份数、人数。

Stepper(步进器) UI 模式示例:CatchUI 图鉴标本

你可能会这样叫它

  • “加减按钮”
  • “购物车里的数量选择器”
  • “数量加减器”
  • “两边带加减号的数字框”
  • “计数器”

……它的名字是 步进器(Stepper)。

代码里叫什么

SwiftUIStepper
UIKitUIStepper
Android / Flutter 没有步进器组件,通常是数字两边各放一个图标按钮
Web (HTML / ARIA)<input type="number"> role="spinbutton"

复制给 AI 编程工具

为数量加一个步进器:减号按钮、当前数字、加号按钮排成一行。每点一次加减 1,限制在最小值和最大值之间;到最小值时禁用减号,到最大值时禁用加号;长按会连续增减,数字也可以直接输入。对读屏软件要表现为带当前值、最小值和最大值的数值调节控件(网页上用 <input type="number">)。

用 AI 写界面时该怎么说:UI 用词指南(英文)→

相关模式

传一张截图,抓住这个模式 →

学会从视觉线索认出 UI 模式(英文)