Angular 步骤条组件 | ng-hub-ui-stepper
Angular 步骤条组件，支持校验、朝向模式、自定义控件、i18n 和 CSS 变量主题。
样式
混入与样式
Override any of the `--hub-stepper-*` design tokens in a single include. Every parameter is OPTIONAL and defaults to `null`: only the parameters you pass are emitted, so the rest keep the component's defaults. Token-based and self-contained (no Bootstrap dependencies).
Theming with hub-stepper-theme
The active step follows the themed accent.
| 混入 | 参数 | 描述 |
|---|---|---|
| Theming | ||
hub-stepper-theme() | $accent--hub-stepper-accent$surface--hub-stepper-surface-color$background--hub-stepper-background-color$text--hub-stepper-text-color$border--hub-stepper-border-color$gap--hub-stepper-gap$disabled-opacity--hub-stepper-disabled-opacity$nav-bg--hub-stepper-nav-bg$nav-padding-x--hub-stepper-nav-padding-x$nav-padding-y--hub-stepper-nav-padding-y$nav-border-width--hub-stepper-nav-border-width$nav-border-color--hub-stepper-nav-border-color$nav-gap--hub-stepper-nav-gap$nav-link-color--hub-stepper-nav-link-color$nav-link-hover-color--hub-stepper-nav-link-hover-color$nav-link-hover-bg--hub-stepper-nav-link-hover-bg$nav-link-active-color--hub-stepper-nav-link-active-color$nav-link-active-bg--hub-stepper-nav-link-active-bg$nav-link-active-border-color--hub-stepper-nav-link-active-border-color$nav-link-disabled-color--hub-stepper-nav-link-disabled-color$trigger-padding-x--hub-stepper-nav-trigger-padding-x$trigger-padding-y--hub-stepper-nav-trigger-padding-y$trigger-gap--hub-stepper-nav-trigger-gap$trigger-font-size--hub-stepper-nav-trigger-font-size$controls-gap--hub-stepper-controls-gap$controls-justify--hub-stepper-controls-justify$control-padding-x--hub-stepper-control-padding-x$control-padding-y--hub-stepper-control-padding-y$control-font-size--hub-stepper-control-font-size$sidebar-width--hub-stepper-sidebar-width | One-call theming for `<hub-stepper>` |
CSS 变量
用 43 个 CSS 变量为每一个像素设置主题。在 :root 处覆盖它们，或将其限定到某个容器范围内。
Stepper
Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.
| 变量 | 默认值 | 类型 | 描述 |
|---|---|---|---|
--hub-stepper-accent | var(--hub-sys-color-primary, #0d6efd) | color | Semantic accent — re-based per variant; drives the active step pill + next/submit controls |
--hub-stepper-primary-color | var(--hub-stepper-accent) | color | 主强调色（激活状态、进度）。 |
--hub-stepper-background-color | var(--hub-sys-surface-elevated, #f8f9fa) | color | 后退按钮 / 次要表面的背景。 |
--hub-stepper-text-color | var(--hub-sys-text-primary, #212529) | color | 基础文本颜色。 |
--hub-stepper-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | stepper 表面的边框颜色。 |
--hub-stepper-surface-color | var(--hub-sys-surface-page, #ffffff) | color | 步骤内容的背景。 |
--hub-stepper-nav-bg | var(--hub-sys-surface-page, transparent) | color | Background of the nav bar |
--hub-stepper-nav-border-width | 0 | length | Border width of the nav bar |
--hub-stepper-nav-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Border color of the nav bar |
--hub-stepper-nav-link-color | var(--hub-sys-text-primary, #212529) | color | 导航步骤标签的颜色。 |
--hub-stepper-nav-link-hover-color | var(--hub-sys-link-hover-color, #0a58ca) | color | Nav trigger text color on hover |
--hub-stepper-nav-link-hover-bg | var(--hub-sys-state-hover-bg, rgba(0, 0, 0, 0.075)) | color | Nav trigger background on hover |
--hub-stepper-nav-link-active-color | var(--hub-stepper-accent-on, #ffffff) | color | 激活步骤指示器的文本颜色。 |
--hub-stepper-nav-link-active-bg | var(--hub-stepper-accent) | color | 激活步骤指示器的背景。 |
--hub-stepper-nav-link-active-border-color | var(--hub-stepper-accent) | color | Nav trigger border in the current step |
--hub-stepper-nav-link-disabled-color | var(--hub-sys-text-muted, #6c757d) | color | 禁用步骤标签的颜色。 |
--hub-stepper-gap | var(--hub-ref-space-3, 1rem) | length | stepper 布局各区域之间的间距。 |
--hub-stepper-nav-gap | var(--hub-ref-space-1, 0.25rem) | length | Gap between nav trigger items |
--hub-stepper-nav-trigger-gap | var(--hub-ref-space-1, 0.25rem) | length | Internal gap between icon and label inside trigger |
--hub-stepper-nav-trigger-padding-y | var(--hub-ref-space-2, 0.5rem) | length | Vertical padding of nav trigger |
--hub-stepper-nav-trigger-padding-x | var(--hub-ref-space-3, 1rem) | length | Horizontal padding of nav trigger |
--hub-stepper-nav-trigger-font-size | var(--hub-ref-font-size-sm, 0.875rem) | length | Font size of nav trigger label |
--hub-stepper-nav-trigger-line-height | var(--hub-ref-line-height-sm, 1.25) | number | Line height of nav trigger label |
--hub-stepper-controls-justify | flex-end | string | justify-content of the controls bar |
--hub-stepper-controls-gap | var(--hub-ref-space-2, 0.5rem) | length | 导航控件之间的间距。 |
--hub-stepper-control-padding-y | 0.375rem | length | Vertical padding of control buttons |
--hub-stepper-control-padding-x | var(--hub-ref-space-3, 1rem) | length | Horizontal padding of control buttons |
--hub-stepper-control-font-size | var(--hub-ref-font-size-sm, 0.875rem) | length | Font size of control buttons |
--hub-stepper-control-line-height | var(--hub-ref-line-height-sm, 1.25) | number | Line height of control buttons |
--hub-stepper-disabled-opacity | var(--hub-sys-opacity-50, 0.5) | number | 应用于禁用步骤的不透明度。 |
--hub-stepper-sidebar-min-width | 160px | length | Minimum width of sidebar nav (sidebar layout) |
--hub-stepper-sidebar-ideal-width | 20vw | length | Ideal width of sidebar nav used in clamp() |
--hub-stepper-sidebar-max-width | 240px | length | Maximum width of sidebar nav (sidebar layout) |
--hub-stepper-sidebar-width | clamp( var(--hub-stepper-sidebar-min-width), var(--hub-stepper-sidebar-ideal-width), var(--hub-stepper-sidebar-max-width) ) | length | `sidebar` 布局中侧边栏的宽度。 |
--hub-stepper-content-border-width | 0 | length | Border width of the content panel |
--hub-stepper-animation-duration | var(--hub-sys-transition-duration-base, 260ms) | transition | 步骤过渡的持续时间。 |
--hub-stepper-animation-easing | var(--hub-sys-transition-timing-function-base, ease) | transition | Easing function of step transition animations |
--hub-stepper-animation-distance | var(--hub-ref-space-4, 1.5rem) | transition | Slide distance for enter/exit step animations |
--hub-stepper-content-padding-x | 0 | length | Content horizontal padding |
--hub-stepper-content-padding-y | 0 | length | Content vertical padding |
--hub-stepper-nav-padding-x | 0 | length | Nav horizontal padding |
--hub-stepper-nav-padding-y | 0 | length | Nav vertical padding |
--hub-stepper-nav-title-max-width | 12rem | length | Max width of a step nav title before ellipsis |