`container`

Diese Komponente ist eine "Sammelkomponente" für weitere Komponenten. Diese Komponente kann standardmäßig zum Darstellen mehrerer Komponenten genutzt werden, da die Komponenten automatisch über das layout passend angeordnet werden und über das label eine Überschrift gesetzt werden kann.

Konfiguration

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

Spezifische Konfiguration

type ("container"): Typ der Komponente.
components (array<Component>): Liste von Komponenten.
languageButton (boolean): Fügt einen Button in das Label vom Container ein, über diesen ein Menu zum Wechseln der Sprache geöffnet werden kann.

layout (enum<"vertical" | "horizontal">): Ausrichtung der Inhalte.

Allgemeine Konfiguration

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

Beispiel

container.json

{
  "$schema": "https://forms.virtimo.net/5.1.0/schema.json",
  "metaData": {
    "id": 0,
    "version": 0
  },
  "configuration": {
  },
  "components": [
    {
      "type": "container",
      "layout": "horizontal",
      "languageButton": true,
      "label": {
        "MULTI_LANGUAGE": {
          "en": "Horizontal container",
          "de": "Horizontaler Container"
        }
      },
      "components": [
        {
          "type": "html",
          "value": "${/data/htmlElements/0}",
          "flex": 1
        },
        {
          "type": "html",
          "value": "${/data/htmlElements/1}",
          "flex": 1
        },
        {
          "type": "container",
          "layout": "vertical",
          "label": {
            "MULTI_LANGUAGE": {
              "en": "Vertical container",
              "de": "Vertikaler Container"
            }
          },
          "flex": 1,
          "components": [
            {
              "type": "html",
              "value": "${/data/htmlElements/2}"
            },
            {
              "type": "html",
              "value": "${/data/htmlElements/3}"
            }
          ]
        }
      ]
    }
  ],
  "state": {
    "data": {
      "htmlElements": [
        {
          "MULTI_LANGUAGE": {
            "en": "First element in horizontal container",
            "de": "Erstes Element im horizontalem Container"
          }
        },
        {
          "MULTI_LANGUAGE": {
            "en": "Second element in horizontal container",
            "de": "Zweites Element im horizontalem Container"
          }
        },
        {
          "MULTI_LANGUAGE": {
            "en": "First element in vertical container",
            "de": "Erstes Element im vertikalem Container"
          }
        },
        {
          "MULTI_LANGUAGE": {
            "en": "Second element in vertical container",
            "de": "Zweites Element im vertikalem Container"
          }
        }
      ]
    }
  }
}

Eingebettete Vorschau

Vorschau in separatem Fenster öffnen

Keywords: