`numberfield`

Diese Komponente stellt ein Zahlenfeld dar.

Konfiguration

Für allgemeine Konfigurations-Optionen siehe Allgemeine Komponenten Konfiguration.

Spezifische Konfiguration

type ("numberfield"): Typ der Komponente.
value (Binding | number): Wert des Feldes.

Allgemeine Konfiguration

Neben den für alle gültigen Konfigurationen, können optional folgende Konfigurationen gesetzt werden: disabled, errorTarget, icon, label, label Einstellungen, onChange, readOnly, required.

Individuelles Styling

Das visuelle Design der Zahlenfelder wird primär über die globalen Variablen gesteuert. Für spezifische Abweichungen kann gezielt CSS eingesetzt werden.

Über das Attribut cls können eigene CSS-Regeln angewendet werden. Die Komponente bietet dafür folgende Standard-Angriffspunkte:

.numberfield: Styles für den Container des Zahlenfelds.
.numberfield-label / .numberfield .label: Direkter Zugriff auf das Label des Zahlenfelds.
.numberfield .value: Zugriff auf das Eingabeelement des Zahlenfelds.

Beispiel

numberfield.json

{
  "$schema": "https://forms.virtimo.net/5.0.x/schema.json",
  "metaData": {
    "id": 0,
    "version": 0
  },
  "configuration": {
    "styles": {
      "css": ".numberfield.zero { background-color: rgb(205, 205, 205)} .numberfield.positive { background-color: rgb(205, 255, 205)} .numberfield.negative { background-color: rgb(255, 205, 205)}"
    }
  },
  "components": [
    {
      "type": "container",
      "label": "Numberfield Component Example",
      "components": [
        {
          "type": "numberfield",
          "value": "${/data/number}",
          "cls": "${/data/number == 0 && 'zero'} ${/data/number > 0 && 'positive'} ${/data/number < 0 && 'negative'}"
        },
        {
          "type": "numberfield",
          "value": 42
        }
      ]
    }
  ],
  "state": {
    "data": {
      "number": 0
    }
  }
}

Eingebettete Vorschau

Vorschau in separatem Fenster öffnen

Keywords: