Flow

Components

ProgressBar

Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.GitHub
Speicher50%

Beispiel

Speicher50%
import ProgressBar from "@mittwald/flow-react-components/ProgressBar";
import Label from "@mittwald/flow-react-components/Label";

<ProgressBar value={50}>
  <Label>Speicher</Label>
</ProgressBar>

Mit Unit

Im default wird die Progressbar immer mit Prozentangabe angezeigt. Über das Property formatOptions können aber auch andere Einheiten gewählt werden. (s. Intl.NumberFormat)

Gigabyte

Speicher500 GB
import ProgressBar from "@mittwald/flow-react-components/ProgressBar";
import Label from "@mittwald/flow-react-components/Label";

<ProgressBar
  value={500}
  maxValue={1000}
  minValue={0}
  formatOptions={{ style: "unit", unit: "gigabyte" }}
>
  <Label>Speicher</Label>
</ProgressBar>

Dezimalzahl

Stückzahl500
import ProgressBar from "@mittwald/flow-react-components/ProgressBar";
import Label from "@mittwald/flow-react-components/Label";

<ProgressBar
  value={500}
  maxValue={1000}
  minValue={0}
  formatOptions={{ style: "decimal" }}
>
  <Label>Stückzahl</Label>
</ProgressBar>

Mit Max Value

Speicher500 GB of 1,000 GB
import ProgressBar from "@mittwald/flow-react-components/ProgressBar";
import Label from "@mittwald/flow-react-components/Label";

<ProgressBar
  showMaxValue
  value={500}
  maxValue={1000}
  minValue={0}
  formatOptions={{ style: "unit", unit: "gigabyte" }}
>
  <Label>Speicher</Label>
</ProgressBar>

Small

Speicher50%
import ProgressBar from "@mittwald/flow-react-components/ProgressBar";
import Label from "@mittwald/flow-react-components/Label";

<ProgressBar size="s" value={50}>
  <Label>Speicher</Label>
</ProgressBar>

Status

Success100%
Info50%
Warning70%
Danger90%
import ProgressBar from "@mittwald/flow-react-components/ProgressBar";

<Row>
  <ProgressBar value={100} status="success">
    Success
  </ProgressBar>
  <ProgressBar value={50} status="info">
    Info
  </ProgressBar>
  <ProgressBar value={70} status="warning">
    Warning
  </ProgressBar>
  <ProgressBar value={90} status="danger">
    Danger
  </ProgressBar>
</Row>
Feedback geben