OptionsDeTraductionÀL'Exécution

Aperçu

Le type RuntimeTranslationOptions est utilisé pour passer des variables aux traductions en ligne et spécifier leur comportement de rendu. Vous pouvez également ajouter une locale pour spécifier une langue différente pour la traduction. Cela est utilisé avec la fonction tx().

Référence

Paramètres

Description

Exemples

Passage de variables

Pour ajouter une variable à la chaîne, nous utilisons la syntaxe {variable-name}, où les accolades entourent le nom de la variable.

import { tx } from 'gt-next/server';

const Component = () => {
  return <div>
    {tx(`Hello, {username}!`,{ variables: { 'username' : 'Brian123' } })}
  </div>;
};

Ajout d'options de variables

Vous pouvez également personnaliser la façon dont vos variables s'affichent avec la prop variablesOptions.

import { tx } from 'gt-next/server';

const Component = () => {
  return <div>
    { tx(
      'Votre solde de compte : {account-balance}!',
      {
        variables: { "account-balance" : 1000000 },
        variableOptions: { "account-balance": { style: 'currency', currency: 'USD' } }
      }
    ) }
  </div>;
};

Traduction de variables

Pour traduire une variable, incluez-la directement dans la chaîne passée à tx().

import { tx } from 'gt-next/server';

const Component = ({ hairColor }: { hairColor: string }) => {
  return <div>{tx(
    `Hello, {username}! Your haircolor is ${hairColor}`,
    { variables: { 'username' : 'Brian123' } }
  )}</div>;
};

Notez que la variable hairColor est traduite, mais username ne l'est pas.

Spécification d'une locale

Vous pouvez spécifier une locale à utiliser pour la traduction.

import { tx } from 'gt-next/server';

const Component = () => {
  return <div>{tx('Hello, world!', { locale: 'fr' })}</div>;
};

Cela sera toujours traduit en français.

Notes

• RuntimeTranslationOptions est utilisé pour les traductions de chaînes à l'exécution.
• L'objet variables transmet des valeurs au texte.
• L'objet variablesOptions définit le comportement des variables.

Prochaines étapes

• Voir tx() pour plus d'informations sur les traductions de chaînes en ligne.
• Voir Intl.NumberFormatOptions et Intl.DateTimeFormatOptions pour plus d'informations sur les options de formatage.