Hintergrund

Der Hintergrund der Bottom Navigation umfasst alle visüllen und verhaltensbasierten Einstellungen der Navigationsleiste selbst. Tippe auf den Hintergrund der Navigation (den Bereich zwischen den Items), um das Smart Panel mit vier Tabs zu öffnen.

Stil-Tab

Der Stil-Tab steürt das visülle Erscheinungsbild der Navigationsleiste.

Light/Dark Mode Toggle

Pfad: Stil-Tab - oben

Am oberen Rand des Panels findest du einen Toggle zum Wechseln zwischen Light Mode und Dark Mode Bearbeitung. Alle Farbeinstellungen in diesem Tab beziehen sich auf den aktuell gewählten Modus.

Farben

Hintergrundfarbe

Pfad: Stil → Farben → Hintergrundfarbe

Die Hauptfarbe der Navigationsleiste. Bei aktiviertem Gradient wird diese Farbe vom Farbverlauf überschrieben.

Aspekt	Details
Standard Light	Weiss (#FFFFFF)
Standard Dark	Dunkelgrau (#1E1E1E)
Farbwähler	Tippe auf die Farbe, um den Picker zu öffnen
Reset	Setzt auf Theme-Standardfarbe zurück

Deckkraft

Pfad: Stil → Farben → Deckkraft

Steürt die Transparenz des Hintergrunds.

Aspekt	Details
Bereich	0% - 100%
Schritte	5% pro Schritt
Standard	100% (vollständig deckend)
Bedienung	Slider ziehen

Farbverlauf

Pfad: Stil → Farbverlauf

Aktiviere einen Gradient statt einer einfarbigen Hintergrundfarbe.

Farbverlauf verwenden

Aspekt	Details
Typ	Toggle (An/Aus)
Standard	Aus
Auswirkung	Ersetzt die Hintergrundfarbe durch den Gradient

Gradient-Typ

Pfad: Stil → Farbverlauf → Gradient-Typ

Typ	Beschreibung
Linear	Gerader Farbverlauf von Start zu Ende
Radial	Kreisförmiger Farbverlauf vom Zentrum nach aussen
Sweep	Fächer-förmiger Farbverlauf um einen Mittelpunkt

Gradient-Farben

Definiere beliebig viele Farbpunkte für deinen Verlauf:

Aktion	Beschreibung
Farbe hinzufügen	Tippe auf + um einen neün Farbpunkt zu erstellen
Farbe ändern	Tippe auf einen Farbpunkt, um die Farbe zu wählen
Position ändern	Ziehe den Farbpunkt entlang der Leiste (0.0 - 1.0)
Farbe entfernen	Wische den Farbpunkt weg oder tippe auf X

Gradient-Richtung (nur Linear)

Pfad: Stil → Farbverlauf → Richtung

Einstellung	Beschreibung
Start	Startpunkt des Verlaufs (z.B. topCenter)
Ende	Endpunkt des Verlaufs (z.B. bottomCenter)

Verfügbare Positionen:

topLeft, topCenter, topRight
centerLeft, center, centerRight
bottomLeft, bottomCenter, bottomRight

Tile Mode

Pfad: Stil → Farbverlauf → Tile Mode

Bestimmt, was passiert, wenn der Gradient nicht den gesamten Bereich ausfüllt:

Modus	Beschreibung
Clamp	Letzte Farbe wird fortgesetzt
Repeated	Gradient wird wiederholt
Mirror	Gradient wird gespiegelt wiederholt
Decal	Transparenz ausserhalb des Bereichs

Rahmen

Rahmenbreite

Pfad: Stil → Rahmen → Rahmenbreite

Die Dicke des oberen Rands der Navigation.

Aspekt	Details
Bereich	0 - 5 px
Schritte	0.5 px
Standard	0 px (kein Rahmen)
Bedienung	Slider ziehen

Rahmenfarbe

Pfad: Stil → Rahmen → Rahmenfarbe

Die Farbe des oberen Rands. Nur sichtbar wenn Rahmenbreite > 0.

Aspekt	Details
Standard Light	Hellgrau (#E0E0E0)
Standard Dark	Dunkelgrau (#424242)

Eckenradius

Pfad: Stil → Rahmen → Eckenradius

Rundet die oberen Ecken der Navigation ab.

Aspekt	Details
Bereich	0 - 50 px
Schritte	1 px
Standard	0 px (eckig)
Auswirkung	Gilt für beide oberen Ecken gleichzeitig

Effekte

Höhe (Schatten)

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

Die Elevation bestimmt den Schattenwurf der Navigation.

Aspekt	Details
Bereich	0 - 24
Schritte	1
Standard	8
Auswirkung	Höhere Werte = stärkerer Schatten

Glassmorphism

Pfad: Stil → Effekte → Glassmorphism

Aktiviert einen modernen Blur-Effekt (Glassmorphismus).

Aspekt	Details
Typ	Toggle (An/Aus)
Standard	Aus
Auswirkung	Hintergrund-Unschärf für modernen Look

Unschärf-Intensität

Pfad: Stil → Effekte → Unschärf-Intensität

Nur sichtbar wenn Glassmorphismus aktiviert ist.

Aspekt	Details
Bereich	0 - 30
Schritte	1
Standard	0
Auswirkung	Höhere Werte = stärkere Unschärf

Layout-Tab

Der Layout-Tab steürt Abmessungen und Positionierung der Navigation.

Abmessungen

Höhe

Pfad: Layout → Abmessungen → Höhe

Die Gesamthöhe der Navigationsleiste.

Aspekt	Details
Bereich	40 - 100 px
Schritte	1 px
Standard	60 px
Bedienung	Slider ziehen

Innenabstand (Padding)

Pfad: Layout → Innenabstand

Der Abstand zwischen dem Rand der Navigation und dem Inhalt.

Padding oben

Aspekt	Details
Bereich	0 - 32 px
Standard	8 px

Padding unten

Aspekt	Details
Bereich	0 - 32 px
Standard	8 px

Horizontales Padding

Aspekt	Details
Bereich	0 - 32 px
Standard	8 px
Auswirkung	Gilt für links und rechts gleichzeitig

Item-Layout

Item-Ausrichtung

Pfad: Layout → Item-Layout → Item-Ausrichtung

Bestimmt, wie die Items horizontal verteilt werden.

Ausrichtung	Beschreibung
Start	Items am linken Rand
Mitte	Items zentriert
Ende	Items am rechten Rand
Zwischen	Gleicher Abstand zwischen Items, kein Rand-Abstand
Gleichmässig	Gleicher Abstand überall (Standard)
Umher	Gleicher Abstand, halb so viel am Rand

Item-Abstand

Pfad: Layout → Item-Layout → Item-Abstand

Zusätzlicher Abstand zwischen den Items.

Aspekt	Details
Bereich	0 - 32 px
Schritte	1 px
Standard	0 px

Schwebender Modus

Pfad: Layout → Schwebend → Schwebende Navigation

Löst die Navigation vom unteren Bildschirmrand.

Aspekt	Details
Typ	Toggle (An/Aus)
Standard	Aus
Auswirkung	Navigation schwebt über dem Inhalt

Abstand unten

Pfad: Layout → Schwebend → Abstand unten

Nur sichtbar wenn Schwebender Modus aktiviert ist.

Aspekt	Details
Bereich	0 - 40 px
Schritte	1 px
Standard	0 px
Auswirkung	Abstand vom Bildschirmrand

Indikator-Tab

Der Indikator zeigt an, welches Item gerade aktiv ist.

Indikator-Typ

Pfad: Indikator → Indikator-Typ → Indikator-Typ

Typ	Beschreibung
Keiner	Kein visüller Indikator
Punkt	Kleiner runder Punkt
Linie	Horizontale Linie
Hintergrund	Farbiger Hintergrund hinter dem aktiven Item

Indikator-Position

Pfad: Indikator → Indikator-Typ → Position

Nur sichtbar für Typ “Punkt” und “Linie”.

Position	Beschreibung
Oben	Indikator erscheint über dem Item
Unten	Indikator erscheint unter dem Item

Indikator-Stil

Nur sichtbar wenn ein Indikator-Typ gewählt ist (nicht “Keiner”).

Light/Dark Mode Toggle

Pfad: Indikator → Indikator-Stil - oben

Wechsle zwischen Light und Dark Mode Farben.

Indikator-Farbe

Pfad: Indikator → Indikator-Stil → Indikator-Farbe

Aspekt	Details
Standard	Primärfarbe aus Theme
Farbwähler	Tippe auf die Farbe, um den Picker zu öffnen

Indikator-Größe (nur Punkt)

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

Durchmesser des Punkts.

Aspekt	Details
Bereich	2 - 16 px
Schritte	1 px
Standard	4 px

Breite (nur Linie)

Pfad: Indikator → Indikator-Stil → Breite

Horizontale Ausdehnung der Linie.

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

Höhe (nur Linie)

Pfad: Indikator → Indikator-Stil → Höhe

Vertikale Ausdehnung (Dicke) der Linie.

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

Abrundung (Linie und Hintergrund)

Pfad: Indikator → Indikator-Stil → Abrundung

Eckenradius des Indikators.

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

Indikator-Animation

Pfad: Indikator → Indikator-Animation

Nur sichtbar wenn ein Indikator-Typ gewählt ist.

Animations-Daür

Aspekt	Details
Bereich	100 - 500 ms
Schritte	50 ms
Standard	200 ms

Animations-Kurve

Kurve	Beschreibung
linear	Gleichmässige Geschwindigkeit
easeIn	Langsam starten
easeOut	Langsam enden
easeInOut	Langsam starten und enden
easeInQuad/Cubic	Quadratische/kubische Beschleunigung
bounceOut/In/InOut	Hüpf-Effekt
elasticOut/In/InOut	Elastischer Effekt
easeInOutBack	Leichtes Überschwingen

Verhalten-Tab

Der Verhalten-Tab steürt Animationen der Navigation.

Ein-/Ausblenden Animation

Pfad: Verhalten → Ein-/Ausblenden Animation

Animiert das Erscheinen und Verschwinden der Navigation (z.B. beim Scrollen).

Ein-/Ausblenden Daür

Aspekt	Details
Bereich	100 - 1000 ms
Schritte	50 ms
Standard	300 ms

Ein-/Ausblenden Kurve

Kurve	Beschreibung
linear	Gleichmässige Geschwindigkeit
easeIn	Langsam starten
easeOut	Langsam enden (Standard)
easeInOut	Langsam starten und enden
bounceOut	Hüpf-Effekt am Ende
elasticOut	Elastischer Effekt am Ende

Item-Auswahl Animation

Pfad: Verhalten → Item-Auswahl Animation

Animiert das Umschalten zwischen Items.

Animations-Typ

Wähle zwischen verschiedenen Animations-Stilen:

Typ	Beschreibung
linear	Gleichmässig
easeIn	Beschleunigend
easeOut	Abbremsend
easeInOut	Beschleunigend und abbremsend
bounce	Hüpfend
elastic	Elastisch

Daür

Aspekt	Details
Bereich	100 - 500 ms
Standard	200 ms

Tipps

Zurück zur Übersicht

Bottom Navigation Übersicht Zurück zur Hauptseite

Items konfigurieren Icons, Labels und Verhalten der Items

FAB einrichten Floating Action Button konfigurieren