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> |
CSS 变量
用 20 个 CSS 变量为每一个像素设置主题。在 :root 处覆盖它们，或将其限定到某个容器范围内。
Node
圆形节点：其尺寸、颜色以及各状态的表面。
| 变量 | 默认值 | 类型 | 描述 |
|---|---|---|---|
--hub-milestone-node-size | 2.75rem | length | 节点圆形的直径。 |
--hub-milestone-node-font-size | 1.05rem | length | 节点内容（数字/标签）的字号。 |
--hub-milestone-node-color | var(--hub-sys-color-primary, #0d6efd) | color | 完成/激活状态下的节点背景。每个节点的 `color` 会覆盖此值。 |
--hub-milestone-node-text | var(--hub-ref-color-white, #ffffff) | color | 彩色节点上的节点内容颜色。 |
--hub-milestone-pending-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | 待处理节点的背景。 |
--hub-milestone-pending-color | var(--hub-sys-text-muted, #6c757d) | color | 待处理节点的内容颜色。 |
--hub-milestone-pending-border | var(--hub-sys-border-color-default, #dee2e6) | color | 待处理节点的边框颜色。 |
--hub-milestone-error-bg | var(--hub-sys-color-danger, #dc3545) | color | 错误节点的背景。 |
连接线与布局
绘制在节点之间的导轨以及时间线的间距。
| 变量 | 默认值 | 类型 | 描述 |
|---|---|---|---|
--hub-milestone-connector-thickness | 3px | length | 连接导轨的粗细。 |
--hub-milestone-connector-bg | var(--hub-milestone-node-color) | string | 完成/激活节点之间连接线的填充。 |
--hub-milestone-connector-pending-bg | var(--hub-sys-border-color-default, #dee2e6) | color | 通向待处理节点的连接线填充。 |
--hub-milestone-gap | 1rem | length | 节点导轨与正文内容之间的间隙。 |
--hub-milestone-spacing | 1.75rem | length | 连续步骤之间的间距。 |
Body
投影在每个节点旁的文本内容。
| 变量 | 默认值 | 类型 | 描述 |
|---|---|---|---|
--hub-milestone-body-color | var(--hub-sys-text-primary, #212529) | color | 正文主要文本颜色。 |
--hub-milestone-body-muted | var(--hub-sys-text-muted, #6c757d) | color | 弱化/次要正文文本颜色。 |
动画
调整可选的活动节点脉冲与进入视口时的揭示轨迹。
| 变量 | 默认值 | 类型 | 描述 |
|---|---|---|---|
--hub-milestone-pulse-color | var(--hub-milestone-node-color) | color | 活动节点脉冲波的颜色。默认使用节点强调色，因此会跟随每个节点的 `color` 覆盖。 |
--hub-milestone-pulse-duration | 1.6s | string | 一个脉冲周期的时长。 |
--hub-milestone-pulse-spread | 0.75rem | length | 脉冲波从节点向外扩散的距离。 |
--hub-milestone-reveal-duration | 0.5s | string | 揭示过程中每个连接线填充的时长。 |
--hub-milestone-reveal-stagger | 0.14s | string | 相邻连接线填充之间的延迟，形成级联揭示效果。 |
样式与主题
尚未记录任何样式示例。本节将包含自定义方案和主题示例。