Zum Hauptinhalt springen

Toolbar

In ChatGPT öffnen
Schatten dwc-toolbar 24.12
Java API

Toolbars bieten den 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 zur Verwaltung von Seitenkontrollen und zur Unterbringung wichtiger Funktionen wie einer Suchleiste oder einer Benachrichtigungsschaltfläche.

Anordnung 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 zur Anordnung von Komponenten:

  • Start: Enthält normalerweise einen AppDrawerToggle oder eine Starttaste.
  • Titel: Wird für App-Namen oder Logos verwendet.
  • Inhalt: Für Aktionen mit hoher Aufmerksamkeit 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 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 immer noch gleich – nur die Höhe wird verringert. 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 visueller Indikator für laufende Prozesse, wie das Laden von Daten, das Hochladen von Dateien oder das Abschließen von Schritten in einem Prozess. Wenn sie in einer Toolbar platziert wird, reiht sich die ProgressBar ordentlich am unteren Rand an und ist unauffällig, während sie den Benutzern dennoch den Fortschritt klar 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 umfassen sieben integrierte Themen für eine schnelle visuelle Anpassung:

Code anzeigen

Loading...