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.
API-Referenz
Hier ist der vollständige Vertrag für milestones: alles, was du binden, abhören, projizieren und gestalten kannst, an einem Ort gesammelt. Verdrahte, was du brauchst, und gestalte, was du willst — es ist standalone und Signals-freundlich.
Inputs
Stelle milestones mit 6 Inputs ein. Binde sie wie jeden Angular-@Input.
| Name | Typ | Standard | Beschreibung |
|---|---|---|---|
orientation (hub-milestones) | 'vertical' | 'horizontal' | 'vertical' | Layout-Richtung der Timeline. |
state (hub-milestone) | 'complete' | 'active' | 'pending' | 'error' | 'pending' | Visueller Zustand des Knotens; bestimmt die Farben des Knotens und des Verbinders. |
color (hub-milestone) | string | '' | Farbüberschreibung pro Knoten (beliebige CSS-Farbe). Hat Vorrang vor der state-Farbe. |
label (hub-milestone) | string | '' | Fallback-Text, der innerhalb des Knotens angezeigt wird, wenn kein `hubMilestoneNode`-Template angegeben ist. |
pulse (hub-milestones) | boolean | false | Auf `<hub-milestones>` gesetzt, sendet der aktive Knoten eine sanft expandierende Welle aus, um den aktuellen Schritt hervorzuheben. Opt-in; berücksichtigt `prefers-reduced-motion`. |
reveal (hub-milestones) | boolean | true | Sobald die Timeline in den Viewport scrollt, animiert sie den Akzent-Pfad bis zum aktiven Knoten. Standardmäßig aktiv — global über `provideHubMilestones({ reveal: false })` oder pro Instanz mit `[reveal]` konfigurierbar. Berücksichtigt `prefers-reduced-motion`. |
Outputs
Noch keine Outputs dokumentiert.
Templates
Mach es zu deinem — 2 Template-Slots lassen dich eigenes Markup projizieren.
| Name | Beschreibung | Beispiel |
|---|---|---|
hubMilestoneNode | Kennzeichnet ein `<ng-template>`, dessen Inhalt INNERHALB des Meilenstein-Kreises gerendert wird (Nummer, Icon, Emoji, Avatar). Hat Vorrang vor `label` und der automatischen Nummerierung. | <hub-milestone>
<ng-template hubMilestoneNode>★</ng-template>
<h4>Shipped</h4>
</hub-milestone> |
hub-milestone body (ng-content) | Jeder Inhalt, der direkt in `hub-milestone` projiziert wird (außerhalb des Knoten-Templates), wird als Körper neben dem Kreis gerendert. | <hub-milestone state="active">
<h4>Payment</h4>
<p>Enter your payment method.</p>
</hub-milestone> |
CSS-Variablen
Gestalte jedes Pixel mit 20 CSS-Variablen. Überschreibe sie auf :root oder begrenze sie auf einen Wrapper.
Node
Der kreisförmige Node: seine Größe, Farben und die zustandsabhängigen Oberflächen.
| Variable | Standard | Typ | Beschreibung |
|---|---|---|---|
--hub-milestone-node-size | 2.75rem | length | Durchmesser des Node-Kreises. |
--hub-milestone-node-font-size | 1.05rem | length | Schriftgröße des Node-Inhalts (Nummer / Label). |
--hub-milestone-node-color | var(--hub-sys-color-primary, #0d6efd) | color | Node-Hintergrund für abgeschlossene / aktive Zustände. Das `color` pro Node überschreibt dies. |
--hub-milestone-node-text | var(--hub-ref-color-white, #ffffff) | color | Schriftfarbe des Node-Inhalts auf farbigen Nodes. |
--hub-milestone-pending-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | Hintergrund ausstehender Nodes. |
--hub-milestone-pending-color | var(--hub-sys-text-muted, #6c757d) | color | Schriftfarbe des Inhalts ausstehender Nodes. |
--hub-milestone-pending-border | var(--hub-sys-border-color-default, #dee2e6) | color | Rahmenfarbe ausstehender Nodes. |
--hub-milestone-error-bg | var(--hub-sys-color-danger, #dc3545) | color | Hintergrund von Fehler-Nodes. |
Verbindung & Layout
Die zwischen den Nodes gezeichnete Schiene und die Abstände der Timeline.
| Variable | Standard | Typ | Beschreibung |
|---|---|---|---|
--hub-milestone-connector-thickness | 3px | length | Stärke der Verbindungsschiene. |
--hub-milestone-connector-bg | var(--hub-milestone-node-color) | string | Füllung der Verbindung zwischen abgeschlossenen / aktiven Nodes. |
--hub-milestone-connector-pending-bg | var(--hub-sys-border-color-default, #dee2e6) | color | Füllung der Verbindung, die zu einem ausstehenden Node führt. |
--hub-milestone-gap | 1rem | length | Abstand zwischen der Node-Schiene und dem Body-Inhalt. |
--hub-milestone-spacing | 1.75rem | length | Abstand zwischen aufeinanderfolgenden Schritten. |
Body
Der Textinhalt, der neben jedem Node dargestellt wird.
| Variable | Standard | Typ | Beschreibung |
|---|---|---|---|
--hub-milestone-body-color | var(--hub-sys-text-primary, #212529) | color | Primäre Schriftfarbe des Body-Texts. |
--hub-milestone-body-muted | var(--hub-sys-text-muted, #6c757d) | color | Gedämpfte / sekundäre Schriftfarbe des Body-Texts. |
Animation
Steuert den optionalen Puls des aktiven Knotens und den Reveal-Pfad beim Scrollen.
| Variable | Standard | Typ | Beschreibung |
|---|---|---|---|
--hub-milestone-pulse-color | var(--hub-milestone-node-color) | color | Farbe der Pulswelle des aktiven Knotens. Standard ist der Knoten-Akzent, folgt also einem knotenspezifischen `color`-Override. |
--hub-milestone-pulse-duration | 1.6s | string | Dauer eines Pulszyklus. |
--hub-milestone-pulse-spread | 0.75rem | length | Wie weit sich die Pulswelle vom Knoten nach außen ausdehnt. |
--hub-milestone-reveal-duration | 0.5s | string | Dauer der Füllung jedes Connectors während des Reveals. |
--hub-milestone-reveal-stagger | 0.14s | string | Verzögerung zwischen dem Füllen aufeinanderfolgender Connectors — erzeugt den kaskadierenden Reveal. |
Styling und Theming
Es sind noch keine Styling-Beispiele dokumentiert. Dieser Abschnitt wird Anpassungsrezepte und Theming-Beispiele enthalten.