Angular 步骤条组件 | ng-hub-ui-stepper
Angular 步骤条组件，支持校验、朝向模式、自定义控件、i18n 和 CSS 变量主题。
Overview
Why teams search for this library
这个 Angular 步骤条组件适用于引导式多步流程，在这些流程中校验、推进规则和品牌需要始终在你的掌控之中。
Install
npm install ng-hub-ui-stepperJump to
Ideal for
- 结账流程
- 向导表单
- 入门引导
- 配置步骤
About stepper
ng-hub-ui-stepper 帮助 Angular 应用构建入门引导、结账和向导式表单。它为团队提供了一种可复用的方式来控制步骤推进、校验和导航逻辑，而无需在每个流程中手动写死这些规则。
Feature guides
核心用法
基础设置和方向行为。
Examples:
基本用法
基本用法
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
方向
方向
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
高级流程
验证、i18n、RTL、API 驱动的导航、自定义控件和自定义步骤头部。
Examples:
校验
校验
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
程序化控制
程序化控制
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
Event: -
自定义导航
自定义导航
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
自定义控件
自定义控件
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
动画
动画
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
国际化（i18n）
国际化（i18n）
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
从右到左（RTL）
从右到左（RTL）
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
样式
通过主题服务进行运行时主题自定义。
Examples:
主题
主题
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
Key features
Recent changes
Version 21.2.0 - 3/19/26, 12:00 AM
added: StepperAnimationDirection enum exported for typed animation direction values.
added: Step indexes are now automatically assigned by StepperComponent via a reactive effect — no manual [index] binding required.
changed: StepComponent.index is now an internal writable signal. Remove all [index]="N" bindings from hub-step templates.
changed: StepComponent.disabled simplified to a direct signal input (input(false)), removing the getter/setter and disabled$ backing signal.
changed: StepperComponent.currentIndex is now a writable signal — call as currentIndex() instead of the previous getter.
changed: Renamed internal signals: removed $ suffix from currentIndex, contentAnimating, animationDirection.
removed: StepComponent.disabled$ backing signal removed. Use the disabled signal input directly.
removed: [index] template binding removed from StepComponent — managed internally.
Version 21.1.0 - 3/18/26, 12:00 AM
added: Angular 21 support with Signals-based architecture.
added: contentChild and contentChildren for step and directive discovery.
changed: All components and directives converted to standalone.
fixed: Fixed step indices and validation during dynamic step additions.