`radiogroup`

Diese Komponente ermöglicht es, dass in einer Gruppe von Optionen exakt eine Option ausgewählt ist.

Konfiguration

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

Spezifische Konfiguration

type ("radiogroup"): Typ der Komponente.
options (array<Radio>): Eine Liste von Radio-Elementen, aus denen der Anwender einen Wert auswählen kann.
value (Binding | number): Wert des ausgewählten Elementes.

Allgemeine Konfiguration

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

Individuelles Styling

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

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

Radio

Dieses Element ist Teil einer Radiogroup. Es verfügt daher nicht über einen Typ und kann ausschließlich in einer Radiogroup verwendet werden.

Spezifische Konfiguration

value (number | string): Wert des Elementes. Dieses Attribut muss verwendet werden.

Allgemeine Konfiguration

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

Individuelles Styling

Das visuelle Design der Radio-Elemente 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:

.radio: Styles für den Container der Radio-Elemente.
.radio-label / .radio .label: Direkter Zugriff auf das Label von Radio-Elementen.
.radiogroup .radio div:has(.value): Zugriff auf das Eingabeelement der Radio-Elemente.

Beispiel

radiogroup.json

{
  "$schema": "https://forms.virtimo.net/5.0.x/schema.json",
  "metaData": {
    "id": 0,
    "version": 0
  },
  "configuration": {
    "styles": {
      "css": ".radiogroup.green { background-color: rgba(205, 255, 205, 0.8)} .radio.green div:has(.value) { color: rgb(0, 140, 0)} .radiogroup.yellow { background-color: rgba(241, 236, 157, 0.8)} .radio.yellow div:has(.value) { color: rgb(192, 189, 0)} .radiogroup.red { background-color: rgba(255, 205, 205, 0.8)} .radio.red div:has(.value) { color: rgb(140, 0, 0)}"
    }
  },
  "components": [
    {
      "type": "container",
      "label": "Radiogroup Component Example",
      "components": [
        {
          "type": "radiogroup",
          "label": "Radiogroup",
          "value": "${/data/radioGroup}",
          "cls": "${/data/radioGroup == 3 && 'green'} ${/data/radioGroup == 2 && 'yellow'} ${/data/radioGroup == 1 && 'red'}",
          "options": [
            { "value": 1, "label": "one", "cls": "${/data/radioGroup == 1 && 'red'}" },
            { "value": 2, "label": "two", "cls": "${/data/radioGroup == 2 && 'yellow'}" },
            { "value": 3, "label": "three", "cls": "${/data/radioGroup == 3 && 'green'}" }
          ]
        }
      ]
    }
  ],
  "state": {
    "data": {
      "radioGroup": 2
    }
  }
}

Eingebettete Vorschau

Vorschau in separatem Fenster öffnen

Keywords: