Ein Value Modificator erlaubt eine inkrementelle Änderung eines numerischen Wertes.
Durch Tippen auf + (zum Erhöhen) oder − (zum Verringern) lässt sich der Wert ändern. Der geänderte Wert ist sofort im Anzeigefeld sichtbar. Durch kurzes Antippen wird der Wert schrittweise geändert. Durch langes Antippen ändert sich der Wert exponentiell. Durch Tippen auf den Wert kann dieser über eine Tastatur verändert werden.Value Modificator mit Validierung
Der Value Modificator kann einen Validierungs-Zustand (Success, Warning, Error) anzeigen. Dazu benötigt er zusätzlich eine textliche Erläuterung. Hierbei wird das Element mit einem Notification Text kombiniert.Eigenschaften
| Name | Type | Default Value | Description |
|---|---|---|---|
value | number | undefined | Selected value of Value Modificator |
id | string | undefined | Unique ID for the Value Modificator |
min | number | undefined | Minimum value of Value Modificatorr |
max | number | undefined | Maximum value of Value Modificator |
step | number | 1 | The interval the value moves on every step |
label | string | undefined | Label of value modificator |
placeholder | string | undefined | undefined | Placeholder text |
required | boolean | undefined | * |
disabled | boolean | false | Whether or not the Value Modificator is disabled |
readonly | boolean | false | Whether or not the Value Modificator is readonly |
isLoading | undefined | false | |
title | string | undefined | undefined | Appears on hover |
debounceTime | number | undefined | undefined | Time in miliseconds to debounce change event |
decimalSeparator | "," | "." | undefined | The decimal separator to use in the input field |
style | string | undefined | Additional css styles |
tabindex | number | 0 | Index of sequential keyboard navigation |
Beispiele
Value Modificator mit Label
Value Modificator mit Placeholder
Value Modificator ohne Label
Info! Wird kein Label angezeigt, dann muss der Kontext klar definiert sein.
Value Modificator (disabled)
Value Modificator (readonly)
Value Modificator validated
Do's and Don'ts
Do
Richtige Button-Hierarchie: Hierarchisch angeordnete Buttons helfen dem Nutzer, sich im Interface zurechtzufinden