`combobox`

Diese Komponente stellt eine Combobox 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 (number | string) und ein label (MultiLanguageDefinition) 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.

Individuelles Styling

Das visuelle Design der Combobox 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:

.combobox: Styles für den Container der Combobox. Im Fall von multiSelect ist .combobox, .combobox div zu verwenden.
.combobox-label / .label: Direkter Zugriff auf das Label der Combobox.
.combobox .value: Zugriff auf das Eingabeelement der Combobox. Im Fall von multiSelect, kann mit .combobox .value + div auf die Elemente der Eingabe zugegriffen werden.

Beispiel

combobox.json

{
  "$schema": "https://forms.virtimo.net/5.0.x/schema.json",
  "metaData": {
    "id": 0,
    "version": 0
  },
  "configuration": {
    "styles": {
      "css": ".combobox.foo .value { color: rgb(0, 15, 185)} .combobox.bar .value { color: rgb(185, 15, 0)}"
    }
  },
  "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,
          "cls": "${/data/selected}",
          "label": "Selection Binding",
          "value": "${/data/selected}",
          "options": "${/data/options}"
        }
      ]
    }
  ],
  "state": {
    "data": {
      "selected": null,
      "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: