Angular Tabs, Pills & Accordion Component | ng-hub-ui-panels
Angular content-panels component that renders as tabs, pills or an accordion, with routing, reactive forms, keyboard navigation and CSS variables.
Styles
Mixins and 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 | Parameters | 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>` |
CSS variables
Theme every pixel with 149 CSS variables. Override them at :root or scope them to a wrapper.
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 | Default | 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 | Default | 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 | Background of an expanded accordion header. |
--hub-panels-accordion-active-color | var(--hub-accordion-active-color, var(--hub-panels-accent-emphasis)) | color | Text colour of an expanded accordion header. |
--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 | Transform applied to the chevron when expanded. |
--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 | Horizontal padding of the disclosure button. |
--hub-panels-accordion-btn-padding-y | var(--hub-accordion-btn-padding-y, var(--hub-ref-space-3, 1rem)) | length | Vertical padding of the disclosure button. |
--hub-panels-accordion-collapse-transition-duration | var(--hub-accordion-collapse-transition-duration, 0.25s) | transition | Duration of the expand/collapse animation. |
--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 | Border colour of the tabs strip and content. |
--hub-panels-border-radius | var(--hub-container-border-radius, var(--hub-ref-radius-md, 0.375rem)) | length | Corner radius of the tab headers and content. |
--hub-panels-border-width | var(--hub-container-border-width, var(--hub-ref-border-width, 1px)) | length | Border width used by the tabs strip and active tab. |
--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 | Background of the content area. |
--hub-panels-content-box-shadow | none | shadow | Box shadow applied to the content area wrapper. |
--hub-panels-content-padding-x | var(--hub-container-padding-x, var(--hub-ref-space-3, 1rem)) | length | Horizontal padding of the content area. |
--hub-panels-content-padding-y | var(--hub-container-padding-y, var(--hub-ref-space-3, 1rem)) | length | Vertical padding of the content area. |
--hub-panels-flex-direction | row | string | Direction of the header strip relative to the content. |
--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 | Background of the tabs/pills strip area behind inactive headers and spacer zones. |
--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 | Gap between the pills strip and the content card (inline gap when 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 | Gap between multiple panel blocks. |
--hub-panels-pane-min-height | 8rem | length | Minimum height of each open pane in the vertical layout. |
--hub-panels-pane-min-width | 16rem | length | Minimum width of each open pane before the content area scrolls horizontally. |
--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 | Background of the active pill. |
--hub-panels-pill-border-radius | var(--hub-ref-radius-pill, 50rem) | length | Corner radius of pill headers. |
--hub-panels-pill-color-active | var(--hub-panels-accent-on) | color | Text colour of the active pill. |
--hub-panels-pill-content-border-width | 0 | length | Border width of the pills content card; set it to the shared border width to restore a bordered pane. |
--hub-panels-pill-gap | var(--hub-ref-space-2, 0.5rem) | length | Gap between pill headers. |
--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 | Elevation shadow used by the active tab in the horizontal boxed tabs view. |
--hub-panels-tab-active-shadow-vertical | -0.25rem 0 0.5rem rgba(0, 0, 0, 0.06) | shadow | Elevation shadow used by the active tab in the vertical boxed tabs view. |
--hub-panels-tab-bg | transparent | color | Background of an inactive header; leave transparent to let --hub-panels-header-bg show through. |
--hub-panels-tab-bg-active | var(--hub-panels-nav-link-active-bg) | color | Background of the active header; defaults to the content surface so the active tab fuses with the panel. |
--hub-panels-tab-bg-disabled | transparent | color | Disabled tab background |
--hub-panels-tab-bg-hover | var(--hub-ref-surface-2, #f8f9fa) | color | Background of a header on hover. |
--hub-panels-tab-border-color | transparent | color | Tab border color |
--hub-panels-tab-border-color-active | var(--hub-panels-accent) | color | Border colour of the active tab. |
--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 | Text colour of an inactive header. |
--hub-panels-tab-color-active | var(--hub-panels-nav-link-active-color) | color | Text colour of the active header. |
--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 | Focus ring colour for keyboard focus. |
--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 | Font weight of the header label. |
--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 | Horizontal padding inside a header. |
--hub-panels-tab-padding-y | var(--hub-panels-nav-link-padding-y) | length | Vertical padding inside a header. |
--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> |