API 参考

这里是 stepper 的完整契约：你可以绑定、监听、投影和设置主题的一切，都集中在一处。接入你需要的部分，自定义你想要的样式——它是 standalone 的，且对 signal 友好。

输入

通过 13 个输入项精细调校 stepper。像绑定任意 Angular @Input 一样绑定它们。

名称	类型	默认值	描述
`options (hub-stepper)`	`StepperOptions`	`{}`	Stepper 配置对象：`layout`（`vertical` \| `sidebar`）和 `rtl`（布尔值）。
`variant (hub-stepper)`	`string`	`undefined`	应用于当前步骤胶囊以及“下一步 / 提交”控件的语义强调色。内置值：`primary`、`secondary`、`success`、`danger`、`warning`、`info`、`neutral`、`light`、`dark`；其他任意字符串通过 `--hub-sys-color-<variant>` 解析。
`backLabel (hub-stepper)`	`string \| null`	`null`	覆盖 "Back" 控件标签。当为 null 时回退到内置的 i18n 标签。
`continueLabel (hub-stepper)`	`string \| null`	`null`	覆盖 "Continue" 控件标签。
`submitLabel (hub-stepper)`	`string \| null`	`null`	覆盖最后一步 "Submit" 控件标签。
`truncateTitles (hub-stepper)`	`boolean`	`false`	将轨道中每个步骤的标题裁剪到 `--hub-stepper-nav-title-max-width`（默认 `12rem`），文本溢出时以工具提示显示完整内容。
`railLabel (hub-stepper)`	`string`	`'Steps'`	步骤导轨 tablist 的无障碍名称。
`nav (hub-stepper)`	`'pills' \| 'track'`	`'pills'`	步骤器画哪一种导轨。`pills` 是一直以来的那种；`track` 是行内变体：每步一个带编号的标记，顺序无误的步骤带对勾，离开该步的连接线取强调色。
`inOrderLabel (hub-stepper)`	`string \| null`	`null`	屏幕阅读器在带对勾的标记处读到的内容。对勾本身是装饰性的，所以这是唯一说明该步骤顺序无误的东西。未设置时回退到内置词典。
`beforeStepChange (hub-stepper)`	`StepperStepChangeGuard \| null`	`null`	步骤器在移动之前会询问的一道关卡，好让向导先行保存。它运行时索引还停在原处，返回 `false`——或解析为 `false` 的 Promise，或一次拒绝——都会让步骤器原地不动。输出做不到这一点：等它触发时，步骤早已改变。
`title (hub-step)`	`string`	`undefined`	在 stepper 导航中显示的步骤标题。
`disabled (hub-step)`	`boolean`	`false`	禁止导航到此步骤。
`valid (hub-step)`	`boolean \| null`	`null`	向导对本步骤自身数据的判定。三种状态，第三种才是关键：`true`、`false`，以及表示无人表态的 `null`。库从不检查表单——它只记录答案，由导轨据此推理。

输出

响应 stepper 的行为——有 3 个事件可供你挂接逻辑。

名称	类型	描述
`completed (hub-stepper)`	`OutputEmitterRef<void>`	当用户提交最后一步时触发。
`nextStep (hub-stepper)`	`OutputEmitterRef<number>`	当前进到某一步骤时触发，并带有新的步骤索引。
`previousStep (hub-stepper)`	`OutputEmitterRef<number>`	当返回到某一步骤时触发，并带有新的步骤索引。

模板

打造你自己的样式——4 个模板插槽让你可以投影自定义标记。

名称	描述	示例
`stepperNav / hubStepperNav`	整体替换默认的步骤轨道。模板上下文暴露 steps（投影的 StepComponent 实例）和 currentIndex，使用 let-steps="steps" 与 let-currentIndex="currentIndex" 绑定。	`<hub-stepper> <ng-template hubStepperNav let-steps="steps" let-currentIndex="currentIndex"> <ol class="my-rail"> @for (step of steps; track step; let i = $index) { <li [class.current]="i === currentIndex">{{ step.title() \|\| 'Step ' + (i + 1) }}</li> } </ol> </ng-template> <hub-step title="Account">…</hub-step> <hub-step title="Review">…</hub-step> </hub-stepper>`
`stepTrigger / hubStepTrigger`	替换默认导轨在每个条目内绘制的控件，导轨本身保持不变：列表、role="tablist"、方向和标签都还在。上下文以 $implicit 和 step 两种方式提供该步骤，另有 title、index、isCurrent、isCompleted 和 disabled；切换步骤仍由你来做，通过宿主上的模板引用。存在 hubStepperNav 模板时会被忽略。	`<hub-stepper #wizard> <ng-template hubStepTrigger let-title="title" let-index="index" let-isCurrent="isCurrent" let-inOrder="inOrder" let-reachable="reachable"> <button type="button" role="tab" [attr.aria-selected]="isCurrent" [disabled]="!reachable" (click)="wizard.goTo(index)"> <span class="badge">{{ inOrder ? '✓' : index + 1 }}</span> {{ title }} </button> </ng-template> <hub-step title="Account" [valid]="account.valid">…</hub-step> <hub-step title="Review">…</hub-step> </hub-stepper>`
`provideHubStepper`	注册内置的十个词典（en、es、ca、eu、gl、ast、an、de、zh 和 ar）以及内置的 Back / Continue / Submit 控件用来解析文本的 HubTranslationService。它取代了将在 23.0.0 中移除的 StepperModule.forRoot()。	`providers: [provideHubStepper({ language: 'en', fallbackLanguage: 'en' })]`
`STEPPER_DICTIONARIES`	以普通对象导出的内置词典，便于只注册实际发布的语言，或与自有词典合并。键是扁平的 BACK、CONTINUE 和 SUBMIT，正是组件在 HUBUI.STEPPER 命名空间未命中后所解析的形式。	`provideHubTranslation({ language: 'ca', dictionaries: { ca: { ...STEPPER_DICTIONARIES['ca'], ...myLabels } } })`