Yerelleştirme

mdui dahili olarak varsayılan olarak İngilizce kullanır. Başka bir dili kullanmak istiyorsanız, çoklu dil yapılandırması yapmanız gerekir.

Kullanım Yöntemi

mdui, çoklu dil işlevselliğini uygulamak için üç fonksiyon sağlar:

• loadLocale: Dil paketini yükler. Parametre, bir dil kodunu parametre olarak alan ve Promise döndüren bir fonksiyondur. Dil paketi yüklendiğinde Promise, ilgili dil paketiyle çözülür. Bu fonksiyonu projenizin giriş dosyasında çağırdığınızdan emin olun.
• setLocale: Belirtilen dile geçiş yapar. Parametre yeni dil kodudur, yeni dil paketi yüklendikten sonra çözülen bir Promise döndürür.
• getLocale: Mevcut dil kodunu alır.

Kullanım örneği aşağıdaki gibidir:

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

// Proje girişinde dil paketini yüklemek için loadLocale'yi çağırın
loadLocale((locale) => import(`../node_modules/mdui/locales/${locale}.js`));

// Dili değiştirmeniz gerektiğinde bu fonksiyonu çağırın. Promise çözüldükten sonra dil başarıyla değişir
setLocale('zh-cn').then(() => {
  // Geçerli dil kodunu almak için getLocale'yi çağırın
  console.log(getLocale()); // zh-cn
});

Durum Olayları

Dil değişikliğinin başlangıcında, sonunda ve başarısız olduğunda, window üzerinde mdui-localize-status olayı tetiklenir. Bu olayı dinleyerek özel işlemler gerçekleştirebilirsiniz, örneğin dil değişikliği başarılı olduğunda dil kodunu Çerez'e yazmak gibi.

Olayın detail.status özelliği, hangi tür durum değişikliğinin meydana geldiğini açıklar. Olası değerler: loading, ready, error:

Kullanım örneği aşağıdaki gibidir:

window.addEventListener('mdui-localize-status', (event) => {
  if (event.detail.status === 'loading') {
    console.log(
      `Yeni dil paketi yüklenmeye başlıyor: ${event.detail.loadingLocale}`,
    );
  } else if (event.detail.status === 'ready') {
    console.log(
      `Yeni dil paketi ${event.detail.readyLocale} başarıyla yüklendi`,
    );
  } else if (event.detail.status === 'error') {
    console.error(
      `Yeni dil paketi ${event.detail.errorLocale} yüklenirken hata oluştu: ${event.detail.errorMessage}`,
    );
  }
});

Dil Paketi Yükleme Yöntemi

Tembel yükleme

Dinamik import kullanarak, ilgili dile geçildiğinde ilgili dil paketinin indirilmesini sağlayabilirsiniz. Bu en çok önerilen yöntemdir.

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

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

Ön yükleme

Sayfa yüklenirken ihtiyaç duyulan tüm dil paketlerini önceden indirin. Bu sayede dil değiştirirken tekrar indirme yapmanıza gerek kalmaz, böylece dil değiştirme daha hızlı olur.

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

Statik importlar

Bu yöntemi kullanarak ihtiyaç duyulan tüm dil paketlerini proje kodunuzla aynı dosyada birleştirebilir, böylece dil paketlerini ayrıca indirmeniz gerekmez.

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

CDN Üzerinden Dil Paketi Yükleme

Eğer mdui'yi CDN aracılığıyla kullanıyorsanız, dil paketini doğrudan CDN'den yükleyebilirsiniz. Kullanım örneği aşağıdaki gibidir:

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

Desteklenen Diller

Şu anda mdui aşağıdaki dilleri desteklemektedir:

Yeni Çeviri Gönderme

Yeni bir çeviriye katkıda bulunmak veya mevcut çevirileri iyileştirmek için lütfen Github üzerinde bir Birleştirme İsteği (Pull Request) oluşturun. Dil paketleri packages/mdui/src/xliff adresinde bulunmaktadır, doğrudan Github üzerinde düzenleme yapabilirsiniz.