Lokalizacja

Domyślnie mdui korzysta z języka angielskiego. Jeśli potrzebujesz innego języka, musisz skonfigurować wielojęzyczność.

Sposób użycia

mdui udostępnia trzy funkcje do realizacji wielojęzyczności:

• loadLocale: ładuje pakiet językowy. Parametr to funkcja, która przyjmuje kod języka i zwraca Promise z odpowiednim pakietem. Wywołaj tę funkcję w głównym pliku projektu.
• setLocale: przełącza na wskazany język. Parametr to nowy kod języka, zwraca Promise rozwiązujący się po załadowaniu pakietu.
• getLocale: pobiera bieżący kod języka.

Przykład użycia:

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

// W punkcie wejściowym projektu wywołaj loadLocale
loadLocale((locale) => import(`../node_modules/mdui/locales/${locale}.js`));

// Gdy chcesz zmienić język, wywołaj tę funkcję. Po rozwiązaniu Promise język zostanie zmieniony
setLocale('zh-cn').then(() => {
  // Wywołanie getLocale pobierze bieżący kod języka
  console.log(getLocale()); // zh-cn
});

Zdarzenia stanu

Podczas rozpoczynania, kończenia lub błędu zmiany języka, na obiekcie window wyzwalane jest zdarzenie mdui-localize-status. Możesz go nasłuchiwać, aby wykonać własne akcje, np. zapisać kod języka w ciasteczku po pomyślnej zmianie.

Właściwość detail.status zdarzenia opisuje rodzaj zmiany stanu: loading, ready, error:

Przykład użycia:

window.addEventListener('mdui-localize-status', (event) => {
  if (event.detail.status === 'loading') {
    console.log(
      `Rozpoczynanie ładowania pakietu: ${event.detail.loadingLocale}`,
    );
  } else if (event.detail.status === 'ready') {
    console.log(`Pakiet ${event.detail.readyLocale} załadowany pomyślnie`);
  } else if (event.detail.status === 'error') {
    console.error(
      `Nie udało się załadować pakietu ${event.detail.errorLocale}: ${event.detail.errorMessage}`,
    );
  }
});

Sposoby ładowania pakietów językowych

Ładowanie leniwe

Użycie dynamicznego importu pozwala pobrać odpowiedni pakiet dopiero przy przełączaniu na dany język. Jest to metoda zalecana.

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

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

Wstępne ładowanie

Podczas ładowania strony pobierane są wszystkie potrzebne pakiety językowe. Dzięki temu przy zmianie języka nie trzeba ich ponownie pobierać, co przyspiesza przełączanie.

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 statyczny

Ta metoda pozwala spakować wszystkie potrzebne pakiety językowe razem z kodem projektu do jednego pliku, dzięki czemu nie trzeba ich oddzielnie pobierać.

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

Ładowanie pakietów językowych przez CDN

Jeśli używasz mdui przez CDN, możesz ładować pakiety językowe bezpośrednio z CDN. Przykład użycia:

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

Obsługiwane języki

Obecnie mdui obsługuje następujące języki:

Przesyłanie nowych tłumaczeń

Aby dodać nowe tłumaczenie lub ulepszyć istniejące, otwórz Pull Request na GitHubie. Pakiety językowe znajdują się w packages/mdui/src/xliff. Możesz edytować je bezpośrednio na GitHubie.