Localisation

Par défaut, mdui utilise l'anglais. Pour utiliser une autre langue, vous devez configurer la localisation.

Utilisation

mdui fournit trois fonctions pour la localisation :

• loadLocale : Charge un pack de langue. Reçoit une fonction qui prend un code de langue et retourne une Promise résolue avec le pack de langue correspondant. Appelez cette fonction dans le point d'entrée de votre projet.
• setLocale : Change la langue active. Reçoit le nouveau code de langue et retourne une Promise résolue après le chargement du nouveau pack.
• getLocale : Obtient le code de la langue active.

Exemple d'utilisation :

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

// Dans le point d'entrée du projet, chargez les packs de langue
loadLocale((locale) => import(`../node_modules/mdui/locales/${locale}.js`));

// Appelez cette fonction pour changer la langue. La Promise est résolue une fois le changement terminé.
setLocale('zh-cn').then(() => {
  console.log(getLocale()); // zh-cn
});

Événements d'état

Un événement mdui-localize-status est déclenché sur window au début, à la fin et en cas d'échec d'un changement de langue. Vous pouvez l'écouter pour exécuter des actions personnalisées, comme écrire le code de langue dans un cookie.

La propriété detail.status de l'événement indique le type de changement. Les valeurs possibles sont loading, ready, error :

Exemple d'utilisation :

window.addEventListener('mdui-localize-status', (event) => {
  if (event.detail.status === 'loading') {
    console.log(`Chargement du pack de langue : ${event.detail.loadingLocale}`);
  } else if (event.detail.status === 'ready') {
    console.log(
      `Pack de langue ${event.detail.readyLocale} chargé avec succès`,
    );
  } else if (event.detail.status === 'error') {
    console.error(
      `Échec du chargement du pack ${event.detail.errorLocale} : ${event.detail.errorMessage}`,
    );
  }
});

Méthodes de chargement des packs de langue

Chargement paresseux (Lazy load)

Utiliser l'import dynamique permet de télécharger le pack de langue uniquement lorsque la langue correspondante est demandée. C'est la méthode recommandée.

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

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

Préchargement

Téléchargez tous les packs de langue nécessaires au chargement de la page. Cela rend le changement de langue plus rapide car aucun téléchargement supplémentaire n'est requis.

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 statique

Cette méthode intègre tous les packs de langue nécessaires dans le même bundle que le code de votre projet, éliminant ainsi les téléchargements séparés.

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));

Charger les packs de langue via CDN

Si vous utilisez mdui via CDN, vous pouvez charger les packs de langue directement depuis le CDN. Exemple :

<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>

Langues supportées

Actuellement, mdui supporte les langues suivantes (codes de langue) :

Contribuer une nouvelle traduction

Pour contribuer une nouvelle traduction ou améliorer une traduction existante, veuillez soumettre une Pull Request sur GitHub. Les packs de langue se trouvent dans packages/mdui/src/xliff. Vous pouvez éditer directement sur GitHub.