Timeline et Étapes de Progression Angular | ng-hub-ui-milestones
Composant timeline et étapes de progression Angular : vertical ou horizontal, nœuds entièrement personnalisables, contenu à l'intérieur et à côté de chaque étape, thématisé via variables CSS.
Vue d’ensemble
Pourquoi les équipes recherchent cette bibliothèque
Choisissez ce composant timeline Angular lorsque vous avez besoin d'un indicateur de progression présentationnel — parcours d'onboarding, suivi de commande, roadmaps — avec des nœuds personnalisés et des dispositions verticale et horizontale.
Installation
npm install ng-hub-ui-milestonesAller à
Idéal pour
- parcours d'onboarding
- suivi de commande
- roadmaps
- étapes d'un processus
À propos de milestones
ng-hub-ui-milestones dispose une série d'étapes reliées par une ligne, verticalement ou horizontalement. Chaque nœud est entièrement personnalisable — numéro, icône, avatar ou tout balisage à l'intérieur du cercle, plus un contenu riche à côté — et chaque couleur, taille et connecteur est une variable CSS, de sorte qu'il se re-thématise au runtime.
Guides de fonctionnalités
Orientation
Disposez la timeline verticalement (par défaut, idéale pour les assistants et les fils d'activité) ou horizontalement (étapes de progression en haut d'une page). Les nœuds sont numérotés automatiquement dans l'ordre du DOM.
Exemples:
Chronologie verticale
Chronologie verticale
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.
Étapes de progression horizontales
Étapes de progression horizontales
Information
Account verified.
Shipping
Address confirmed.
Payment
In progress.
Review
Last step.
États des nœuds
Chaque `hub-milestone` porte un `state` — complete, active, pending ou error — qui pilote les couleurs du nœud et du connecteur. L'input `label` affiche un texte de repli à l'intérieur du cercle.
Exemples:
États des nœuds
États des nœuds
Complete
A finished step.
Active
The current step, highlighted with a ring.
Error
Something needs attention here.
Pending
Not started yet.
Nœuds personnalisés et thématisation
Projetez n'importe quel contenu dans le cercle avec `<ng-template hubMilestoneNode>` (nombres, icônes, emoji, avatars), remplacez un seul nœud avec `color`, ou re-thématisez toute la timeline via les variables CSS `--hub-milestone-*`.
Exemples:
Nœuds personnalisés et couleur par nœud
Nœuds personnalisés et couleur par nœud
Drafted
Article written and saved.
Reviewed
Approved by the editor.
Publishing
Going live across channels.
Promotion
Scheduled for next week.
Thématisation par variables CSS
Thématisation par variables CSS
Kickoff
Project scoped and approved.
Build
Core features shipped.
Launch
Rolling out to production.
Animation
Lorsque la timeline entre dans le viewport, elle complète son tracé d'accent jusqu'au nœud actif — activé par défaut et configurable globalement via `provideHubMilestones`. Ajoutez `[pulse]` pour que le nœud actif émette une onde douce. Les deux animations respectent `prefers-reduced-motion`.
Exemples:
Horizontal avec pulsation active
Horizontal avec pulsation active
Ordered
Payment received.
Packed
Ready to ship.
In transit
Out for delivery now.
Delivered
Arriving soon.
Fonctionnalités clés
Changements récents
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.