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.
Référence API
Voici le contrat complet de milestones : tout ce que vous pouvez lier, écouter, projeter et personnaliser, réuni au même endroit. Branchez ce dont vous avez besoin et stylisez ce que vous voulez — c’est standalone et compatible avec les signals.
Inputs
Réglez milestones à votre goût avec 6 inputs. Liez-les comme n’importe quel @Input Angular.
| Nom | Type | Par défaut | Description |
|---|---|---|---|
orientation (hub-milestones) | 'vertical' | 'horizontal' | 'vertical' | Direction de la mise en page de la timeline. |
state (hub-milestone) | 'complete' | 'active' | 'pending' | 'error' | 'pending' | État visuel du nœud ; pilote les couleurs du nœud et du connecteur. |
color (hub-milestone) | string | '' | Remplacement de couleur par nœud (toute couleur CSS). Prioritaire sur la couleur du state. |
label (hub-milestone) | string | '' | Texte de repli affiché à l'intérieur du nœud lorsqu'aucun modèle `hubMilestoneNode` n'est fourni. |
pulse (hub-milestones) | boolean | false | Activé sur `<hub-milestones>`, le nœud actif émet une onde douce qui se propage pour attirer l’attention sur l’étape courante. Optionnel ; respecte `prefers-reduced-motion`. |
reveal (hub-milestones) | boolean | true | Lorsque la timeline entre dans le viewport, elle anime le tracé d’accent jusqu’au nœud actif. Activé par défaut — configurable globalement via `provideHubMilestones({ reveal: false })` ou par instance avec `[reveal]`. Respecte `prefers-reduced-motion`. |
Outputs
Aucun output documenté pour le moment.
Templates
Faites-le vôtre — 2 emplacements de template vous permettent de projeter votre propre balisage.
| Nom | Description | Exemple |
|---|---|---|
hubMilestoneNode | Marque un `<ng-template>` dont le contenu est rendu À L'INTÉRIEUR du cercle du jalon (numéro, icône, emoji, avatar). Prioritaire sur `label` et la numérotation automatique. | <hub-milestone>
<ng-template hubMilestoneNode>★</ng-template>
<h4>Shipped</h4>
</hub-milestone> |
hub-milestone body (ng-content) | Tout contenu projeté directement dans `hub-milestone` (en dehors du modèle de nœud) est rendu comme corps à côté du cercle. | <hub-milestone state="active">
<h4>Payment</h4>
<p>Enter your payment method.</p>
</hub-milestone> |
Variables CSS
Personnalisez chaque pixel avec 20 variables CSS. Remplacez-les au niveau de :root ou limitez-les à un conteneur.
Node
Le node circulaire : sa taille, ses couleurs et les surfaces par état.
| Variable | Par défaut | Type | Description |
|---|---|---|---|
--hub-milestone-node-size | 2.75rem | length | Diamètre du cercle du node. |
--hub-milestone-node-font-size | 1.05rem | length | Taille de police du contenu du node (numéro / libellé). |
--hub-milestone-node-color | var(--hub-sys-color-primary, #0d6efd) | color | Arrière-plan du node pour les états complet / actif. Le `color` propre à chaque node l'emporte. |
--hub-milestone-node-text | var(--hub-ref-color-white, #ffffff) | color | Couleur du contenu du node sur les nodes colorés. |
--hub-milestone-pending-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | Arrière-plan d'un node en attente. |
--hub-milestone-pending-color | var(--hub-sys-text-muted, #6c757d) | color | Couleur du contenu d'un node en attente. |
--hub-milestone-pending-border | var(--hub-sys-border-color-default, #dee2e6) | color | Couleur de la bordure d'un node en attente. |
--hub-milestone-error-bg | var(--hub-sys-color-danger, #dc3545) | color | Arrière-plan d'un node en erreur. |
Connecteur et mise en page
Le rail tracé entre les nodes et l'espacement de la timeline.
| Variable | Par défaut | Type | Description |
|---|---|---|---|
--hub-milestone-connector-thickness | 3px | length | Épaisseur du rail de connexion. |
--hub-milestone-connector-bg | var(--hub-milestone-node-color) | string | Remplissage du connecteur entre les nodes terminés / actifs. |
--hub-milestone-connector-pending-bg | var(--hub-sys-border-color-default, #dee2e6) | color | Remplissage du connecteur menant à un node en attente. |
--hub-milestone-gap | 1rem | length | Espace entre le rail des nodes et le contenu du corps. |
--hub-milestone-spacing | 1.75rem | length | Espacement entre les étapes consécutives. |
Corps
Le contenu textuel projeté à côté de chaque node.
| Variable | Par défaut | Type | Description |
|---|---|---|---|
--hub-milestone-body-color | var(--hub-sys-text-primary, #212529) | color | Couleur principale du texte du corps. |
--hub-milestone-body-muted | var(--hub-sys-text-muted, #6c757d) | color | Couleur atténuée / secondaire du texte du corps. |
Animation
Ajustez la pulsation optionnelle du nœud actif et le tracé de révélation au défilement.
| Variable | Par défaut | Type | Description |
|---|---|---|---|
--hub-milestone-pulse-color | var(--hub-milestone-node-color) | color | Couleur de l’onde de pulsation du nœud actif. Par défaut l’accent du nœud, donc elle suit tout override `color` par nœud. |
--hub-milestone-pulse-duration | 1.6s | string | Durée d’un cycle de pulsation. |
--hub-milestone-pulse-spread | 0.75rem | length | Distance d’expansion de l’onde au-delà du nœud. |
--hub-milestone-reveal-duration | 0.5s | string | Durée du remplissage de chaque connecteur lors de la révélation. |
--hub-milestone-reveal-stagger | 0.14s | string | Délai entre le remplissage de connecteurs consécutifs, créant la révélation en cascade. |
Styles et theming
Aucun exemple de style n’est encore documenté. Cette section inclura des recettes de personnalisation et des exemples de theming.