`combobox`

Diese Komponente stellt eine Combo Box dar. Die ComboBox ermöglicht den Anwendern, einen von den vorgegebenen Werten auszuwählen.

Konfiguration

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

Spezifische Konfiguration

type ("combobox"): Typ der Komponente.
forceSelect (boolean): Erzwingt die Auswahl einer Option aus der Liste. Falls deaktiviert, können auch Werte außerhalb der Liste benutzt werden. Per Default aktiviert.
multiSelect (boolean): Ermöglicht es mehrere Optionen aus der Liste auszuwählen.
options (array<ComboboxOption> | Binding): Eine Liste der möglichen Optionen, aus denen der Anwender einen Wert auswählen kann. Eine Option muss einen value und ein label (für die Anzeige) enthalten.
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.

Beispiel

combobox.json

{
  "$schema": "https://forms.virtimo.net/5.0.x/schema.json",
  "metaData": {
    "id": 0,
    "version": 0
  },
  "configuration": {
  },
  "components": [
    {
      "type": "container",
      "label": "Combobox Component Example",
      "components": [
        {
          "type": "combobox",
          "multiSelect": true,
          "label": "Selection",
          "options": [
            { "value": "foo", "label": "FOO" },
            { "value": "bar", "label": "BAR" }
          ]
        },
        {
          "type": "combobox",
          "forceSelect": false,
          "label": "Selection Binding",
          "options": "${/data/options}"
        }
      ]
    }
  ],
  "state": {
    "data": {
      "options": [
        {
          "value": "foo",
          "label": {
            "MULTI_LANGUAGE": {
              "de": "FOO_DE",
              "en": "FOO_EN"
            }
          }
        },
        {
          "value": "bar",
          "label": {
            "MULTI_LANGUAGE": {
              "de": "BAR_DE",
              "en": "BAR_EN"
            }
          }
        }
      ]
    }
  }
}

Eingebettete Vorschau

Vorschau in separatem Fenster öffnen

Keywords: