Zum Hauptinhalt springen

Toolbar

In ChatGPT öffnen
Schatten dwc-toolbar 24.12
Java API

Toolbars bieten Benutzern schnellen Zugriff auf zentrale Aktionen und Navigationselemente. Die webforJ Toolbar-Komponente ist ein horizontaler Container, der eine Reihe von Aktionsschaltflächen, Icons oder anderen Komponenten aufnehmen kann. Sie eignet sich gut zur Verwaltung von Seitensteuerelementen und zur Unterbringung von wichtigen Funktionen wie einer Suchleiste oder einem Benachrichtigungsknopf.

Organisieren des Toolbar-Inhalts​

Die Toolbar organisiert wesentliche Komponenten in einem leicht zugänglichen und konsistenten Layout. Standardmäßig nimmt sie die volle Breite ihres übergeordneten Elements ein und bietet vier Platzierungsbereiche oder Slots zum Organisieren der Komponenten:

  • 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().

Die 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​

Verwenden Sie setCompact(true), um die Polsterung um eine Toolbar zu reduzieren. Dies ist hilfreich, wenn Sie mehr Inhalte auf dem Bildschirm unterbringen müssen, 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 visuelle Anzeige für laufende Prozesse, wie das Laden von Daten, das Hochladen von Dateien oder das Durchführen von Schritten in einem Workflow. Wenn sie innerhalb einer Toolbar platziert wird, fügt sich die ProgressBar ordentlich an der unteren Kante ein und ist unauffällig, während sie den Benutzern dennoch klaren Fortschritt kommuniziert.

Sie können 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...