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.
Styles
Mixins et styles
Override any of the `--hub-stepper-*` design tokens in a single include. Every parameter is OPTIONAL and defaults to `null`: only the parameters you pass are emitted, so the rest keep the component's defaults. Token-based and self-contained (no Bootstrap dependencies).
Theming with hub-stepper-theme
The active step follows the themed accent.
| Mixin | Paramètres | Description |
|---|---|---|
| Theming | ||
hub-stepper-theme() | $accent--hub-stepper-accent$surface--hub-stepper-surface-color$background--hub-stepper-background-color$text--hub-stepper-text-color$border--hub-stepper-border-color$gap--hub-stepper-gap$disabled-opacity--hub-stepper-disabled-opacity$nav-bg--hub-stepper-nav-bg$nav-padding-x--hub-stepper-nav-padding-x$nav-padding-y--hub-stepper-nav-padding-y$nav-border-width--hub-stepper-nav-border-width$nav-border-color--hub-stepper-nav-border-color$nav-gap--hub-stepper-nav-gap$nav-link-color--hub-stepper-nav-link-color$nav-link-hover-color--hub-stepper-nav-link-hover-color$nav-link-hover-bg--hub-stepper-nav-link-hover-bg$nav-link-active-color--hub-stepper-nav-link-active-color$nav-link-active-bg--hub-stepper-nav-link-active-bg$nav-link-active-border-color--hub-stepper-nav-link-active-border-color$nav-link-disabled-color--hub-stepper-nav-link-disabled-color$trigger-padding-x--hub-stepper-nav-trigger-padding-x$trigger-padding-y--hub-stepper-nav-trigger-padding-y$trigger-gap--hub-stepper-nav-trigger-gap$trigger-font-size--hub-stepper-nav-trigger-font-size$controls-gap--hub-stepper-controls-gap$controls-justify--hub-stepper-controls-justify$control-padding-x--hub-stepper-control-padding-x$control-padding-y--hub-stepper-control-padding-y$control-font-size--hub-stepper-control-font-size$sidebar-width--hub-stepper-sidebar-width | One-call theming for `<hub-stepper>` |
Variables CSS
Personnalisez chaque pixel avec 43 variables CSS. Remplacez-les au niveau de :root ou limitez-les à un conteneur.
Stepper
Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.
| Variable | Par défaut | Type | Description |
|---|---|---|---|
--hub-stepper-accent | var(--hub-sys-color-primary, #0d6efd) | color | Semantic accent — re-based per variant; drives the active step pill + next/submit controls |
--hub-stepper-primary-color | var(--hub-stepper-accent) | color | Accent principal (état actif, progression). |
--hub-stepper-background-color | var(--hub-sys-surface-elevated, #f8f9fa) | color | Arrière-plan du bouton retour / de la surface secondaire. |
--hub-stepper-text-color | var(--hub-sys-text-primary, #212529) | color | Couleur de texte de base. |
--hub-stepper-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Couleur de la bordure de la surface du stepper. |
--hub-stepper-surface-color | var(--hub-sys-surface-page, #ffffff) | color | Arrière-plan du contenu de l'étape. |
--hub-stepper-nav-bg | var(--hub-sys-surface-page, transparent) | color | Background of the nav bar |
--hub-stepper-nav-border-width | 0 | length | Border width of the nav bar |
--hub-stepper-nav-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Border color of the nav bar |
--hub-stepper-nav-link-color | var(--hub-sys-text-primary, #212529) | color | Couleur du libellé de l'étape de navigation. |
--hub-stepper-nav-link-hover-color | var(--hub-sys-link-hover-color, #0a58ca) | color | Nav trigger text color on hover |
--hub-stepper-nav-link-hover-bg | var(--hub-sys-state-hover-bg, rgba(0, 0, 0, 0.075)) | color | Nav trigger background on hover |
--hub-stepper-nav-link-active-color | var(--hub-stepper-accent-on, #ffffff) | color | Couleur du texte de l'indicateur d'étape active. |
--hub-stepper-nav-link-active-bg | var(--hub-stepper-accent) | color | Arrière-plan de l'indicateur d'étape active. |
--hub-stepper-nav-link-active-border-color | var(--hub-stepper-accent) | color | Nav trigger border in the current step |
--hub-stepper-nav-link-disabled-color | var(--hub-sys-text-muted, #6c757d) | color | Couleur du libellé de l'étape désactivée. |
--hub-stepper-gap | var(--hub-ref-space-3, 1rem) | length | Espacement entre les régions de mise en page du stepper. |
--hub-stepper-nav-gap | var(--hub-ref-space-1, 0.25rem) | length | Gap between nav trigger items |
--hub-stepper-nav-trigger-gap | var(--hub-ref-space-1, 0.25rem) | length | Internal gap between icon and label inside trigger |
--hub-stepper-nav-trigger-padding-y | var(--hub-ref-space-2, 0.5rem) | length | Vertical padding of nav trigger |
--hub-stepper-nav-trigger-padding-x | var(--hub-ref-space-3, 1rem) | length | Horizontal padding of nav trigger |
--hub-stepper-nav-trigger-font-size | var(--hub-ref-font-size-sm, 0.875rem) | length | Font size of nav trigger label |
--hub-stepper-nav-trigger-line-height | var(--hub-ref-line-height-sm, 1.25) | number | Line height of nav trigger label |
--hub-stepper-controls-justify | flex-end | string | justify-content of the controls bar |
--hub-stepper-controls-gap | var(--hub-ref-space-2, 0.5rem) | length | Espacement entre les contrôles de navigation. |
--hub-stepper-control-padding-y | 0.375rem | length | Vertical padding of control buttons |
--hub-stepper-control-padding-x | var(--hub-ref-space-3, 1rem) | length | Horizontal padding of control buttons |
--hub-stepper-control-font-size | var(--hub-ref-font-size-sm, 0.875rem) | length | Font size of control buttons |
--hub-stepper-control-line-height | var(--hub-ref-line-height-sm, 1.25) | number | Line height of control buttons |
--hub-stepper-disabled-opacity | var(--hub-sys-opacity-50, 0.5) | number | Opacité appliquée aux étapes désactivées. |
--hub-stepper-sidebar-min-width | 160px | length | Minimum width of sidebar nav (sidebar layout) |
--hub-stepper-sidebar-ideal-width | 20vw | length | Ideal width of sidebar nav used in clamp() |
--hub-stepper-sidebar-max-width | 240px | length | Maximum width of sidebar nav (sidebar layout) |
--hub-stepper-sidebar-width | clamp( var(--hub-stepper-sidebar-min-width), var(--hub-stepper-sidebar-ideal-width), var(--hub-stepper-sidebar-max-width) ) | length | Largeur de la sidebar dans la mise en page `sidebar`. |
--hub-stepper-content-border-width | 0 | length | Border width of the content panel |
--hub-stepper-animation-duration | var(--hub-sys-transition-duration-base, 260ms) | transition | Durée de la transition d'étape. |
--hub-stepper-animation-easing | var(--hub-sys-transition-timing-function-base, ease) | transition | Easing function of step transition animations |
--hub-stepper-animation-distance | var(--hub-ref-space-4, 1.5rem) | transition | Slide distance for enter/exit step animations |
--hub-stepper-content-padding-x | 0 | length | Content horizontal padding |
--hub-stepper-content-padding-y | 0 | length | Content vertical padding |
--hub-stepper-nav-padding-x | 0 | length | Nav horizontal padding |
--hub-stepper-nav-padding-y | 0 | length | Nav vertical padding |
--hub-stepper-nav-title-max-width | 12rem | length | Max width of a step nav title before ellipsis |