Zum Hauptinhalt springen

Toolbar

In ChatGPT öffnen
Schatten dwc-toolbar 24.12
Java API

Toolbars bieten Benutzern schnellen Zugriff auf wichtige Aktionen und Navigationselemente. Die webforJ Toolbar-Komponente ist ein horizontaler Container, der eine Reihe von Aktionsschaltflächen, Symbolen oder anderen Komponenten halten kann. Sie eignet sich gut zur Verwaltung von Seitensteuerelementen und zur Unterbringung wichtiger Funktionen wie einer Suchleiste oder einer Benachrichtigungsschaltfläche.

Inhalt der Toolbar organisieren​

Die Toolbar organisiert wesentliche Komponenten in einem leicht zugänglichen und konsistenten Layout. Standardmäßig nimmt sie die volle Breite ihres Elternelements ein und bietet vier Platzierungsbereiche oder Slots zur Organisation 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: Seltener verwendete 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 verringern. 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 dabei 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, Hochladen von Dateien oder das Abschließen von Schritten in einem Workflow. Wenn sie in einer Toolbar platziert wird, fügt sich die ProgressBar sauber entlang der unteren Kante ein, wodurch sie unauffällig bleibt und dennoch den Benutzern klar Fortschritte 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 beinhalten sieben integrierte Themen für eine schnelle visuelle Anpassung:

Code anzeigen

Loading...