Timeline и шаги прогресса для Angular | ng-hub-ui-milestones
Компонент timeline и шагов прогресса для Angular: вертикальный или горизонтальный, полностью настраиваемые узлы, контент внутри и рядом с каждым шагом, тематизация через CSS-переменные.
Интерактивные примеры
Изучите живые примеры, показывающие, как библиотека ведёт себя в типичных сценариях использования Angular.
Ориентация
Располагайте 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
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.