Angular 步骤条组件 | ng-hub-ui-stepper
Angular 步骤条组件,支持校验、朝向模式、自定义控件、i18n 和 CSS 变量主题。
API 参考
这里是 stepper 的完整契约:你可以绑定、监听、投影和设置主题的一切,都集中在一处。接入你需要的部分,自定义你想要的样式——它是 standalone 的,且对 signal 友好。
输入
通过 7 个输入项精细调校 stepper。像绑定任意 Angular @Input 一样绑定它们。
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
options (hub-stepper) | StepperOptions | {} | Stepper 配置对象:`layout`(`vertical` | `sidebar`)和 `rtl`(布尔值)。 |
backLabel (hub-stepper) | string | null | null | 覆盖 "Back" 控件标签。当为 null 时回退到内置的 i18n 标签。 |
continueLabel (hub-stepper) | string | null | null | 覆盖 "Continue" 控件标签。 |
submitLabel (hub-stepper) | string | null | null | 覆盖最后一步 "Submit" 控件标签。 |
railLabel (hub-stepper) | string | 'Steps' | 步骤导轨 tablist 的无障碍名称。 |
title (hub-step) | string | — | 在 stepper 导航中显示的步骤标题。 |
disabled (hub-step) | boolean | false | 禁止导航到此步骤。 |
输出
响应 stepper 的行为——有 3 个事件可供你挂接逻辑。
| 名称 | 类型 | 描述 |
|---|---|---|
completed (hub-stepper) | EventEmitter<void> | 当用户提交最后一步时触发。 |
nextStep (hub-stepper) | EventEmitter<number> | 当前进到某一步骤时触发,并带有新的步骤索引。 |
previousStep (hub-stepper) | EventEmitter<number> | 当返回到某一步骤时触发,并带有新的步骤索引。 |
模板
尚未记录任何模板。