Localización

Por defecto, mdui usa inglés internamente. Si necesitas usar otro idioma, debes configurar la localización.

Uso

mdui ofrece tres funciones para implementar la localización:

• loadLocale: Carga el paquete de idioma. El parámetro es una función que recibe un código de idioma y devuelve una Promise que se resuelve con el paquete de idioma correspondiente cuando se completa la carga. Asegúrate de llamar a esta función en el archivo de entrada del proyecto.
• setLocale: Cambia al idioma especificado. El parámetro es el nuevo código de idioma. Devuelve una Promise que se resuelve cuando se completa la carga del nuevo paquete de idioma.
• getLocale: Obtiene el código de idioma actual.

Uso:

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

// Llama a loadLocale en la entrada del proyecto para cargar los paquetes de idioma
loadLocale((locale) => import(`../node_modules/mdui/locales/${locale}.js`));

// Llama a esta función cuando necesites cambiar de idioma. Después de que la Promise se resuelva, el cambio de idioma se habrá completado
setLocale('zh-cn').then(() => {
  // Llamando a getLocale se obtiene el código de idioma actual
  console.log(getLocale()); // zh-cn
});

Evento de estado

Al inicio, finalización o fallo del cambio de idioma, se dispara el evento mdui-localize-status en window. Puedes escuchar este evento para realizar acciones personalizadas, como escribir el código de idioma en una cookie después de un cambio exitoso.

La propiedad detail.status del evento describe qué cambio de estado ha ocurrido. Los valores posibles son: loading, ready, error:

Uso:

window.addEventListener('mdui-localize-status', (event) => {
  if (event.detail.status === 'loading') {
    console.log(
      `Comenzando a cargar el nuevo paquete de idioma: ${event.detail.loadingLocale}`,
    );
  } else if (event.detail.status === 'ready') {
    console.log(
      `Nuevo paquete de idioma ${event.detail.readyLocale} cargado correctamente`,
    );
  } else if (event.detail.status === 'error') {
    console.error(
      `Falló la carga del nuevo paquete de idioma ${event.detail.errorLocale}: ${event.detail.errorMessage}`,
    );
  }
});

Métodos de carga del paquete de idioma

Carga perezosa

Usar importación dinámica permite descargar el paquete de idioma correspondiente solo cuando se cambia a ese idioma. Este es el método más recomendado.

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

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

Precarga

Descarga todos los paquetes de idioma necesarios al cargar la página. Esto evita tener que descargarlos al cambiar de idioma, haciendo que el cambio sea más rápido.

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

Importación estática

Usar este método permite empaquetar todos los paquetes de idioma necesarios junto con el código de tu proyecto en un solo archivo, sin necesidad de descargas adicionales.

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

Cargar paquetes de idioma mediante CDN

Si usas mdui mediante CDN, puedes cargar los paquetes de idioma directamente desde el CDN. 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 soportados

Actualmente, mdui soporta los siguientes idiomas:

Contribuir con nuevas traducciones

Para contribuir con nuevas traducciones o mejorar las existentes, envía un Pull Request en Github. Los paquetes de idioma se encuentran en packages/mdui/src/xliff. Puedes editar directamente en Github.