Lokalizáció

Az mdui alapértelmezés szerint angolul használja a belső szövegeket. Ha más nyelvet szeretne használni, többnyelvű konfigurációt kell végeznie.

Használat

Az mdui három függvényt biztosít a többnyelvűség megvalósításához:

• loadLocale: Nyelvi csomagok betöltése. A paraméter egy függvény, amely egy nyelvkódot fogad, és egy Promise-t ad vissza. Amikor a nyelvi csomag betöltése befejeződött, a Promise feloldódik a megfelelő nyelvi csomaggal. Kérjük, a projekt belépési fájljában hívja meg ezt a függvényt.
• setLocale: Átvált a megadott nyelvre. A paraméter az új nyelvkód, visszatérési értéke egy Promise, amely az új nyelvi csomag betöltése után oldódik fel.
• getLocale: Lekéri az aktuális nyelvkódot.

Példa:

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

// A projekt belépési fájljában hívja meg a loadLocale-t a nyelvi csomagok betöltéséhez
loadLocale((locale) => import(`../node_modules/mdui/locales/${locale}.js`));

// Ha nyelvet kell váltania, hívja meg ezt a függvényt. A Promise feloldódása után a nyelvváltás sikeres
setLocale('zh-cn').then(() => {
  // A getLocale meghívásával lekérheti az aktuális nyelvkódot
  console.log(getLocale()); // zh-cn
});

Állapotesemények

A nyelvváltás kezdetekor, befejezésekor és hibájakor a mdui-localize-status esemény aktiválódik a window-on. Figyelheti ezt az eseményt egyéni műveletek végrehajtásához, például a nyelvkód cookie-ba írásához a sikeres nyelvváltás után.

Az esemény detail.status tulajdonsága azt írja le, hogy milyen állapotváltozás történt. Lehetséges értékek: loading, ready, error:

Példa:

window.addEventListener('mdui-localize-status', (event) => {
  if (event.detail.status === 'loading') {
    console.log(
      `Megkezdődött az új nyelvi csomag betöltése: ${event.detail.loadingLocale}`,
    );
  } else if (event.detail.status === 'ready') {
    console.log(
      `Az új nyelvi csomag ${event.detail.readyLocale} sikeresen betöltődött`,
    );
  } else if (event.detail.status === 'error') {
    console.error(
      `Az új nyelvi csomag ${event.detail.errorLocale} betöltése sikertelen: ${event.detail.errorMessage}`,
    );
  }
});

Nyelvi csomag betöltési módok

Lusta betöltés

A dinamikus import használatával a megfelelő nyelvre váltáskor töltődik le a nyelvi csomag. Ez a leginkább ajánlott módszer.

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

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

Előtöltés

Az oldal betöltésekor előre letölti az összes szükséges nyelvi csomagot. Így nyelvváltáskor nem kell újra letölteni, ami gyorsabb nyelvváltást tesz lehetővé.

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

Statikus import

Ezzel a módszerrel az összes szükséges nyelvi csomagot a projektkódjával egy fájlba csomagolhatja, így nem kell külön letöltenie a nyelvi csomagokat.

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

Nyelvi csomagok betöltése CDN-ről

Ha CDN-en keresztül használja az mdui-t, közvetlenül CDN-ről töltheti be a nyelvi csomagokat. Példa:

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

Támogatott nyelvek

Jelenleg az mdui a következő nyelveket támogatja:

Új fordítás beküldése

Új fordítás hozzáadásához vagy a meglévő fordítások javításához kérjük, nyisson egy Pull Request-et a Github-on. A nyelvi csomagok a packages/mdui/src/xliff címen találhatók, közvetlenül a Github-on szerkesztheti őket.