Angular 时间线与进度步骤 | ng-hub-ui-milestones
Angular 时间线和进度步骤组件：垂直或水平布局，节点完全可定制，可在每个步骤内部和旁边放置内容，并通过 CSS 变量进行主题化。
概览
团队为何搜索这个库
当你需要一个展示型的进度跟踪器（入门引导、订单跟踪、路线图），并支持自定义节点以及垂直和水平两种布局时，请选择这个 Angular 时间线组件。
安装
npm install ng-hub-ui-milestones跳转到
适用于
- 入门引导流程
- 订单跟踪
- 路线图
- 流程步骤
关于 milestones
ng-hub-ui-milestones 将一系列由轨道连接的步骤以垂直或水平方式排布。每个节点都完全可定制——可在圆圈内放置数字、图标、头像或任意标记，并在其旁边放置丰富内容——而每一种颜色、尺寸和连接线都是 CSS 变量，因此可在运行时重新主题化。
功能指南
方向
可将时间线垂直布局（默认方式，适合向导和活动流）或水平布局（横跨页面顶部的进度步骤）。节点会按 DOM 顺序自动编号。
示例:
垂直时间线
垂直时间线
Information
Account details captured and verified.
Shipping
Delivery address confirmed.
Payment
Enter your payment method to continue.
Review
Place the order once everything looks right.
水平进度步骤
水平进度步骤
Information
Account verified.
Shipping
Address confirmed.
Payment
In progress.
Review
Last step.
节点状态
每个 `hub-milestone` 都带有一个 `state`——complete、active、pending 或 error——用于驱动节点和连接线的颜色。`label` 输入会在圆圈内渲染回退文本。
示例:
节点状态
节点状态
Complete
A finished step.
Active
The current step, highlighted with a ring.
Error
Something needs attention here.
Pending
Not started yet.
自定义节点与主题化
可通过 `<ng-template hubMilestoneNode>` 将任意内容投影到圆圈中（数字、图标、emoji、头像），用 `color` 覆盖单个节点，或通过 `--hub-milestone-*` CSS 变量重新为整条时间线设定主题。
示例:
自定义节点与单节点颜色
自定义节点与单节点颜色
Drafted
Article written and saved.
Reviewed
Approved by the editor.
Publishing
Going live across channels.
Promotion
Scheduled for next week.
CSS 变量主题
CSS 变量主题
Kickoff
Project scoped and approved.
Build
Core features shipped.
Launch
Rolling out to production.
动画
当时间线滚动进入视口时，强调色轨迹会一直填充到活动节点（默认开启，可通过 `provideHubMilestones` 全局配置）。添加 `[pulse]` 可让活动节点发出柔和的波纹。两种动画都遵循 `prefers-reduced-motion`。
示例:
带活动脉冲的横向
带活动脉冲的横向
Ordered
Payment received.
Packed
Ready to ship.
In transit
Out for delivery now.
Delivered
Arriving soon.
核心特性
最近更改
Version 21.0.0 - 6/14/26, 12:00 AM
added: Initial release: hub-milestones container (vertical / horizontal orientation, auto-numbered nodes) and hub-milestone node with complete/active/pending/error states.
added: Per-node color override, label fallback and custom in-circle content via the hubMilestoneNode template directive.
added: Full --hub-milestone-* CSS-variable theming for node, connector, states and spacing.