Neben den Hauptkategorien bietet die Theme Suite weitere spezialisierte Widgets für Navigation, Listen, Ladeanimationen und kompakte Info-Elemente.
| Kategorie | Widget | Verwendung |
|---|
| Navigation | TabBar | Horizontale Tab-Navigation |
| Listen | ListTile | Standard-Listeneintrag |
| Indikatoren | Progress Indicator | Fortschrittsanzeige |
| Indikatoren | Loading Indicator | Lade-Animation |
| Chips | Chip | Kompakte Info-/Aktionselemente |
Horizontale Tab-Navigation für Abschnitts-Wechsel.
| Einstellung | Beschreibung |
|---|
| Hintergrundfarbe | Farbe der TabBar |
| Ausgewählt-Farbe | Farbe des aktiven Tabs |
| Nicht-ausgewählt-Farbe | Farbe inaktiver Tabs |
| Indikator-Farbe | Farbe der Unterstreichung |
| Einstellung | Bereich | Beschreibung |
|---|
| Indikator-Gewicht | 2-4 px | Dicke der Unterstreichung |
| Indikator-Radius | 0-4 px | Rundung der Indikator-Enden |
| Indikator-Padding | 0-16 px | Seitlicher Abstand |
| Einstellung | Bereich | Beschreibung |
|---|
| Tab-Höhe | 42-56 px | Höhe der TabBar |
| Tab-Padding | 0-24 px | Abstand in den Tabs |
| Icon-Größe | 18-28 px | Größe der Tab-Icons |
| Icon-Abstand | 4-12 px | Abstand zwischen Icon und Text |
| Einstellung | Beschreibung |
|---|
| Schriftgröße | Größe der Tab-Labels |
| Schriftgewicht (aktiv) | Dicke bei aktivem Tab |
| Schriftgewicht (inaktiv) | Dicke bei inaktivem Tab |
| Buchstabenabstand | Abstand zwischen Buchstaben |
| Einstellung | Bereich | Beschreibung |
|---|
| Animation-Dauer | 150-400 ms | Dauer des Tab-Wechsels |
| Animation-Kurve | - | Art der Bewegung |
Standard-Element für Listen aller Art.
| Einstellung | Beschreibung |
|---|
| Hintergrundfarbe | Farbe des Eintrags |
| Titel-Farbe | Farbe des Haupttexts |
| Untertitel-Farbe | Farbe des Nebentexts |
| Icon-Farbe | Farbe des führenden Icons |
| Trailing-Farbe | Farbe rechts (Icon/Text) |
| Ausgewählt-Hintergrund | Farbe bei Auswahl |
| Hover-Hintergrund | Farbe bei Hover |
| Einstellung | Beschreibung |
|---|
| Divider anzeigen | Trennlinie unter dem Eintrag |
| Divider-Farbe | Farbe der Trennlinie |
| Divider-Dicke | Dicke der Trennlinie |
| Divider-Einzug | Seitlicher Einzug |
| Einstellung | Bereich | Beschreibung |
|---|
| Mindesthöhe | 48-72 px | Minimale Eintragshöhe |
| Padding horizontal | 8-24 px | Seitliche Innenabstände |
| Padding vertikal | 8-16 px | Vertikale Innenabstände |
| Icon-Größe | 20-32 px | Größe des führenden Icons |
| Trailing-Icon-Größe | 18-28 px | Größe des rechten Icons |
| Icon-Abstand | 8-24 px | Abstand zwischen Icon und Text |
| Einstellung | Beschreibung |
|---|
| Titel-Schriftgröße | Größe des Haupttexts |
| Titel-Schriftgewicht | Dicke des Haupttexts |
| Untertitel-Schriftgröße | Größe des Nebentexts |
| Untertitel-Schriftgewicht | Dicke des Nebentexts |
| Zeilenhöhe | Abstand zwischen Zeilen |
Fortschrittsanzeige für Aktionen mit bekanntem Fortschritt.
| Einstellung | Beschreibung |
|---|
| Aktiv-Farbe | Farbe des Fortschrittsbalkens |
| Hintergrund-Farbe | Farbe des leeren Bereichs |
| Einstellung | Bereich | Beschreibung |
|---|
| Höhe | 2-12 px | Dicke des Balkens |
| Eckenradius | 0-6 px | Rundung der Enden |
| Breite | 100-400 px | Breite des Balkens |
| Einstellung | Bereich | Beschreibung |
|---|
| Größe | 24-64 px | Durchmesser des Kreises |
| Strichstärke | 2-8 px | Dicke des Kreisrings |
| Einstellung | Beschreibung |
|---|
| Animiert | Animation für unbestimmten Fortschritt |
| Animationsgeschwindigkeit | Schnelligkeit der Animation |
Lade-Animation für Wartezeiten.
| Einstellung | Beschreibung |
|---|
| Primärfarbe | Hauptfarbe der Animation |
| Sekundärfarbe | Zweite Farbe (bei manchen Stilen) |
| Einstellung | Bereich | Beschreibung |
|---|
| Größe | 24-64 px | Größe der Animation |
| Strichstärke | 2-6 px | Dicke der Linien |
| Einstellung | Optionen | Beschreibung |
|---|
| Stil | Zirkulär, Punkte, Pulse | Art der Animation |
| Geschwindigkeit | Langsam, Normal, Schnell | Animationsgeschwindigkeit |
| Einstellung | Beschreibung |
|---|
| Mit Text | Ladetext unter der Animation |
| Textfarbe | Farbe des Ladetexts |
| Text-Schriftgröße | Größe des Ladetexts |
| Text-Abstand | Abstand zwischen Animation und Text |
Kompakte Elemente für Tags, Filter und Aktionen.
| Einstellung | Beschreibung |
|---|
| Hintergrundfarbe | Farbe des Chips |
| Textfarbe | Farbe der Beschriftung |
| Icon-Farbe | Farbe des optionalen Icons |
| Ausgewählt-Hintergrund | Farbe bei Auswahl |
| Ausgewählt-Textfarbe | Textfarbe bei Auswahl |
| Rahmenfarbe | Farbe des Randes |
| Einstellung | Bereich | Beschreibung |
|---|
| Höhe | 28-40 px | Höhe des Chips |
| Padding horizontal | 8-16 px | Seitliche Innenabstände |
| Rahmenbreite | 0-2 px | Dicke des Randes |
| Eckenradius | 0-20 px | Rundung (20 = Pillenform) |
| Einstellung | Bereich | Beschreibung |
|---|
| Icon-Größe | 14-22 px | Größe des Icons |
| Icon-Abstand | 4-8 px | Abstand zum Text |
| Delete-Icon-Größe | 16-22 px | Größe des Löschen-Icons |
| Einstellung | Beschreibung |
|---|
| Hover-Hintergrund | Farbe bei Hover |
| Pressed-Hintergrund | Farbe beim Drücken |
| Deaktiviert-Hintergrund | Farbe wenn deaktiviert |
| Deaktiviert-Textfarbe | Textfarbe wenn deaktiviert |
| Deaktiviert-Opacity | Transparenz wenn deaktiviert |
| Einstellung | Beschreibung |
|---|
| Schriftgröße | Größe der Beschriftung |
| Schriftgewicht | Dicke der Schrift |
| Buchstabenabstand | Abstand zwischen Buchstaben |
| Einstellung | Beschreibung |
|---|
| Elevation | Schatten des Chips |
| Elevation bei Auswahl | Verstärkter Schatten bei Auswahl |
Nein, du kannst aus den vordefinierten Stilen wählen und deren Farben sowie Größe anpassen.
Setze den Eckenradius auf die Hälfte der Chip-Höhe (z.B. Höhe 32 px = Radius 16 px).
Die TabBar passt sich der Bildschirmbreite an. Auf schmalen Bildschirmen werden Tabs möglicherweise scrollbar.
Ja, setze “Divider anzeigen” auf Aus.
