Lokalisierung

mdui verwendet standardmäßig intern Englisch. Wenn Sie eine andere Sprache verwenden möchten, müssen Sie eine Mehrsprachenkonfiguration vornehmen.

Verwendung

mdui bietet drei Funktionen für die Mehrsprachenunterstützung:

• loadLocale: Lädt ein Sprachpaket. Das Argument ist eine Funktion, die einen Sprachcode als Parameter erhält und ein Promise zurückgibt. Wenn das Sprachpaket geladen ist, wird das Promise mit dem entsprechenden Sprachpaket aufgelöst. Stellen Sie sicher, dass Sie diese Funktion in der Einstiegsdatei Ihres Projekts aufrufen.
• setLocale: Wechselt zu einer bestimmten Sprache. Das Argument ist der neue Sprachcode. Der Rückgabewert ist ein Promise, das aufgelöst wird, sobald das neue Sprachpaket geladen ist.
• getLocale: Gibt den aktuellen Sprachcode zurück.

Ein Beispiel:

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

// Rufen Sie loadLocale am Projekteinstiegspunkt auf, um Sprachpakete zu laden
loadLocale((locale) => import(`../node_modules/mdui/locales/${locale}.js`));

// Rufen Sie diese Funktion auf, wenn Sie die Sprache wechseln möchten. Nachdem das Promise aufgelöst ist, ist der Sprachwechsel abgeschlossen.
setLocale('zh-cn').then(() => {
  // Ein Aufruf von getLocale gibt den aktuellen Sprachcode zurück
  console.log(getLocale()); // zh-cn
});

Zustandsereignisse

Zu Beginn, am Ende oder bei einem Fehler des Sprachwechsels wird das mdui-localize-status-Ereignis auf dem window ausgelöst. Sie können dieses Ereignis abhören, um benutzerdefinierte Aktionen auszuführen, z. B. das Schreiben des Sprachcodes in ein Cookie nach erfolgreichem Sprachwechsel.

Die detail.status-Eigenschaft des Ereignisses beschreibt, welche Zustandsänderung stattgefunden hat. Mögliche Werte sind: loading, ready, error:

Ein Beispiel:

window.addEventListener('mdui-localize-status', (event) => {
  if (event.detail.status === 'loading') {
    console.log(
      `Beginne mit dem Laden des neuen Sprachpakets: ${event.detail.loadingLocale}`,
    );
  } else if (event.detail.status === 'ready') {
    console.log(
      `Neues Sprachpaket ${event.detail.readyLocale} erfolgreich geladen`,
    );
  } else if (event.detail.status === 'error') {
    console.error(
      `Neues Sprachpaket ${event.detail.errorLocale} konnte nicht geladen werden: ${event.detail.errorMessage}`,
    );
  }
});

Methoden zum Laden von Sprachpaketen

Lazy Loading

Die Verwendung von dynamischen Importen ermöglicht es, das entsprechende Sprachpaket erst beim Wechsel zu dieser Sprache herunterzuladen. Dies ist die empfohlene Methode.

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

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

Preloading

Laden Sie alle benötigten Sprachpakete herunter, während die Seite geladen wird. Dadurch ist kein weiterer Download beim Sprachwechsel erforderlich, was den Sprachwechsel beschleunigt.

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

Statische Importe

Mit dieser Methode können Sie alle benötigten Sprachpakete zusammen mit Ihrem Projektcode in dieselbe Datei bündeln, sodass kein separater Download von Sprachpaketen mehr erforderlich ist.

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

Sprachpakete über ein CDN laden

Wenn Sie mdui über ein CDN verwenden, können Sie Sprachpakete direkt über das CDN laden. Ein Beispiel:

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

Unterstützte Sprachen

Derzeit unterstützt mdui die folgenden Sprachen:

Neue Übersetzungen einreichen

Um neue Übersetzungen beizutragen oder bestehende Übersetzungen zu verbessern, reichen Sie bitte einen Pull Request auf Github ein. Die Sprachpakete befinden sich unter packages/mdui/src/xliff. Sie können sie direkt auf Github bearbeiten.