Angular Timeline & Fortschrittsschritte | ng-hub-ui-milestones
Angular Timeline- und Fortschrittsschritte-Komponente: vertikal oder horizontal, vollständig anpassbare Knoten, Inhalte innerhalb und neben jedem Schritt, gestaltet mit CSS-Variablen.
Übersicht
Warum Teams nach dieser Bibliothek suchen
Wähle diese Angular Timeline-Komponente, wenn du einen rein darstellenden Fortschrittsanzeiger benötigst — Onboarding-Flows, Bestellverfolgung, Roadmaps — mit individuellen Knoten und sowohl vertikalem als auch horizontalem Layout.
Installieren
npm install ng-hub-ui-milestonesSpringen zu
Ideal für
- Onboarding-Flows
- Bestellverfolgung
- Roadmaps
- Prozessschritte
Über milestones
ng-hub-ui-milestones ordnet eine Reihe von Schritten an, die durch eine Linie verbunden sind, vertikal oder horizontal. Jeder Knoten ist vollständig anpassbar — Nummer, Icon, Avatar oder beliebiges Markup innerhalb des Kreises sowie reichhaltige Inhalte daneben — und jede Farbe, Größe und jeder Verbinder ist eine CSS-Variable, sodass sich das Ganze zur Laufzeit neu themen lässt.
Funktionsleitfäden
Ausrichtung
Legen Sie die Zeitleiste vertikal aus (Standard, ideal für Wizards und Aktivitäts-Feeds) oder horizontal (Fortschrittsschritte am oberen Seitenrand). Knoten werden automatisch in DOM-Reihenfolge nummeriert.
Beispiele:
Vertikale Zeitachse
Vertikale Zeitachse
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.
Horizontale Fortschrittsschritte
Horizontale Fortschrittsschritte
Information
Account verified.
Shipping
Address confirmed.
Payment
In progress.
Review
Last step.
Knotenzustände
Jeder `hub-milestone` trägt einen `state` — complete, active, pending oder error —, der die Knoten- und Verbindungsfarben steuert. Der `label`-Input rendert Fallback-Text im Kreis.
Beispiele:
Knotenzustände
Knotenzustände
Complete
A finished step.
Active
The current step, highlighted with a ring.
Error
Something needs attention here.
Pending
Not started yet.
Benutzerdefinierte Knoten & Theming
Projizieren Sie beliebige Inhalte in den Kreis mit `<ng-template hubMilestoneNode>` (Zahlen, Icons, Emojis, Avatare), überschreiben Sie einen einzelnen Knoten mit `color` oder gestalten Sie die gesamte Zeitleiste über `--hub-milestone-*` CSS-Variablen neu.
Beispiele:
Benutzerdefinierte Knoten & Farbe pro Knoten
Benutzerdefinierte Knoten & Farbe pro Knoten
Drafted
Article written and saved.
Reviewed
Approved by the editor.
Publishing
Going live across channels.
Promotion
Scheduled for next week.
Theming mit CSS-Variablen
Theming mit CSS-Variablen
Kickoff
Project scoped and approved.
Build
Core features shipped.
Launch
Rolling out to production.
Animation
Sobald die Timeline in den Viewport scrollt, füllt sie ihren Akzent-Pfad bis zum aktiven Knoten — standardmäßig aktiv und global über `provideHubMilestones` konfigurierbar. Mit `[pulse]` sendet der aktive Knoten eine sanfte Welle aus. Beide Animationen berücksichtigen `prefers-reduced-motion`.
Beispiele:
Horizontal mit aktivem Puls
Horizontal mit aktivem Puls
Ordered
Payment received.
Packed
Ready to ship.
In transit
Out for delivery now.
Delivered
Arriving soon.
Hauptfunktionen
Letzte Änderungen
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.