Overslaan naar hoofdinhoud

ProgressBar

Openen in ChatGPT
Shadow dwc-progressbar 24.02
Java API

ProgressBar is een component dat visueel de voortgang van een taak weergeeft. Naarmate de taak dichter bij voltooiing komt, toont de voortgangsbalk het percentage van de voltooiing van de taak. Dit percentage wordt visueel weergegeven door een rechthoek die in het begin leeg is en geleidelijk gevuld raakt naarmate de taak vordert. Bovendien kan de voortgangsbalk een tekstuele weergave van dit percentage tonen.

Toon Code

Usages​

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

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

Setting values​

De ProgressBar-component maakt het mogelijk om de huidige waarde, minimum- en maximumlimieten in te stellen en op te halen.

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

Orientation​

De ProgressBar kan horizontaal of verticaal worden georiënteerd.

Toon Code

Indeterminate state​

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

Toon Code

Text and text visibility​

Standaard toont de voortgangsbalk bij het aanmaken het percentage dat voltooid is in de indeling XX%. Met de setText()-methode kun je de tijdelijke aanduiding {{x}} gebruiken om de huidige waarde als percentage te krijgen. Bovendien kun je de tijdelijke aanduiding {{value}} gebruiken om de ruwe huidige waarde te krijgen.

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

Styling​

Themes​

De ProgressBar component wordt geleverd met thema's die ingebouwd zijn voor snelle styling zonder gebruik van CSS. Deze thema's zijn vooraf gedefinieerde stijlen die op knoppen kunnen worden toegepast 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...

Best practices​

  • Gebruik geschikte minimum- en maximumwaarden: Stel de minimum- en maximumwaarden in om de actierange van de taak nauwkeurig weer te geven.
  • Werk voortgang regelmatig bij: Update continu de voortgangswaarde om realtime feedback aan gebruikers te bieden.
  • Gebruik onbepaalde staat voor onvoorspelbare duur: Gebruik de onbepaalde staat voor taken met onvoorspelbare duur om voortgang aan te geven.
  • Toon tekst voor betere gebruikersfeedback: Toon tekst op de voortgangsbalk om extra context over de voortgang van de taak te bieden.