Timeline y Pasos de Progreso para Angular | ng-hub-ui-milestones
Componente timeline y de pasos de progreso para Angular: vertical u horizontal, nodos totalmente personalizables, contenido dentro y junto a cada paso, con theming por variables CSS.
Ejemplos interactivos
Explora ejemplos en vivo que muestran cómo se comporta la librería en casos de uso habituales de Angular.
Orientación
Dispón la línea de tiempo en vertical (la opción por defecto, ideal para asistentes y feeds de actividad) o en horizontal (pasos de progreso a lo largo de la parte superior de una página). Los nodos se numeran automáticamente en orden del DOM.
Línea de tiempo vertical
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.
Pasos de progreso horizontales
Information
Account verified.
Shipping
Address confirmed.
Payment
In progress.
Review
Last step.
Estados de nodo
Cada `hub-milestone` lleva un `state` —complete, active, pending o error— que determina los colores del nodo y del conector. El input `label` renderiza el texto de fallback dentro del círculo.
Estados de nodo
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.
Nodos personalizados y tematización
Proyecta cualquier contenido dentro del círculo con `<ng-template hubMilestoneNode>` (números, iconos, emoji, avatares), sobrescribe un nodo individual con `color`, o vuelve a tematizar toda la línea de tiempo mediante las variables CSS `--hub-milestone-*`.
Nodos personalizados y color por nodo
Drafted
Article written and saved.
Reviewed
Approved by the editor.
Publishing
Going live across channels.
Promotion
Scheduled for next week.
Tematización con variables CSS
Kickoff
Project scoped and approved.
Build
Core features shipped.
Launch
Rolling out to production.
Animación
Cuando el timeline entra en el viewport, completa su trazo de acento hasta el nodo activo — activado por defecto y configurable globalmente con `provideHubMilestones`. Añade `[pulse]` para que el nodo activo emita una onda suave. Ambas animaciones respetan `prefers-reduced-motion`.
Horizontal con pulso activo
Ordered
Payment received.
Packed
Ready to ship.
In transit
Out for delivery now.
Delivered
Arriving soon.