`button`

Ein Button kann mit verschiedenen Aktionen verknüpft werden.

Konfiguration

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

Spezifische Konfiguration

type ("button"): Typ der Komponente.
action (enum<"print" | "reset" | "setProperty" | "submit" | "validate">): Identifiziert die Aktion, die von diesem Button ausgelöst wird. Andere Aktionen können nicht direkt verwendet werden, sind aber beispielsweise über onClick verfügbar.
target (Binding): Erforderlich, wenn die Aktion setProperty verwendet wird.
value (any | Binding): Erforderlich, wenn die Aktion setProperty verwendet wird.

Allgemeine Konfiguration

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

Individuelles Styling

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

.button: Styles für Buttons.

Aktionen

print: Öffnet die Druckansicht. Siehe Print.

reset: Setzt die Seite zurück. Siehe Reset.

setProperty: Überschreibt einen Button einen bestimmten Wert abhängig von einem anderen Wert. Dafür muss zusätzlich target und value definiert sein. Mit target wird eine Variable im state gebunden, die entsprechend dem Wert in value geändert wird. Praktisch kann man diese Funktion unter anderem dazu zu verwenden zwischen verschiedenen Seiten eines Formulars zu springen, wie hier gezeigt.

submit: Löst die Submit Funktion aus, die das aktuelle Formular an das Backend-System überträgt.

validate: Löst die Validierung aus. Dabei werden in das Formular eingegebene Daten überprüft.

Beispiel

button.json

{
  "$schema": "https://forms.virtimo.net/5.0.x/schema.json",
  "metaData": {
    "id": 0,
    "version": 0
  },
  "configuration": {
    "styles": {
      "css": ".forms .button.isActive { background-color: #e18a50; color: rgb(255, 255, 255);}"
    }
  },
  "components": [
    {
      "type": "container",
      "label": "Button Component Example",
      "components": [
        {
          "type": "button",
          "label": "My Button"
        },
        {
          "type": "button",
          "action": "submit",
          "label": "Submit"
        },
        {
          "type": "button",
          "action": "reset",
          "label": "Reset"
        },
        {
          "type": "button",
          "action": "validate",
          "label": "Validate"
        },
        {
          "type": "button",
          "action": "print",
          "label": "Print"
        },
        {
          "type": "button",
          "label": "Toggle",
          "action": "setProperty",
          "target": "${/data/checkbox}",
          "value": "${!/data/checkbox}",
          "cls": "${/data/checkbox ? 'isActive' : 'isInActive'}"
        },
        {
          "type": "checkbox",
          "value": "${/data/checkbox}",
          "label": "Checkbox bound to toggle"
        },
        {
          "type": "textfield",
          "label": "Required textfield, click validate",
          "value": "${/data/text}",
          "required": true
        }
      ]
    }
  ],
  "state": {
    "data": {
      "checkbox": true,
      "text": ""
    }
  }
}

Eingebettete Vorschau

Vorschau in separatem Fenster öffnen

Keywords: