Counter

Überblick

mmm-counter zeigt einen numerischen Wert zusammen mit Label und Stepper-Steuerung an. Die Komponente eignet sich für Mengenauswahl, Konfigurationen mit + und - oder kompakte Anzahlsteuerungen.

Subkomponenten

• mmm-counter: Wrapper mit Label, Wert und Layout
• mmm-counter-stepper: dedizierte Steuerung für Inkrement und Dekrement

Varianten

Es gibt keine visuellen Varianten im engeren Sinn, aber zwei Layout-Ausrichtungen:

• horizontal
• vertical

Inputs

mmm-counter

Input	Typ	Beschreibung
label	string	Sichtbares Label
orientation	`‘horizontal'	'vertical’`
selected	boolean	Hebt den Counter visuell hervor
disabled	boolean	Deaktiviert die gesamte Steuerung
incrementDisabled	boolean	Deaktiviert nur den Plus-Button
decrementDisabled	boolean	Deaktiviert nur den Minus-Button
value	number	Numerischer Wert

mmm-counter-stepper

Input	Typ	Beschreibung
orientation	`‘horizontal'	'vertical’`
disabled	boolean	Deaktiviert beide Buttons
incrementDisabled	boolean	Deaktiviert Plus
decrementDisabled	boolean	Deaktiviert Minus
ariaLabel	string	Gruppenlabel für Screenreader
incrementAriaLabel	string	Label des Inkrement-Buttons
decrementAriaLabel	string	Label des Dekrement-Buttons
controls	string	Verweis auf die gesteuerte Eingabe

Outputs

Output	Typ	Beschreibung
incrementClicked	EventEmitter<void>	Klick auf Plus
decrementClicked	EventEmitter<void>	Klick auf Minus

Die Outputs existieren sowohl auf mmm-counter als auch auf mmm-counter-stepper.

SCSS-Variablen

Wichtige Variablen:

• --mmm-counter-background
• --mmm-counter-background-selected
• --mmm-counter-border-color
• --mmm-counter-border-radius
• --mmm-counter-padding
• --mmm-counter-gap
• --mmm-counter-value-font-size
• --mmm-counter-label-font-size
• --mmm-counter-stepper-size
• --mmm-counter-stepper-border-color
• --mmm-counter-stepper-border-radius
• --mmm-counter-stepper-hover-background
• --mmm-counter-stepper-active-background

Hinweise

• Der Wert wird nur dargestellt; die eigentliche Fachlogik bleibt im Host.
• Der Counter formatiert positive Werte auf drei Stellen und negative Werte mit Vorzeichen.

Beispiel

<mmm-counter
  label="Personen"
  [value]="12"
  orientation="horizontal"
  (incrementClicked)="count = count + 1"
  (decrementClicked)="count = count - 1"
></mmm-counter>

012

Anzahl

−+