`fieldset`

Diese Komponente ist ein spezieller container und damit auch eine "Sammelkomponente" für weitere Komponenten.

Konfiguration

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

Spezifische Konfiguration

type ("fieldset"): Typ der Komponente.
components (array<Component>): Liste von Komponenten.
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 Fieldsets 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:

.fieldset .components: Zugriff auf den Hintergrund der Unterkomponenten.
.fieldset-label / .fieldset .label: Direkter Zugriff auf das Label der Checkbox-Gruppe. Im Fall von .label werden automatisch die Labels der Unterkomponenten des Fieldsets mit angepasst.

Beispiel

fieldset.json

{
  "$schema": "https://forms.virtimo.net/5.0.x/schema.json",
  "metaData": {
    "id": 0,
    "version": 0
  },
  "configuration": {
    "styles": {
      "css": ".fieldset-label {color: rgb(0, 11, 170); background-color: rgb(200, 200, 255);}"
    }
  },
  "components": [
    {
      "type": "fieldset",
      "layout": "horizontal",
      "label": "Horizontal fieldset",
      "padding": 10,
      "components": [
        {
          "type": "html",
          "value": "First element in horizontal fieldset",
          "flex": 1
        },
        {
          "type": "html",
          "value": "Second element in horizontal fieldset",
          "flex": 1
        },
        {
          "type": "fieldset",
          "layout": "vertical",
          "label": "Vertical fieldset",
          "flex": 1,
          "components": [
            {
              "type": "html",
              "value": "First element in vertical fieldset"
            },
            {
              "type": "html",
              "value": "Second element in vertical fieldset"
            }
          ]
        }
      ]
    }
  ]
}

Eingebettete Vorschau

Vorschau in separatem Fenster öffnen

Keywords: