Zum Hauptinhalt springen

Zahlenwert (keine Währung)

Zahlenwert (keine Währung) in Storybook

Beispiele​

Im Abschnitt Verwendung finden Sie Informationen über das richtige Design eines Zahlenwerts und die verschiedenen Konfigurationsoptionen, die wir bereitstellen.

Einfaches Beispiel​

Sie können die NumberValue Komponente verwenden, um eine Zahl zu rendern.

<NumberValue value={ 123456 }/>

Beispiel für einen Prozentsatz​

Sie können die Eigenschaft format verwenden, um die Zahl stattdessen als Prozentsatz darzustellen.

<NumberValue 
    value={ 0.25 }
    format='percent'
    />

Brüche anzeigen​

Sie können wählen, ob der Bruchteil des Wertes mit der Eigenschaft showFractions angezeigt werden soll. Dadurch wird der Wert auf die nächste ganze Zahl gerundet.

<NumberValue 
    value={ 1234.5 }
    showFractions={ false }
    />

Beispiel für eine imperative API​

jutro-components bietet die Funktion formatNumber für die Verwendung mit der imperativen Formatierungs-API.

import { formatNumber } from '@jutro/components';
import { IntlContext } from '@jutro/locale';
...
const intl = useContext(IntlContext);
...
const n1 = formatNumber(intl, { value: 1232.23, format: 'decimal' });
const n2 = formatNumber(intl, { value: 1, format: 'percent' });
const n3 = formatNumber(intl, { value: 1231232.23434, format: 'decimal', showFractions: true, maximumFractionDigits: 4 });
const n4 = formatNumber(intl, { format: 'decimal', showFractions: true }, 1.2345);

// en-US output:
1,232
100%
1,231,232.2343
1.235

// fr-FR output
1 232
100 %
1 231 232,2343
1,235