Localization
Localization allows to configure multiple locales with local message configurations
- Language
- Pluralization
- Date formatting
- Number formatting
- Relative time formatting
About
This is a key string
1 item
30 minutes from now
12/13/24, 7:16 PM
$123.45
Dynamic pluralization with signals
in 3 days
import { i18n } from '@thewebformula/lithe'; /* Set locale * Defaults to browser if not set * You can use language only locale 'en' and 'en-US' */ i18n.setLocale('en-US'); // turn on cache. This will load and save data to localStorage i18n.cache(); // Load local messages i18n.addTranslation('en', en); i18n.addTranslation('es', es);
<!-- Use i18n method to translate keys --> <div>${i18n('About')}</div> <div>${i18n('key_string')}</div> <!-- Use i18n.format method to handle individual formatting --> <div>${page.count} ${i18n.format('itemPlural', page.count)}</div> <!-- Use message variables and formatters: "time_from_now": "$1 $minutesCardinal($1) from now" --> <div>${i18n('time_from_now', page.time)}</div> <div>${i18n('date_key', page.date)}</div> <div>${i18n('currency_key', page.currency)}</div> <div> <div class="mc-font-title-medium">Dynamic pluralization with signals</div> <mc-textfield label="${i18n('Label days')}" type="number" value="${page.days}" oninput="page.days.value = this.value"></mc-textfield> <div>${i18n('relativeTime_key', page.days)}</div> </div> <!-- Attribute binding --> <mc-textfield i18n-attr="label" label="Label days" value="${page.days}" oninput="page.days = this.value"></mc-textfield> <!-- Attribute binding multiple --> <div i18n-attr="one,two" one="one" two="two"></div>
// en // type configuration { "formatters": { "itemPlural": { "type": "cardinal", "zero": "items", "one": "item", "two": "items", "few": "items", "many": "items", "other": "items" }, "placeOrdinal": { "type": "ordinal", "one": "st", "two": "nd", "few": "rd", "other": "th" }, "minutesCardinal": { "type": "cardinal", "one": "minute", "other": "minutes" }, "dateFormat": { "type": "date", "options": { "dateStyle": "short", "timeStyle": "short" } }, "currencyFormat": { "type": "number", "options": { "style": "currency", "currency": "USD" } }, "relativeTimeFormat": { "type": "relativeTime", "unit": "day", "options": { "style": "short" } } }, "messages": { "About": "About", "Label days": "Label days", "key_string": "This is a key string", "time_from_now": "$1 $minutesCardinal($1) from now", "date_key": "$dateFormat($1)", "item_count": "$1 $itemPlural($1)", "place_ordinal": "$1 $placeOrdinal($1)", "currency_key": "$currencyFormat($1)", "relativeTime_key": "$relativeTimeFormat($1)" } }
// es // type configuration { "formatters": { "itemPlural": { "type": "cardinal", "zero": "elementos", "one": "artículo", "two": "elementos", "few": "elementos", "many": "elementos", "other": "elementos" }, "placeOrdinal": { "type": "ordinal", "one": "er", "two": "do", "few": "er", "other": "to" }, "minutesCardinal": { "type": "cardinal", "one": "minuto", "other": "minutos" }, "dateFormat": { "type": "date", "options": { "dateStyle": "short", "timeStyle": "short" } }, "currencyFormat": { "type": "number", "options": { "style": "currency", "currency": "MXN" } }, "relativeTimeFormat": { "type": "relativeTime", "unit": "day", "options": { "style": "short" } } }, "messages": { "About": "Acerca de", "Label days": "Días de etiqueta", "key_string": "Esta es una cadena clave", "item_count": "$1 $itemPlural($1)", "place_ordinal": "$1 $placeOrdinal($1)", "time_from_now": "$1 $minutesCardinal($1) desde ahora", "date_key": "$dateFormat($1)", "currency_key": "$currencyFormat($1)", "relativeTime_key": "$relativeTimeFormat($1)" } }