Components
Num
<Num> コンポーネントの APIリファレンス
概要
<Num> コンポーネントは、ユーザーの locale に合わせて書式化された数値文字列をレンダリングし、options で書式設定をカスタマイズできます。
<Num>{100}</Num>
// 出力: 100すべての再フォーマットは、Intl.NumberFormat ライブラリでローカルに処理されます。
リファレンス
Props
Prop
Type
説明
| Prop | 説明 |
|---|---|
children | コンポーネント内にレンダリングする内容。通常は数値で、現在の locale および options に従って書式化されます。指定がある場合は value prop より優先されます。 |
name | 数値フィールドの任意の名称。メタデータ用途で使用されます。 |
value | 数値のデフォルト値。文字列または数値を指定できます。文字列は書式化前に数値へパースされます。 |
options | 数値の任意の書式設定 options。Intl.NumberFormatOptions 仕様に従います。通貨や小数精度などのスタイルを定義するために使用します。 |
locales | 書式化に用いる locale を指定するための任意の対応ロケール。指定がない場合は、デフォルトでユーザーの locale が使用されます。locales の指定についてはこちらをご覧ください。 |
返り値
フォーマット済みの数値文字列を含む JSX.Element。
例
基本例
この例では、ユーザーの locale に応じて item.quantity が再フォーマットされます。
import { Num } from 'gt-next';
export default function Inventory(item) {
return (
<Num> {item.quantity} </Num> // [!コード ハイライト]
);
}対応ロケールの指定
既定では、対応ロケールはユーザーのブラウザー設定に基づいて決まりますが、<Num> コンポーネントのロケールを明示的に指定できます。
import { Num } from 'gt-next';
export default function CountDisplay(item) {
return (
<Num locales={['fr-FR']}> {item.count} </Num>
);
}<Num> コンポーネントの翻訳
数値を翻訳される長めの文の一部として表示したい場合は、
コンテンツを <T> コンポーネントで囲むだけです。
import { T, Num } from 'gt-next';
export default function DynamicPriceDisplay(item) {
return (
<T id="price">
在庫は<Num> {item.count} </Num>個あります。 // [!code highlight]
</T>
);
}カスタム書式
<Num> は、フォーマットに Intl.NumberFormat ライブラリを使用します。
import { Num } from 'gt-next';
export default function CustomFormat(number) {
return (
<Num
options={{ style: "decimal", maximumFractionDigits: 2 }}
>
{number}
</Num>
);
}注意事項
<Num>コンポーネントは、ユーザーの locale に合わせて数値を整形するために使用します。<T>コンポーネント内では、動的な数値は必ずすべて<Num>コンポーネントで包んでください。
次のステップ
<Num>コンポーネントや<Currency>、<DateTime>、<Var>などの他の変数コンポーネントの詳細や使用例については、
このガイドはいかがですか?