Feedback-Widgets informieren Nutzer über Aktionen, fordern Entscheidungen an und bieten Hilfestellungen.
| Widget | Typ | Verwendung |
|---|
| Dialog | Modal | Wichtige Entscheidungen, Bestätigungen |
| BottomSheet | Modal | Aktionen, Formulare, Details |
| Snackbar | Kurz | Bestätigungen, Hinweise |
| Tooltip | Hilfe | Erklärungen zu Elementen |
Modale Fenster für wichtige Benutzerentscheidungen.
| Einstellung | Beschreibung |
|---|
| Hintergrundfarbe | Farbe des Dialog-Fensters |
| Titel-Farbe | Farbe der Überschrift |
| Inhalts-Farbe | Farbe des Textes |
| Einstellung | Bereich | Beschreibung |
|---|
| Schattenfarbe | - | Farbe des Schattens |
| Elevation | 0-24 | Stärke des Schattens |
| Blur Radius | 0-32 px | Weichheit |
| Spread Radius | -8 bis 16 px | Ausbreitung |
| Einstellung | Bereich | Beschreibung |
|---|
| Maximale Breite | 200-500 px | Maximale Dialog-Breite |
| Padding | 0-32 px | Innenabstand |
| Titel-Abstand | 0-24 px | Abstand unter dem Titel |
| Button-Abstand | 0-24 px | Abstand zwischen Buttons |
| Einstellung | Bereich | Beschreibung |
|---|
| Oben links | 0-32 px | Radius oben links |
| Oben rechts | 0-32 px | Radius oben rechts |
| Unten links | 0-32 px | Radius unten links |
| Unten rechts | 0-32 px | Radius unten rechts |
| Einstellung | Beschreibung |
|---|
| Titel-Schriftgröße | Größe der Überschrift |
| Titel-Schriftgewicht | Dicke der Überschrift |
| Inhalt-Schriftgröße | Größe des Textes |
| Inhalt-Schriftgewicht | Dicke des Textes |
| Zeilenhöhe | Abstand zwischen Zeilen |
| Einstellung | Beschreibung |
|---|
| Barrier-Farbe | Farbe des Hintergrund-Overlays |
| Barrier-Opacity | Stärke der Verdunkelung |
| Barrier-Dismissable | Schließen durch Tippen außerhalb |
| Animation-Dauer | Dauer der Ein-/Ausblendung |
| Animation-Kurve | Art der Animation |
Von unten einfahrendes Panel für Aktionen und Formulare.
| Einstellung | Beschreibung |
|---|
| Hintergrundfarbe | Farbe des Sheets |
| Handle-Farbe | Farbe des Zieh-Balkens |
| Einstellung | Bereich | Beschreibung |
|---|
| Anzeigen | An/Aus | Handle anzeigen |
| Breite | 32-64 px | Breite des Balkens |
| Höhe | 4-8 px | Höhe des Balkens |
| Eckenradius | 0-4 px | Rundung des Balkens |
| Abstand oben | 8-16 px | Abstand vom oberen Rand |
| Einstellung | Bereich | Beschreibung |
|---|
| Mindesthöhe | 100-400 px | Minimale Höhe |
| Maximalhöhe | 50-90% | Maximale Höhe (Prozent des Bildschirms) |
| Padding | 0-32 px | Innenabstand |
Nur die oberen Ecken sind relevant:
| Einstellung | Bereich | Beschreibung |
|---|
| Oben links | 0-32 px | Radius oben links |
| Oben rechts | 0-32 px | Radius oben rechts |
Wie beim Dialog.
| Einstellung | Beschreibung |
|---|
| Barrier-Farbe | Hintergrund-Overlay |
| Barrier-Opacity | Stärke der Verdunkelung |
| Drag to Dismiss | Durch Wischen schließen |
| Scroll-Kontrolle | Erweiterbar durch Scrollen |
| Animation-Dauer | Ein-/Ausfahrt-Dauer |
Kurze Benachrichtigung am unteren Bildschirmrand.
| Einstellung | Beschreibung |
|---|
| Hintergrundfarbe | Farbe der Snackbar |
| Textfarbe | Farbe der Nachricht |
| Aktions-Textfarbe | Farbe des Action-Buttons |
| Einstellung | Bereich | Beschreibung |
|---|
| Maximale Breite | 300-600 px | Maximale Breite |
| Padding horizontal | 8-24 px | Seitliche Innenabstände |
| Padding vertikal | 8-16 px | Vertikale Innenabstände |
| Eckenradius | 0-16 px | Rundung der Ecken |
| Margin (unten) | 8-32 px | Abstand vom unteren Rand |
| Margin (seitlich) | 8-24 px | Seitlicher Abstand |
| Einstellung | Beschreibung |
|---|
| Schriftgröße | Größe der Nachricht |
| Schriftgewicht | Dicke der Schrift |
| Aktions-Schriftgröße | Größe des Action-Textes |
| Aktions-Schriftgewicht | Dicke des Action-Textes |
| Einstellung | Beschreibung |
|---|
| Icon anzeigen | Icon links der Nachricht |
| Icon-Größe | Größe des Icons |
| Icon-Farbe | Farbe des Icons |
| Close-Button anzeigen | X-Button rechts |
| Einstellung | Bereich | Beschreibung |
|---|
| Anzeigedauer | 1-10 s | Wie lange sichtbar |
| Animation-Dauer | 100-500 ms | Ein-/Ausblendung |
| Position | Oben/Unten | Wo erscheint die Snackbar |
| Schwebend | An/Aus | Mit Margin oder am Rand |
Hilfetext, der bei Hover oder Langdruck erscheint.
| Einstellung | Beschreibung |
|---|
| Hintergrundfarbe | Farbe des Tooltips |
| Textfarbe | Farbe des Textes |
| Einstellung | Bereich | Beschreibung |
|---|
| Padding horizontal | 8-24 px | Seitliche Innenabstände |
| Padding vertikal | 4-16 px | Vertikale Innenabstände |
| Eckenradius | 0-12 px | Rundung der Ecken |
| Maximale Breite | 100-300 px | Maximale Breite |
| Einstellung | Beschreibung |
|---|
| Schriftgröße | Größe des Textes |
| Schriftgewicht | Dicke der Schrift |
| Zeilenhöhe | Abstand zwischen Zeilen |
| Einstellung | Beschreibung |
|---|
| Schatten anzeigen | Schatten aktivieren |
| Schattenfarbe | Farbe des Schattens |
| Blur Radius | Weichheit |
| Einstellung | Beschreibung |
|---|
| Pfeil anzeigen | Pfeil zum Element |
| Pfeil-Größe | Größe des Pfeils |
| Bevorzugte Position | Oben, Unten, Links, Rechts |
| Abstand zum Element | Abstand zwischen Tooltip und Element |
| Einstellung | Bereich | Beschreibung |
|---|
| Erscheinungs-Verzögerung | 0-2000 ms | Wartezeit bis Anzeige |
| Anzeigedauer | 1-10 s | Wie lange sichtbar |
| Animation-Dauer | 100-500 ms | Ein-/Ausblendung |
Ja, die Einstellung “Barrier-Dismissable” erlaubt das Schließen durch Tippen außerhalb des Dialogs.
Setze “Scroll-Kontrolle” auf An und “Maximalhöhe” auf 90%.
Erhöhe die “Anzeigedauer” in den Animation-Einstellungen. Für Nachrichten mit Aktionen empfehlen sich 4-6 Sekunden.
Nein, Tooltips sind für temporäre Hilfestellungen gedacht. Für dauerhafte Hinweise nutze Inline-Text oder Info-Icons.
Die Farbe wird durch die Button-Theme-Einstellungen definiert. Dialog-Buttons übernehmen das Theme der Text-Buttons.
