Composant Tabs, Pills et Accordion Angular | ng-hub-ui-panels
Composant de panneaux de contenu Angular qui se rend sous forme de tabs, pills ou accordion, avec routing, formulaires réactifs, navigation au clavier et variables CSS.
Styles
Mixins et styles
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 | Paramètres | Description |
|---|---|---|
| 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
Personnalisez chaque pixel avec 149 variables CSS. Remplacez-les au niveau de :root ou limitez-les à un conteneur.
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 | Par défaut | Type | Description |
|---|---|---|---|
--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 | Par défaut | Type | Description |
|---|---|---|---|
--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 | Arrière-plan d'un en-tête d'accordion déployé. |
--hub-panels-accordion-active-color | var(--hub-accordion-active-color, var(--hub-panels-accent-emphasis)) | color | Couleur du texte d'un en-tête d'accordion déployé. |
--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 | Transformation appliquée au chevron lorsqu'il est déployé. |
--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 | Rembourrage horizontal du bouton de divulgation. |
--hub-panels-accordion-btn-padding-y | var(--hub-accordion-btn-padding-y, var(--hub-ref-space-3, 1rem)) | length | Rembourrage vertical du bouton de divulgation. |
--hub-panels-accordion-collapse-transition-duration | var(--hub-accordion-collapse-transition-duration, 0.25s) | transition | Durée de l'animation de déploiement/repli. |
--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 | Couleur de la bordure de la bande d'onglets et du contenu. |
--hub-panels-border-radius | var(--hub-container-border-radius, var(--hub-ref-radius-md, 0.375rem)) | length | Rayon des coins des en-têtes d'onglets et du contenu. |
--hub-panels-border-width | var(--hub-container-border-width, var(--hub-ref-border-width, 1px)) | length | Largeur de bordure utilisée par la bande d'onglets et l'onglet actif. |
--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 | Arrière-plan de la zone de contenu. |
--hub-panels-content-box-shadow | none | shadow | Ombre portée appliquée au conteneur de la zone de contenu. |
--hub-panels-content-padding-x | var(--hub-container-padding-x, var(--hub-ref-space-3, 1rem)) | length | Rembourrage horizontal de la zone de contenu. |
--hub-panels-content-padding-y | var(--hub-container-padding-y, var(--hub-ref-space-3, 1rem)) | length | Rembourrage vertical de la zone de contenu. |
--hub-panels-flex-direction | row | string | Direction de la bande d'en-tête par rapport au contenu. |
--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 | Arrière-plan de la zone de la bande tabs/pills derrière les en-têtes inactifs et les zones d'espacement. |
--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 | Espace entre la bande des pills et la carte de contenu (espace en ligne en mode 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 | Espace entre les blocs de panneaux multiples. |
--hub-panels-pane-min-height | 8rem | length | Hauteur minimale de chaque volet ouvert dans la mise en page verticale. |
--hub-panels-pane-min-width | 16rem | length | Largeur minimale de chaque volet ouvert avant que la zone de contenu ne défile horizontalement. |
--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 | Arrière-plan du pill actif. |
--hub-panels-pill-border-radius | var(--hub-ref-radius-pill, 50rem) | length | Rayon des coins des en-têtes pill. |
--hub-panels-pill-color-active | var(--hub-panels-accent-on) | color | Couleur du texte du pill actif. |
--hub-panels-pill-content-border-width | 0 | length | Largeur de bordure de la carte de contenu des pills ; réglez-la sur la largeur de bordure partagée pour restaurer un volet bordé. |
--hub-panels-pill-gap | var(--hub-ref-space-2, 0.5rem) | length | Espace entre les en-têtes 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 | Ombre d'élévation utilisée par l'onglet actif dans la vue tabs encadrés horizontale. |
--hub-panels-tab-active-shadow-vertical | -0.25rem 0 0.5rem rgba(0, 0, 0, 0.06) | shadow | Ombre d'élévation utilisée par l'onglet actif dans la vue tabs encadrés verticale. |
--hub-panels-tab-bg | transparent | color | Arrière-plan d'un en-tête inactif ; laissez-le transparent pour laisser apparaître `--hub-panels-header-bg`. |
--hub-panels-tab-bg-active | var(--hub-panels-nav-link-active-bg) | color | Arrière-plan de l'en-tête actif ; par défaut la surface du contenu, afin que l'onglet actif fusionne avec le panneau. |
--hub-panels-tab-bg-disabled | transparent | color | Disabled tab background |
--hub-panels-tab-bg-hover | var(--hub-ref-surface-2, #f8f9fa) | color | Arrière-plan d'un en-tête au survol. |
--hub-panels-tab-border-color | transparent | color | Tab border color |
--hub-panels-tab-border-color-active | var(--hub-panels-accent) | color | Couleur de la bordure de l'onglet actif. |
--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 | Couleur du texte d'un en-tête inactif. |
--hub-panels-tab-color-active | var(--hub-panels-nav-link-active-color) | color | Couleur du texte de l'en-tête actif. |
--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 | Couleur de l'anneau de focus pour le focus clavier. |
--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 | Graisse de police du libellé de l'en-tête. |
--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 | Rembourrage horizontal à l'intérieur d'un en-tête. |
--hub-panels-tab-padding-y | var(--hub-panels-nav-link-padding-y) | length | Rembourrage vertical à l'intérieur d'un en-tête. |
--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> |