Tabs

Überblick

mmm-tabs gliedert zusammengehörige Inhalte in Ansichten, von denen jeweils eine sichtbar ist. Die API folgt dem Tab-Group-Muster von Material: mmm-tabs verwaltet Auswahl, Fokus und Overflow; jedes mmm-tab liefert Label, Zustand und Panel-Inhalt.

Subkomponenten

mmm-tabs: Tablist, Auswahl, Tastatursteuerung, Panels und Overflow
mmm-tab: deklaratives Label mit zugehörigem Inhalt

Verwendung

<mmm-tabs
  ariaLabel="Depotbereiche"
  [(selectedIndex)]="selectedIndex"
  (selectionChange)="onSelectionChange($event)"
>
  <mmm-tab label="Übersicht"> Zusammenfassung des Depots </mmm-tab>
  <mmm-tab label="Positionen" [notification]="true"> Alle Positionen </mmm-tab>
  <mmm-tab label="Archiv" [disabled]="true"> Archivierte Vorgänge </mmm-tab>
</mmm-tabs>

Beide Komponenten müssen in einer Standalone-Komponente importiert werden:

imports: [Tabs, Tab];

Inputs

`mmm-tabs`

Input	Typ	Standard	Beschreibung
`selectedIndex`	`number`	`0`	Index des ausgewählten Tabs; unterstützt Two-way Binding
`alignment`	`'start' \| 'center' \| 'end' \| 'stretch'`	`'start'`	Ausrichtung der Tab-Labels
`ariaLabel`	`string`	`'Inhaltsbereiche'`	Zugänglicher Name der Tablist
`preserveContent`	`boolean`	`false`	Behält inaktive Panels im DOM
`sticky`	`boolean`	`false`	Fixiert die Tab-Leiste beim Scrollen am konfigurierten oberen Abstand

`mmm-tab`

Input	Typ	Standard	Beschreibung
`label`	`string`	–	Sichtbares Tab-Label
`ariaLabel`	`string \| null`	`null`	Optionaler abweichender zugänglicher Name
`disabled`	`boolean`	`false`	Deaktiviert den Tab
`notification`	`boolean`	`false`	Zeigt den Benachrichtigungspunkt
`notificationLabel`	`string`	`'Neue Benachrichtigung'`	Zugänglicher Text für den Benachrichtigungsstatus

Outputs

Output	Typ	Beschreibung
`selectedIndexChange`	`EventEmitter<number>`	Ermöglicht `[(selectedIndex)]` und meldet eine Auswahl
`selectionChange`	`EventEmitter<MmmTabSelectionChange>`	Meldet neuen/vorherigen Index und den gewählten Tab
`focusChange`	`EventEmitter<MmmTabFocusChange>`	Meldet Fokusänderungen durch die Tastatur

Tastaturbedienung

Taste	Verhalten
`Pfeil links` / `Pfeil rechts`	Verschiebt den Fokus zum nächsten aktivierten Tab
`Pos1` / `Ende`	Fokussiert den ersten bzw. letzten aktivierten Tab
`Enter` / `Leertaste`	Wählt den fokussierten Tab aus

Die Komponente verwendet das ARIA-Tabs-Muster mit tablist, tab und tabpanel. Deaktivierte Tabs werden bei der Tastaturnavigation übersprungen. Fokus und Auswahl bleiben getrennt, bis die Auswahl mit Enter oder Leertaste bestätigt wird.

Passt die Liste nicht in die verfügbare Breite, blendet mmm-tabs automatisch seitliche Navigationsbuttons ein. Der aktive Tab wird nach einer Auswahl in den sichtbaren Bereich gescrollt.

Für einen Sticky Header:

<mmm-tabs [sticky]="true" style="--mmm-tabs-sticky-top: 4rem"> ... </mmm-tabs>

SCSS-Variablen

--mmm-tabs-color
--mmm-tabs-active-color
--mmm-tabs-disabled-color
--mmm-tabs-divider-color
--mmm-tabs-hover-background
--mmm-tabs-pressed-background
--mmm-tabs-focus-color
--mmm-tabs-background
--mmm-tabs-height
--mmm-tabs-padding-inline
--mmm-tabs-gap
--mmm-tabs-indicator-height
--mmm-tabs-notification-size
--mmm-tabs-panel-padding-block
--mmm-tabs-sticky-top
--mmm-tabs-pagination-width

Hinweise

Mit preserveContent="false" wird nur das aktive Panel gerendert. Das reduziert DOM-Aufwand bei komplexen Inhalten.
Nutze preserveContent="true", wenn der interne Zustand inaktiver Panels erhalten bleiben muss, etwa bei Medien oder eingebetteten Formularen.
Tabs wechseln Ansichten innerhalb eines Kontexts. Für echte Seitennavigation sollten Links bzw. die Router-Navigation verwendet werden.

Beispiele

Standard

Zusammenfassung des Depots.

Letzte Auswahl: Übersicht

Overflow

MDAX-Inhalt


<mmm-tabs ariaLabel="Depotbereiche">
  <mmm-tab label="Übersicht">
    Zusammenfassung des Depots
  </mmm-tab>
  <mmm-tab label="Positionen" [notification]="true">
    Alle Positionen
  </mmm-tab>
  <mmm-tab label="Archiv" [disabled]="true">
    Archivierte Vorgänge
  </mmm-tab>
</mmm-tabs>