mittwald Flow Logo

Components

BigNumber

Die BigNumber dient der prominenten Darstellung numerischer Werte innerhalb einer Oberfläche. Sie wird vorrangig eingesetzt, um Kennzahlen oder Metriken übersichtlich und visuell hervorzuheben.GitHub
69%Performance

Playground

Verwende <BigNumber />, um eine BigNumber darzustellen.

69%Performance
import {
  BigNumber,
  Text,
} from "@mittwald/flow-react-components";

<BigNumber>
  <Text>69%</Text>
  <Text>Performance</Text>
</BigNumber>

Kombiniere mit ...

Rating

Nutze das Rating, um den Kontext der BigNumber für die User auf einer Bewertungsskala besser einzuordnen.

80%Performance
import {
  BigNumber,
  Flex,
  Rating,
  Text,
} from "@mittwald/flow-react-components";

<Flex direction="column" gap="s" align="center">
  <BigNumber>
    <Text>80%</Text>
    <Text>Performance</Text>
  </BigNumber>
  <Rating value={4} />
</Flex>

AccentBox

Zur visuellen Hervorhebung kann die BigNumber innerhalb einer AccentBox angezeigt werden.

250 msDateioperationenGeringer Optimierungsbedarf
100 msServeroperationenOptimierungsbedarf
import {
  AccentBox,
  BigNumber,
  Button,
  ColumnLayout,
  Flex,
  Text,
} from "@mittwald/flow-react-components";

<ColumnLayout>
  <AccentBox>
    <Flex direction="column" gap="s" align="center">
      <BigNumber>
        <Text>250 ms</Text>
        <Text>Dateioperationen</Text>
      </BigNumber>
      <Text>
        <small>Geringer Optimierungsbedarf</small>
      </Text>
      <Button size="s" variant="outline" color="secondary">
        Details anzeigen
      </Button>
    </Flex>
  </AccentBox>
  <AccentBox>
    <Flex direction="column" gap="xs" align="center">
      <BigNumber>
        <Text>100 ms</Text>
        <Text>Serveroperationen</Text>
      </BigNumber>
      <Text>
        <small>Optimierungsbedarf</small>
      </Text>
      <Button size="s" variant="outline" color="secondary">
        Details anzeigen
      </Button>
    </Flex>
  </AccentBox>
</ColumnLayout>

Overview