Angular 时间线与进度步骤 | ng-hub-ui-milestones
Angular 时间线和进度步骤组件：垂直或水平布局，节点完全可定制，可在每个步骤内部和旁边放置内容，并通过 CSS 变量进行主题化。
API 参考
这里是 milestones 的完整契约：你可以绑定、监听、投影和设置主题的一切，都集中在一处。接入你需要的部分，自定义你想要的样式——它是 standalone 的，且对 signal 友好。
输入
通过 6 个输入项精细调校 milestones。像绑定任意 Angular @Input 一样绑定它们。
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
orientation (hub-milestones) | 'vertical' | 'horizontal' | 'vertical' | 时间线的布局方向。 |
state (hub-milestone) | 'complete' | 'active' | 'pending' | 'error' | 'pending' | 节点的视觉状态；决定节点和连接线的颜色。 |
color (hub-milestone) | string | '' | 逐节点的颜色覆盖（任意 CSS 颜色）。优先级高于 state 颜色。 |
label (hub-milestone) | string | '' | 当未提供 `hubMilestoneNode` 模板时，节点内显示的回退文本。 |
pulse (hub-milestones) | boolean | false | 在 `<hub-milestones>` 上启用后，活动节点会发出柔和扩散的波纹以突出当前步骤。需手动开启；遵循 `prefers-reduced-motion`。 |
reveal (hub-milestones) | boolean | true | 当时间线滚动进入视口时，会以动画方式将强调色轨迹填充至活动节点。默认开启 —— 可通过 `provideHubMilestones({ reveal: false })` 全局配置，或用 `[reveal]` 按实例配置。遵循 `prefers-reduced-motion`。 |
输出
尚未记录任何输出项。
模板
打造你自己的样式——2 个模板插槽让你可以投影自定义标记。
| 名称 | 描述 | 示例 |
|---|---|---|
hubMilestoneNode | 标记一个 `<ng-template>`，其内容渲染在里程碑圆圈内部（数字、图标、emoji、头像）。优先级高于 `label` 和自动编号。 | <hub-milestone>
<ng-template hubMilestoneNode>★</ng-template>
<h4>Shipped</h4>
</hub-milestone> |
hub-milestone body (ng-content) | 任何直接投影到 `hub-milestone` 中（节点模板之外）的内容都会作为正文渲染在圆圈旁边。 | <hub-milestone state="active">
<h4>Payment</h4>
<p>Enter your payment method.</p>
</hub-milestone> |