Angular Tabs, Pills & Accordion | ng-hub-ui-panels

Angular Content-Panels-Komponente, die sich als Tabs, Pills oder Accordion rendert, mit Routing, Reactive Forms, Tastaturnavigation und CSS-Variablen.

Interaktive Beispiele

Erkunde Live-Beispiele, die zeigen, wie sich die Bibliothek in gängigen Angular-Anwendungsfällen verhält.

Visualisierungen

Eine Komponente, drei Ansichten: klassische unterstrichene Tabs, abgerundete Pills und gestapelte Accordion-Disclosure-Panels — umschaltbar über einen einzigen `type`-Input.

Grundlegende Tabs

The first enabled panel is activated automatically.
Switch panels with a click or the arrow keys.
Each panel projects its own content.

Pills

Account settings live here.
Password and two-factor options.
Email and push preferences.

Accordion-Ansicht

Karten & Inhalts-Slots

Project summary
No tabs, no pills — every panel is always visible and styled as a card.
Updated 2 hours ago
Team
The same hubPanelHeader / hubPanelFooter slots work in tabs, pills and accordion too.

A single standalone <hub-panel> (no container):

Standalone card
Dropped on its own, a hub-panel renders as a card by itself.

Karten-Slots (variant, flush, fill)

Success
A plain card honours [variant] — one accent tints the whole frame.
Danger
No colour values added — derived by color-mix like the alert.
Info
Set --hub-panels-card-border-style: dashed for an empty-state look.
Normal padding
Padded body — there is a gap around this strip.
Flush
Flush body — this strip runs edge-to-edge to the card sides.
Fill + scroll

Row 1 — the body scrolls; the header stays put.

Row 2 — the body scrolls; the header stays put.

Row 3 — the body scrolls; the header stays put.

Row 4 — the body scrolls; the header stays put.

Row 5 — the body scrolls; the header stays put.

Row 6 — the body scrolls; the header stays put.

Row 7 — the body scrolls; the header stays put.

Row 8 — the body scrolls; the header stays put.

Row 9 — the body scrolls; the header stays put.

Row 10 — the body scrolls; the header stays put.

Row 11 — the body scrolls; the header stays put.

Row 12 — the body scrolls; the header stays put.

Row 13 — the body scrolls; the header stays put.

Row 14 — the body scrolls; the header stays put.

Row 15 — the body scrolls; the header stays put.

Row 16 — the body scrolls; the header stays put.

Row 17 — the body scrolls; the header stays put.

Row 18 — the body scrolls; the header stays put.

Row 19 — the body scrolls; the header stays put.

Row 20 — the body scrolls; the header stays put.

Semantische Hinweise

Heads up — a new version is available.
Your changes were saved successfully.
Your trial ends in 3 days.
Something went wrong while saving.
Tip: you can pin panels for quick access.
A neutral notice with no semantic variant.

An alert can use the same header/footer slots as a card:

Payment failed
We couldn't process your card. Update your billing details to keep your subscription active.

Semantischer Leisten-Akzent

The active tab follows the success accent.
Switch tabs to see the accent move.
No per-colour CSS — one accent drives it all.
The active pill fills with the danger accent.
Hover the inactive pills too.
Everything derives from a single token.
A custom or built-in variant works the same way.
Active pill uses the warning accent.

Tab nav (inhaltslose Leiste)

Overview

The tab strip owns no content — this view is rendered by the host from active().

Selected value: overview

Strip-Layout

Layouten Sie den Header-Strip passend für jede Shell: stapeln Sie ihn vertikal neben dem Inhalt, strecken Sie die Header über die gesamte Breite oder machen Sie einen überlaufenden Strip scrollbar.

Vertikale Tabs

Your public profile information.
Invoices and payment methods.
Manage members and roles.

Ausgerichtete Tabs

Today's agenda.
The seven-day view.
The full month at a glance.

Scrollbare Tabs

Content for section 1.
Content for section 2.
Content for section 3.
Content for section 4.
Content for section 5.
Content for section 6.
Content for section 7.
Content for section 8.

Panel-Verwaltung

Deaktivieren Sie einzelne Panels und lassen Sie Benutzer Panels spontan über die ✕-Schaltfläche und die Delete-Taste hinzufügen oder entfernen.

Deaktivierte Panels

This panel is selectable.
This panel is disabled.
Arrow keys skip the disabled panel.

Entfernbare & dynamische Panels

Content for Tab 1.
Content for Tab 2.
Content for Tab 3.

Benutzerdefinierte Templates

Ersetzen Sie den Klartext-Header durch ein beliebiges Angular-Template — Icons, Badges oder interaktive Steuerelemente — über die `hubPanelHeading`-Direktive.

Benutzerdefinierte Überschriftsvorlagen

Twelve unread messages.
Messages you have sent.
Recently deleted items.

Zeilenaktionen im Accordion

Formularintegration

Erstklassige ControlValueAccessor-Unterstützung bindet das/die aktive(n) Panel(s) an die reaktiven und template-getriebenen Formulare von Angular.

Integration reaktiver Formulare

Light theme preview.
Dark theme preview.
Follows the OS setting.
Selected value: "dark"

Mehrfachauswahl

Mit `multiple` können mehrere Panels gleichzeitig geöffnet sein. In der Accordion-Ansicht werden sie alle erweitert; in den Tabs-/Pills-Ansichten startet jeder aktive Header sein eigenes sichtbares Panel, während die folgenden inaktiven Header oberhalb dieses Panels gruppiert bleiben, bis der nächste aktive Header einen neuen Block beginnt.

Mehrfachauswahl

Click an inactive tab to split the layout into a new panel block. Click an active tab to merge that block back.

Key metrics and a quick overview of the account.
Detailed statistics and charts for the period.
A chronological feed of recent activity.
Free-form notes shared with the team.
Open panels: [ "summary", "stats" ]

Mehrere vertikale Kopfzeilen

Each active header starts a new row-like vertical block. The blocks stack top-to-bottom, and the whole layout scrolls horizontally only when one row needs more width.

Tabs
Public profile details and biography.
Invoices, payment methods and VAT details.
Members, roles and access levels.
Shared internal notes for the account.
Open tabs: [ "profile", "team" ]
Pills
Open items waiting for review.
Approvals and pending checks.
Publication options and scheduling.
Historical records and exported snapshots.
Open pills: [ "inbox", "publish" ]

Accordion-Optionen

Die Accordion-Ansicht unterstützt mehrere gleichzeitig erweiterte Panels und ein randloses `flush`-Layout ohne äußeres Chrome.

Akkordeon Mehrfach & Flush

Standard delivery in 3–5 business days.

Free returns within 30 days.

Barrierefreiheit

Vollständige Tastaturnavigation (Pfeile, Home, End, Delete), Roving-Tabindex und korrekte ARIA-Rollen für die tablist- und Accordion-Disclosure-Muster.

Tastaturnavigation

Focus a tab, then use ← → Home End. Press Delete on a removable tab to close it.

Use the arrow keys to move focus between headers.
Home and End jump to the first and last enabled header.
Press Delete while focused to remove this panel.