用途:stepper 是一个带动画的步骤指示器,用来在多步骤流程(如结账、引导入职)中展示当前进度,随推进逐步填充。资料说明每个流程只应使用一个 stepper。
主要能力:支持动画填充进度;无依赖(dependency-free);对减少动效偏好安全(reduced-motion safe),在 prefers-reduced-motion 下会做填充方面的降级处理。
使用方式:复制其 CSS 与 JS,并按给定结构放置标记,例如 <div class="stepper" data-step="2"><div class="st">1</div><div class="bar"></div><div class="st">2</div>…</div>;资料提到点击可推进(demo)。data-step 用于指定当前步骤。
适用场景:结账、注册/引导等多步骤表单或向导流程的进度展示。
限制:公开资料仅给出简要说明与一段结构示例,未提供完整的 CSS/JS 代码、安装命令、浏览器兼容范围、各参数取值规则及可访问性细节,这些内容暂未提供;实际接入时需自行补齐样式与脚本,并以原始页面为准。