Utilizzo dell’Estensione
Utilizzando l’estensione Quetzal per VSCode/Cursore, dovresti essere in grado di avvolgere automaticamente le tue stringhe con la funzione t
. Tuttavia, questa pagina documenterà l’uso manuale.
Importa la funzione ‘t’
Per tradurre le stringhe nella tua app, devono essere racchiuse nella funzione t
di Quetzal.
La funzione t
è il modo in cui Quetzal sa cosa inviare per la traduzione e dove inserire il testo tradotto.
//Next.js
import { useI18n } from "@quetzallabs/i18n"; //Componenti lato client
import { getI18nUtils } from "@quetzallabs/i18n"; //Codice lato server
//React:
import { useI18n } from "@quetzallabs/i18n-react-native"; //Componenti lato client
import { getI18nUtils } from "@quetzallabs/i18n-react-native"; //Codice lato server
export default function Page() {
const { t } = useI18n(); //Per componenti lato client
const { t } = await getI18nUtils(); //Per codice lato server
}
La funzione t di Quetzal è costruita sulla base della funzione t di next-intl e
si comporta in modo simile. Controlla la documentazione di next-intl per le istruzioni sull’utilizzo della funzione t.
Avvolgi Stringhe
Una volta importata e inizializzata la funzione t, puoi iniziare a marcare le stringhe per la traduzione
import { useI18n } from "@quetzallabs/i18n";
export default function Page() {
const { t } = useI18n();
return <p>{t("Ecco del testo normale")}</p>;
}
Output: Ecco il testo normale
Casi speciali
Testo Dinamico
Usa segnaposto per inserire dinamicamente valori nel testo tradotto.
import { useI18n } from "@quetzallabs/i18n";
export default function Page() {
const { t } = useI18n();
return (
<p>
{t("Ecco un {dynamic1} con un {dynamic2}", {
dynamic: 4,
dynamic2: "quattro",
})}
</p>
);
}
Risultato: Ecco un 4
Pluralizzazione
Gestisci la pluralizzazione in base al valore passato.
import { useI18n } from "@quetzallabs/i18n";
export default function Page() {
const { t } = useI18n();
return (
<p>
{t(
"Hai {count, plural, =0 {ancora nessun follower} =1 {un follower} other {# follower}}.",
{ count: 4 }
)}
</p>
);
}
Output: Hai 4 follower.
Numeri Ordinali
Formatta correttamente i numeri ordinali in diverse lingue.
import { useI18n } from "@quetzallabs/i18n";
export default function Page() {
const { t } = useI18n();
return (
<p>
{t(
"È il tuo {year, selectordinal, one {#°} two {#°} few {#°} other {#°}} compleanno!",
{ year: 1 }
)}
</p>
);
}
Output: È il tuo 1° compleanno!
Testo Multi-caso
Gestisci selezioni multi-caso, come le traduzioni basate sul genere.
import { useI18n } from "@quetzallabs/i18n";
export default function Page() {
const { t } = useI18n();
return (
<p>
{t("{gender, select, female {Lei} male {Lui} other {Loro}} è online.", {
gender: "male",
})}
</p>
);
}
Output: È online.
Escape delle Parentesi Graffe
Utilizza gli apici singoli per evitare le parentesi graffe nel testo.
import { useI18n } from "@quetzallabs/i18n";
export default function Page() {
const { t } = useI18n();
return <p>{t("Racchiudi le parentesi graffe tra virgolette singole (es. '{nome'})")}</p>;
}
Output: Usa virgolette singole per le parentesi graffe (es. {nome})
Incorpora testo formattato o elementi HTML nelle tue traduzioni.
import { useI18n } from "@quetzallabs/i18n";
import { ReactNode } from "react";
export default function Page() {
const { t } = useI18n();
return (
<p>
{t("Si prega di consultare <guidelines>le linee guida</guidelines>.", {
guidelines: (chunks: ReactNode) => <a href="/guidelines">{chunks}</a>,
})}
</p>
);
}
Output: Si prega di consultare le linee guida.
Elementi HTML incorporati
Puoi incorporare elementi HTML direttamente nelle tue stringhe tradotte.
import { useI18n } from "@quetzallabs/i18n";
import { ReactNode } from "react";
export default function Page() {
const { t } = useI18n();
return (
<p>
{t("Questo è <important>importante</important>", {
important: (chunks: ReactNode) => <b>{chunks}</b>,
})}
</p>
);
}
Output: Questo è importante
Numeri Regolari
Formatta i numeri semplici in base alle impostazioni locali dell’utente.
import { useI18n } from "@quetzallabs/i18n";
export default function Page() {
const { t } = useI18n();
return <p>{t(1234.56)}</p>;
}
Output: 1.234,56 (in formato it-IT)
Valute
Formatta numeri come valute.
import { useI18n } from "@quetzallabs/i18n";
export default function Page() {
const { t } = useI18n();
return <p>{t(499.9, { style: "valuta", currency: "USD" })}</p>;
}
Output: 499,90 €
Percentuali
Formatta numeri come percentuali.
import { useI18n } from "@quetzallabs/i18n";
export default function Page() {
const { t } = useI18n();
return <p>{t(0.857, { style: "percent" })}</p>;
}
Output: 85,7%
Applica formattazione numerica personalizzata.
import { useI18n } from "@quetzallabs/i18n";
export default function Page() {
const { t } = useI18n();
return (
<p>{t(1234.56, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</p>
);
}
Output: 1.234,56
Sintassi ICU per i Numeri
Utilizza la sintassi ICU per formattare i numeri nei messaggi.
import { useI18n } from "@quetzallabs/i18n";
export default function Page() {
const { t } = useI18n();
return (
<p>
{t("Questo prodotto costa {price, number, currency}", {
price: 32000.99,
number: {
currency: {
style: "currency",
currency: "EUR",
},
},
})}
</p>
);
}
Output: Questo prodotto costa €32.000,99
Date
Formatta le date in base alle impostazioni locali dell’utente.
import { useI18n } from "@quetzallabs/i18n";
export default function Page() {
const { t } = useI18n();
return (
<p>
{t(new Date(), {
year: "numeric",
month: "long",
day: "numeric",
})}
</p>
);
}
Output: August 12, 2024 (in en-US locale)
Intervalli di Date
Formatta un intervallo di date.
import { useI18n } from "@quetzallabs/i18n";
export default function Page() {
const { t } = useI18n();
return (
<p>
{t([new Date("2020-01-01"), new Date("2020-12-31")], {
year: "numeric",
month: "long",
day: "numeric",
})}
</p>
);
}
Output: January 1, 2020 – December 31, 2020 (in en-US locale)
Liste (Congiunzioni)
Formatta liste usando congiunzioni.
import { useI18n } from "@quetzallabs/i18n";
export default function Page() {
const { t } = useI18n();
return (
<p>
{t(["HTML", "CSS", "JavaScript"], {
type: "conjunction",
})}
</p>
);
}
Output: HTML, CSS e JavaScript
Liste (Disgiunzioni)
Formatta elenchi con disgiunzioni.
import { useI18n } from "@quetzallabs/i18n";
export default function Page() {
const { t } = useI18n();
return (
<p>
{t(["HTML", "CSS", "JavaScript"], {
type: "disgiunzione",
})}
</p>
);
}
Output: HTML, CSS o JavaScript
Elenchi di Variabili
Formatta elenchi generati da variabili.
import { useI18n } from "@quetzallabs/i18n";
export default function Page() {
const { t } = useI18n();
const utenti = [
{ id: 1, nome: "Alice" },
{ id: 2, nome: "Bob" },
{ id: 3, nome: "Charlie" },
];
const elementi = utenti.map((utente) => (
<a key={utente.id} href={`/utente/${utente.id}`}>
{utente.nome}
</a>
));
return <p>{t(elementi)}</p>;
}
Output: Alice, Bob e Charlie