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 40 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, gestapelte Accordion-Panels oder rahmenlose, stets sichtbare Cards.
`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.
`togglePosition`	`'start' \| 'end'`	`'end'`	Auf <hub-panels> (Accordion-Ansicht): auf welcher Seite der Kopfzeile der Chevron sitzt. „end“ (Standard) folgt der Überschrift, „start“ führt sie an. Nur die visuelle Reihenfolge ändert sich — das DOM bleibt unberührt — und die Abstände sind logisch, sodass „start“ in LTR der linke und in RTL der rechte Rand ist. Den app-weiten Standard setzt HubPanelsConfig.togglePosition.
`variant`	`HubPanelVariant \| string`	`undefined`	hub-panels: semantischer Akzent der Navigationsleiste — der aktive bzw. gehoverte Tab, die aktive Pill und der aktive Accordion-Header folgen ihm. Die eingebauten Werte ('primary' \| 'success' \| 'danger' \| 'warning' \| 'info') nutzen die Töne des Designsystems, es wird aber jeder String akzeptiert: die Leiste liest --hub-sys-color-<variant> aus deiner Anwendung. Standard ist primary.
`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`	`HubPanelVariant \| string`	`undefined`	hub-panel: semantischer Akzent des Panels — er färbt ein alert und tönt eine ganze card (als data-variant gespiegelt). Die eingebauten Werte ('primary' \| 'success' \| 'danger' \| 'warning' \| 'info') nutzen die Töne des Designsystems, es wird aber jeder String akzeptiert: das Panel liest --hub-sys-color-<variant> aus deiner Anwendung. Für ein neutrales Panel weglassen.
`fill`	`boolean`	`false`	Nur Card-Panel: füllt die Höhe des Elternelements und lässt den Body scrollen, sodass ein innerer flex:1/min-height:0-Bereich (z. B. eine Tab-Leiste + Scroll-Bereich) begrenzt ist. Das Elternelement muss eine Flex-Spalte sein.
`standalone`	`boolean (static attribute)`	`false`	Nur Card-Panel, statisches Attribut: nimmt ein loses <hub-panel> aus einer übergeordneten tabs/pills/accordion-Gruppe im selben Template heraus, sodass es als einfache Card gerendert wird, statt als verstecktes Tab eingefangen zu werden.
`id`	`string`	`'hub-panel-<n>'`	hub-panel: Id für die ARIA-Zuordnung zwischen einem Tab und seinem Panel (bzw. einem Accordion-Header und seiner Region). Wird automatisch als hub-panel-<n> erzeugt; setze sie, wenn du stabile Ids brauchst — für einen Deep Link oder ein eigenes aria-controls.
`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.
`removeLabel`	`string`	`'Remove panel'`	hub-panel: zugänglicher Name (aria-label), der für die ✕-Schaltfläche zum Entfernen angekündigt wird; überschreiben Sie ihn, um das Element zu lokalisieren.
`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.
`items`	`HubTabNavItem[]`	`[]`	Die auswählbaren Tabs einer <hub-tab-nav> in Renderreihenfolge. Jedes Element ist ein schlanker { value, label, disabled?, id? }-Deskriptor — die Leiste besitzt keinen Inhalt, daher ist value das, was sie ausgibt, wenn der Tab ausgewählt wird.
`active`	`unknown (model)`	`undefined`	Zwei-Wege-gebundener ausgewählter Wert einer <hub-tab-nav>. Setze ihn, um einen Tab vorauszuwählen, und lies ihn über activeChange zurück; das passende Element ist das value, dessen value diesem entspricht.
`appearance`	`'tabs' \| 'pills'`	`'tabs'`	Visuelles Erscheinungsbild der <hub-tab-nav>-Leiste: klassische unterstrichene 'tabs' (Standard) oder abgerundete 'pills'.
`justified`	`boolean`	`false`	Wenn true, dehnen sich die <hub-tab-nav>-Tabs so aus, dass sie sich die verfügbare Breite gleichmäßig teilen.
`vertical`	`boolean`	`false`	Wenn true, stapelt die <hub-tab-nav>-Leiste ihre Tabs vertikal, anstatt sie in einer Reihe anzuordnen.
`mode`	`HubSidePanelMode`	`'side'`	<hub-side-panel>: 'side' dockt das Panel an und verschmälert den Inhalt; 'over' lässt es ohne Backdrop, Scroll-Sperre oder Fokusfalle über den Inhaltsrand schweben.
`position`	`HubSidePanelPosition`	`'end'`	<hub-side-panel>: logische Inline-Kante des Containers, an der das Panel sitzt – 'end' ist in LTR die rechte und unter dir="rtl" die linke Kante.
`open`	`boolean (model)`	`false`	<hub-side-panel>: bidirektionaler Öffnungszustand. Schließen blendet das Panel aus, ohne seinen projizierten Inhalt zu zerstören, sodass ein Chat oder Formular darin seinen Zustand behält.
`closeOnEscape`	`boolean`	`true`	<hub-side-panel>: ob Escape innerhalb des Panels es schließt. Escape auf der Seite wird nie abgefangen, und ein Steuerelement, das die Taste bereits verarbeitet hat, lässt das Panel offen.
`breakpoint`	`number`	`768`	<hub-side-panel>: Container-Breite in px, unterhalb der ein side-Panel als over dargestellt wird, weil ein angedocktes Panel auf schmalen Bildschirmen den Inhalt zerdrücken würde. 0 hält es bei jeder Breite angedockt.
`autoFocus`	`boolean`	`false`	<hub-side-panel>: ob das Öffnen den Fokus ins Panel verschiebt – auf das erste [autofocus]-Element, sonst das erste fokussierbare, sonst das Panel selbst. Standardmäßig aus.
`role`	`HubSidePanelRole`	`'complementary'`	<hub-side-panel>: Landmark-Rolle – 'complementary' neben dem Hauptinhalt der Seite, 'region', wenn das Panel darin liegt.
`ariaLabel`	`string`	`undefined`	<hub-side-panel>: zugänglicher Name der Landmark. Dies oder ariaLabelledBy setzen.
`ariaLabelledBy`	`string`	`undefined`	<hub-side-panel>: ID des Elements, das die Landmark benennt, typischerweise die Überschrift im Header-Slot.

Outputs

Reagiere darauf, was panels tut — 7 Events, an die du deine Logik anknüpfen kannst.

Name	Typ	Beschreibung
`panelChange`	`OutputEmitterRef<PanelChangeEvent>`	hub-panels: wird ausgelöst, wenn der Benutzer ein anderes Panel aktiviert (öffnet). Liefert { current, prev }.
`selectPanel`	`OutputEmitterRef<HubPanelComponent>`	hub-panel: wird ausgelöst, wenn das Panel aktiv wird.
`deselectPanel`	`OutputEmitterRef<HubPanelComponent>`	hub-panel: wird ausgelöst, wenn das Panel nicht mehr aktiv ist.
`removed`	`OutputEmitterRef<HubPanelComponent>`	hub-panel: wird ausgelöst, wenn das Panel über die ✕-Schaltfläche oder die Delete-Taste entfernt wird.
`activeChange`	`OutputEmitterRef<boolean>`	hub-panel: Change-Hälfte des Zwei-Wege-active-Modells, ausgegeben mit dem neuen aktiven/aufgeklappten Zustand des Panels.
`activeChange`	`OutputEmitterRef<unknown>`	Wird von <hub-tab-nav> ausgegeben, sobald sich der ausgewählte Wert ändert (die Change-Hälfte des Zwei-Wege-active-Modells), und trägt den value des neu ausgewählten Elements.
`openChange`	`OutputEmitterRef<boolean>`	<hub-side-panel>: Änderungshälfte des bidirektionalen open-Modells; wird mit dem neuen Zustand ausgelöst, egal wer ihn geändert hat (Binding, Escape, toggle() oder close()).

Methoden

Steuere panels aus dem Code heraus — 6 Methoden auf der programmatischen Schnittstelle.

Name	Signatur	Rückgabe	Beschreibung
`HubPanelsComponent.selectPanel`	`selectPanel(panel: HubPanelComponent): void`	—	Aktiviert ein Panel wie ein Klick des Nutzers: markiert es als aktiv, navigiert bei gerouteten Panels und gibt panelChange aus. Bei deaktivierten Panels passiert nichts.
`HubPanelsComponent.togglePanel`	`togglePanel(panel: HubPanelComponent): void`	—	Klappt ein Panel in der Accordion-Ansicht um und beachtet multiple: ohne multiple schließt das Öffnen eines Panels die übrigen.
`HubPanelsComponent.removePanel`	`removePanel(panel: HubPanelComponent, options?: { reselect?: boolean; emit?: boolean }): void`	—	Entfernt ein Panel aus der Gruppe. reselect entscheidet, ob ein anderes Panel an seine Stelle tritt, emit, ob die Entfernung über panelChange gemeldet wird.
`HubPanelsComponent.removePanelAndRefocus`	`removePanelAndRefocus(panel: HubPanelComponent): void`	—	Entfernt ein Panel und übergibt den Tastaturfokus an den nächstgelegenen verbleibenden Header, damit eine Entfernung den Fokus nie an den Body verliert. Genau das rufen die ✕-Schaltfläche und die Entf-Taste auf.
`HubSidePanelComponent.toggle`	`toggle(force?: boolean): void`	—	Öffnet oder schließt das Panel; true oder false erzwingt einen Zustand, statt ihn umzuschalten.
`HubSidePanelComponent.close`	`close(): void`	—	Schließt das Panel. War der Fokus darin, kehrt er zu dem Element zurück, das ihn beim Öffnen hatte.

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 <hub-badge color="primary" shape="rounded">3</hub-badge> </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>`