Zahlenwert (keine Währung)

Zahlenwert (keine Währung) in Storybook

Verwendung

Dies ist eine Hilfsprogrammkomponente zum Rendern und Formatieren von Daten, daher gelten keine speziellen UX-Richtlinien.

Code

<NumberValue value={123456} />

Importanweisung

import { NumberValue } from '@jutro/components';

Komponentenvertrag

Vergewissern Sie sich, dass Sie die API-Oberfläche der Design System-Komponenten und die damit verbundenen Auswirkungen und Kompromisse verstehen. Erfahren Sie mehr in unserer Einführung zur Komponenten-API.

Eigenschaften

iderforderlich

Typ

string

Beschreibung

Unique identifier for the component.

className

Typ

string

Beschreibung

CSS class name for this component.

format

Typ

'decimal' | 'percent'

Beschreibung

The format to display the number in.

Standardwert

'decimal'

maximumFractionDigits

Typ

number

Beschreibung

Maximum number of fraction digits.

Standardwert

3

minimumFractionDigits

Typ

number

Beschreibung

Minimum number of fraction digits.

Standardwert

0

path

Typ

string

Beschreibung

Specifies the path to the value used to generate the output.

placeholder

Typ

intlMessageShape

Beschreibung

The string to display in the UI if 'value' is undefined/null.

Standardwert

'-'

prefix

Typ

intlMessageShape

Beschreibung

Optional prefix message to be attached in front of the value.

showFractions

Typ

boolean

Beschreibung

If true, displays fractions with the value.

showGrouping

Typ

boolean

Beschreibung

If true, displays grouping separators with the value.

Standardwert

true

suffix

Typ

intlMessageShape

Beschreibung

Optional suffix message to be attached at the end the value.

tag

Typ

string

Beschreibung

The HTML tag to use when rendering the outermost element of this component.

Standardwert

'div'

value

Typ

number

Beschreibung

The numeric value to display.

Imperative API

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

import { formatNumber } from '@jutro/components';

Dadurch wird eine Funktion formatNumber(intl, props, number) mit folgenden Argumenten und folgendem Rückgabetyp importiert:

Return value

Typ

string

Beschreibung

Formatted number string.

intl

Typ

react.intl.Intl

Beschreibung

An instance of the imperative formatting API access object.

number

Typ

number

Beschreibung

Numeric value override to be used instead of the one provided with props.

props

Typ

NumberValue.propTypes

Beschreibung

Valid properties for a NumberValue object.

Hooks

Für number value sind keine Hooks verfügbar.

Übersetzungsschlüssel

Es gibt keine Übersetzungen für number value.

Informationen über die Verwaltung von Übersetzungen finden Sie in unserem Abschnitt über Internationalisierung.

Escape Hatches

Weitere Informationen finden Sie in unserer Dokumentation über Escape Hatches.

Beispiele

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

Beispiel für einen einfachen Zahlenwert

Sie können die Komponente NumberValueverwenden, 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 Werts 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

Änderungsprotokoll