Angular 时间线与进度步骤 | ng-hub-ui-milestones
Angular 时间线和进度步骤组件：垂直或水平布局，节点完全可定制，可在每个步骤内部和旁边放置内容，并通过 CSS 变量进行主题化。
交互式示例
探索实时示例，了解该库在常见 Angular 用例中的表现。
方向
可将时间线垂直布局（默认方式，适合向导和活动流）或水平布局（横跨页面顶部的进度步骤）。节点会按 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. Announced as “Completed”.
Active
The current step, highlighted with a ring and carrying aria-current="step".
Error
Something needs attention here. The mark on the circle says so without colour, and the step is announced as “Error”.
Pending
Not started yet — and announced as “Sin empezar”, because this node sets stateLabel.
自定义节点与主题化
可通过 `<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 变量主题
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.