`checkboxgroup`

Diese Komponente erzeugt eine Liste von Elementen der Komponente Checkbox.

Konfiguration

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

Spezifische Konfiguration

type ("checkboxgroup"): Typ der Komponente.
components (array<Checkbox>): Liste von Elementen der Komponente Checkbox.

Allgemeine Konfiguration

Neben den für alle gültigen Konfigurationen, können optional folgende Konfigurationen gesetzt werden: disabled, icon, label, label Einstellungen, 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:

.checkboxgroup: Styles für den Container der Checkbox-Gruppe.
.checkboxgroup-label / .checkboxgroup .label: Direkter Zugriff auf das Label der Checkbox-Gruppe. Im Fall von .label werden automatisch die Labels der Checkboxen von der Gruppe mit angepasst.

Beispiel

checkboxgroup.json

{
  "$schema": "https://forms.virtimo.net/5.0.x/schema.json",
  "metaData": {
    "id": 0,
    "version": 0
  },
  "configuration": {
    "styles": {
      "css": ".forms .checkboxgroup.green { background-color: rgba(205, 255, 205, 0.8)} .forms .checkboxgroup.green .checkboxgroup-label { color: rgb(0, 140, 0)} .forms .checkboxgroup.yellow { background-color: rgba(241, 236, 157, 0.8)} .forms .checkboxgroup.yellow .checkboxgroup-label { color: rgb(192, 189, 0)} .forms .checkboxgroup.orange { background-color: rgba(241, 184, 108, 0.8)} .forms .checkboxgroup.orange .checkboxgroup-label { color: rgb(202, 115, 0)} .forms .checkboxgroup.red { background-color: rgba(255, 205, 205, 0.8)} .forms .checkboxgroup.red .checkboxgroup-label { color: rgb(140, 0, 0)}"
    }
  },
  "components": [
    {
      "type": "container",
      "label": "Checkboxgroup Component Example",
      "components": [
        {
          "type": "checkboxgroup",
          "label": "checkbox group",
          "cls": "${/data/a + /data/b + /data/c == 3 && 'green'} ${/data/a + /data/b + /data/c == 2 && 'yellow'} ${/data/a + /data/b + /data/c == 1 && 'orange'} ${/data/a + /data/b + /data/c == 0 && 'red'}",
          "components": [
            {
              "value": "${/data/a}",
              "type": "checkbox",
              "label": "one"
            },
            {
              "value": "${/data/b}",
              "type": "checkbox",
              "label": "two"
            },
            {
              "value": "${/data/c}",
              "type": "checkbox",
              "label": "three"
            }
          ]
        }
      ]
    }
  ],
  "state": {
    "data": {
      "a": true,
      "b": false,
      "c": true
    }
  }
}

Eingebettete Vorschau

Vorschau in separatem Fenster öffnen

Keywords: