Playground
Verwende <ProgressBar />, um eine ProgressBar darzustellen.
import { Label, ProgressBar, } from "@mittwald/flow-react-components"; <ProgressBar value={50}> <Label>Speicher</Label> </ProgressBar>
Mit Unit
Im Standard wird die ProgressBar immer mit Prozentangabe angezeigt. Über das
Property formatOptions können aber auch andere Einheiten gewählt werden
(s. Intl.NumberFormat).
Gigabyte
Dezimalzahl
Mit Max Value
Der maximale Wert der ProgressBar lässt sich individuell festlegen, je nachdem, was dargestellt werden soll. Standardmäßig beträgt dieser Wert 100 %.
Sizes
ProgressBars sind in drei verschiedenen Größen verfügbar: Small, Medium und Large.
Die mittlere Größe Medium ist Standard und wird am häufigsten verwendet. Die verschiedenen Größen eignen sich gut, um eine visuelle Hierarchie innerhalb der Seite zu erzeugen. So kann die größte Variante Large sehr gut alleinstehend eingesetzt werden, wenn die ProgressBar besondere Aufmerksamkeit auf sich ziehen soll.
Status
Je nach Anwendungsfall stehen vier Status-Farben zur Auswahl: Success, Info, Warning und Danger. Diese Status helfen insbesondere bei der Darstellung von Speicherplatzauslastung, um Schwellenwerte visuell hervorzuheben (z. B. Statuswechsel ab 80 % Auslastung zur Warning).
Segmente
Die Anzeige der ProgressBar kann über das segments Property um einzelne
Abschnitte ergänzt werden. Der value ergibt sich in diesem Fall aus der Summe
der Werte der einzelnen Segmente. Um die einzelnen Werte näher zu erläutern,
wird automatisch die Legend-Component
angezeigt. Über das showLegend Property kann diese ein- und ausgeblendet
werden.
Die Farben der Segmente werden automatisch festgelegt, können aber über das
color Property überschrieben werden. Beim Überschreiben muss darauf geachtet
werden, dass nebeneinanderliegende Farben weiterhin einen ausreichenden Kontrast
zueinander haben.