Zum Hauptinhalt springen

ProgressBar

In ChatGPT öffnen
Schatten dwc-progressbar 24.02
Java API

Die ProgressBar-Komponente stellt visuell den Abschlussstatus eines Vorgangs dar. Während die Arbeit fortschreitet, füllt sich ein Rechteck allmählich, um den aktuellen Prozentsatz widerzuspiegeln. Die Leiste kann auch eine textliche Darstellung ihres Wertes anzeigen und unterstützt sowohl determinate als auch indeterminate Zustände für Aufgaben mit bekannter oder unbekannter Dauer.

Usos​

Die ProgressBar-Komponente ist nützlich, um den Abschlussstatus von Aufgaben zu visualisieren. Sie unterstützt:

  • Konfigurierbare Mindest- und Höchstwerte.
  • Indeterminate Modus für laufende Aufgaben ohne definitives Ende.
  • Optionen für Textsichtbarkeit, Animation und gestreifte Designs für bessere visuelle Rückmeldungen.

Das folgende Beispiel zeigt eine gestreifte, animierte Fortschrittsleiste mit Start-, Pause- und Rücksetzsteuerungen:

Code anzeigen

Werte setzen​

Die ProgressBar-Komponente ermöglicht das Setzen und Abrufen ihres aktuellen Wertes, Mindest- und Höchstgrenzen.

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

Ausrichtung​

Die ProgressBar kann horizontal oder vertikal ausgerichtet sein.

Code anzeigen

Indeterminate Zustand​

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

Code anzeigen

Text und Textsichtbarkeit​

Im Standardformat zeigt die Fortschrittsleiste beim Erstellen den abgeschlossenen Prozentsatz im Format XX% an. Mit der setText()-Methode können Sie den Platzhalter {{x}} verwenden, um den aktuellen Wert als Prozentsatz zu erhalten. Darüber hinaus können Sie den Platzhalter {{value}} verwenden, um den aktuellen Rohwert zu erhalten.

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

Styling​

Themen​

Die ProgressBar-Komponente kommt mit Themen , die für eine schnelle Gestaltung ohne Verwendung von CSS integriert sind. Diese Themen sind vordefinierte 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 Fortschrittsleisten in einer Anwendung anzupassen.

Code anzeigen

Loading...

Best Practices​

  • Verwenden Sie angemessene Mindest- und Höchstwerte: Setzen Sie die Mindest- und Höchstwerte, 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 andauernden Fortschritt anzuzeigen.
  • Zeigen Sie Text für besseres Benutzerfeedback an: Stellen Sie Text auf der Fortschrittsleiste dar, um weiteren Kontext zum Fortschritt der Aufgabe zu bieten.