Währungswert

Währungswert in Storybook

Verwendung

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

Code

<CurrencyValue value={123456} />

Importanweisung

import { CurrencyValue } 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.

amount

Typ

number | string

Beschreibung

The numeric value to display. Equivalent to the amount property in an object entered in the value property.

className

Typ

string

Beschreibung

CSS class name for this component.

currency

Typ

string

Beschreibung

The currency name to display for localization. Equivalent to the currency property in an object entered in the value property.

currencyDisplay

Typ

'code' | 'symbol' | 'name'

Beschreibung

The format of the currency name to display for localization.

Standardwert

symbol

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 amount 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 amount. If false, it will round the value to the nearest whole number.

Standardwert

true

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 of the value.

tag

Typ

string

Beschreibung

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

Standardwert

'div'

value

Typ

number | string | { amount: number | string, currency: string }

Beschreibung

Value to display. If the type is number', it will be used as the currencyamount. If the type is 'string', it will be cast to 'number', then used as currencyamount. If the type is an object, it will set thecurrencyandamount`.

Imperative API

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

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

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

Return value

Typ

string

Beschreibung

Formatted currency string.

currencyObject

Typ

number | string | { amount: number | string, currency: string }

Beschreibung

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

intl

Typ

react.intl.Intl

Beschreibung

An instance of the imperative formatting API access object.

props

Typ

CurrencyValue.propTypes

Beschreibung

Valid properties for a CurrencyValue object.

Hooks

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

Übersetzungsschlüssel

Es gibt keine Übersetzungen für currency 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 zum korrekten Design eines Währungswerts und den verschiedenen von Guidewire bereitgestellten Konfigurationsoptionen.

Beispiel für einen einfachen Währungswert

Die Komponente CurrencyValue kann einen numerischen Wert annehmen und als Geldbetrag rendern. Basierend auf dem Gebietsschema werden ein Währungssymbol, Trennzeichen und ein Dezimaltrennzeichen hinzugefügt.

<CurrencyValue value={123456} />

Beispiel für eine Objekteingabe

Die value-Eigenschaft kann ein Objekt annehmen, das den Betrag und die Währung des anzuzeigenden Werts angibt. Die currency-Eigenschaft muss ein alphabetischer ISO-4217-Währungscode sein.

<CurrencyValue value={ {amount: 123456, currency: "EUR"} } />
<CurrencyValue value={ {amount: 123456, currency: "USD"} } />

amount- und currency-Eigenschaften

Die Eigenschaften amount und currency in der Komponente CurrencyValue können als Alternative zum Festlegen eines Objekts in der Eigenschaft value verwendet werden.

<CurrencyValue amount={ 123456 } currency="EUR" />
<CurrencyValue amount={ 123456 } currency="USD" />

Währungsformat

Mit der Eigenschaft currencyDisplay kann festgelegt werden, ob das Symbol, der alphabetische ISO-4217-Währungscode oder der Name für die Währung angezeigt werden sollen.

<CurrencyValue value={123456} currencyDisplay="code" />
<CurrencyValue value={123456} currencyDisplay="symbol" />
<CurrencyValue value={123456} currencyDisplay="name" />

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.

<CurrencyValue
  value={1234.5} // note that this becomes 1235 in the sample above due to rounding
  showFractions={false}
/>

Beispiel für eine imperative API

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

import { formatCurrency } from '@jutro/components';
import { useIntl } from '@jutro/locale';
...
const intl = useIntl();
...
const c1 = formatCurrency(intl, { value: 1232.24, currency: 'eur', showFractions: true });
const c2 = formatCurrency(intl, { value: 4232.24, currency: 'jpy', showFractions: true, currencyDisplay: 'code'});
const c3 = formatCurrency(intl, { showFractions: true }, { amount: 23434.34, currency: 'dkk' });

// en-US output:
€1,232.24
JPY 4,232
DKK 23,434.34

// pl-PL output
1232,24 €
4232 JPY
23 434,34 DKK

Änderungsprotokoll