Timeline и шаги прогресса для Angular | ng-hub-ui-milestones
Компонент timeline и шагов прогресса для Angular: вертикальный или горизонтальный, полностью настраиваемые узлы, контент внутри и рядом с каждым шагом, тематизация через CSS-переменные.
Обзор
Почему команды ищут эту библиотеку
Выбирайте этот компонент 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.
Active
The current step, highlighted with a ring.
Error
Something needs attention here.
Pending
Not started yet.
Пользовательские узлы и темизация
Проецируйте любое содержимое в круг с помощью `<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 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.