Stepper

Überblick

mmm-stepper visualisiert mehrstufige Prozesse und kombiniert Schrittstatus, Auswahl und optional Substeps in einem Overlay.

Subkomponenten

mmm-stepper: Container der Schrittlogik
mmm-step: einzelner Schritt

Schrittzustände

Auf mmm-step stehen folgende States zur Verfügung:

default
completed
error

Substeps unterstützen:

default
completed
current
error

Inputs

`mmm-stepper`

Input	Typ	Beschreibung
`selectedIndex`	`number`	Aktuell aktiver Schritt

`mmm-step`

Input	Typ	Beschreibung
`label`	`string`	Sichtbares Schritlabel
`description`	`string \| null`	Zusatztext für Overlay und Kontext
`state`	`‘default'	'completed'
`substeps`	`MmmSubstep[]`	Optionale Unterpunkte

Outputs

Output	Typ	Beschreibung
`selectedIndexChange`	`EventEmitter<number>`	Änderung des aktiven Schritts
`selectionChange`	`EventEmitter<{ selectedIndex: number; previouslySelectedIndex: number }>`	Vollständige Selektionsänderung

SCSS-Variablen

Wichtige Variablen:

--mmm-stepper-gap
--mmm-stepper-header-padding-bottom
--mmm-stepper-line-height
--mmm-stepper-line-radius
--mmm-stepper-circle-size
--mmm-stepper-circle-inner-size
--mmm-stepper-circle-radius
--mmm-stepper-substeps-button-size
--mmm-stepper-overlay-width
--mmm-stepper-overlay-item-radius
--mmm-stepper-overlay-dot-size

Hinweise

Schritte werden über Projektion als mmm-step eingebunden.
Die Komponente ist per Tastatur bedienbar.
Substeps werden in einem Overlay dargestellt und können für feinere Prozessschritte genutzt werden.

Beispiel

<mmm-stepper [(selectedIndex)]="stepIndex">
  <mmm-step label="Start">Inhalt Schritt 1</mmm-step>
  <mmm-step label="Prüfen" state="completed">Inhalt Schritt 2</mmm-step>
  <mmm-step
    label="Freigabe"
    [substeps]="[
      { label: 'Dokumente', state: 'completed' },
      { label: 'Prüfung', state: 'current' }
    ]"
  >
    Inhalt Schritt 3
  </mmm-step>
</mmm-stepper>

Inhalt Schritt 1