Zum Hauptinhalt springen

ProgressBar

In ChatGPT öffnen
Schatten dwc-progressbar 24.02
Java API

Die ProgressBar-Komponente stellt den Fertigungsstatus eines Vorgangs visuell dar. Während die Arbeit voranschreitet, füllt sich ein Rechteck allmählich, um den aktuellen Prozentsatz widerzuspiegeln. Die Leiste kann auch eine textuelle Darstellung ihres Wertes anzeigen und unterstützt sowohl determinierte als auch indeterminierte Zustände für Aufgaben mit bekannten oder unbekannten Dauern.

Verwendungen​

Die ProgressBar-Komponente ist nützlich zur Visualisierung des Fertigungsstatus von Aufgaben. Sie unterstützt:

  • Konfigurierbare Minimal- und Maximalwerte.
  • Indeterminate Modus für andauernde Aufgaben ohne definitives Ende.
  • Optionen für Textsichtbarkeit, Animation und gestreifte Designs für besseres visuelles Feedback.

Das folgende Beispiel zeigt eine gestreifte, animierte Fortschrittsleiste mit Start-, Pause- und Zurücksetzen-Steuerelementen:

Code anzeigen

Werte festlegen​

Die ProgressBar-Komponente ermöglicht das Setzen und Abrufen ihres aktuellen Wertes sowie der minimalen und maximalen Grenzen.

ProgressBar bar = new ProgressBar();
bar.setMin(0);
bar.setMax(100);
bar.setValue(50);

Ausrichtung​

Die ProgressBar kann horizontal oder vertikal ausgerichtet werden.

Code anzeigen

Indeterminierter Zustand​

Die ProgressBar unterstützt einen indeterminierten Zustand für Aufgaben mit unbekannter Fertigstellungszeit.

Code anzeigen

Text und Textsichtbarkeit​

Standardmäßig zeigt die Fortschrittsleiste beim Erstellen den Prozentsatz der Fertigstellung im Format XX% an. Mit der Methode setText() können Sie den Platzhalter {{x}} verwenden, um den aktuellen Wert als Prozentsatz zu erhalten. Außerdem können Sie den Platzhalter {{value}} verwenden, um den aktuellen Rohwert zu erhalten.

ProgressBar bar = new ProgressBar(15, "Herunterladen: {{x}}%");

Stilgestaltung​

Themen​

Die ProgressBar-Komponente kommt mit Themen, die für eine schnelle Stilgestaltung ohne CSS integriert sind. Diese Themen sind vorgegebene Stile, die auf Schaltflächen angewendet werden können, um ihr Aussehen und ihre visuelle Präsentation zu ändern. Sie bieten eine schnelle und konsistente Möglichkeit, das Erscheinungsbild von ProgressBars in einer App anzupassen.

Code anzeigen

Loading...

Best Practices​

  • Verwenden Sie geeignete Minimal- und Maximalwerte: Setzen Sie die Minimal- und Maximalwerte, um den Bereich der Aufgabe genau widerzuspiegeln.
  • Aktualisieren Sie den Fortschritt regelmäßig: Aktualisieren Sie den Fortschrittswert kontinuierlich, um den Benutzern Echtzeit-Feedback zu geben.
  • Nutzen Sie den indeterminierten Zustand für unbekannte Dauer: Verwenden Sie den indeterminierten Zustand für Aufgaben mit unvorhersehbaren Dauern, um den fortschreitenden Verlauf anzuzeigen.
  • Anzeige von Text für besseres Benutzerfeedback: Zeigen Sie Text auf der Fortschrittsleiste an, um zusätzlichen Kontext über den Fortschritt der Aufgabe zu bieten.