`combobox`

Diese Komponenten 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. Es gibt zwei Möglichkeiten, um die Optionen der ComboBox zu definieren:

Liste: direkt an der Definition der ComboBox lässt sich die Liste von Optionen angeben.
String: Per Data-Binding.

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.1.0/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: