Übersicht

Die <Num>-Komponente rendert eine formatierte Zahl als String in der locale des Benutzers und kann mit Formatierungsoptions angepasst werden.

<Num>{100}</Num>
// Ausgabe: 100

Alle Formatierungen erfolgen lokal mit der Bibliothek Intl.NumberFormat.

Referenzen

Props

Beschreibung

Rückgabewert

JSX.Element, der die formatierte Zahl als String enthält.

Beispiele

Einfaches Beispiel

In diesem Beispiel wird item.quantity entsprechend der Locale des Benutzers neu formatiert.

import { Num } from 'gt-next';

export default function Inventory(item) {
  return (
    <Num>{item.quantity}</Num>  
  );
}

Festlegen von locales

Standardmäßig werden locales durch die Browsereinstellungen des Nutzers bestimmt, aber du kannst die locale für die <Num>-Komponente explizit festlegen.

import { Num } from 'gt-next';

export default function CountDisplay(item) {
  return (
    <Num locales={['fr-FR']}>{item.count}</Num> 
  );
}

Übersetzen von <Num>-Komponenten

Angenommen, Sie möchten Ihre Zahl in einem längeren, zu übersetzenden Satz verwenden. Wickeln Sie dazu einfach den Inhalt mit <T>-Komponenten ein.

import { T, Num } from 'gt-next';

export default function DynamicPriceDisplay(item) {
  return (
    <T id="price">
      Es sind <Num> {item.count} </Num> Einheiten verfügbar. // [!code highlight]
    </T>
  );
}

Individuelle Formatierung

<Num> nutzt die Bibliothek Intl.NumberFormat zur Formatierung.

import { Num } from 'gt-next';

export default function CustomFormat(number) {
  return (
    <Num
      options={{ style: "decimal", maximumFractionDigits: 2 }}
    >
      {number}
    </Num>
  );
}

Hinweise

• Die Komponente <Num> wird verwendet, um Zahlen gemäß der locale des Nutzers zu formatieren.
• Wenn sie innerhalb einer <T>-Komponente verwendet wird, stellen Sie sicher, dass alle dynamischen Zahlen in eine <Num>-Komponente eingeschlossen werden.

Nächste Schritte

• Weitere Details und Anwendungsbeispiele zur Komponente <Num> sowie zu anderen Variablenkomponenten wie <Currency>, <DateTime> und <Var>,