Localización

Los componentes se pueden localizar importando el archivo de traducción apropiado y estableciendo los atributos lang y/o dir deseados en el elemento <html>.

A continuación, se muestra un ejemplo que muestra los componentes web de Gstock en español.

<html lang="es">
  <head>
    <script type="module" src="/path/to/gstock/dist/translations/es.js"></script>
  </head>

  <body>
    ...
  </body>
</html>

Gracias a la magia de un observador de mutaciones, cambiar el atributo lang actualizará automáticamente todos los componentes localizados para usar el nuevo idioma.

Traducciones disponibles

Gstock Web Components incluye varias traducciones. El idioma predeterminado es inglés (EE. UU.), que también sirve como idioma de respaldo. Por lo tanto, no necesitas importar la traducción al inglés. Para ver una lista de todas las traducciones disponibles en la última versión, consulta este directorio.

La ubicación de las traducciones depende de cómo estés usando Gstock Web Components.

Si estás usando un empaquetador, impórtalas desde @gstock/webcomponents/dist/translations/[lang].js

No necesitas cargar las traducciones por adelantado. Puedes importarlas dinámicamente incluso después de actualizar el atributo lang. Una vez que se registra una traducción, los componentes localizados se actualizarán automáticamente.

// Lo mismo que establecer <html lang="de">
document.documentElement.lang = 'de';

// Importar la traducción
import('/path/to/gstock/dist/translations/de.js');

Resolución de traducciones

La configuración regional establecida por <html lang="..."> es la configuración regional predeterminada para el documento. Si se proporciona un código de país, por ejemplo es-PE para español peruano, la biblioteca de localización lo resolverá de esta manera:

Buscar es-PE
Buscar es
Usar en como respaldo

Gstock Web Components usa el inglés como respaldo para proporcionar una mejor experiencia que mostrar nada o arrojar un error.

Gstock Web Components proporciona un mecanismo de localización para componentes internos. Esto no está diseñado para ser utilizado como una herramienta de localización para toda tu aplicación. Debes usar una herramienta más apropiada como i18next si necesitas localizar contenido en tu aplicación.

Múltiples idiomas por página

Puedes usar un idioma diferente para un componente individual estableciendo sus atributos lang y/o dir. Aquí hay un ejemplo artificial para demostrarlo.

<html lang="es">
  ...

  <body>
    <gstock-button><!-- Español --></gstock-button>
    <gstock-button lang="fr"><!-- Francés --></gstock-button>
  </body>
</html>

Por razones de rendimiento, los atributos lang y dir deben estar en el componente mismo, no en un elemento ancestro.

<html lang="es">
  ...

  <body>
    <div lang="fr">
      <gstock-button><!-- sigue en español --></gstock-button>
    </div>
  </body>
</html>

Esta limitación existe porque no hay una manera eficiente de determinar el idioma actual de un elemento dado en un árbol DOM. Ver propuesta para un par de propiedades para hacer esto posible.