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.
Estilos
Mixins y estilos
Override the most useful `--hub-panels-*` 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 their defaults. For any token not exposed here, set the `--hub-panels-*` custom property directly — this mixin is sugar for the common knobs, not a replacement for the full token surface.
Theming with hub-panels-theme
The active tab follows the themed accent.
Switch panels with a click or the arrow keys.
The pane surface picks up the themed radius.
| Mixin | Parámetros | Descripción |
|---|---|---|
| Theming | ||
hub-panels-theme() | $accent--hub-panels-accent$border-color--hub-panels-border-color$border-radius--hub-panels-border-radius$border-width--hub-panels-border-width$content-bg--hub-panels-content-bg$content-padding-x--hub-panels-content-padding-x$content-padding-y--hub-panels-content-padding-y$tab-bg-active--hub-panels-tab-bg-active$tab-color-active--hub-panels-tab-color-active$tab-font-size--hub-panels-tab-font-size$tab-padding-x--hub-panels-tab-padding-x$tab-padding-y--hub-panels-tab-padding-y$nav-gap--hub-panels-nav-gap | One-call token theming for `<hub-panels>` |
Variables CSS
Personaliza cada detalle con 149 variables CSS. Sobrescríbelas en :root o acótalas a un contenedor.
Accordion (legacy bridge)
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-accordion-active-bg | var(--hub-sys-color-primary-subtle, #e7f1ff) | color | Active/expanded header background color |
--hub-accordion-active-color | var(--hub-sys-color-primary, #0d6efd) | color | Active/expanded header text color |
--hub-accordion-bg | var(--hub-sys-surface-page, #fff) | color | Panel background color |
--hub-accordion-body-padding-x | 1.25rem | length | Horizontal body padding |
--hub-accordion-body-padding-y | var(--hub-ref-space-3, 1rem) | length | Vertical body padding |
--hub-accordion-border-color | var(--hub-sys-border-color-default, rgba(0, 0, 0, 0.125)) | color | Panel border color |
--hub-accordion-border-radius | var(--hub-ref-radius-sm, 0.25rem) | length | Panel border radius |
--hub-accordion-border-width | var(--hub-ref-border-width, 1px) | length | Panel border width |
--hub-accordion-btn-bg | var(--hub-sys-surface-page, #fff) | color | Header button background |
--hub-accordion-btn-color | var(--hub-sys-text-primary, #212529) | color | Header button text color |
--hub-accordion-btn-focus-box-shadow | 0 0 0 var(--hub-sys-focus-ring-width, 0.25rem) var(--hub-sys-focus-ring-color, rgba(13, 110, 253, 0.25)) | shadow | Focus ring shadow |
--hub-accordion-btn-icon-mask | url("data:image/svg+xml,…") | url | Chevron icon mask (down by default) |
--hub-accordion-btn-icon-transform | rotate(-180deg) | string | Expanded state icon transform (up direction) |
--hub-accordion-btn-icon-transition | transform 0.2s ease-in-out | transition | Icon transition |
--hub-accordion-btn-icon-width | 1.25rem | length | Icon size |
--hub-accordion-btn-padding-x | 1.25rem | length | Header horizontal padding |
--hub-accordion-btn-padding-y | var(--hub-ref-space-3, 1rem) | length | Header vertical padding |
--hub-accordion-collapse-transition-duration | 0.25s | transition | Collapse/expand transition duration |
--hub-accordion-collapse-transition-easing | cubic-bezier(0.4, 0, 0.2, 1) | transition | Collapse/expand transition easing |
--hub-accordion-color | var(--hub-sys-text-primary, #212529) | color | Panel text color |
--hub-accordion-icon-active-color | var(--hub-accordion-active-color, var(--hub-sys-color-primary, #0d6efd)) | color | Expanded icon color |
--hub-accordion-icon-color | var(--hub-accordion-btn-color, var(--hub-sys-text-primary, #212529)) | color | Collapsed icon color |
--hub-accordion-inner-border-radius | calc(var(--hub-accordion-border-radius, var(--hub-ref-radius-sm, 0.25rem)) - var(--hub-accordion-border-width, var(--hub-ref-border-width, 1px))) | length | Inner border radius |
--hub-accordion-transition | color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease | transition | Header visual transition |
Panels
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-panels-accent | var(--hub-sys-color-primary, #0d6efd) | color | Strip semantic accent — re-based per variant; drives every coloured affordance |
--hub-panels-accent-emphasis | color-mix(in oklch, var(--hub-panels-accent) 80%, var(--hub-sys-color-ink, #212529)) | color | Strip accent emphasis role (hover/active text) |
--hub-panels-accent-subtle | color-mix(in oklch, var(--hub-panels-accent) 12%, var(--hub-sys-surface-page, #ffffff)) | color | Strip accent subtle role (active accordion background) |
--hub-panels-accordion-active-bg | var(--hub-accordion-active-bg, var(--hub-panels-accent-subtle)) | color | Fondo de una cabecera de accordion expandida. |
--hub-panels-accordion-active-color | var(--hub-accordion-active-color, var(--hub-panels-accent-emphasis)) | color | Color de texto de una cabecera de accordion expandida. |
--hub-panels-accordion-bg | var(--hub-accordion-bg, var(--hub-sys-surface-page, #fff)) | color | Accordion view background |
--hub-panels-accordion-body-padding-x | var(--hub-accordion-body-padding-x, 1.25rem) | length | Accordion body horizontal padding |
--hub-panels-accordion-body-padding-y | var(--hub-accordion-body-padding-y, var(--hub-ref-space-3, 1rem)) | length | Accordion body vertical padding |
--hub-panels-accordion-border-color | var(--hub-accordion-border-color, var(--hub-sys-border-color-default, #dee2e6)) | color | Accordion border color |
--hub-panels-accordion-border-radius | var(--hub-accordion-border-radius, var(--hub-ref-radius-sm, 0.25rem)) | length | Accordion corner radius |
--hub-panels-accordion-border-width | var(--hub-accordion-border-width, var(--hub-ref-border-width, 1px)) | length | Accordion border width |
--hub-panels-accordion-btn-bg | var(--hub-accordion-btn-bg, var(--hub-sys-surface-page, #fff)) | color | Accordion header button background |
--hub-panels-accordion-btn-color | var(--hub-accordion-btn-color, var(--hub-sys-text-primary, #212529)) | color | Accordion header button text color |
--hub-panels-accordion-btn-focus-box-shadow | var(--hub-accordion-btn-focus-box-shadow, 0 0 0 var(--hub-sys-focus-ring-width, 0.25rem) var(--hub-sys-focus-ring-color, rgba(13, 110, 253, 0.25))) | shadow | Accordion header focus ring shadow |
--hub-panels-accordion-btn-icon-mask | var(--hub-accordion-btn-icon-mask, url("data:image/svg+xml | url | Accordion chevron icon mask |
--hub-panels-accordion-btn-icon-transform | var(--hub-accordion-btn-icon-transform, rotate(-180deg)) | string | Transformación aplicada al chevron cuando está expandido. |
--hub-panels-accordion-btn-icon-transition | var(--hub-accordion-btn-icon-transition, transform 0.2s ease-in-out) | transition | Accordion chevron transition |
--hub-panels-accordion-btn-icon-width | var(--hub-accordion-btn-icon-width, 1.25rem) | length | Accordion chevron icon size |
--hub-panels-accordion-btn-padding-x | var(--hub-accordion-btn-padding-x, 1.25rem) | length | Padding horizontal del botón de despliegue. |
--hub-panels-accordion-btn-padding-y | var(--hub-accordion-btn-padding-y, var(--hub-ref-space-3, 1rem)) | length | Padding vertical del botón de despliegue. |
--hub-panels-accordion-collapse-transition-duration | var(--hub-accordion-collapse-transition-duration, 0.25s) | transition | Duración de la animación de expansión/colapso. |
--hub-panels-accordion-collapse-transition-easing | var(--hub-accordion-collapse-transition-easing, cubic-bezier(0.4, 0, 0.2, 1)) | transition | Accordion collapse animation easing |
--hub-panels-accordion-color | var(--hub-accordion-color, var(--hub-sys-text-primary, #212529)) | color | Accordion view text color |
--hub-panels-accordion-icon-active-color | var(--hub-accordion-icon-active-color, var(--hub-panels-accordion-active-color)) | color | Accordion active chevron color |
--hub-panels-accordion-icon-color | var(--hub-accordion-icon-color, var(--hub-panels-accordion-btn-color)) | color | Accordion chevron icon color |
--hub-panels-accordion-inner-border-radius | var(--hub-accordion-inner-border-radius, calc(var(--hub-panels-accordion-border-radius) - var(--hub-panels-accordion-border-width))) | length | Accordion inner corner radius |
--hub-panels-accordion-toggle-gutter | calc(var(--hub-panels-accordion-btn-icon-width) + var(--hub-panels-tab-gap)) | string | Space the trailing chevron reserves at the row.s end — whatever sits last in the header (heading or actions) keeps clear of the glyph; forced to 0px when togglePosition places the chevron at the start |
--hub-panels-accordion-transition | var(--hub-accordion-transition, color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease) | transition | Accordion header visual transition |
--hub-panels-alert-accent | var(--hub-sys-border-color-default, #dee2e6) | color | Alert accent stripe color |
--hub-panels-alert-accent-width | 0.25rem | color | Alert accent stripe width |
--hub-panels-alert-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | Alert panel background |
--hub-panels-alert-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Alert panel border color |
--hub-panels-alert-border-radius | var(--hub-ref-radius-md, 0.375rem) | length | Alert panel corner radius |
--hub-panels-alert-color | var(--hub-sys-text-primary, #212529) | color | Alert panel text color |
--hub-panels-alert-content-align | flex-start | string | Alert body content cross-axis alignment (default top) |
--hub-panels-alert-content-direction | row | string | Alert body content flex direction (default row) |
--hub-panels-alert-content-gap | var(--hub-sys-gap-2, 0.5rem) | length | Gap between alert body content items |
--hub-panels-alert-content-justify | flex-start | string | Alert body content main-axis justification |
--hub-panels-alert-padding-x | var(--hub-ref-space-4, 1.5rem) | length | Alert panel horizontal padding |
--hub-panels-alert-padding-y | var(--hub-ref-space-3, 1rem) | length | Alert panel vertical padding |
--hub-panels-backward-btn-bg | url("data:image/svg+xml,…") | url | Strip backward scroll button icon |
--hub-panels-border-color | var(--hub-container-border-color, var(--hub-sys-border-color-default, #dee2e6)) | color | Color del borde de la tira de tabs y del contenido. |
--hub-panels-border-radius | var(--hub-container-border-radius, var(--hub-ref-radius-md, 0.375rem)) | length | Radio de las esquinas de las cabeceras de tab y del contenido. |
--hub-panels-border-width | var(--hub-container-border-width, var(--hub-ref-border-width, 1px)) | length | Grosor del borde usado por la tira de tabs y la tab activa. |
--hub-panels-body-gap | 0 | length | Gap between stacked children when the card body is a flex column (fill); no-op otherwise |
--hub-panels-card-accent | var(--hub-sys-border-color-default, #dee2e6) | color | Local accent slot for the semantic card tint ([variant]); set inline by the component |
--hub-panels-card-bg | var(--hub-sys-surface-page, #fff) | color | Card panel background |
--hub-panels-card-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Card panel border color |
--hub-panels-card-border-radius | var(--hub-ref-radius-md, 0.375rem) | length | Card panel corner radius |
--hub-panels-card-border-style | solid | border | Card panel border style (e.g. dashed for an empty-state card) |
--hub-panels-card-border-width | var(--hub-ref-border-width, 1px) | length | Card panel border width |
--hub-panels-card-box-shadow | var(--hub-sys-shadow-sm, 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)) | shadow | Card panel drop shadow |
--hub-panels-card-color | var(--hub-sys-text-primary, #212529) | color | Card panel text color |
--hub-panels-card-gap | var(--hub-ref-space-3, 1rem) | length | Gap between stacked cards |
--hub-panels-card-padding-x | var(--hub-ref-space-4, 1.5rem) | length | Card body horizontal padding |
--hub-panels-card-padding-y | var(--hub-ref-space-3, 1rem) | length | Card body vertical padding |
--hub-panels-content-bg | var(--hub-container-bg, var(--hub-sys-surface-page, #fff)) | color | Fondo del área de contenido. |
--hub-panels-content-box-shadow | none | shadow | Sombra de caja aplicada al contenedor del área de contenido. |
--hub-panels-content-padding-x | var(--hub-container-padding-x, var(--hub-ref-space-3, 1rem)) | length | Padding horizontal del área de contenido. |
--hub-panels-content-padding-y | var(--hub-container-padding-y, var(--hub-ref-space-3, 1rem)) | length | Padding vertical del área de contenido. |
--hub-panels-flex-direction | row | string | Dirección de la tira de cabeceras respecto al contenido. |
--hub-panels-forward-btn-bg | url("data:image/svg+xml,…") | url | Strip forward scroll button icon |
--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. |
--hub-panels-nav-btn-height | 1.5rem | length | Scroll nav button height |
--hub-panels-nav-btn-width | 1.5rem | length | Scroll nav button width |
--hub-panels-nav-content-gap | var(--hub-ref-space-2, 0.5rem) | length | Espacio entre la tira de pills y la tarjeta de contenido (espacio en línea cuando es vertical). |
--hub-panels-nav-gap | 0 | length | Gap between nav items |
--hub-panels-nav-link-active-bg | var(--hub-panels-content-bg) | color | Active nav link background |
--hub-panels-nav-link-active-color | var(--hub-panels-accent) | color | Active nav link text color |
--hub-panels-nav-link-color | var(--hub-sys-text-primary, #212529) | color | Nav link text color |
--hub-panels-nav-link-disabled-color | var(--hub-sys-text-muted, #6c757d) | color | Disabled nav link text color |
--hub-panels-nav-link-hover-color | var(--hub-panels-accent-emphasis) | color | Nav link hover text color |
--hub-panels-nav-link-padding-x | var(--hub-ref-space-3, 1rem) | length | Nav link horizontal padding |
--hub-panels-nav-link-padding-y | var(--hub-ref-space-2, 0.5rem) | length | Nav link vertical padding |
--hub-panels-pane-gap | 0 | length | Espacio entre los bloques de varios paneles. |
--hub-panels-pane-min-height | 8rem | length | Altura mínima de cada panel abierto en la disposición vertical. |
--hub-panels-pane-min-width | 16rem | length | Anchura mínima de cada panel abierto antes de que el área de contenido se desplace horizontalmente. |
--hub-panels-panel-footer-content-justify | flex-end | string | Footer band content distribution (justify-content; the other band hooks are shared with the header) |
--hub-panels-panel-header-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | Panel header/footer band background |
--hub-panels-panel-header-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Panel header/footer band border color |
--hub-panels-panel-header-border-width | var(--hub-ref-border-width, 1px) | length | Panel header/footer band border width |
--hub-panels-panel-header-color | var(--hub-sys-text-primary, #212529) | color | Panel header/footer band text color |
--hub-panels-panel-header-content-align | center | string | Header/footer band cross-axis alignment (align-items) |
--hub-panels-panel-header-content-direction | row | string | Header/footer band flex direction |
--hub-panels-panel-header-content-gap | var(--hub-sys-gap-3, 0.75rem) | length | Header/footer band content gap |
--hub-panels-panel-header-content-justify | flex-start | string | Header band content distribution (justify-content) |
--hub-panels-panel-header-font-weight | var(--hub-ref-font-weight-semibold, 600) | number | Panel header/footer band font weight |
--hub-panels-panel-header-padding-x | var(--hub-ref-space-4, 1.5rem) | length | Panel header/footer horizontal padding |
--hub-panels-panel-header-padding-y | var(--hub-ref-space-3, 1rem) | length | Panel header/footer vertical padding |
--hub-panels-pill-bg-active | var(--hub-panels-accent) | color | Fondo de la pill activa. |
--hub-panels-pill-border-radius | var(--hub-ref-radius-pill, 50rem) | length | Radio de las esquinas de las cabeceras de pill. |
--hub-panels-pill-color-active | var(--hub-panels-accent-on) | color | Color de texto de la pill activa. |
--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. |
--hub-panels-pill-gap | var(--hub-ref-space-2, 0.5rem) | length | Espacio entre las cabeceras de pill. |
--hub-panels-remove-btn-opacity | 0.6 | number | Remove button resting opacity |
--hub-panels-remove-btn-opacity-hover | 1 | number | Remove button hover opacity |
--hub-panels-strip-margin-top | var(--hub-ref-space-2, 0.5rem) | length | Tab strip top margin |
--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. |
--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. |
--hub-panels-tab-bg | transparent | color | Fondo de una cabecera inactiva; déjalo transparente para que se vea --hub-panels-header-bg. |
--hub-panels-tab-bg-active | var(--hub-panels-nav-link-active-bg) | color | Fondo de la cabecera activa; por defecto es la superficie del contenido para que la tab activa se funda con el panel. |
--hub-panels-tab-bg-disabled | transparent | color | Disabled tab background |
--hub-panels-tab-bg-hover | var(--hub-ref-surface-2, #f8f9fa) | color | Fondo de una cabecera al pasar el cursor. |
--hub-panels-tab-border-color | transparent | color | Tab border color |
--hub-panels-tab-border-color-active | var(--hub-panels-accent) | color | Color del borde de la tab activa. |
--hub-panels-tab-border-radius | var(--hub-panels-border-radius) | length | Tab corner radius |
--hub-panels-tab-border-end-radius | 0 | length | Trailing-edge corner radius of the active tab |
--hub-panels-tab-border-style | solid | border | Tab border style |
--hub-panels-tab-border-width | var(--hub-panels-border-width) | length | Tab border width |
--hub-panels-tab-color | var(--hub-panels-nav-link-color) | color | Color de texto de una cabecera inactiva. |
--hub-panels-tab-color-active | var(--hub-panels-nav-link-active-color) | color | Color de texto de la cabecera activa. |
--hub-panels-tab-color-disabled | var(--hub-panels-nav-link-disabled-color) | color | Disabled tab text color |
--hub-panels-tab-color-hover | var(--hub-panels-nav-link-hover-color) | color | Tab hover text color |
--hub-panels-tab-focus-ring-color | var(--hub-sys-focus-ring-color, rgba(13, 110, 253, 0.25)) | color | Color del anillo de foco para el foco por teclado. |
--hub-panels-tab-focus-ring-width | var(--hub-sys-focus-ring-width, 0.25rem) | length | Tab focus ring width |
--hub-panels-tab-font-family | var(--hub-container-font-family, var(--hub-ref-font-family-base)) | string | Tab label font family (inherits container) |
--hub-panels-tab-font-size | var(--hub-container-font-size, var(--hub-ref-font-size-base, 1rem)) | length | Tab label font size (inherits container) |
--hub-panels-tab-font-weight | var(--hub-ref-font-weight-medium, 500) | number | Grosor de la fuente de la etiqueta de la cabecera. |
--hub-panels-tab-gap | var(--hub-ref-space-2, 0.5rem) | length | Gap inside tab content |
--hub-panels-tab-line-height | var(--hub-ref-line-height-base, 1.5) | number | Tab label line height |
--hub-panels-tab-padding-x | var(--hub-panels-nav-link-padding-x) | length | Padding horizontal dentro de una cabecera. |
--hub-panels-tab-padding-y | var(--hub-panels-nav-link-padding-y) | length | Padding vertical dentro de una cabecera. |
--hub-panels-tab-transition | var(--hub-sys-transition-base, all 0.2s ease-in-out) | transition | Tab state transition |
--hub-tabs-gap | 0 | length | Gap between tabs in the <hub-tab-nav> strip |
--hub-tabs-indicator-color | var(--hub-panels-accent, var(--hub-sys-color-primary, #0d6efd)) | color | Active-tab underline / active-pill fill colour for <hub-tab-nav> |