Select

Überblick

mmm-select ist ein formularfähiges Select mit eigener Overlay-Liste, Tastatursteuerung und projizierten Optionen. Die einzelnen Optionen werden über mmm-select-option bereitgestellt.

Subkomponenten

• mmm-select
• mmm-select-option

Inputs

mmm-select

Input	Typ	Beschreibung
label	string	Feldlabel
clampMenuWidth	boolean	Erzwingt mindestens Triggerbreite
allowDeselect	boolean	Erlaubt das Abwählen des aktuellen Werts
error	boolean	Fehlerstatus
errorMessage	string	Fehlermeldung
supportingText	string	Hilfetext
compact	boolean	Kompakter Modus

mmm-select-option

Input	Typ	Beschreibung
value	string	Technischer Wert der Option
disabled	boolean	Deaktiviert die Option
selected	boolean	Visueller Selected-State
active	boolean	Visueller Active-State

Outputs

mmm-select

Output	Typ	Beschreibung
selectionChange	EventEmitter<string | null>	Änderung der Auswahl

mmm-select-option

Output	Typ	Beschreibung
select	EventEmitter<string>	Auswahl der Option

SCSS-Variablen

Wichtige Variablen:

• --mmm-select-panel-offset
• --mmm-select-panel-min-width
• --mmm-select-panel-max-width
• --mmm-select-panel-background
• --mmm-select-panel-border-radius
• --mmm-select-panel-shadow
• --mmm-select-list-max-height
• --mmm-select-option-min-height
• --mmm-select-option-padding-inline
• --mmm-select-native-gap
• --mmm-select-chevron-size
• --mmm-select-option-hover-background

Hinweise

• Die Komponente implementiert ControlValueAccessor.
• Optionen werden über Projektion eingebunden.
• Die Tastatursteuerung unterstützt Enter, Space, Pfeiltasten, Home, End und Escape.

Beispiel

<mmm-select label="Option wählen" [allowDeselect]="true">
  <mmm-select-option value="eins">Option Eins</mmm-select-option>
  <mmm-select-option value="zwei">Option Zwei</mmm-select-option>
</mmm-select>

Option waehlen