Language

Change it here

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

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

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.

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

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.