Localização

O mdui usa inglês como padrão interno. Se precisar usar outro idioma, é necessário configurar o multilinguismo.

Como usar

O mdui fornece três funções para implementar a funcionalidade multilíngue:

• loadLocale: Carrega o pacote de idioma. O parâmetro é uma função que recebe um código de idioma como argumento e retorna uma Promise. Quando o carregamento do pacote de idioma é concluído, a Promise é resolvida com o pacote de idioma correspondente. Certifique-se de chamar esta função no arquivo de entrada do projeto.
• setLocale: Altera para o idioma especificado. O parâmetro é o novo código de idioma. Retorna uma Promise que será resolvida quando o novo pacote de idioma for carregado.
• getLocale: Obtém o código de idioma atual.

Exemplo de uso:

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

// No ponto de entrada do projeto, chame loadLocale para carregar o pacote de idioma
loadLocale((locale) => import(`../node_modules/mdui/locales/${locale}.js`));

// Chame esta função quando precisar mudar o idioma. Após a Promise ser resolvida, a mudança de idioma é bem-sucedida
setLocale('zh-cn').then(() => {
  // Chamar getLocale obtém o código de idioma atual
  console.log(getLocale()); // zh-cn
});

Eventos de estado

No início, fim ou falha da mudança de idioma, o evento mdui-localize-status é acionado no window. Você pode monitorar este evento para executar operações personalizadas, como gravar o código de idioma em um cookie após a mudança bem-sucedida.

A propriedade detail.status do evento descreve qual mudança de estado ocorreu. Os valores possíveis incluem: loading, ready, error:

Exemplo de uso:

window.addEventListener('mdui-localize-status', (event) => {
  if (event.detail.status === 'loading') {
    console.log(
      `Começando a carregar o novo pacote de idioma: ${event.detail.loadingLocale}`,
    );
  } else if (event.detail.status === 'ready') {
    console.log(
      `Novo pacote de idioma ${event.detail.readyLocale} carregado com sucesso`,
    );
  } else if (event.detail.status === 'error') {
    console.error(
      `Falha ao carregar o novo pacote de idioma ${event.detail.errorLocale}: ${event.detail.errorMessage}`,
    );
  }
});

Formas de carregar pacotes de idioma

Lazy loading

Usar importação dinâmica permite baixar o pacote de idioma correspondente apenas quando você alterna para esse idioma. Este é o método mais recomendado.

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

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

Pré-carregamento

Baixe todos os pacotes de idioma necessários durante o carregamento da página. Isso elimina a necessidade de baixar novamente ao alternar o idioma, tornando a mudança mais rápida.

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

Importação estática

Este método permite empacotar todos os pacotes de idioma necessários junto com o código do seu projeto em um único arquivo, não sendo mais necessário baixar os pacotes de idioma separadamente.

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

Carregando pacotes de idioma via CDN

Se você está usando o mdui via CDN, pode carregar os pacotes de idioma diretamente do CDN. Exemplo de uso:

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

Idiomas suportados

Atualmente, o mdui suporta os seguintes idiomas:

Enviar novas traduções

Para contribuir com novas traduções ou melhorar as traduções existentes, abra um Pull Request no Github. Os pacotes de idioma estão localizados em packages/mdui/src/xliff. Você pode editar diretamente no Github.