Get started

# Language

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

Components speak the page's language: Portuguese or English from lang, numbers and dates through Intl, and every text replaceable.

## Change it here

The buttons change the `lang` of the example only. The components inside redraw in the new language, with no reload.

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

## Where the language comes from

Each component reads the `lang` of its own element or the closest ancestor, then the one on `<html>`. With none, it stays in Portuguese.

```html
<html lang="en">
  <u-datatable></u-datatable>             <!-- English -->
  <section lang="pt-BR">
    <u-calendar></u-calendar>             <!-- Portuguese -->
  </section>
</html>
```

Portuguese (`pt`, `pt-BR`) and English (`en`, `en-US`, `en-GB`) ship ready. A tag with no dictionary, like `de`, falls back to English: someone who marked the page in another language is more likely to read English than Portuguese.

## What changes and what stays

The text the component writes itself changes: buttons, accessibility labels, months, days, counts and the AI search status. Numbers, dates, currency and plurals go through `Intl`, in the language's format: `1.240` becomes `1,240`, `R$` becomes `$` and `1 cliente` becomes `1 customer`.

What you pass in props stays: titles, series names, periods and labels. Translate those in your app, the way you already do with the rest of the page.

## Change a text

For the whole app, merge keys into the language's dictionary. What is already on screen updates right away.

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

For a single component, use the `strings` prop. It wins over the dictionary and has the same name in all seven adapters.

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

The key list for a language comes from `Unslop.i18n.strings("pt")`. A plural key is an object with `one` and `other` (and `zero`, if you want a text of its own for zero).

## Another language

The same `set` creates a new language. Missing keys come from English, and `Intl` generates months and days on its own in the locale you set.

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

## Change after loading

Change the `lang` of `<html>` or of an element and the components inside redraw. A single observer handles the whole page, and the value the person picked in a selector stays picked.