Eingabe-Widgets sind essenziell für Formulare und Benutzerinteraktion. Hier passt du alle Formular-Elemente deiner App an.
| Widget | Verwendung | Beispiel |
|---|
| TextField | Texteingabe | Name, E-Mail, Passwort |
| Dropdown | Einzelauswahl aus Liste | Land, Kategorie |
| Checkbox | Mehrfachauswahl | AGB akzeptieren, Optionen |
| Radio | Einzelauswahl aus Gruppe | Zahlungsart, Größe |
| Switch | Ein/Aus-Schalter | Einstellungen, Features |
| DatePicker | Datumsauswahl | Geburtstag, Termin |
Das vielseitigste Eingabe-Element für Text.
In der Vorschau kannst du zwischen vier Zuständen wechseln:
- Normal: Standardansicht
- Fokus: Wenn das Feld aktiv ist
- Fehler: Bei Validierungsfehlern
- Deaktiviert: Wenn nicht editierbar
| Einstellung | Beschreibung |
|---|
| Hintergrundfarbe | Füllfarbe des Feldes |
| Textfarbe | Farbe der Eingabe |
| Hinweisfarbe | Farbe des Platzhaltertexts |
| Labelfarbe | Farbe der Beschriftung |
| Rahmenfarbe (Normal) | Rahmen im Normalzustand |
| Rahmenfarbe (Fokus) | Rahmen bei aktivem Feld |
| Rahmenfarbe (Fehler) | Rahmen bei Validierungsfehler |
| Cursorfarbe | Farbe des Eingabecursors |
| Einstellung | Beschreibung |
|---|
| Prefix-Icon-Farbe | Farbe des linken Icons |
| Suffix-Icon-Farbe | Farbe des rechten Icons |
| Prefix-Icon-Größe | Größe des linken Icons |
| Suffix-Icon-Größe | Größe des rechten Icons |
| Icon-Padding | Abstand um Icons |
| Einstellung | Bereich | Beschreibung |
|---|
| Rahmenbreite | 0-4 px | Dicke des Randes |
| Fokus-Rahmenbreite | 1-4 px | Rahmen bei Fokus |
| Eckenradius | 0-24 px | Rundung der Ecken |
| Padding (oben/rechts/unten/links) | 0-24 px | Innenabstände |
| Schriftgröße | 12-24 px | Größe der Eingabe |
| Schriftart | Google Fonts | Schriftfamilie |
| Schriftgewicht | Light-Bold | Dicke der Schrift |
| Buchstabenabstand | -2 bis 4 px | Abstand zwischen Buchstaben |
| Zeilenhöhe | 1.0-2.0 | Multiplikator |
| Einstellung | Beschreibung |
|---|
| Hintergrundfarbe | Füllfarbe wenn deaktiviert |
| Textfarbe | Textfarbe wenn deaktiviert |
| Rahmenfarbe | Rahmen wenn deaktiviert |
| Opacity | Gesamttransparenz (0.0-1.0) |
| Einstellung | Beschreibung |
|---|
| Schatten aktivieren | Schatten unter dem Feld |
| Schattenfarbe | Farbe des Schattens |
| Blur Radius | Weichheit des Schattens |
| Spread Radius | Ausbreitung |
| Offset X/Y | Position des Schattens |
| Elevation | Alternative zu manuellem Schatten |
Auswahlfeld mit aufklappbarer Optionsliste.
Die Einstellungen entsprechen weitgehend dem TextField, plus:
| Einstellung | Beschreibung |
|---|
| Pfeil-Icon-Farbe | Farbe des Dropdown-Pfeils |
| Pfeil-Icon-Größe | Größe des Pfeils |
| Einstellung | Beschreibung |
|---|
| Menü-Hintergrund | Farbe des Auswahlmenüs |
| Menü-Elevation | Schatten des Menüs |
| Menü-Eckenradius | Rundung des Menüs |
| Option-Höhe | Höhe jeder Option |
| Ausgewählt-Farbe | Hintergrund der gewählten Option |
| Hover-Farbe | Hintergrund bei Hover |
Entspricht dem TextField.
Kontrollkästchen für Ja/Nein-Auswahlen.
| Einstellung | Beschreibung |
|---|
| Aktiv-Farbe | Hintergrund wenn angekreuzt |
| Inaktiv-Farbe | Rahmenfarbe wenn nicht angekreuzt |
| Häkchen-Farbe | Farbe des Häkchens |
| Fokus-Farbe | Farbe bei Fokus |
| Einstellung | Bereich | Beschreibung |
|---|
| Größe | 18-32 px | Größe der Checkbox |
| Eckenradius | 0-8 px | Rundung (0 = eckig, 8 = rund) |
| Rahmenbreite | 1-3 px | Dicke des Rahmens |
| Einstellung | Beschreibung |
|---|
| Deaktiviert-Farbe | Farbe wenn deaktiviert |
| Deaktiviert-Opacity | Transparenz wenn deaktiviert |
| Einstellung | Beschreibung |
|---|
| Animationsdauer | Dauer der An/Aus-Animation |
| Animationskurve | Art der Animation |
Optionsfelder für Einzelauswahl aus einer Gruppe.
| Einstellung | Beschreibung |
|---|
| Aktiv-Außenfarbe | Äußerer Ring wenn ausgewählt |
| Aktiv-Innenfarbe | Innerer Punkt wenn ausgewählt |
| Inaktiv-Farbe | Farbe wenn nicht ausgewählt |
| Fokus-Farbe | Farbe bei Fokus |
| Einstellung | Bereich | Beschreibung |
|---|
| Äußere Größe | 18-32 px | Gesamtgröße |
| Innere Größe | 8-18 px | Größe des Punkts |
| Rahmenbreite | 1-3 px | Dicke des äußeren Rings |
Entsprechen der Checkbox.
Kippschalter für Ein/Aus-Einstellungen.
| Einstellung | Beschreibung |
|---|
| Track-Farbe (An) | Hintergrund wenn eingeschaltet |
| Track-Farbe (Aus) | Hintergrund wenn ausgeschaltet |
| Thumb-Farbe (An) | Schieber wenn eingeschaltet |
| Thumb-Farbe (Aus) | Schieber wenn ausgeschaltet |
| Fokus-Farbe | Umrandung bei Fokus |
| Einstellung | Bereich | Beschreibung |
|---|
| Track-Breite | 34-60 px | Breite der Schiene |
| Track-Höhe | 14-34 px | Höhe der Schiene |
| Thumb-Größe | 18-30 px | Größe des Schiebers |
| Track-Eckenradius | 0-20 px | Rundung der Schiene |
| Einstellung | Beschreibung |
|---|
| Deaktiviert Track-Farbe | Schiene wenn deaktiviert |
| Deaktiviert Thumb-Farbe | Schieber wenn deaktiviert |
| Opacity | Transparenz wenn deaktiviert |
| Einstellung | Beschreibung |
|---|
| Animationsdauer | Dauer des Umschaltens |
| Animationskurve | Art der Bewegung |
Kalender-Dialog zur Datumsauswahl.
| Einstellung | Beschreibung |
|---|
| Header-Hintergrund | Farbe des oberen Bereichs |
| Header-Textfarbe | Farbe des Datums im Header |
| Einstellung | Beschreibung |
|---|
| Hintergrundfarbe | Kalender-Hintergrund |
| Tag-Textfarbe | Farbe der Tageszahlen |
| Ausgewählt-Farbe | Hintergrund des gewählten Tags |
| Heute-Farbe | Hervorhebung des heutigen Datums |
| Deaktiviert-Farbe | Farbe nicht wählbarer Tage |
| Einstellung | Beschreibung |
|---|
| Wochentag-Textfarbe | Farbe der Wochentagsabkürzungen |
| Wochenend-Farbe | Hervorhebung von Sa/So |
| Einstellung | Beschreibung |
|---|
| Button-Textfarbe | Farbe von “Abbrechen”/“OK” |
| Button-Hintergrund | Hintergrund der Buttons |
Im TextField-Editor unter “Aussehen” findest du die Einstellung “Cursorfarbe”.
Ja, unter “Menü-Einstellungen” kannst du Hintergrund, Höhe und Farben der Optionen anpassen.
Setze den Eckenradius auf einen höheren Wert (z.B. 4 px für leichte Rundung oder 8 px für rund).
- Track-Höhe: 31 px
- Track-Breite: 51 px
- Thumb-Größe: 27 px
- Track-Eckenradius: 15 px
