`container`

This component is a "collection component" for additional Components. By default, this component can be used to display multiple components, as the components are automatically layout arranged appropriately and a heading can be set via the Label.

Configuration

For general configuration options, see General Component Configuration.

Specific Configuration

type ("container"): Component type.
components (array<Component>): List of components.
languageButton (boolean): Inserts a button into the container’s Label that opens a menu for changing the language.

layout (enum<"vertical" | "horizontal">): Content alignment.

General Configuration

In addition to the configurations that apply to all elements, the following configurations can be set optionally: //boxLabel settings, disabled, //errorTarget, icon, label, //label settings, //onChange, readOnly, required.

Custom Styling

The visual design of the checkbox groups is primarily controlled via global variables. CSS can be used specifically for certain deviations.

Using the cls , you can apply your own CSS rules. The component provides the following standard styling points for this purpose:

.container .components: Access to the background of the subcomponents.
.container-label / .container .label: Direct access to the container’s label. In the case of .label, the Labels of the container’s subcomponents are automatically adjusted as well.
.container-label div: Access to the Label’s font.
.container-label .language-change-button: Access to the button for changing the language, if languageButton is used.

Example

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"
          }
        }
      ]
    }
  }
}

Embedded preview

Open preview in a separate window

Keywords: