Zum Hauptinhalt springen

Toolbar

In ChatGPT öffnen
Schatten dwc-toolbar 24.12
Java API

Toolbars bieten Benutzern schnellen Zugriff auf grundlegende Aktionen und Navigationselemente. Die webforJ Toolbar-Komponente ist ein horizontaler Container, der eine Reihe von Aktionsschaltflächen, Symbolen oder anderen Komponenten aufnehmen kann. Sie eignet sich gut für die Verwaltung von Seitensteuerelementen und das Unterbringen von wichtigen Funktionen wie einer Suchleiste oder einer Benachrichtigungsschaltfläche.

Organisieren von Toolbar-Inhalten​

Die Toolbar organisiert wesentliche Komponenten in einem leicht zugänglichen und konsistenten Layout. Standardmäßig nimmt sie die volle Breite des übergeordneten Elements ein und bietet vier Platzierungsbereiche oder Slots, um Komponenten zu organisieren:

  • Start: Enthält normalerweise einen AppDrawerToggle oder einen Home-Button.
  • Titel: Wird für App-Namen oder Logos verwendet.
  • Inhalt: Für hochpriorisierte Aktionen wie Suche oder Navigation.
  • Ende: Weniger häufige Aktionen, wie Benutzerprofil oder Hilfe.

Jeder Slot hat eine Methode zum Hinzufügen von Komponenten: addToStart(), addToTitle(), addToContent() und addToEnd().

Das folgende Demo zeigt, wie man eine Toolbar zu einem AppLayout hinzufügt und alle unterstützten Slots effektiv nutzt. Um mehr über die Implementierung von Toolbars innerhalb eines AppLayout zu erfahren, siehe Sticky Toolbars und Mobile Navigation Layout.

Code anzeigen

Kompakter Modus​

Verwende setCompact(true), um den Abstand um eine Toolbar zu reduzieren. Dies ist hilfreich, wenn du mehr Inhalt auf dem Bildschirm unterbringen musst, insbesondere in Apps mit gestapelten Toolbars oder begrenztem Platz. Die Toolbar verhält sich weiterhin gleich – nur die Höhe wird reduziert. Dieser Modus wird häufig in Kopfzeilen, Seitenleisten oder Layouts verwendet, in denen der Platz knapp ist.

Toolbar toolbar = new Toolbar();
toolbar.setCompact(true);
Code anzeigen

ProgressBar in Toolbars​

Eine ProgressBar dient als visuelles Indiz für laufende Prozesse, wie das Laden von Daten, das Hochladen von Dateien oder das Abschließen von Schritten in einem Ablauf. Wenn sie innerhalb einer Toolbar platziert wird, fügt sich die ProgressBar sauber an der unteren Kante ein, sodass sie unauffällig bleibt, während sie den Benutzern den Fortschritt klar kommuniziert.

Du kannst sie mit anderen Komponenten in der Toolbar wie Schaltflächen oder Labels kombinieren, ohne das Layout zu stören.

Code anzeigen

Styling​

Themen​

Toolbar-Komponenten enthalten sieben integrierte Themen für eine schnelle visuelle Anpassung:

Code anzeigen

Loading...