Zum Hauptinhalt springen

Toolbar

ChatGPT öffnen
Shadow 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 Gruppe von Aktionsschaltflächen, Symbolen oder anderen Komponenten aufnehmen kann. Sie eignet sich gut zur Verwaltung von Seitensteuerelementen und zur Unterbringung wichtiger 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 ihres übergeordneten Elements ein und bietet vier Platzierungsbereiche oder Slots zum Organisieren von 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 den Abstand um eine Toolbar zu reduzieren. Dies ist hilfreich, wenn Sie mehr Inhalt auf dem Bildschirm unterbringen müssen, insbesondere in Apps mit gestapelten Toolbars oder begrenztem Platz. Die Toolbar verhält sich gleich – lediglich 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 Abschließen von Schritten in einem Workflow. Wenn sie in eine Toolbar eingefügt wird, reiht sich die ProgressBar ordentlich an der unteren Kante aus, wodurch sie unauffällig bleibt, während sie den Benutzern dennoch den Fortschritt klar kommuniziert.

Sie können sie mit anderen Komponenten in der Toolbar wie Schaltflächen oder Beschriftungen kombinieren, ohne das Layout zu stören.

Code anzeigen

Stil​

Themen​

Toolbar-Komponenten umfassen sieben integrierte Themen zur schnellen visuellen Anpassung:

Code anzeigen

Loading...