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.
API-Referenz
Hier ist der vollständige Vertrag für panels: alles, was du binden, abhören, projizieren und gestalten kannst, an einem Ort gesammelt. Verdrahte, was du brauchst, und gestalte, was du willst — es ist standalone und Signals-freundlich.
Inputs
Stelle panels mit 20 Inputs ein. Binde sie wie jeden Angular-@Input.
| Name | Typ | Standard | Beschreibung |
|---|---|---|---|
type | 'tabs' | 'pills' | 'accordion' | 'card' | 'tabs' | Visualisierung des Containers: unterstrichene Tabs, abgerundete Pills oder gestapelte Accordion-Panels. |
vertical | boolean | false | Stapelt die Header-Leiste vertikal neben dem Inhalt (Tabs-/Pills-Ansichten). |
justified | boolean | false | Streckt die Header, sodass sie sich die verfügbare Breite gleichmäßig teilen. |
scrollable | boolean | false | Fügt Zurück-/Vorwärts-Scroll-Schaltflächen hinzu, wenn die Header-Leiste überläuft. |
isKeysAllowed | boolean | true | Aktiviert die Tastaturnavigation (Pfeiltasten / Home / End / Delete). |
multiple | boolean | false | Erlaubt, dass mehrere Panels gleichzeitig aktiv sind. In der Accordion-Ansicht werden sie alle aufgeklappt; in den Tabs-/Pills-Ansichten startet jeder aktive Header einen sichtbaren Panel-Block, und die folgenden inaktiven Header bleiben über diesem Block gruppiert, bis der nächste aktive Header einen neuen startet. Der Formularwert wird zu einem Array. |
flush | boolean | false | Accordion-Ansicht: randlose Panels ohne äußere Rahmen oder Eckenradius. |
bindValue | string | undefined | Punktnotationspfad, der auf den Wert jedes Panels angewendet wird, um den ausgelösten Formularwert zu erhalten (z. B. 'meta.key'). |
compareWith | (a: unknown, b: unknown) => boolean | (a, b) => a === b | Gleichheit, die verwendet wird, um Formularwerte mit Panel-Werten abzugleichen. |
heading | string | undefined | hub-panel: Klartext-Header. Wird ignoriert, wenn ein hubPanelHeading-Template angegeben ist. |
appearance | 'card' | 'alert' | 'card' | hub-panel: Darstellung eines eigenständigen Panels – 'card' (Standard) oder ein semantischer 'alert'-Hinweis. In den Tabs-/Pills-/Accordion-Ansichten ignoriert. |
variant | 'primary' | 'success' | 'danger' | 'warning' | 'info' | undefined | hub-panel: semantische Farbe eines Hinweises ('primary' | 'success' | 'danger' | 'warning' | 'info'). Weglassen für einen neutralen Hinweis. |
value | unknown | id | hub-panel: Wert, der beigetragen wird, wenn der Container als Formularsteuerelement verwendet wird. |
active | boolean (model) | false | hub-panel: zwei-Wege-gebundener aktiver/aufgeklappter Zustand. |
disabled | boolean | false | hub-panel: verhindert, dass das Panel aktiviert wird. |
removable | boolean | false | hub-panel: zeigt ein ✕-Element an und ermöglicht das Entfernen mit der Delete-Taste. |
routerLink | string | string[] | undefined | hub-panel: verwandelt das Panel in ein geroutetes Panel, das von einem <router-outlet> unterstützt wird. |
queryParams | Params | undefined | hub-panel: Query-Parameter, die beim Navigieren zu routerLink angehängt werden. |
pathMatch | 'route' | 'full' | 'route' | hub-panel: URL-Vergleich, der verwendet wird, um ein geroutetes Panel als aktiv zu markieren. |
customClass | string | undefined | hub-panel: zusätzliche CSS-Klassen, die sowohl auf das Nav-Element als auch auf den Bereich angewendet werden. |
Outputs
Reagiere darauf, was panels tut — 4 Events, an die du deine Logik anknüpfen kannst.
| Name | Typ | Beschreibung |
|---|---|---|
panelChange | EventEmitter<PanelChangeEvent> | hub-panels: wird ausgelöst, wenn der Benutzer ein anderes Panel aktiviert (öffnet). Liefert { current, prev }. |
selectPanel | EventEmitter<PanelComponent> | hub-panel: wird ausgelöst, wenn das Panel aktiv wird. |
deselectPanel | EventEmitter<PanelComponent> | hub-panel: wird ausgelöst, wenn das Panel nicht mehr aktiv ist. |
removed | EventEmitter<PanelComponent> | hub-panel: wird ausgelöst, wenn das Panel über die ✕-Schaltfläche oder die Delete-Taste entfernt wird. |
Templates
Mach es zu deinem — 3 Template-Slots lassen dich eigenes Markup projizieren.
| Name | Beschreibung | Beispiel |
|---|---|---|
hubPanelHeading | Kennzeichnet ein <ng-template> innerhalb eines hub-panel als benutzerdefinierten Header dieses Panels (Streifen-Link in Tabs/Pills, Aufklapp-Schaltfläche im Accordion) und ersetzt den Klartext-Heading-Input. | <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 | Markiert ein Element innerhalb eines hub-panel als Kopf-/Fußleiste des Panel-Inhalts. Wird in jeder Ansicht (tabs, pills, accordion, card) gerendert, anders als hubPanelHeading. | <hub-panel>
<div hubPanelHeader>Card title</div>
Card content
<div hubPanelFooter>Actions</div>
</hub-panel> |
type="card" | Die schmucklose Karten-Darstellung: keine Navigationsleiste, jedes Panel immer sichtbar. Ein hub-panel kann auch eigenständig außerhalb eines hub-panels verwendet werden und wird dann als Karte gerendert. | <hub-panels type="card">
<hub-panel>…</hub-panel>
<hub-panel>…</hub-panel>
</hub-panels> |
CSS-Variablen
Gestalte jedes Pixel mit 36 CSS-Variablen. Überschreibe sie auf :root oder begrenze sie auf einen Wrapper.
Layout & Rahmen
Gesamtstruktur des Containers: Richtung des Streifens, Inhalts-Innenabstand und die gemeinsamen Rahmen-Tokens.
| Variable | Standard | Typ | Beschreibung |
|---|---|---|---|
--hub-panels-flex-direction | row | string | Richtung des Header-Streifens relativ zum Inhalt. rowrow-reverse |
--hub-panels-border-width | 1px | length | Rahmenbreite, die vom Tabs-Streifen und vom aktiven Tab verwendet wird. 02px |
--hub-panels-border-color | #dee2e6 | color | Rahmenfarbe des Tabs-Streifens und des Inhalts. #ced4davar(--bs-border-color) |
--hub-panels-border-radius | 0.375rem | length | Eckenradius der Tab-Header und des Inhalts. 00.5rem |
--hub-panels-content-bg | #fff | color | Hintergrund des Inhaltsbereichs. transparent#f8f9fa |
--hub-panels-header-bg | var(--hub-panels-content-bg) | color | Hintergrund des Tabs-/Pills-Streifenbereichs hinter inaktiven Headern und Abstandszonen. #f8f9favar(--bs-tertiary-bg) |
--hub-panels-content-box-shadow | none | shadow | Schlagschatten, der auf den Wrapper des Inhaltsbereichs angewendet wird. none0 0.5rem 1rem rgba(0,0,0,.08) |
--hub-panels-content-padding-x | 1rem | length | Horizontaler Innenabstand des Inhaltsbereichs. 0.75rem1.5rem |
--hub-panels-content-padding-y | 1rem | length | Vertikaler Innenabstand des Inhaltsbereichs. 0.75rem1.5rem |
Tab-Header
Typografie, Abstände und Farbzustände der einzelnen Tab-/Pill-Header.
| Variable | Standard | Typ | Beschreibung |
|---|---|---|---|
--hub-panels-tab-font-weight | 500 | number | Schriftstärke des Header-Labels. 400600 |
--hub-panels-tab-padding-x | 1rem | length | Horizontaler Innenabstand innerhalb eines Headers. 0.75rem1.25rem |
--hub-panels-tab-padding-y | 0.5rem | length | Vertikaler Innenabstand innerhalb eines Headers. 0.375rem0.75rem |
--hub-panels-tab-color | #212529 | color | Schriftfarbe eines inaktiven Headers. #495057var(--bs-body-color) |
--hub-panels-tab-bg | transparent | color | Hintergrund eines inaktiven Headers; transparent lassen, damit --hub-panels-header-bg durchscheint. transparent#f8f9fa |
--hub-panels-tab-color-active | #0d6efd | color | Schriftfarbe des aktiven Headers. var(--bs-primary)#0b5ed7 |
--hub-panels-tab-bg-active | #fff | color | Hintergrund des aktiven Headers; standardmäßig die Inhaltsoberfläche, damit der aktive Tab mit dem Panel verschmilzt. var(--bs-primary)var(--hub-panels-content-bg) |
--hub-panels-tab-bg-hover | #f8f9fa | color | Hintergrund eines Headers beim Überfahren. #e9eceftransparent |
--hub-panels-tab-border-color-active | #0d6efd | color | Rahmenfarbe des aktiven Tabs. var(--bs-primary)#0b5ed7 |
--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. 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 | Erhöhungsschatten, der vom aktiven Tab in der vertikalen Boxed-Tabs-Ansicht verwendet wird. none-0.25rem 0 0.75rem rgba(0,0,0,.12) |
--hub-panels-tab-focus-ring-color | rgba(13, 110, 253, 0.25) | color | Farbe des Fokus-Rings für den Tastaturfokus. rgba(13,110,253,.4) |
Pills
Tokens, die spezifisch für die Pills-Darstellung sind.
| Variable | Standard | Typ | Beschreibung |
|---|---|---|---|
--hub-panels-pill-border-radius | 50rem | length | Eckenradius der Pill-Header. 0.5rem999px |
--hub-panels-pill-bg-active | #0d6efd | color | Hintergrund der aktiven Pill. var(--bs-primary)#198754 |
--hub-panels-pill-color-active | #fff | color | Schriftfarbe der aktiven Pill. #fff#000 |
--hub-panels-pill-gap | 0.5rem | length | Abstand zwischen Pill-Headern. 0.25rem0.75rem |
--hub-panels-pill-content-border-width | 0 | length | Rahmenbreite der Pills-Inhaltskarte; auf die gemeinsame Rahmenbreite setzen, um einen umrahmten Bereich wiederherzustellen. 01px |
--hub-panels-nav-content-gap | 1rem | length | Abstand zwischen dem Pills-Streifen und der Inhaltskarte (Inline-Abstand bei vertikaler Ausrichtung). 0.75rem1.5rem |
Mehrfachauswahl
Layout der blockbasierten Mehrfachansicht, wenn die Tabs-/Pills-Stile mehrere aktive Header gleichzeitig zulassen.
| Variable | Standard | Typ | Beschreibung |
|---|---|---|---|
--hub-panels-pane-min-width | 16rem | length | Mindestbreite jedes geöffneten Bereichs, bevor der Inhaltsbereich horizontal scrollt. 12rem20rem |
--hub-panels-pane-min-height | 8rem | length | Mindesthöhe jedes geöffneten Bereichs im vertikalen Layout. 6rem12rem |
--hub-panels-pane-gap | 0 | length | Abstand zwischen mehreren Panel-Blöcken. 01rem |
Accordion-Ansicht
Tokens für die accordion-Darstellung. Jeder greift zur Theme-Kompatibilität auf die entsprechende --hub-accordion-*-Variable zurück.
| Variable | Standard | Typ | Beschreibung |
|---|---|---|---|
--hub-panels-accordion-active-color | #0c63e4 | color | Schriftfarbe eines ausgeklappten accordion-Headers. var(--bs-primary) |
--hub-panels-accordion-active-bg | #e7f1ff | color | Hintergrund eines ausgeklappten accordion-Headers. var(--bs-primary-bg-subtle) |
--hub-panels-accordion-btn-padding-x | 1.25rem | length | Horizontaler Innenabstand des Aufklapp-Buttons. 1rem1.5rem |
--hub-panels-accordion-btn-padding-y | 1rem | length | Vertikaler Innenabstand des Aufklapp-Buttons. 0.75rem1.25rem |
--hub-panels-accordion-btn-icon-transform | rotate(-180deg) | string | Transform, das auf das Chevron im ausgeklappten Zustand angewendet wird. rotate(180deg)scaleY(-1) |
--hub-panels-accordion-collapse-transition-duration | 0.25s | transition | Dauer der Aufklapp-/Zuklapp-Animation. 0.2s0.35s |
Styling und Theming
Es sind noch keine Styling-Beispiele dokumentiert. Dieser Abschnitt wird Anpassungsrezepte und Theming-Beispiele enthalten.