`textarea`

Diese Komponente stellt ein mehrzeiliges Textfeld dar.

Konfiguration

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

Spezifische Konfiguration

autoGrow (boolean): Bei true wächst das Textfeld bei Texteingabe automatisch bis zur maxHeight.
type ("textarea"): Typ der Komponente.
value (Binding | string): Wert des Feldes.

Allgemeine Konfiguration

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

Individuelles Styling

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

.textarea: Styles für den Container des Textfelds.
.textarea-label / .textarea .label: Direkter Zugriff auf das Label des Textfelds.
.textarea .value: Zugriff auf das Eingabeelement des Textfelds.

Beispiel

textarea.json

{
  "$schema": "https://forms.virtimo.net/5.0.x/schema.json",
  "metaData": {
    "id": 0,
    "version": 0
  },
  "configuration": {
    "styles": {
      "css": ".textarea .label { background-color: #e18a502f}"
    }
  },
  "components": [
    {
      "type": "container",
      "label": "Textarea Component Example",
      "components": [
        {
          "type": "textarea",
          "label": "My Textarea",
          "value": "Hello World\nnice to meet\nyou"
        },
        {
          "type": "textarea",
          "value": "${/data/text}"
        },
        {
          "type": "textarea",
          "autoGrow": true,
          "maxHeight": 200,
          "value": "Text\nOver\nMultiple\nLines\nWith\nAutoGrow\nOn"
        }
      ]
    }
  ],
  "state": {
    "data": {
      "text": "Some Text"
    }
  }
}

Eingebettete Vorschau

Vorschau in separatem Fenster öffnen

Keywords: