Zum Hauptinhalt springen

Währungswert

Währungswert in Storybook

Beispiele​

Im Abschnitt Verwendung finden Sie Informationen über das richtige Design eines Währungswerts und die verschiedenen von Guidewire bereitgestellten Konfigurationsoptionen.

Einfaches Beispiel​

Die Komponente CurrencyValue kann einen numerischen Wert annehmen und als Geldbetrag rendern. Sie fügt ein Währungssymbol, Trennzeichen und ein Dezimaltrennzeichen basierend auf dem Gebietsschema hinzu.

<CurrencyValue value={ 123456 } />

Beispiel für eine Objekteingabe​

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

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

Eigenschaften Betrag und Währung​

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 Wertes 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 { IntlContext } from '@jutro/locale';
...
const intl = useContext(IntlContext);
...
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