Zum Hauptinhalt springen

ProgressBar

In ChatGPT öffnen
Shadow dwc-progressbar 24.02
Java API

Die ProgressBar-Komponente stellt den Abschlussstatus eines Vorgangs visuell dar. Während der Arbeit wird ein Rechteck allmählich gefüllt, um den aktuellen Prozentsatz widerzuspiegeln. Die Leiste kann auch eine textliche Darstellung ihres Wertes anzeigen und unterstützt sowohl bestimmte als auch unbestimmte Zustände für Aufgaben mit bekanntem oder unbekanntem Zeitraum.

Verwendungen​

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

  • Konfigurierbare Mindest- und Höchstwerte.
  • Unbestimmten Modus für laufende Aufgaben ohne definitives Ende.
  • Optionen für die Sichtbarkeit von Text, Animation und gestreifte Designs für bessere visuelle Rückmeldung.

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

Code anzeigen

Werte festlegen​

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

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

Orientierung​

Die ProgressBar kann horizontal oder vertikal ausgerichtet sein.

Code anzeigen

Unbestimmter Zustand​

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

Code anzeigen

Text und Textsichtbarkeit​

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

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

Styling​

Themen​

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

Code anzeigen

Loading...

Best Practices​

  • Verwenden Sie geeignete 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 unbestimmten Zustand für unbekannte Dauer: Verwenden Sie den unbestimmten Zustand für Aufgaben mit unvorhersehbaren Dauer, um den laufenden Fortschritt anzuzeigen.
  • Zeigen Sie Text für bessere Benutzerfeedback an: Stellen Sie Text auf der Fortschrittsleiste zur Verfügung, um zusätzlichen Kontext über den Fortschritt der Aufgabe zu bieten.