Idioma

Troque aqui

Os botões mudam o lang só do exemplo. Os componentes de dentro redesenham no idioma novo, sem recarregar.

<div data-lang-demo><article class="u-card">
  <div class="u-panel">
    <div data-u="period" data-u-props='{"mode": "month"}'></div>
    <div data-u="calendar"></div>
  </div>
</article></div>

De onde vem o idioma

Cada componente lê o lang do próprio elemento ou do ancestral mais próximo, depois o do <html>. Sem nenhum, fica em português.

<html lang="en">
  <u-datatable></u-datatable>             <!-- inglês -->
  <section lang="pt-BR">
    <u-calendar></u-calendar>             <!-- português -->
  </section>
</html>

Vêm prontos o português (pt, pt-BR) e o inglês (en, en-US, en-GB). Uma tag sem dicionário, como de, cai no inglês: quem marcou a página em outro idioma lê inglês com mais chance do que português.

O que muda e o que fica

Muda o texto que o próprio componente escreve: botões, rótulos de acessibilidade, meses, dias, contagens e o estado da busca de IA. Número, data, moeda e plural saem pelo Intl, no formato do idioma: 1.240 vira 1,240, R$ vira $ e 1 cliente vira 1 customer.

Fica o que você passa nas props: títulos, nomes de séries, períodos e rótulos. Traduza esses no seu app, como já faz com o resto da página.

Trocar um texto

Para o app inteiro, mescle chaves no dicionário do idioma. O que já está na tela atualiza na hora.

Unslop.i18n.set("en", { "dt.empty": "Nothing here yet." });

Para um componente só, use a prop strings. Ela vence o dicionário e existe nos sete adaptadores com o mesmo nome.

<u-datatable strings='{"dt.search":"Find a customer"}'></u-datatable>

A lista de chaves de um idioma sai de Unslop.i18n.strings("pt"). Chave com plural é um objeto com one e other (e zero, se quiser um texto próprio pro zero).

Outro idioma

O mesmo set cria um idioma novo. A chave que faltar vem do inglês, e meses e dias o Intl gera sozinho no locale que você indicar.

Unslop.i18n.set("es", { locale: "es-ES", currency: "EUR", "dt.search": "Buscar", "cal.apply": "Aplicar" });

Trocar depois de carregar

Mude o lang do <html> ou de um elemento e os componentes de dentro redesenham. Um observador só cuida da página inteira, e o valor que a pessoa escolheu num seletor continua escolhido.