Field Message

Überblick

mmm-field-message wird verwendet für alle Arten von zusätzlichen Texten unter Inputs, Selects, Checkboxes etc.

Varianten und Modifier

• [variant]: Art der Message, z.B. info, error, etc.
• [icon]: Icon, das vor dem Message Content angezeigt werden soll
• [disabled]: Gibt an, ob die Message als disabled angezeigt werden soll

Inputs

Input	Typ	Default	Beschreibung
disabled	boolean	false	Graut den Text und das Icon aus
icon	string	abhängig von variant	Ersetzt das default Icon
variant	'info' | 'error'	info	Bestimmt Text-Farbe und Icon

SCSS-Variablen

Wichtige Variablen:

• --mmm-field-message-color-fg
• --mmm-field-message-color-fg-error
• --mmm-field-message-color-fg-disabled
• --mmm-field-message-font-size
• --mmm-field-message-line-height
• --mmm-field-message-min-height
• --mmm-field-message-icon-gap

Hinweise

• Das Icon ist je nach variant bereits definiert. Es braucht nur gesetzt werden, wenn ein anderes Icon gewünscht ist.

Beispiel

<mmm-field-message 
   variant = "info"
   [disabled] = "false">
      Dies ist eine Info Nachricht
</mmm-field-message>   
   
<mmm-field-message 
   variant="error" 
   [disabled]="false">
      Das ist eine Fehlermeldung
</mmm-field-message>
   

<mmm-field-message 
   variant="error" 
   [disabled]="true">
      Das ist eine disabled Fehlermeldung
</mmm-field-message>
   

<mmm-field-message 
   variant="error" 
   [disabled]="false" 
   icon="uhr_warnschild_24">
      Das ist ein custom icon
</mmm-field-message>

<mmm-field-message 
   variant="info" 
   [disabled]="false" 
   icon="none">
      Diese Message hat kein Icon
</mmm-field-message>
   

infozeichen_mit_kreis_24 Dies ist eine Info Nachricht

warnschild_24 Das ist eine Fehlermeldung

warnschild_24 Das ist eine disabled Fehlermeldung

uhr_warnschild_24 Das ist ein custom icon

Diese Message hat kein Icon