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 Markdown

Grundlagen

Best Practices

Achte bei der Verwendung einer BigNumber darauf, dass ...

der dargestellte Wert für die User eine unmittelbare Relevanz oder Aussagekraft besitzt.
ausreichend Raum zur Verfügung steht, damit die Zahl optisch wirken kann und nicht mit anderen Elementen konkurriert. Nutze dafür zum Beispiel die AccentBox.
eine Kombination mit anderen Components – etwa einem Rating – den Informationsgehalt erhöht.

Verwendung

Verwende eine BigNumber, um ...

zentrale Kennzahlen auf einem Dashboard schnell erfassbar zu machen.
den Fokus gezielt auf einen einzelnen Wert zu lenken.
in Kombination mit einer AccentBox eine visuelle Gruppierung aus Wert und Beschreibung zu schaffen.
durch Ergänzung mit einem Rating zusätzliche Einordnung oder Bewertung zu ermöglichen.

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.

AccentBox

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

250 msDateioperationenGeringer Optimierungsbedarf

100 msServeroperationenOptimierungsbedarf

Properties

Property	Type	Default	Description
`children`	`ReactNode`	-
`className`	`string`	-	The elements class name.