Componente de Tabs, Pills y Accordion para Angular | ng-hub-ui-panels
Componente de paneles de contenido para Angular que se renderiza como tabs, pills o accordion, con routing, formularios reactivos, navegación por teclado y variables CSS.
Referencia API
Aquí tienes el contrato completo de panels: 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 panels a tu gusto con 20 inputs. Se enlazan como cualquier @Input de Angular.
| Nombre | Tipo | Por defecto | Descripción |
|---|---|---|---|
type | 'tabs' | 'pills' | 'accordion' | 'card' | 'tabs' | Visualización del contenedor: tabs subrayadas, pills redondeadas o paneles de accordion apilados. |
vertical | boolean | false | Apila la tira de cabeceras verticalmente junto al contenido (vistas tabs / pills). |
justified | boolean | false | Estira las cabeceras para repartir equitativamente el ancho disponible. |
scrollable | boolean | false | Añade botones de desplazamiento hacia atrás/adelante cuando la tira de cabeceras desborda. |
isKeysAllowed | boolean | true | Habilita la navegación con teclado (flechas / Home / End / Delete). |
multiple | boolean | false | Permite que varios paneles estén activos a la vez. En la vista de accordion todos se expanden; en las vistas de tabs/pills cada cabecera activa inicia un bloque de panel visible y las cabeceras inactivas siguientes permanecen agrupadas encima de ese bloque hasta que la siguiente cabecera activa inicia uno nuevo. El valor del formulario pasa a ser un array. |
flush | boolean | false | Vista de accordion: paneles de borde a borde sin bordes exteriores ni radio. |
bindValue | string | undefined | Ruta en notación de puntos aplicada al valor de cada panel para obtener el valor de formulario emitido (p. ej. 'meta.key'). |
compareWith | (a: unknown, b: unknown) => boolean | (a, b) => a === b | Igualdad utilizada para comparar los valores de formulario con los valores de los paneles. |
heading | string | undefined | hub-panel: cabecera de texto plano. Se ignora cuando se proporciona una plantilla hubPanelHeading. |
appearance | 'card' | 'alert' | 'card' | hub-panel: apariencia visual de un panel independiente — 'card' (por defecto) o un aviso semántico 'alert'. Se ignora en las vistas de tabs/pills/accordion. |
variant | 'primary' | 'success' | 'danger' | 'warning' | 'info' | undefined | hub-panel: color semántico de una alerta ('primary' | 'success' | 'danger' | 'warning' | 'info'). Omítelo para una alerta neutra. |
value | unknown | id | hub-panel: valor aportado cuando el contenedor se usa como control de formulario. |
active | boolean (model) | false | hub-panel: estado active/expanded con binding bidireccional. |
disabled | boolean | false | hub-panel: impide que el panel pueda activarse. |
removable | boolean | false | hub-panel: muestra un control ✕ y habilita la eliminación con la tecla Delete. |
routerLink | string | string[] | undefined | hub-panel: convierte el panel en un panel enrutado respaldado por un <router-outlet>. |
queryParams | Params | undefined | hub-panel: parámetros de consulta añadidos al navegar a routerLink. |
pathMatch | 'route' | 'full' | 'route' | hub-panel: comparación de URL utilizada para marcar como activo un panel enrutado. |
customClass | string | undefined | hub-panel: clases CSS adicionales aplicadas tanto al elemento del nav como al panel. |
Outputs
Reacciona a lo que hace panels: 4 eventos a los que enganchar tu lógica.
| Nombre | Tipo | Descripción |
|---|---|---|
panelChange | EventEmitter<PanelChangeEvent> | hub-panels: se emite cuando el usuario activa (abre) un panel diferente. Proporciona { current, prev }. |
selectPanel | EventEmitter<PanelComponent> | hub-panel: se emite cuando el panel pasa a estar activo. |
deselectPanel | EventEmitter<PanelComponent> | hub-panel: se emite cuando el panel deja de estar activo. |
removed | EventEmitter<PanelComponent> | hub-panel: se emite cuando el panel se elimina mediante el botón ✕ o la tecla Delete. |
Templates
Hazlo tuyo — 3 plantillas para proyectar tu propio marcado.
| Nombre | Descripción | Ejemplo |
|---|---|---|
hubPanelHeading | Marca un <ng-template> dentro de un hub-panel como la cabecera personalizada de ese panel (enlace de la tira en tabs/pills, botón de despliegue en accordion), reemplazando el input de cabecera de texto plano. | <hub-panel>
<ng-template hubPanelHeading>
<i class="fa-solid fa-gear"></i> Settings <span class="badge text-bg-primary">3</span>
</ng-template>
Panel content
</hub-panel> |
hubPanelHeader / hubPanelFooter | Marca un elemento dentro de un hub-panel como banda de cabecera/pie de contenido del panel. Se renderiza en todas las vistas (tabs, pills, accordion, card), distinto de hubPanelHeading. | <hub-panel>
<div hubPanelHeader>Card title</div>
Card content
<div hubPanelFooter>Actions</div>
</hub-panel> |
type="card" | La visualización en tarjeta sin cromo: sin tira de navegación, todos los paneles siempre visibles. Un hub-panel también puede usarse de forma independiente, fuera de cualquier hub-panels, donde se renderiza como tarjeta. | <hub-panels type="card">
<hub-panel>…</hub-panel>
<hub-panel>…</hub-panel>
</hub-panels> |
Variables CSS
Personaliza cada detalle con 36 variables CSS. Sobrescríbelas en :root o acótalas a un contenedor.
Disposición y bordes
Estructura general del contenedor: dirección de la tira, padding del contenido y los tokens de borde compartidos.
| Variable | Por defecto | Tipo | Descripción |
|---|---|---|---|
--hub-panels-flex-direction | row | string | Dirección de la tira de cabeceras respecto al contenido. rowrow-reverse |
--hub-panels-border-width | 1px | length | Grosor del borde usado por la tira de tabs y la tab activa. 02px |
--hub-panels-border-color | #dee2e6 | color | Color del borde de la tira de tabs y del contenido. #ced4davar(--bs-border-color) |
--hub-panels-border-radius | 0.375rem | length | Radio de las esquinas de las cabeceras de tab y del contenido. 00.5rem |
--hub-panels-content-bg | #fff | color | Fondo del área de contenido. transparent#f8f9fa |
--hub-panels-header-bg | var(--hub-panels-content-bg) | color | Fondo del área de la tira de tabs/pills detrás de las cabeceras inactivas y las zonas separadoras. #f8f9favar(--bs-tertiary-bg) |
--hub-panels-content-box-shadow | none | shadow | Sombra de caja aplicada al contenedor del área de contenido. none0 0.5rem 1rem rgba(0,0,0,.08) |
--hub-panels-content-padding-x | 1rem | length | Padding horizontal del área de contenido. 0.75rem1.5rem |
--hub-panels-content-padding-y | 1rem | length | Padding vertical del área de contenido. 0.75rem1.5rem |
Cabeceras de tab
Tipografía, espaciado y estados de color de las cabeceras de tab/pill individuales.
| Variable | Por defecto | Tipo | Descripción |
|---|---|---|---|
--hub-panels-tab-font-weight | 500 | number | Grosor de la fuente de la etiqueta de la cabecera. 400600 |
--hub-panels-tab-padding-x | 1rem | length | Padding horizontal dentro de una cabecera. 0.75rem1.25rem |
--hub-panels-tab-padding-y | 0.5rem | length | Padding vertical dentro de una cabecera. 0.375rem0.75rem |
--hub-panels-tab-color | #212529 | color | Color de texto de una cabecera inactiva. #495057var(--bs-body-color) |
--hub-panels-tab-bg | transparent | color | Fondo de una cabecera inactiva; déjalo transparente para que se vea --hub-panels-header-bg. transparent#f8f9fa |
--hub-panels-tab-color-active | #0d6efd | color | Color de texto de la cabecera activa. var(--bs-primary)#0b5ed7 |
--hub-panels-tab-bg-active | #fff | color | Fondo de la cabecera activa; por defecto es la superficie del contenido para que la tab activa se funda con el panel. var(--bs-primary)var(--hub-panels-content-bg) |
--hub-panels-tab-bg-hover | #f8f9fa | color | Fondo de una cabecera al pasar el cursor. #e9eceftransparent |
--hub-panels-tab-border-color-active | #0d6efd | color | Color del borde de la tab activa. var(--bs-primary)#0b5ed7 |
--hub-panels-tab-active-shadow | 0 -0.25rem 0.5rem rgba(0, 0, 0, 0.06) | shadow | Sombra de elevación usada por la tab activa en la vista de tabs con caja horizontal. none0 -0.25rem 0.75rem rgba(0,0,0,.12) |
--hub-panels-tab-active-shadow-vertical | -0.25rem 0 0.5rem rgba(0, 0, 0, 0.06) | shadow | Sombra de elevación usada por la tab activa en la vista de tabs con caja vertical. none-0.25rem 0 0.75rem rgba(0,0,0,.12) |
--hub-panels-tab-focus-ring-color | rgba(13, 110, 253, 0.25) | color | Color del anillo de foco para el foco por teclado. rgba(13,110,253,.4) |
Pills
Tokens específicos de la visualización de pills.
| Variable | Por defecto | Tipo | Descripción |
|---|---|---|---|
--hub-panels-pill-border-radius | 50rem | length | Radio de las esquinas de las cabeceras de pill. 0.5rem999px |
--hub-panels-pill-bg-active | #0d6efd | color | Fondo de la pill activa. var(--bs-primary)#198754 |
--hub-panels-pill-color-active | #fff | color | Color de texto de la pill activa. #fff#000 |
--hub-panels-pill-gap | 0.5rem | length | Espacio entre las cabeceras de pill. 0.25rem0.75rem |
--hub-panels-pill-content-border-width | 0 | length | Grosor del borde de la tarjeta de contenido de las pills; ajústalo al grosor de borde compartido para restaurar un panel con borde. 01px |
--hub-panels-nav-content-gap | 1rem | length | Espacio entre la tira de pills y la tarjeta de contenido (espacio en línea cuando es vertical). 0.75rem1.5rem |
Selección múltiple
Disposición de la vista múltiple basada en bloques cuando los estilos de tabs/pills permiten varias cabeceras activas a la vez.
| Variable | Por defecto | Tipo | Descripción |
|---|---|---|---|
--hub-panels-pane-min-width | 16rem | length | Anchura mínima de cada panel abierto antes de que el área de contenido se desplace horizontalmente. 12rem20rem |
--hub-panels-pane-min-height | 8rem | length | Altura mínima de cada panel abierto en la disposición vertical. 6rem12rem |
--hub-panels-pane-gap | 0 | length | Espacio entre los bloques de varios paneles. 01rem |
Vista de accordion
Tokens para la visualización de accordion. Cada uno recurre a la variable --hub-accordion-* correspondiente para compatibilidad con los temas.
| Variable | Por defecto | Tipo | Descripción |
|---|---|---|---|
--hub-panels-accordion-active-color | #0c63e4 | color | Color de texto de una cabecera de accordion expandida. var(--bs-primary) |
--hub-panels-accordion-active-bg | #e7f1ff | color | Fondo de una cabecera de accordion expandida. var(--bs-primary-bg-subtle) |
--hub-panels-accordion-btn-padding-x | 1.25rem | length | Padding horizontal del botón de despliegue. 1rem1.5rem |
--hub-panels-accordion-btn-padding-y | 1rem | length | Padding vertical del botón de despliegue. 0.75rem1.25rem |
--hub-panels-accordion-btn-icon-transform | rotate(-180deg) | string | Transformación aplicada al chevron cuando está expandido. rotate(180deg)scaleY(-1) |
--hub-panels-accordion-collapse-transition-duration | 0.25s | transition | Duración de la animación de expansión/colapso. 0.2s0.35s |
Estilos y theming
Todavía no hay ejemplos de estilos documentados. Esta sección incluirá recetas de personalización y ejemplos de theming.