Overslaan naar hoofdinhoud

ProgressBar

Openen in ChatGPT
Shadow dwc-progressbar 24.02
Java API

De ProgressBar component vertegenwoordigt visueel de voltooiingsstatus van een operatie. Terwijl het werk vordert, vult een rechthoek geleidelijk om het huidige percentage weer te geven. De balk kan ook een tekstuele weergave van zijn waarde tonen en ondersteunt zowel bepaalde als onbepaalde toestanden voor taken met bekende of onbekende duur.

Usages​

De ProgressBar component is nuttig voor het visualiseren van de voltooiingsstatus van taken. Het ondersteunt:

  • Configureerbare minimum- en maximumwaarden.
  • Onbepaalde modus voor doorlopende taken zonder definitief einde.
  • Opties voor tekst zichtbaarheid, animatie en gestreepte ontwerpen voor betere visuele feedback.

Het volgende voorbeeld toont een gestreepte, geanimeerde voortgangsbalk met start-, pauze- en resetbesturingselementen:

Toon Code

Instellen van waarden​

De ProgressBar component staat het instellen en krijgen van de huidige waarde, minimum en maximum limieten toe.

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

Oriëntatie​

De ProgressBar kan horizontaal of verticaal worden georiënteerd.

Toon Code

Onbepaalde staat​

De ProgressBar ondersteunt een onbepaalde staat voor taken met onbekende voltooiingstijd.

Toon Code

Tekst en tekstzichtbaarheid​

Standaard toont de voortgangsbalk bij creatie het percentage voltooid in het formaat XX%. Met de setText()-methode kunt u de placeholder {{x}} gebruiken om de huidige waarde als percentage te krijgen. Daarnaast kunt u de placeholder {{value}} gebruiken om de ruwe huidige waarde te verkrijgen.

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

Styling​

Thema's​

De ProgressBar component wordt geleverd met thema's die zijn ingebouwd voor snelle styling zonder gebruik van CSS. Deze thema's zijn vooraf gedefinieerde stijlen die kunnen worden toegepast op knoppen om hun uiterlijk en visuele presentatie te veranderen. Ze bieden een snelle en consistente manier om de uitstraling van ProgressBars in een app aan te passen.

Toon Code

Loading...

Beste praktijken​

  • Gebruik Geschikte Minimum- en Maximumwaarden: Stel de minimum- en maximumwaarden in om het bereik van de taak nauwkeurig weer te geven.
  • Werk Voortgang Regelmatig Bij: Werk continu de voortgangswaarde bij om realtime feedback aan gebruikers te bieden.
  • Gebruik Onbepaalde Staat voor Onbekende Duur: Gebruik de onbepaalde staat voor taken met onvoorspelbare duur om voortgaande progressie aan te geven.
  • Toon Tekst voor Betere Gebruikersfeedback: Toon tekst op de voortgangsbalk om aanvullende context over de voortgang van de taak te bieden.