`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.

Individuelles Styling

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

.container .components: Zugriff auf den Hintergrund der Unterkomponenten.
.container-label / .container .label: Direkter Zugriff auf das Label des Containers. Im Fall von .label werden automatisch die Labels der Unterkomponenten des Containers mit angepasst.
.container-label div: Zugriff auf die Schrift des Labels.
.container-label .language-change-button: Zugriff auf den Button zum Wechseln der Sprache, falls languageButton verwendet wird.

Beispiel

container.json

{
  "$schema": "https://forms.virtimo.net/5.0.x/schema.json",
  "metaData": {
    "id": 0,
    "version": 0
  },
  "configuration": {
    "styles": {
      "css": ".container.en .container-label {background-color: rgb(180, 185, 255)} .container.en :is(.x-paneltitle, .language-change-button) {color: rgb(0, 10, 170)}"
    }
  },
  "components": [
    {
      "type": "container",
      "layout": "horizontal",
      "languageButton": true,
      "cls": "${/language}",
      "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: