Action Buttons
Im Actions-Tab verwaltest du die Buttons auf der linken und rechten Seite der AppBar. Du kannst Icon-Buttons, Text-Buttons, Popup-Menüs und Benachrichtigungs-Icons hinzufügen.
Übersicht
Section titled “Übersicht”Die AppBar hat zwei Bereiche für Actions:
| Bereich | Position | Beschreibung |
|---|---|---|
| Leading Actions | Links | Buttons/Menüs auf der linken Seite (neben dem Zurück-Button) |
| Trailing Actions | Rechts | Buttons/Menüs auf der rechten Seite (nach dem Titel) |
Action Typen
Section titled “Action Typen”Es gibt vier verschiedene Action-Typen:
Icon Button
Section titled “Icon Button”Ein einfacher Button mit nur einem Icon.
| Eigenschaft | Beschreibung |
|---|---|
| Icon | Wählbares Icon aus der Icon-Bibliothek |
| Icon-Größe | 16 - 48 px |
| Icon-Farbe | Beliebige Farbe |
| Padding | Abstand um das Icon |
| Ziel-Route | Navigation beim Tippen |
Text Button
Section titled “Text Button”Ein Button mit Text, in verschiedenen Stilen.
| Eigenschaft | Beschreibung |
|---|---|
| Text | Der Button-Text |
| Button-Stil | Text, Outlined oder Elevated |
| Typografie | Schriftart, Größe, Stärke |
| Farben | Text- und Rahmen-/Hintergrundfarbe |
| Ziel-Route | Navigation beim Tippen |
Popup-Menü
Section titled “Popup-Menü”Ein Icon-Button, der ein Dropdown-Menü öffnet.
| Eigenschaft | Beschreibung |
|---|---|
| Icon | Icon für den Menü-Button |
| Menü-Einträge | Liste von Menüpunkten |
| Popup-Stil | Elevation, Hintergrund, Eckenradius |
Benachrichtigungen
Section titled “Benachrichtigungen”Spezieller Icon-Button für Benachrichtigungen mit Badge.
| Eigenschaft | Beschreibung |
|---|---|
| Icon | Standard: Glocke |
| Badge | Zeigt Anzahl ungelesener Benachrichtigungen |
| Ziel-Route | Automatisch: /notifications |
Action hinzufügen
Section titled “Action hinzufügen”- Öffne den Actions-Tab im AppBar Editor
- Scrolle zu Leading Actions oder Trailing Actions
- Tippe auf “Leading Action hinzufügen” oder “Trailing Action hinzufügen”
- Wähle den Action-Typ (Icon, Text, Popup, Benachrichtigungen)
- Konfiguriere die Eigenschaften
- Tippe auf Speichern
Action bearbeiten
Section titled “Action bearbeiten”- Tippe auf das Bearbeiten-Icon (Stift) neben der Action
- Der Action Editor öffnet sich mit allen Einstellungen
- Passe die gewünschten Eigenschaften an
- Tippe auf Speichern
Action löschen
Section titled “Action löschen”- Tippe auf das Löschen-Icon (Mülleimer) neben der Action
- Bestätige die Löschung im Dialog
- Die Action wird entfernt
Trailing Actions sortieren
Section titled “Trailing Actions sortieren”Du kannst die Reihenfolge der Trailing Actions per Drag & Drop ändern:
- Halte eine Action gedrückt
- Ziehe sie an die gewünschte Position
- Lasse los, um die neue Position zu bestätigen
Icon Button konfigurieren
Section titled “Icon Button konfigurieren”Icon auswählen
Section titled “Icon auswählen”- Tippe auf den Icon-Bereich
- Der Icon-Picker öffnet sich
- Suche nach einem Icon oder durchsuche die Kategorien
- Tippe auf ein Icon, um es auszuwählen
Icon-Größe
Section titled “Icon-Größe”| Einstellung | Beschreibung | Werte |
|---|---|---|
| Icon-Größe | Größe des Icons in Pixeln | 16 - 48 px |
Icon-Farbe
Section titled “Icon-Farbe”| Einstellung | Beschreibung |
|---|---|
| Icon-Farbe | Farbe des Icons |
Padding (Abstand)
Section titled “Padding (Abstand)”Du kannst den Abstand um das Icon auf verschiedene Arten konfigurieren:
| Modus | Beschreibung |
|---|---|
| Alle Seiten | Gleicher Abstand auf allen Seiten |
| Nur horizontal | Abstand nur links und rechts |
| Nur vertikal | Abstand nur oben und unten |
| Individuell | Separate Werte für jede Seite (Oben, Rechts, Unten, Links) |
Ziel-Route
Section titled “Ziel-Route”Wähle die Route, zu der beim Tippen navigiert werden soll:
- Tippe auf den Route-Picker
- Wähle ein Modul aus der Liste
- Die Route wird automatisch eingetragen
Text Button konfigurieren
Section titled “Text Button konfigurieren”Text eingeben
Section titled “Text eingeben”| Einstellung | Beschreibung |
|---|---|
| Text | Der angezeigte Button-Text |
Button-Stil
Section titled “Button-Stil”| Stil | Beschreibung |
|---|---|
| Text | Nur Text, kein Hintergrund oder Rahmen |
| Outlined | Text mit Rahmen, transparenter Hintergrund |
| Elevated | Text auf farbigem Hintergrund mit Schatten |
Typografie
Section titled “Typografie”| Einstellung | Beschreibung | Werte |
|---|---|---|
| Schriftgröße | Größe des Textes | 10 - 24 px |
| Schriftart | Google Font Auswahl | 1000+ Fonts |
| Schriftstärke | Thin bis Black | 100 - 900 |
| Buchstabenabstand | Abstand zwischen Buchstaben | -2 bis +10 px |
| Großbuchstaben | Text in Großbuchstaben | Ein/Aus |
Farben (je nach Stil)
Section titled “Farben (je nach Stil)”| Einstellung | Verfügbar bei | Beschreibung |
|---|---|---|
| Textfarbe | Alle Stile | Farbe des Textes |
| Rahmenfarbe | Outlined | Farbe des Rahmens |
| Rahmenbreite | Outlined | 1 - 4 px |
| Hintergrundfarbe | Elevated | Farbe des Hintergrunds |
Button-Abmessungen
Section titled “Button-Abmessungen”| Einstellung | Beschreibung | Werte |
|---|---|---|
| Eckenradius | Abrundung der Ecken | 0 - 32 px |
| Padding horizontal | Abstand links/rechts | 8 - 32 px |
| Padding vertikal | Abstand oben/unten | 4 - 24 px |
| Elevation | Schattentiefe (nur Elevated) | 0 - 16 |
Popup-Menü konfigurieren
Section titled “Popup-Menü konfigurieren”Menü-Button Icon
Section titled “Menü-Button Icon”- Tippe auf den Icon-Bereich
- Wähle ein Icon (Standard: drei Punkte vertikal)
Menü-Einträge bearbeiten
Section titled “Menü-Einträge bearbeiten”- Tippe auf “Menüpunkte bearbeiten”
- Der Popup-Menü-Editor öffnet sich
- Füge Einträge hinzu oder bearbeite bestehende
- Speichere die Änderungen
Popup-Stil
Section titled “Popup-Stil”| Einstellung | Beschreibung | Werte |
|---|---|---|
| Elevation | Schattentiefe des Menüs | 0 - 24 |
| Hintergrundfarbe | Farbe des Menü-Hintergrunds | Farbe |
| Eckenradius | Abrundung der Menü-Ecken | 0 - 24 px |
| Animations-Dauer | Öffnen/Schließen-Animation | 100 - 1000 ms |
Benachrichtigungs-Icon
Section titled “Benachrichtigungs-Icon”Der Benachrichtigungs-Action-Typ ist speziell für Benachrichtigungen optimiert:
| Eigenschaft | Beschreibung |
|---|---|
| Icon | Wählbar (Standard: Glocke) |
| Ziel-Route | Automatisch: /notifications |
| Badge | Zeigt automatisch die Anzahl ungelesener Benachrichtigungen |
Live-Vorschau
Section titled “Live-Vorschau”Bei Text-Buttons zeigt der Editor eine Live-Vorschau oberhalb der Einstellungen:
- Zeigt den Button in Echtzeit
- Aktualisiert sich bei jeder Änderung
- Hilft bei der Feinabstimmung des Designs
Häufige Fragen
Section titled “Häufige Fragen”Warum kann ich nur eine Leading Action hinzufügen?
Section titled “Warum kann ich nur eine Leading Action hinzufügen?”Der Leading-Bereich ist normalerweise für den Zurück-Button reserviert. Eine zusätzliche Leading Action ersetzt den Zurück-Button für diese Seite.
Wie füge ich mehr als eine Action hinzu?
Section titled “Wie füge ich mehr als eine Action hinzu?”Im Trailing-Bereich kannst du mehrere Actions hinzufügen. Für den Leading-Bereich ist nur eine Action erlaubt.
Kann ich die Reihenfolge der Actions ändern?
Section titled “Kann ich die Reihenfolge der Actions ändern?”Ja, für Trailing Actions: Halte eine Action gedrückt und ziehe sie an die gewünschte Position.
Wie erstelle ich ein Popup-Menü mit mehreren Einträgen?
Section titled “Wie erstelle ich ein Popup-Menü mit mehreren Einträgen?”- Wähle den Action-Typ “Popup-Menü”
- Speichere die Action zuerst
- Tippe dann auf “Menüpunkte bearbeiten”
- Füge im Popup-Menü-Editor die gewünschten Einträge hinzu
Werden die Actions für Light und Dark Mode separat konfiguriert?
Section titled “Werden die Actions für Light und Dark Mode separat konfiguriert?”Einige Eigenschaften wie Icon-Farben und Button-Farben können für Light und Dark Mode separat konfiguriert werden. Nutze die entsprechenden Farbfelder im Editor.
Zusammenfassung der Einstellungen
Section titled “Zusammenfassung der Einstellungen”Icon Button
Section titled “Icon Button”| Einstellung | Typ | Werte |
|---|---|---|
| Icon | Icon-Picker | Material Icons |
| Icon-Größe | Slider | 16 - 48 px |
| Icon-Farbe | Farbpicker | Farbe |
| Padding-Modus | Auswahl | Alle/Horizontal/Vertikal/Individuell |
| Padding | Slider | 0 - 24 px |
| Ziel-Route | Route-Picker | App-Routen |
Text Button
Section titled “Text Button”| Einstellung | Typ | Werte |
|---|---|---|
| Text | Textfeld | Beliebiger Text |
| Button-Stil | Auswahl | Text/Outlined/Elevated |
| Schriftgröße | Slider | 10 - 24 px |
| Schriftart | Font-Picker | Google Fonts |
| Schriftstärke | Dropdown | 100 - 900 |
| Textfarbe | Farbpicker | Farbe |
| Großbuchstaben | Toggle | Ein/Aus |
| Rahmenfarbe | Farbpicker | Farbe (Outlined) |
| Rahmenbreite | Slider | 1 - 4 px (Outlined) |
| Hintergrundfarbe | Farbpicker | Farbe (Elevated) |
| Eckenradius | Slider | 0 - 32 px |
| Padding horizontal | Slider | 8 - 32 px |
| Padding vertikal | Slider | 4 - 24 px |
| Elevation | Slider | 0 - 16 (Elevated) |
Popup-Menü
Section titled “Popup-Menü”| Einstellung | Typ | Werte |
|---|---|---|
| Icon | Icon-Picker | Material Icons |
| Icon-Größe | Slider | 16 - 48 px |
| Icon-Farbe | Farbpicker | Farbe |
| Menü-Einträge | Editor | Beliebig viele |
| Popup-Elevation | Slider | 0 - 24 |
| Popup-Hintergrund | Farbpicker | Farbe |
| Popup-Eckenradius | Slider | 0 - 24 px |
| Animations-Dauer | Slider | 100 - 1000 ms |
Weiterführende Themen
Section titled “Weiterführende Themen” Stil-Einstellungen Sichtbarkeit, Logo, Farben, Typografie und mehr
Vorlagen Default-Vorlage setzen und Design auf alle anwenden