textfield
Diese Komponente stellt ein einzeiliges Textfeld dar.
Konfiguration
Für allgemeine Konfigurations-Optionen siehe Allgemeine Komponenten Konfiguration.
Spezifische Konfiguration
type("textfield")-
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:
.textfield-
Styles für den Container des Textfelds.
.textfield-label/.textfield .label-
Direkter Zugriff auf das Label des Textfelds.
.textfield .value-
Zugriff auf das Eingabeelement des Textfelds.
Beispiel
{
"$schema": "https://forms.virtimo.net/5.0.x/schema.json",
"metaData": {
"id": 0,
"version": 0
},
"configuration": {
"styles": {
"css": ".textfield.default .value { color: #e18a50}"
}
},
"components": [
{
"type": "container",
"label": "Textfield Component Example",
"components": [
{
"type": "textfield",
"label": "My Textfield",
"value": "Hello World"
},
{
"type": "textfield",
"value": "${/data/text}",
"cls": "${/data/text == 'Some Text' && 'default'}"
}
]
}
],
"state": {
"data": {
"text": "Some Text"
}
}
}