Angular Tabs-, Pills- & Accordion-Komponente | ng-hub-ui-panels
Angular Content-Panels-Komponente, die sich als Tabs, Pills oder Accordion rendert, mit Routing, Reactive Forms, Tastaturnavigation und CSS-Variablen.
Stile
Mixins und Stile
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 | Parameter | Beschreibung |
|---|---|---|
| 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-Variablen
Gestalte jedes Pixel mit 149 CSS-Variablen. Überschreibe sie auf :root oder begrenze sie auf einen 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 | Standard | Typ | Beschreibung |
|---|---|---|---|
--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 | Standard | Typ | Beschreibung |
|---|---|---|---|
--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 | Hintergrund eines ausgeklappten accordion-Headers. |
--hub-panels-accordion-active-color | var(--hub-accordion-active-color, var(--hub-panels-accent-emphasis)) | color | Schriftfarbe eines ausgeklappten accordion-Headers. |
--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, das auf das Chevron im ausgeklappten Zustand angewendet wird. |
--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 | Horizontaler Innenabstand des Aufklapp-Buttons. |
--hub-panels-accordion-btn-padding-y | var(--hub-accordion-btn-padding-y, var(--hub-ref-space-3, 1rem)) | length | Vertikaler Innenabstand des Aufklapp-Buttons. |
--hub-panels-accordion-collapse-transition-duration | var(--hub-accordion-collapse-transition-duration, 0.25s) | transition | Dauer der Aufklapp-/Zuklapp-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 | Rahmenfarbe des Tabs-Streifens und des Inhalts. |
--hub-panels-border-radius | var(--hub-container-border-radius, var(--hub-ref-radius-md, 0.375rem)) | length | Eckenradius der Tab-Header und des Inhalts. |
--hub-panels-border-width | var(--hub-container-border-width, var(--hub-ref-border-width, 1px)) | length | Rahmenbreite, die vom Tabs-Streifen und vom aktiven Tab verwendet wird. |
--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 | Hintergrund des Inhaltsbereichs. |
--hub-panels-content-box-shadow | none | shadow | Schlagschatten, der auf den Wrapper des Inhaltsbereichs angewendet wird. |
--hub-panels-content-padding-x | var(--hub-container-padding-x, var(--hub-ref-space-3, 1rem)) | length | Horizontaler Innenabstand des Inhaltsbereichs. |
--hub-panels-content-padding-y | var(--hub-container-padding-y, var(--hub-ref-space-3, 1rem)) | length | Vertikaler Innenabstand des Inhaltsbereichs. |
--hub-panels-flex-direction | row | string | Richtung des Header-Streifens relativ zum Inhalt. |
--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 | Hintergrund des Tabs-/Pills-Streifenbereichs hinter inaktiven Headern und Abstandszonen. |
--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 | Abstand zwischen dem Pills-Streifen und der Inhaltskarte (Inline-Abstand bei vertikaler Ausrichtung). |
--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 | Abstand zwischen mehreren Panel-Blöcken. |
--hub-panels-pane-min-height | 8rem | length | Mindesthöhe jedes geöffneten Bereichs im vertikalen Layout. |
--hub-panels-pane-min-width | 16rem | length | Mindestbreite jedes geöffneten Bereichs, bevor der Inhaltsbereich horizontal scrollt. |
--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 | Hintergrund der aktiven Pill. |
--hub-panels-pill-border-radius | var(--hub-ref-radius-pill, 50rem) | length | Eckenradius der Pill-Header. |
--hub-panels-pill-color-active | var(--hub-panels-accent-on) | color | Schriftfarbe der aktiven Pill. |
--hub-panels-pill-content-border-width | 0 | length | Rahmenbreite der Pills-Inhaltskarte; auf die gemeinsame Rahmenbreite setzen, um einen umrahmten Bereich wiederherzustellen. |
--hub-panels-pill-gap | var(--hub-ref-space-2, 0.5rem) | length | Abstand zwischen Pill-Headern. |
--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 | Erhöhungsschatten, der vom aktiven Tab in der horizontalen Boxed-Tabs-Ansicht verwendet wird. |
--hub-panels-tab-active-shadow-vertical | -0.25rem 0 0.5rem rgba(0, 0, 0, 0.06) | shadow | Erhöhungsschatten, der vom aktiven Tab in der vertikalen Boxed-Tabs-Ansicht verwendet wird. |
--hub-panels-tab-bg | transparent | color | Hintergrund eines inaktiven Headers; transparent lassen, damit --hub-panels-header-bg durchscheint. |
--hub-panels-tab-bg-active | var(--hub-panels-nav-link-active-bg) | color | Hintergrund des aktiven Headers; standardmäßig die Inhaltsoberfläche, damit der aktive Tab mit dem Panel verschmilzt. |
--hub-panels-tab-bg-disabled | transparent | color | Disabled tab background |
--hub-panels-tab-bg-hover | var(--hub-ref-surface-2, #f8f9fa) | color | Hintergrund eines Headers beim Überfahren. |
--hub-panels-tab-border-color | transparent | color | Tab border color |
--hub-panels-tab-border-color-active | var(--hub-panels-accent) | color | Rahmenfarbe des aktiven Tabs. |
--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 | Schriftfarbe eines inaktiven Headers. |
--hub-panels-tab-color-active | var(--hub-panels-nav-link-active-color) | color | Schriftfarbe des aktiven Headers. |
--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 | Farbe des Fokus-Rings für den Tastaturfokus. |
--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 | Schriftstärke des Header-Labels. |
--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 | Horizontaler Innenabstand innerhalb eines Headers. |
--hub-panels-tab-padding-y | var(--hub-panels-nav-link-padding-y) | length | Vertikaler Innenabstand innerhalb eines Headers. |
--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> |