Começar

# Idioma

URL: https://unslop.leallabs.dev/docs/idioma

Os componentes falam o idioma da página: português ou inglês pelo lang, números e datas pelo Intl e qualquer texto trocável.

## Troque aqui

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

```html
<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
<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.

```js
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.

```html
<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.

```js
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.