Stepper 步骤条
呈现多步骤任务的顺序、完成状态与当前所在步骤。
使用概览
适合使用
- 注册、结算或配置流程由少量有序阶段组成时。
不建议使用
- 步骤可以任意顺序完成，或流程只有一个页面动作时。
真实示例
创建项目步骤条
标记邀请成员为当前步骤并显示前后阶段。
正在加载示例…
安装
本地候选警告Registry 地址仅指向当前本地文档站；npm 包也只用于本地候选验证，尚未公开发布。
pnpm dlx shadcn@4.16.0 add http://127.0.0.1:3000/r/stepper.json基础用法
导入
import { Stepper } from "@richardqiu/quartz/stepper";JSX
<Stepper aria-label="创建项目" currentStepId="members" items={[{ id: "details", label: "基本信息" }, { id: "members", label: "邀请成员" }, { id: "review", label: "确认" }]} />状态与控制摘要
默认
键盘焦点可见
已选择
已禁用
label · textactive · booleanAPI 参考
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
currentStepId | string | 必填 | 用稳定标识指定流程当前所在的步骤。 |
orientation | "horizontal" | "vertical" | "horizontal" | 根据可用空间选择水平或垂直步骤布局。 |
组合结构
- 01
Stepper
键盘约定
- Tab 按顺序访问可用步骤按钮，Enter 或空格键请求当前步骤 ID。
可访问性契约
- 当前步骤通过 aria-current=step 暴露。
- 由使用方提供的标签与说明保持在有序序列中可见。