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

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)

Leading Actions Limit

Im Leading-Bereich ist nur eine Action erlaubt, da der Zurück-Button bereits dort positioniert ist. Im Trailing-Bereich kannst du mehrere Actions hinzufügen.

---

Action Typen

Es gibt vier verschiedene Action-Typen:

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

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ü

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

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

1. Öffne den Actions-Tab im AppBar Editor
2. Scrolle zu Leading Actions oder Trailing Actions
3. Tippe auf “Leading Action hinzufügen” oder “Trailing Action hinzufügen”
4. Wähle den Action-Typ (Icon, Text, Popup, Benachrichtigungen)
5. Konfiguriere die Eigenschaften
6. Tippe auf Speichern

---

Action bearbeiten

1. Tippe auf das Bearbeiten-Icon (Stift) neben der Action
2. Der Action Editor öffnet sich mit allen Einstellungen
3. Passe die gewünschten Eigenschaften an
4. Tippe auf Speichern

---

Action löschen

1. Tippe auf das Löschen-Icon (Mülleimer) neben der Action
2. Bestätige die Löschung im Dialog
3. Die Action wird entfernt

---

Trailing Actions sortieren

Du kannst die Reihenfolge der Trailing Actions per Drag & Drop ändern:

1. Halte eine Action gedrückt
2. Ziehe sie an die gewünschte Position
3. Lasse los, um die neue Position zu bestätigen

Nur Trailing Actions

Nur die Trailing Actions können sortiert werden, da im Leading-Bereich nur eine Action erlaubt ist.

---

Icon Button konfigurieren

Icon auswählen

1. Tippe auf den Icon-Bereich
2. Der Icon-Picker öffnet sich
3. Suche nach einem Icon oder durchsuche die Kategorien
4. Tippe auf ein Icon, um es auszuwählen

Icon-Größe

Einstellung	Beschreibung	Werte
Icon-Größe	Größe des Icons in Pixeln	16 - 48 px

Icon-Farbe

Einstellung	Beschreibung
Icon-Farbe	Farbe des Icons

Dark Mode Farben

Konfiguriere auch eine Farbe für den Dark Mode, damit das Icon in beiden Themes sichtbar ist.

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

Wähle die Route, zu der beim Tippen navigiert werden soll:

1. Tippe auf den Route-Picker
2. Wähle ein Modul aus der Liste
3. Die Route wird automatisch eingetragen

---

Text Button konfigurieren

Text eingeben

Einstellung	Beschreibung
Text	Der angezeigte Button-Text

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

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)

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

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

Menü-Button Icon

1. Tippe auf den Icon-Bereich
2. Wähle ein Icon (Standard: drei Punkte vertikal)

Menü-Einträge bearbeiten

1. Tippe auf “Menüpunkte bearbeiten”
2. Der Popup-Menü-Editor öffnet sich
3. Füge Einträge hinzu oder bearbeite bestehende
4. Speichere die Änderungen

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

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

Automatische Badge-Anzeige

Das Badge mit der Anzahl ungelesener Benachrichtigungen wird automatisch angezeigt, wenn das Benachrichtigungsmodul aktiv ist.

---

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

---

Tipps

Konsistente Farben

Verwende für Icon-Buttons dieselbe Farbe wie für den Titel, um ein einheitliches Erscheinungsbild zu erzielen.

Ausreichend Padding

Stelle sicher, dass Icon-Buttons genug Padding haben (mindestens 8px), damit sie leicht zu tippen sind.

Popup-Menü für viele Optionen

Wenn du viele Actions brauchst, verwende ein Popup-Menü statt mehrerer einzelner Buttons. Das spart Platz und hält die AppBar übersichtlich.

Text-Buttons sparsam einsetzen

Text-Buttons in der AppBar sollten kurze Texte haben (z.B. “Speichern”, “Fertig”). Für längere Texte verwende besser ein Popup-Menü.

---

Häufige Fragen

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?

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?

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?

1. Wähle den Action-Typ “Popup-Menü”
2. Speichere die Action zuerst
3. Tippe dann auf “Menüpunkte bearbeiten”
4. Füge im Popup-Menü-Editor die gewünschten Einträge hinzu

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

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

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ü

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

Stil-Einstellungen Sichtbarkeit, Logo, Farben, Typografie und mehr

Vorlagen Default-Vorlage setzen und Design auf alle anwenden