Composant Stepper Angular | ng-hub-ui-stepper
Composant stepper Angular avec validation, modes d'orientation, contrôles personnalisés, i18n et theming via variables CSS.
Référence API
Voici le contrat complet de stepper : 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 stepper à votre goût avec 6 inputs. Liez-les comme n’importe quel @Input Angular.
| Nom | Type | Par défaut | Description |
|---|---|---|---|
options (hub-stepper) | StepperOptions | {} | Objet de configuration du stepper : `layout` (`vertical` | `sidebar`) et `rtl` (boolean). |
backLabel (hub-stepper) | string | null | null | Remplace le libellé du contrôle "Back". Revient au libellé i18n intégré lorsque null. |
continueLabel (hub-stepper) | string | null | null | Remplace le libellé du contrôle "Continue". |
submitLabel (hub-stepper) | string | null | null | Remplace le libellé du contrôle "Submit" de la dernière étape. |
title (hub-step) | string | — | Le titre de l'étape affiché dans la navigation du stepper. |
disabled (hub-step) | boolean | false | Désactive la navigation vers cette étape. |
Outputs
Réagissez à ce que fait stepper — 3 événements sur lesquels accrocher votre logique.
| Nom | Type | Description |
|---|---|---|
completed (hub-stepper) | EventEmitter<void> | Émis lorsque l'utilisateur soumet la dernière étape. |
nextStep (hub-stepper) | EventEmitter<number> | Émis lors de l'avancement vers une étape, avec le nouvel index d'étape. |
previousStep (hub-stepper) | EventEmitter<number> | Émis lors du retour à une étape, avec le nouvel index d'étape. |
Templates
Aucun template documenté pour le moment.
Variables CSS
Personnalisez chaque pixel avec 14 variables CSS. Remplacez-les au niveau de :root ou limitez-les à un conteneur.
Thème du stepper
Jetons de thématisation à l'exécution pour la surface, la navigation et les contrôles du stepper. Remplacez-les au niveau `:root` ou limitez-les à un wrapper.
| Variable | Par défaut | Type | Description |
|---|---|---|---|
--hub-stepper-primary-color | #009ef7 | color | Accent principal (état actif, progression). |
--hub-stepper-background-color | #f3f6f9 | color | Arrière-plan du bouton retour / de la surface secondaire. |
--hub-stepper-text-color | #181c32 | color | Couleur de texte de base. |
--hub-stepper-border-color | #d8dde6 | color | Couleur de la bordure de la surface du stepper. |
--hub-stepper-surface-color | #ffffff | color | Arrière-plan du contenu de l'étape. |
--hub-stepper-nav-link-color | #495057 | color | Couleur du libellé de l'étape de navigation. |
--hub-stepper-nav-link-active-bg | #0d6efd | color | Arrière-plan de l'indicateur d'étape active. |
--hub-stepper-nav-link-active-color | #ffffff | color | Couleur du texte de l'indicateur d'étape active. |
--hub-stepper-nav-link-disabled-color | #adb5bd | color | Couleur du libellé de l'étape désactivée. |
--hub-stepper-gap | 1rem | length | Espacement entre les régions de mise en page du stepper. |
--hub-stepper-controls-gap | 0.5rem | length | Espacement entre les contrôles de navigation. |
--hub-stepper-disabled-opacity | 0.5 | number | Opacité appliquée aux étapes désactivées. |
--hub-stepper-sidebar-width | clamp(160px, 20vw, 240px) | length | Largeur de la sidebar dans la mise en page `sidebar`. |
--hub-stepper-animation-duration | 260ms | transition | Durée de la transition d'étape. |
Styles et theming
Aucun exemple de style n’est encore documenté. Cette section inclura des recettes de personnalisation et des exemples de theming.