Angular 步骤条组件 | ng-hub-ui-stepper
Angular 步骤条组件，支持校验、朝向模式、自定义控件、i18n 和 CSS 变量主题。
API 参考
这里是 stepper 的完整契约：你可以绑定、监听、投影和设置主题的一切，都集中在一处。接入你需要的部分，自定义你想要的样式——它是 standalone 的，且对 signal 友好。
输入
通过 6 个输入项精细调校 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" 控件标签。 |
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> | 当返回到某一步骤时触发，并带有新的步骤索引。 |
模板
尚未记录任何模板。
CSS 变量
用 14 个 CSS 变量为每一个像素设置主题。在 :root 处覆盖它们，或将其限定到某个容器范围内。
Stepper 主题
用于 stepper 表面、导航和控件的运行时主题令牌。可在 `:root` 上覆盖，或将其限定到某个包装器作用域。
| 变量 | 默认值 | 类型 | 描述 |
|---|---|---|---|
--hub-stepper-primary-color | #009ef7 | color | 主强调色（激活状态、进度）。 |
--hub-stepper-background-color | #f3f6f9 | color | 后退按钮 / 次要表面的背景。 |
--hub-stepper-text-color | #181c32 | color | 基础文本颜色。 |
--hub-stepper-border-color | #d8dde6 | color | stepper 表面的边框颜色。 |
--hub-stepper-surface-color | #ffffff | color | 步骤内容的背景。 |
--hub-stepper-nav-link-color | #495057 | color | 导航步骤标签的颜色。 |
--hub-stepper-nav-link-active-bg | #0d6efd | color | 激活步骤指示器的背景。 |
--hub-stepper-nav-link-active-color | #ffffff | color | 激活步骤指示器的文本颜色。 |
--hub-stepper-nav-link-disabled-color | #adb5bd | color | 禁用步骤标签的颜色。 |
--hub-stepper-gap | 1rem | length | stepper 布局各区域之间的间距。 |
--hub-stepper-controls-gap | 0.5rem | length | 导航控件之间的间距。 |
--hub-stepper-disabled-opacity | 0.5 | number | 应用于禁用步骤的不透明度。 |
--hub-stepper-sidebar-width | clamp(160px, 20vw, 240px) | length | `sidebar` 布局中侧边栏的宽度。 |
--hub-stepper-animation-duration | 260ms | transition | 步骤过渡的持续时间。 |
样式与主题
尚未记录任何样式示例。本节将包含自定义方案和主题示例。