Skip to content
Design System

SideList

Überblick

mmm-side-list ist eine seitliche Listen- oder Navigationskomponente für Abschnitte, Schritte oder Inhaltsnavigation.

Varianten

  • navigation: für Links und Router-Navigation
  • selection: für reine Auswahl mit roving tabindex

Inputs

InputTypBeschreibung
itemsMmmSideListItem[]Liste der darzustellenden Einträge
activeIdstring | nullAktiver Eintrag
mode`‘navigation''selection’`
ariaLabelstringScreenreader-Label

Outputs

OutputTypBeschreibung
activateEventEmitter<MmmSideListItem>Meldet Aktivierung eines Eintrags

Datenstruktur

Ein MmmSideListItem unterstützt unter anderem:

  • id
  • label
  • href
  • routerLink
  • queryParams
  • disabled

SCSS-Variablen

Wichtige Variablen:

  • --mmm-side-list-primary-color
  • --mmm-side-list-background-active
  • --mmm-side-list-text-color
  • --mmm-side-list-text-muted-color
  • --mmm-side-list-border-radius
  • --mmm-side-list-border-color-inactive
  • --mmm-side-list-padding
  • --mmm-side-list-active-border-width

Hinweise

  • Im selection-Modus ist die Komponente voll per Tastatur bedienbar.
  • Im navigation-Modus können href oder routerLink verwendet werden.

Beispiel

<mmm-side-list
  [items]="items"
  mode="selection"
  [activeId]="items[0].id"
  (activate)="onActivate($event)"
></mmm-side-list>