Componente Stepper para Angular | ng-hub-ui-stepper
Componente stepper para Angular con validación, orientaciones, controles personalizados, i18n y theming mediante variables CSS.
Estilos
Mixins y estilos
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 | Parámetros | Descripción |
|---|---|---|
| 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
Personaliza cada detalle con 43 variables CSS. Sobrescríbelas en :root o acótalas a un contenedor.
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 | Por defecto | Tipo | Descripción |
|---|---|---|---|
--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 | Acento principal (estado activo, progreso). |
--hub-stepper-background-color | var(--hub-sys-surface-elevated, #f8f9fa) | color | Fondo del botón Back / superficie secundaria. |
--hub-stepper-text-color | var(--hub-sys-text-primary, #212529) | color | Color de texto base. |
--hub-stepper-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Color del borde de la superficie del stepper. |
--hub-stepper-surface-color | var(--hub-sys-surface-page, #ffffff) | color | Fondo del contenido del paso. |
--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 | Color de la etiqueta del paso de navegación. |
--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 | Color del texto del indicador del paso activo. |
--hub-stepper-nav-link-active-bg | var(--hub-stepper-accent) | color | Fondo del indicador del paso activo. |
--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 | Color de la etiqueta del paso deshabilitado. |
--hub-stepper-gap | var(--hub-ref-space-3, 1rem) | length | Espacio entre las regiones del diseño del 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 | Espacio entre los controles de navegación. |
--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 | Opacidad aplicada a los pasos deshabilitados. |
--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 | Ancho de la barra lateral en el diseño `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 | Duración de la transición entre pasos. |
--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 |