Timeline и шаги прогресса для Angular | ng-hub-ui-milestones
Компонент timeline и шагов прогресса для Angular: вертикальный или горизонтальный, полностью настраиваемые узлы, контент внутри и рядом с каждым шагом, тематизация через CSS-переменные.
Последнее обновление 16 сент. 2026 г.
Обзор
Почему команды ищут эту библиотеку
Выбирайте этот компонент timeline для Angular, когда нужен презентационный трекер прогресса — потоки онбординга, отслеживание заказов, дорожные карты — с настраиваемыми узлами и как вертикальной, так и горизонтальной компоновкой.
Установка
npm install ng-hub-ui-milestonesПерейти к
Идеально для
- потоки онбординга
- отслеживание заказов
- дорожные карты
- шаги процесса
О библиотеке milestones
ng-hub-ui-milestones располагает серию шагов, соединённых линией, вертикально или горизонтально. Каждый узел полностью настраиваем — число, иконка, аватар или любая разметка внутри круга, плюс насыщенный контент рядом с ним — и каждый цвет, размер и соединитель является CSS-переменной, поэтому компонент перетематизируется в рантайме.
Руководства по возможностям
Ориентация
Располагайте timeline вертикально (по умолчанию, идеально для мастеров и лент активности) или горизонтально (шаги прогресса вдоль верха страницы). Узлы нумеруются автоматически в порядке 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 — который определяет цвета узла и коннектора. Input `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` или перетемизируйте весь timeline через CSS-переменные `--hub-milestone-*`.
Примеры:
Пользовательские узлы и цвет каждого узла
Пользовательские узлы и цвет каждого узла
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 22.5.1 - 9/16/26, 12:00 AM
changed: Repository, issue and README links follow the move to the hub-env organization. Issues for every Hub UI package are now gathered in hub-env/hub-ui, and the repository and bugs fields of the manifest point at the new addresses. No code, types or styles change.
Version 22.5.0 - 9/8/26, 12:00 AM
added: A milestone in error is no longer distinguishable by colour alone. It was a red circle and nothing else, and the rail carries aria-hidden="true", so the state reached nobody who does not separate red from green. Every node now renders its state as a word in the body, clipped out of the page and read out with the step, and an error node additionally draws a light mark on its circle that survives greyscale.
added: stateLabel on hub-milestone and stateLabels in HubMilestonesConfig: the announced word is English by default (Completed, Pending, Error, and nothing for active, which aria-current already names), and these two are how it gets translated. The per-node input wins over the application-wide option, and '' silences one node or one state.
added: data-state on hub-milestone, mirroring the state the modifier classes already carry — the same attribute hook toast, badges and stepper expose for styling and for tests.
changed: The node body now contains one clipped span before the projected content. Nothing moves on screen and no API changes, but a test asserting on the exact textContent of a milestone body will see the state word alongside its own copy.
Version 22.4.0 - 9/7/26, 12:00 AM
fixed: A :root in the application now outranks the library's token defaults. The component is unencapsulated, so its :root block of --hub-milestone-* defaults lands in the global stylesheet with the same specificity as the application's own :root, and the tie goes to whichever sheet was injected last — the component's, always. Wrapped in :where() the defaults score zero, so the consumer's rule wins on merit and nothing needs !important. Same tokens, same values; only what wins changed.
changed: The Styling section of both READMEs says where a redefinition actually lands. It listed :root, a hub-milestones selector and the per-node color input as equivalent, when the first of the three did nothing.
Version 22.3.3 - 9/6/26, 12:00 AM
fixed: The documentation no longer denies the ng-hub-ui-utils dependency the package requires. Both READMEs advertised zero runtime dependencies and an install line naming this package alone, while peerDependencies has demanded ng-hub-ui-utils since 22.3.0, so a reader installing by hand ended up with an application that cannot resolve resolveHubAccent. The install block now names both packages and states the peer range.
fixed: hubMilestoneNode is described as what it is: an attribute directive. Calling it structural set the wrong expectation about where its content appears. It only tags a template, and hub-milestone is what renders it inside the circle.
fixed: HUB_MILESTONES_CONFIG is in the API reference. The token is exported from public-api.ts and is the only way to read the resolved application defaults, yet neither README named it.
fixed: The Styling section documents the SCSS the package ships. The theming mixin and the styles entry point have been published since 22.2.0 with no trace in either README, leaving the one-call theming path visible only to whoever read the changelog.
Version 22.3.2 - 9/1/26, 12:00 AM
changed: The homepage in the manifest points at this library's own documentation page rather than at the site root. It is the link a registry shows beside the package and the one a reader clicks from it, and landing on a front page they then have to search is a worse answer than landing on the reference for the package they were already looking at. Metadata only — no code, no types, no styles change, and nothing a consumer imports is affected.
Version 22.3.1 - 8/8/26, 12:00 AM
fixed: Documentation links now point at the canonical localized URLs. The README linked to https://hubui.dev/<path> with no locale prefix and no trailing slash, and both forms are 301-redirected, so every reader arriving from npm or GitHub landed on a redirect instead of the canonical page.
Version 22.3.0 - 7/28/26, 12:00 AM
changed: Accent resolution now imports the canonical resolveHubAccent from ng-hub-ui-utils. The private copy under src/lib/shared/resolve-hub-accent.ts has been deleted in favour of the single, tested implementation shared family-wide. Behaviour is identical (the copy had not diverged): a bareword resolves to var(--hub-sys-color-<name>, <name>), a literal colour passes through unchanged, an empty value yields null.
added: NEW peer dependency: ng-hub-ui-utils >=22.7.0. Consumers must have ng-hub-ui-utils installed alongside this library (it is where resolveHubAccent lives). Users installing via ng add ng-hub-ui get it automatically; manual installs need npm i ng-hub-ui-utils.
Version 22.2.1 - 7/28/26, 12:00 AM
fixed: Each milestone exposes role=listitem and the active node announces aria-current=step, completing the list semantics the container already declared.
Version 22.2.0 - 7/7/26, 12:00 AM
added: hub-milestones-theme(...) SCSS mixin — one-call token theming for <hub-milestones>, covering the full --hub-milestone-* surface: completed steps ($node-color, $node-text, $node-size, $node-font-size, $connector-bg, $connector-thickness), upcoming steps ($pending-bg, $pending-border, $pending-color, $connector-pending-bg), the error state ($error-bg), the step body ($body-color, $body-muted) and layout ($gap, $spacing). Every parameter is null-defaulted and additive.
changed: Packaging — the library now ships its SCSS at /styles. src/lib/styles is emitted to dist/milestones/styles, exposing hub-milestones-theme as a first-class package entry: @use 'ng-hub-ui-milestones/styles' as *;
Version 22.1.0 - 7/7/26, 12:00 AM
changed: <hub-milestone> color accepts ANY colour. On top of the built-in semantic accents, the input now also accepts a registered custom accent and a literal colour (#ff0000, rgb(...), oklch(...), a CSS named colour), resolved through the shared resolveHubAccent resolver: a bareword becomes var(--hub-sys-color-<name>, <name>); a literal is used as-is. Built-in colours are unchanged.
changed: Internal — host bindings moved to the host metadata object. @HostBinding / @HostListener decorators were replaced by the host object in the component and directive metadata (Angular style guide). No public API or behaviour change.
Version 22.0.3 - 6/25/26, 12:00 AM
changed: Widened the Angular peer dependency range from ^22.0.0 to >=21.0.0, so the library installs on Angular 21 projects as well, aligning it with the rest of the ng-hub-ui family. No code changes.
Version 22.0.2 - 6/25/26, 12:00 AM
added: Viewport reveal — when a <hub-milestones> scrolls into view it plays a one-shot animation, filling the accent trail from the first node up to the active node. On by default; set it globally with provideHubMilestones({ reveal: false }) or per instance with [reveal]. Tunable via --hub-milestone-reveal-duration / --hub-milestone-reveal-stagger, SSR-safe and disabled under prefers-reduced-motion.
added: provideHubMilestones() provider and HubMilestonesConfig for app-wide defaults, plus the [pulse] input on <hub-milestones> — an opt-in soft wave on the active node whose colour follows the node accent and is overridable via --hub-milestone-pulse-color / --hub-milestone-pulse-duration / --hub-milestone-pulse-spread.
fixed: Connectors now reach from node to node: the connector is absolutely positioned and always spans node edge to next-node edge, in both orientations. Its colour follows the theme accent (--hub-milestone-node-color) instead of the hardcoded purple-to-orange gradient, the accent trail stops at the active node so the timeline reads as a real progress indicator, and layout, connectors and the reveal flip correctly under dir='rtl'.
Version 22.0.1 - 6/25/26, 12:00 AM
fixed: Design-token consistency pass: aligned inline fallback defaults with the canonical ng-hub-ui-ds values and routed hardcoded literals (z-index, font-weight, line-height, radii and theme-aware colours) through their --hub-sys-* / --hub-ref-* tokens, so they follow the active theme. No visual change when the ds tokens are loaded.
Version 22.0.0 - 6/17/26, 12:00 AM
changed: Aligned with Angular 22. README documentation standardized.
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.
Связанные библиотеки
Часто задаваемые вопросы
Как построить компонент временной шкалы в Angular?
Установите ng-hub-ui-milestones и передайте HubMilestonesComponent список шагов. Он рисует направляющую и узлы и отмечает состояние каждого шага — это подходит для отслеживания заказов, сценариев онбординга и дорожных карт проекта, где временная шкала является отображением, а не интерактивным элементом.
Может ли временная шкала быть горизонтальной, а не вертикальной?
Да. HubMilestonesOrientation переключает всю раскладку между вертикальной и горизонтальной одним входным свойством, и одно и то же содержимое шага работает в обоих случаях — удобно, когда шкала является боковой панелью на десктопе и горизонтальной полосой на узких экранах.
Как поместить собственное содержимое внутрь узла временной шкалы?
HubMilestoneNodeDirective заменяет кружок на каждом шаге, поэтому узлом может быть число, иконка, аватар или любая разметка. Насыщенное содержимое можно разместить и рядом с узлом — так к шагу добавляют даты, описания или действия.
Чем временная шкала отличается от степпера в Angular?
Временная шкала показывает уже случившийся или запланированный ход событий, и пользователь им не управляет. Степпер ведёт человека по форме или мастеру, проверяя каждый шаг. Используйте ng-hub-ui-milestones, чтобы показать последовательность, и ng-hub-ui-stepper, когда пользователь должен по ней пройти.