Timeline y Pasos de Progreso para Angular | ng-hub-ui-milestones
Componente timeline y de pasos de progreso para Angular: vertical u horizontal, nodos totalmente personalizables, contenido dentro y junto a cada paso, con theming por variables CSS.
Referencia API
Aquí tienes el contrato completo de milestones: todo lo que puedes enlazar, escuchar, proyectar y personalizar, reunido en un solo sitio. Enlaza lo que necesites y dale el estilo que quieras — es standalone y reactivo con signals.
Inputs
Ajusta milestones a tu gusto con 6 inputs. Se enlazan como cualquier @Input de Angular.
| Nombre | Tipo | Por defecto | Descripción |
|---|---|---|---|
orientation (hub-milestones) | 'vertical' | 'horizontal' | 'vertical' | Dirección del diseño de la línea de tiempo. |
state (hub-milestone) | 'complete' | 'active' | 'pending' | 'error' | 'pending' | Estado visual del nodo; determina los colores del nodo y del conector. |
color (hub-milestone) | string | '' | Anulación de color por nodo (cualquier color CSS). Prevalece sobre el color del estado. |
label (hub-milestone) | string | '' | Texto de respaldo que se muestra dentro del nodo cuando no se proporciona una plantilla `hubMilestoneNode`. |
pulse (hub-milestones) | boolean | false | Cuando se activa en `<hub-milestones>`, el nodo activo emite una onda suave que se expande para destacar el paso actual. Opcional; respeta `prefers-reduced-motion`. |
reveal (hub-milestones) | boolean | true | Cuando el timeline entra en el viewport, anima el trazo de acento completándose hasta el nodo activo. Activado por defecto — configúralo globalmente con `provideHubMilestones({ reveal: false })` o por instancia con `[reveal]`. Respeta `prefers-reduced-motion`. |
Outputs
Todavía no hay outputs documentados.
Templates
Hazlo tuyo — 2 plantillas para proyectar tu propio marcado.
| Nombre | Descripción | Ejemplo |
|---|---|---|
hubMilestoneNode | Marca un `<ng-template>` cuyo contenido se renderiza DENTRO del círculo del hito (número, icono, emoji, avatar). Tiene prioridad sobre `label` y la numeración automática. | <hub-milestone>
<ng-template hubMilestoneNode>★</ng-template>
<h4>Shipped</h4>
</hub-milestone> |
hub-milestone body (ng-content) | Cualquier contenido proyectado directamente en `hub-milestone` (fuera de la plantilla del nodo) se renderiza como el cuerpo junto al círculo. | <hub-milestone state="active">
<h4>Payment</h4>
<p>Enter your payment method.</p>
</hub-milestone> |
Variables CSS
Personaliza cada detalle con 20 variables CSS. Sobrescríbelas en :root o acótalas a un contenedor.
Nodo
El nodo circular: su tamaño, sus colores y las superficies de cada estado.
| Variable | Por defecto | Tipo | Descripción |
|---|---|---|---|
--hub-milestone-node-size | 2.75rem | length | Diámetro del círculo del nodo. |
--hub-milestone-node-font-size | 1.05rem | length | Tamaño de fuente del contenido del nodo (número / etiqueta). |
--hub-milestone-node-color | var(--hub-sys-color-primary, #0d6efd) | color | Fondo del nodo para los estados completado / activo. El `color` por nodo lo sobrescribe. |
--hub-milestone-node-text | var(--hub-ref-color-white, #ffffff) | color | Color del contenido del nodo en los nodos coloreados. |
--hub-milestone-pending-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | Fondo del nodo pendiente. |
--hub-milestone-pending-color | var(--hub-sys-text-muted, #6c757d) | color | Color del contenido del nodo pendiente. |
--hub-milestone-pending-border | var(--hub-sys-border-color-default, #dee2e6) | color | Color del borde del nodo pendiente. |
--hub-milestone-error-bg | var(--hub-sys-color-danger, #dc3545) | color | Fondo del nodo de error. |
Conector y disposición
La guía dibujada entre los nodos y el espaciado de la línea de tiempo.
| Variable | Por defecto | Tipo | Descripción |
|---|---|---|---|
--hub-milestone-connector-thickness | 3px | length | Grosor de la guía de conexión. |
--hub-milestone-connector-bg | var(--hub-milestone-node-color) | string | Relleno del conector entre los nodos completados / activos. |
--hub-milestone-connector-pending-bg | var(--hub-sys-border-color-default, #dee2e6) | color | Relleno del conector que conduce a un nodo pendiente. |
--hub-milestone-gap | 1rem | length | Espacio entre la guía de nodos y el contenido del cuerpo. |
--hub-milestone-spacing | 1.75rem | length | Espaciado entre pasos consecutivos. |
Cuerpo
El contenido de texto proyectado junto a cada nodo.
| Variable | Por defecto | Tipo | Descripción |
|---|---|---|---|
--hub-milestone-body-color | var(--hub-sys-text-primary, #212529) | color | Color del texto principal del cuerpo. |
--hub-milestone-body-muted | var(--hub-sys-text-muted, #6c757d) | color | Color del texto atenuado / secundario del cuerpo. |
Animación
Ajusta el pulso opcional del nodo activo y el trazo de revelado al entrar en el viewport.
| Variable | Por defecto | Tipo | Descripción |
|---|---|---|---|
--hub-milestone-pulse-color | var(--hub-milestone-node-color) | color | Color de la onda de pulso del nodo activo. Por defecto usa el acento del nodo, así que sigue cualquier override `color` por nodo. |
--hub-milestone-pulse-duration | 1.6s | string | Duración de un ciclo de pulso. |
--hub-milestone-pulse-spread | 0.75rem | length | Cuánto se expande la onda de pulso hacia fuera del nodo. |
--hub-milestone-reveal-duration | 0.5s | string | Duración del rellenado de cada conector durante el revelado. |
--hub-milestone-reveal-stagger | 0.14s | string | Retardo entre el rellenado de conectores consecutivos, creando el revelado en cascada. |
Estilos y theming
Todavía no hay ejemplos de estilos documentados. Esta sección incluirá recetas de personalización y ejemplos de theming.