`html`

Diese Komponente ermöglicht es direkt HTML Elemente in ein Formular zu integrieren.

Konfiguration

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

Spezifische Konfiguration

type ("html"): Typ der Komponente.
value (Binding | string): der Inhalt wird als HTML ausgewertet und entsprechend angezeigt.

Allgemeine Konfiguration

Neben den für alle gültigen Konfigurationen, können keine weiteren Konfigurationen gesetzt werden.

Individuelles Styling

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

.html: Styles für HTML Komponenten.

Beispiel

html.json

{
  "$schema": "https://forms.virtimo.net/5.0.x/schema.json",
  "metaData": {
    "id": 0,
    "version": 0
  },
  "configuration": {
    "styles": {
      "css": ".html {color: rgb(0, 11, 170); background-color: rgba(200, 200, 255, 0.4);}"
    }
  },
  "components": [
    {
      "type": "container",
      "label": "HTML Component Example",
      "components": [
        {
          "type": "html",
          "value": "Data binding: ${/data/input}${/data/text}",
          "margin": "0 0 10 0"
        },
        {
          "type": "html",
          "value": "Data Binding only for input: ${/data/input}<b>Some text.</b>"
        },
        {
          "type": "textfield",
          "label": "Input for html Elements",
          "value": "${/data/input}"
        }
      ]
    }
  ],
  "state": {
    "data": {
      "input": "<p> A Paragraph </p>",
      "text": "<b>Some text.</b>"
    }
  }
}

Eingebettete Vorschau

Vorschau in separatem Fenster öffnen

Keywords: