Skip to content
Design System

Accordion

Überblick

mmm-accordion ist eine auf- und zuklappbare Inhaltsfläche für längere Abschnitte, Form-Sektionen oder FAQ-artige Inhalte. Für mehrere Einträge steht mit mmm-accordion-group eine Gruppierung zur Verfügung.

Subkomponenten

  • mmm-accordion: einzelnes Accordion
  • mmm-accordion-group: optionale Gruppierung mit Einzel- oder Mehrfachöffnung

Varianten

  • default: kartenartige Darstellung mit Schatten und Innenabstand
  • boxed: kompakter, listenartiger Aufbau mit Trennlinien

Inputs

mmm-accordion

InputTypBeschreibung
titlestringTitelzeile des Accordions
variant`‘default''boxed’`
disabledbooleanDeaktiviert Interaktion
errorbooleanHebt den Eintrag als Fehlerfall hervor
openbooleanGesteuerte Öffnung von außen

mmm-accordion-group

InputTypBeschreibung
multiplebooleanErlaubt mehrere geöffnete Einträge gleichzeitig

Outputs

mmm-accordion

OutputTypBeschreibung
openChangeEventEmitter<boolean>Meldet geänderten Open-State

mmm-accordion-group hat aktuell keine eigenen Outputs.

SCSS-Variablen

Wichtige Variablen auf Komponentenebene:

  • --mmm-accordion-margin-block
  • --mmm-accordion-background
  • --mmm-accordion-border-color
  • --mmm-accordion-card-border-radius
  • --mmm-accordion-card-shadow
  • --mmm-accordion-header-gap
  • --mmm-accordion-header-padding-default
  • --mmm-accordion-header-padding-boxed
  • --mmm-accordion-panel-padding-default
  • --mmm-accordion-panel-padding-boxed
  • --mmm-accordion-focus-color
  • --mmm-accordion-negative-color
  • --mmm-accordion-negative-background
  • --mmm-accordion-group-gap

Hinweise

  • In einer mmm-accordion-group mit multiple="false" bleibt immer nur ein Eintrag geöffnet.
  • Der open-Input kann kontrolliert von außen gesetzt werden.
  • Die Komponente arbeitet mit Höhenanimation und aktualisiert offene Panels bei Inhaltsänderungen automatisch.

Beispiel

Editor

Ein einfaches Beispiel für den Editor.