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 29 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.
`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 PanelsConfig.togglePosition.
`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.
`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.
`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.

Outputs

Reagiere darauf, was panels tut — 5 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.
`activeChange`	`EventEmitter<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.

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>`