Floating Action Button (FAB)

Der Floating Action Button (FAB) ist ein optionaler zentraler Aktions-Button, der über der Navigation schwebt. Er eignet sich ideal für die wichtigste Aktion deiner App - wie “Neur Beitrag”, “Hinzufügen” oder “Erstellen”. Tippe auf den FAB in der Vorschau, um das Smart Panel mit drei Tabs zu öffnen.

FAB hinzufügen

Tippe auf Element hinzufügen in der Toolbar
Wähle Floating Action Button
Der FAB erscheint in der Mitte der Navigation
Tippe darauf, um ihn zu konfigurieren

Stil Tab

Der Stil Tab steürt das visülle Erscheinungsbild des FAB.

Light/Dark Mode Toggle

Pfad: Stil-Tab - oben

Wechsle zwischen Light Mode und Dark Mode Bearbeitung. Alle Farbeinstellungen beziehen sich auf den gewählten Modus.

Icon

FAB-Icon auswählen

Pfad: Stil → Icon → FAB-Icon

Tippe auf die Icon-Vorschau, um den Icon-Picker zu öffnen.

Aspekt	Details
Standard	Plus-Icon (add)
Icon-Bibliothek	Material Icons
Vorschau	Zeigt Icon mit aktueller Farbe und Größe

Beliebte FAB-Icons:

Icon	Verwendung
add	Hinzufügen, Erstellen
edit	Bearbeiten
create	Neur Beitrag
camera_alt	Foto aufnehmen
message	Neü Nachricht
search	Suche öffnen

Icon-Größe

Pfad: Stil → Icon → Icon-Größe

Aspekt	Details
Bereich	16 - 48 px
Schritte	1 px
Standard	24 px

Icon-Farbe

Pfad: Stil → Icon → Icon-Farbe

Aspekt	Details
Standard	Weiss (#FFFFFF)
Farbwähler	Tippe auf die Farbe für den Picker

Farben

Hintergrundfarbe

Pfad: Stil → Farben → Hintergrundfarbe

Die Hauptfarbe des FAB.

Aspekt	Details
Standard	Primärfarbe aus Theme
Farbwähler	Tippe auf die Farbe für den Picker
Reset	Setzt auf Theme-Farbe zurück

Form

Form auswählen

Pfad: Stil → Form → Form

Form	Beschreibung
Kreis	Runder FAB (Standard, klassisch)
Quadrat	Eckiger FAB
Abgerundet	Quadrat mit abgerundeten Ecken

Eckenradius

Pfad: Stil → Form → Eckenradius

Nur sichtbar bei Form “Abgerundet”.

Aspekt	Details
Bereich	0 - 50 px
Schritte	1 px
Standard	28 px

Rahmen

Rahmen anzeigen

Pfad: Stil → Rahmen → Rahmen anzeigen

Aspekt	Details
Typ	Toggle (An/Aus)
Standard	Aus

Rahmenbreite

Pfad: Stil → Rahmen → Rahmenbreite

Nur sichtbar wenn “Rahmen anzeigen” aktiviert ist.

Aspekt	Details
Bereich	1 - 10 px
Schritte	1 px
Standard	1 px

Rahmenfarbe

Pfad: Stil → Rahmen → Rahmenfarbe

Aspekt	Details
Standard	Primärfarbe aus Theme

Effekte

Höhe (Schatten)

Pfad: Stil → Effekte → Höhe (Schatten)

Die Elevation bestimmt den Schattenwurf des FAB.

Aspekt	Details
Bereich	0 - 24
Schritte	1
Standard	6

Position Tab

Der Position Tab steürt die Platzierung und Größe des FAB.

Position

Horizontale Position

Pfad: Position → Position → Position

Position	Beschreibung
Start	FAB links positioniert
Mitte	FAB zentriert (Standard)
Ende	FAB rechts positioniert

Andocken

An BottomNav andocken

Pfad: Position → Position → An BottomNav andocken

Aspekt	Details
Typ	Toggle (An/Aus)
Standard	An
Auswirkung	FAB wird an die Navigation angeheftet

FAB erhoht

Pfad: Position → Position → FAB erhöt

Nur sichtbar wenn “An BottomNav andocken” aktiviert ist.

Aspekt	Details
Typ	Toggle (An/Aus)
Standard	Aus
Auswirkung Ein	FAB schwebt über der Navigation
Auswirkung Aus	FAB liegt auf Höhe der Navigation-Icons

Notch anzeigen

Pfad: Position → Position → Notch anzeigen

Nur sichtbar wenn “FAB erhöt” aktiviert ist.

Aspekt	Details
Typ	Toggle (An/Aus)
Standard	Aus
Auswirkung	Aussparung in der Navigation für den FAB

Notch-Ecken-Rundung

Pfad: Position → Position → Notch-Ecken-Rundung

Nur sichtbar wenn “Notch anzeigen” aktiviert ist und FAB nicht kreisförmig ist.

Aspekt	Details
Bereich	0 - 20 px
Schritte	1 px
Standard	8 px
Auswirkung	Rundet die Kanten der Notch ab

Größe

FAB-Größe

Pfad: Position → Position → Größe

Größe	Beschreibung	Durchmesser ca.
Mini	Kleine Version	40 px
Regular	Standard-Größe (Standard)	56 px
Large	Grosse Version	96 px

Verhalten Tab

Der Verhalten Tab steürt die Aktion und Animation des FAB.

Erweiterter FAB

Label anzeigen

Pfad: Verhalten → Erweiterter FAB → Label anzeigen

Zeigt Text neben dem Icon (Extended FAB).

Aspekt	Details
Typ	Toggle (An/Aus)
Standard	Aus
Auswirkung	FAB wird breiter mit Text

Label-Text

Pfad: Verhalten → Erweiterter FAB → Label-Text

Nur sichtbar wenn “Label anzeigen” aktiviert ist.

Aspekt	Details
Typ	Mehrsprachiges Textfeld
Beispiele	”Erstellen”, “Hinzufügen”, “Neu”

Label-Größe

Pfad: Verhalten → Erweiterter FAB → Label-Größe

Aspekt	Details
Bereich	10 - 20 px
Schritte	1 px
Standard	14 px

Label-Abstand

Pfad: Verhalten → Erweiterter FAB → Label-Abstand

Abstand zwischen Icon und Label.

Aspekt	Details
Bereich	4 - 20 px
Schritte	1 px
Standard	8 px

Aktion

Aktionstyp

Pfad: Verhalten → Aktion

Wähle einen Aktionstyp aus dem Grid:

Typ	Icon	Beschreibung
Seite öffnen	Web-Icon	Navigiert zu einer bestimmten Route
Menü anzeigen	Menu-Icon	Öffnet ein Kontextmenü mit Optionen
Dialog öffnen	Nachricht-Icon	Zeigt einen modalen Dialog
Speed Dial	Speed-Icon	Öffnet ein Fächer-Menü mit mehreren Aktionen

Ziel-Route

Pfad: Verhalten → Aktion → Ziel-Route

Nur sichtbar bei Aktionstyp “Seite öffnen”.

Aspekt	Details
Anzeige	Aktülle Route oder “Keine Route ausgewählt”
Bearbeiten	Tippe auf die Karte, um Route zu wählen

Menü bearbeiten

Pfad: Verhalten → Aktion → Menü bearbeiten

Nur sichtbar bei Aktionstyp “Menü anzeigen”. Öffnet den Menü-Editor.

Dialog bearbeiten

Pfad: Verhalten → Aktion → Dialog bearbeiten

Nur sichtbar bei Aktionstyp “Dialog öffnen”. Öffnet den Dialog-Editor.

Speed Dial

Nur sichtbar wenn Aktionstyp “Speed Dial” gewählt ist.

Speed Dial zeigt beim Tippen auf den FAB ein Fächer-Menü mit mehreren Aktionen.

Ausklapprichtung

Pfad: Verhalten → Speed Dial Menü → Ausklapprichtung

Richtung	Beschreibung
Oben	Items erscheinen über dem FAB (Standard)
Unten	Items erscheinen unter dem FAB

Abstand

Pfad: Verhalten → Speed Dial Menü → Abstand

Abstand zwischen den Speed Dial Items.

Aspekt	Details
Bereich	8 - 32 px
Schritte	1 px
Standard	16 px

Overlay anzeigen

Pfad: Verhalten → Speed Dial Menü → Overlay anzeigen

Aspekt	Details
Typ	Toggle (An/Aus)
Standard	An
Auswirkung	Dunkelt den Hintergrund ab wenn Speed Dial offen ist

Speed Dial Elemente bearbeiten

Pfad: Verhalten → Speed Dial Menü → Speed Dial Elemente bearbeiten

Tippe auf diese Karte, um den Speed Dial Items Editor zu öffnen.

Im Editor kannst du:

Neü Speed Dial Items hinzufügen
Bestehende Items bearbeiten (Icon, Label, Ziel)
Items per Drag & Drop sortieren
Items löschen

Jedes Speed Dial Item hat:

Eigenschaft	Beschreibung
Icon	Mini-FAB Icon
Label	Optionaler Text neben dem Mini-FAB
Ziel-Route	Wohin navigiert wird

Animation

Tap-Animation

Pfad: Verhalten → Animation → Tap-Animation

Animation beim Antippen des FAB.

Animation	Beschreibung
Keine	Kein visüller Effekt
Skalieren	FAB wird kurz kleiner (Standard)
Rotieren	FAB dreht sich beim Tippen

Skalierungsfaktor

Pfad: Verhalten → Animation → Skalierungsfaktor

Nur sichtbar wenn Tap-Animation “Skalieren” gewählt ist.

Aspekt	Details
Bereich	0.8 - 1.0
Schritte	0.01
Standard	0.95
Auswirkung	Niedrigere Werte = stärkere Verkleinerung

FAB entfernen

Halte den FAB lange gedrückt
Wähle FAB entfernen im Kontextmenü
Bestatige die Entfernung im Dialog

Tipps

Zurück zur Übersicht

Bottom Navigation Übersicht Zurück zur Hauptseite

Hintergrund konfigurieren Navigations-Hintergrund anpassen

Items konfigurieren Navigation Items anpassen