Webformula core
Welcome Getting started Routing Serve / Build Binding variables Web component Fetcher Multiple languages github-circle-black-transparent GitHub github-circle-black-transparent Example app

Localization

Localization
Localization allows to configure multiple locales with local message configurations
  • Variables (Data is pulled from page variables)
  • Pluralization
  • Date formatting
  • Number formatting
  • Relative time formatting
en / es
About
key_string
item_count
item_count
time_from_now
date_key
currency_key
relativeTime_key
            
      import { i18n } from '@webformula/core';
  
  /* Set locale
   *   Defaults to browser if not set
   *   You can use language only locale 'en' and 'en-US'
   */
  i18n.locale = 'en-US';

  // turn on cache. This will load and save data to localStorage
  i18n.cache = true;

  // Load local messages
  i18n.loadMessages('en', en);
  i18n.loadMessages('es', es);
            
          
            
      <!-- Add i18n attribute to an element to enable translations -->
  <div i18n>About</div>
  <div i18n>key_string</div>

  <!--
    you can set message variables as element attributes
    By default variables will be pulled from current page
  -->
  <div i18n count="1">item_count</div>
  <div i18n count="2">item_count</div>
  <div i18n>date_key</div>
  <div i18n>currency_key</div>
  <div i18n>time_from_now</div>
  <div i18n>relativeTime_key</div>
  
  <!-- Attribute binding -->
  <wfc-textfield i18n-attr="label" label="Label days" value="3" oninput="page.days = this.value"></wfc-textfield>
  
  <!-- Attribute binding multiple -->
  <div i18n-attr="one,two" one="one" two="two"></div>
            
          
            
      // en
  
  // type configuration
  { "types": {
    "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" } } },
  
  // keys
  "About": "About",
  "Label days": "Label",
  "key_string": "This is a key string",

  // use types
  "item_count": "${count} ${itemPlural(count)}",
  "place_ordinal": "${place} ${placeOrdinal(place)}",
  "time_from_now": "${time} ${minutesCardinal(minutes)} from now",
  "date_key": "${dateFormat(date)}",
  "currency_key": "${currencyFormat(currency)}",
  "relativeTime_key": "${relativeTimeFormat(days)}" }
            
          
            
      // es
  
  // type configuration
  { "types": {
    "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" } } },
  
  // keys
  "About": "Acerca de",
  "Label days": "Etiqueta",
  "key_string": "Esta es una cadena clave",

  // use types
  "item_count": "${count} ${itemPlural(count)}",
  "place_ordinal": "${place} ${placeOrdinal(place)}",
  "time_from_now": "${time} ${minutesCardinal(minutes)} desde ahora",
  "date_key": "${dateFormat(date)}",
  "currency_key": "${currencyFormat(currency)}",
  "relativeTime_key": "${relativeTimeFormat(days)}" }