Übersicht

Die Komponente <Num> gibt eine formatierte Zahl als Zeichenfolge in der locale des Benutzers aus und lässt sich mit Formatierungsoptions anpassen.

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

Alle Umformatierungen erfolgen lokal mit der Bibliothek Intl.NumberFormat.

Referenz

Props

Beschreibung

Rückgabe

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

Beispiele

Einfaches Beispiel

In diesem Beispiel wird item.quantity gemäß der Locale des Nutzers 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 Sie können die locale für die Komponente <Num> 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 einen längeren, zu übersetzenden Satz einbetten. Fügen Sie einfach die <T>-Komponenten um den Inhalt herum hinzu.

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

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

Benutzerdefiniertes Formatieren

<Num> nutzt die Bibliothek Intl.NumberFormat zum Formatieren.

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 entsprechend der locale eines Benutzers zu formatieren.
• Innerhalb einer <T>-Komponente sollten alle dynamischen Zahlen in eine <Num>-Komponente eingebettet werden.

Nächste Schritte

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