Localizzazione

mdui predefinisce l'inglese. Per supportare altre lingue, configura la Localizzazione.

Utilizzo

mdui fornisce tre funzioni per la Localizzazione:

• loadLocale: Carica i moduli di Localizzazione. Accetta una funzione che prende un codice locale e restituisce una Promise che risolve il modulo locale. Chiama questa funzione nel file di ingresso del tuo progetto.
• setLocale: Inizia a cambiare la lingua attiva con il codice locale dato e restituisce una promise che si risolve quando la nuova lingua è stata caricata.
• getLocale: Restituisce il codice locale attivo.

Esempio di utilizzo:

import { loadLocale } from 'mdui/functions/loadLocale.js';
import { setLocale } from 'mdui/functions/setLocale.js';
import { getLocale } from 'mdui/functions/getLocale.js';

// Carica i moduli di Localizzazione nel punto di ingresso del tuo progetto
loadLocale((locale) => import(`../node_modules/mdui/locales/${locale}.js`));

// Cambia lingua e restituisce una promise che si risolve quando la nuova lingua è stata caricata
setLocale('zh-cn').then(() => {
  // Puoi usare getLocale() per ottenere il codice locale corrente
  console.log(getLocale()); // zh-cn
});

Eventi di Stato

L'evento mdui-localize-status viene attivato su window ogni volta che inizia, termina o fallisce un cambio di lingua. Puoi ascoltare questo evento per eseguire operazioni personalizzate, come impostare un cookie di preferenza della lingua.

La proprietà stringa detail.status ti informa sul tipo di cambiamento di stato che si è verificato e può essere loading, ready o error:

Esempio di utilizzo dell'evento di stato:

window.addEventListener('mdui-localize-status', (event) => {
  if (event.detail.status === 'loading') {
    console.log(`Caricamento nuova lingua: ${event.detail.loadingLocale}`);
  } else if (event.detail.status === 'ready') {
    console.log(`Caricata nuova lingua: ${event.detail.readyLocale}`);
  } else if (event.detail.status === 'error') {
    console.error(
      `Errore durante il caricamento della lingua ${event.detail.errorLocale}: ${event.detail.errorMessage}`,
    );
  }
});

Approcci per caricare i moduli di Localizzazione

Caricamento Lazy

Utilizza gli import dinamici per caricare ogni lingua solo quando diventa attiva. Questa è una buona impostazione predefinita perché riduce al minimo la quantità di codice che i tuoi utenti scaricheranno ed eseguiranno.

import { loadLocale } from 'mdui/functions/loadLocale.js';

loadLocale((locale) => import(`../node_modules/mdui/locales/${locale}.js`));

Pre-caricamento

Quando la pagina viene caricata, scarica in anticipo tutti i pacchetti lingua necessari. In questo modo, al cambio di lingua non è necessario alcun download aggiuntivo, rendendo il cambio più rapido.

import { loadLocale } from 'mdui/functions/loadLocale.js';

const localizedTemplates = new Map([
  ['zh-cn', import(`../node_modules/mdui/locales/zh-cn.js`)],
  ['zh-tw', import(`../node_modules/mdui/locales/zh-tw.js`)],
]);

loadLocale(async (locale) => localizedTemplates.get(locale));

Import Statici

Utilizzando questo metodo, tutti i pacchetti lingua necessari e il codice del progetto vengono raggruppati nello stesso file, non è più necessario scaricare i pacchetti lingua separatamente.

import { loadLocale } from 'mdui/functions/loadLocale.js';
import * as locale_zh_cn from 'mdui/locales/zh-cn.js';
import * as locale_zh_tw from 'mdui/locales/zh-tw.js';

const localizedTemplates = new Map([
  ['zh-cn', locale_zh_cn],
  ['zh-tw', locale_zh_tw],
]);

loadLocale(async (locale) => localizedTemplates.get(locale));

Caricamento dei Moduli di Localizzazione tramite CDN

Quando si utilizza mdui tramite CDN, è possibile caricare direttamente i moduli di Localizzazione dal CDN:

<script src="https://unpkg.com/mdui@2/mdui.global.js"></script>

<script>
  mdui.loadLocale(
    (locale) => import(`https://unpkg.com/mdui@2/locales/${locale}.js`),
  );
  mdui.setLocale('zh-cn');
</script>

Lingue Supportate

mdui supporta le seguenti lingue:

Invio di Nuove Traduzioni o Miglioramenti

Per contribuire con nuove traduzioni o miglioramenti alle traduzioni esistenti, invia una pull request su GitHub. Le traduzioni si trovano in packages/mdui/src/xliff e possono essere modificate direttamente su GitHub se non vuoi clonare il repository in locale.