Browsers

Metro UI ready for internationalization and localisation!

Some components in Metro UI use text labels, example calendar component. Metro UI supports i18n mechanism to display text labels.

Define language

To define language for Metro UI, you need to set attribute lang.

1
<html lang="en">

Metro UI has a built-in i18n module that helps you to easily translate your app into different languages and switch between defined languages.

Locales supported by author – en, uk, de, es, fr, hi, it, pl, pt, zh.
Locales supported by community – es-ES, pt-BR.

Labels Example

{
    "en": {
        weekStart: 0,

        january: "January",
        february: "February",
        march: "March",
        april: "April",
        may: "May",
        june: "June",
        july: "July",
        august: "August",
        september: "September",
        october: "October",
        november: "November",
        december: "December",

        january_short: "Jan",
        february_short: "Feb",
        march_short: "Mar",
        april_short: "Apr",
        may_short: "May",
        june_short: "Jun",
        july_short: "Jul",
        august_short: "Aug",
        september_short: "Sep",
        october_short: "Oct",
        november_short: "Nov",
        december_short: "Dec",

        sunday: "Sunday",
        monday: "Monday",
        tuesday: "Tuesday",
        wednesday: "Wednesday",
        thursday: "Thursday",
        friday: "Friday",
        saturday: "Saturday",

        sunday_short: "Sun",
        monday_short: "Mon",
        tuesday_short: "Tue",
        wednesday_short: "Wed",
        thursday_short: "Thu",
        friday_short: "Fri",
        saturday_short: "Sat",

        sunday_short_2: "Su",
        monday_short_2: "Mo",
        tuesday_short_2: "Tu",
        wednesday_short_2: "We",
        thursday_short_2: "Th",
        friday_short_2: "Fr",
        saturday_short_2: "Sa",

        label_ok: "OK",
        label_cancel: "Cancel",
        label_done: "Done",
        label_today: "Today",
        label_now: "Now",
        label_clear: "Clear",
        label_help: "Help",
        label_yes: "Yes",
        label_no: "No",
        label_random: "Random",
        label_save: "Save",
        label_reset: "Reset",
        label_submit: "Submit",
        label_add_user_color: "Add to swatches",
        label_send: "Send",
        label_accept: "Accept",
        label_cookies_title: "This site uses cookies",
        label_cookies_text: "This website uses cookies to ensure you get the best experience on our website.",
        label_choose_file: "Choose file(s)",
        label_drop_file: "Click or drop file(s) here",
        label_files_selected: "{n} file(s) selected",

        label_days: "days",
        label_hours: "hours",
        label_minutes: "min",
        label_seconds: "sec",
        label_month: "mon",
        label_months: "mon's",
        label_day: "day",
        label_year: "year",
        label_years: "years",

        label_rows_count: "Show:",
        label_search: "Search:",
        label_table_info: "Showing $1 to $2 of $3 entries",
        label_prev: "Prev",
        label_next: "Next",
        label_all: "All",
        label_inspector: "Inspector",
        label_goto_page: "Goto",
        label_enter_page: "Enter page...",
        label_empty: "Nothing to show",
        label_user_colors: "User Colors",
        label_tiles: "Tiles",
        label_list: "List",
        label_load_more: "Load more",
        label_buy: "Buy",
        label_buy_now: "Buy now",
        label_buy_today: "Buy today",
        label_download: "Download",
        label_search_results: "Search results",
        label_add: "Add",
        label_edit: "Edit",
        label_delete: "Delete",
        label_new: "New",
        label_sell: "Sell",
        label_details: "Details",
        label_sorting: "Sorting",
        label_finish: "Finish",
        label_play: "Play",
        label_pause: "Pause",
        label_stop: "Stop",
        label_mute: "Mute",
        label_loop: "Loop",

        label_on: "on",
        label_off: "off",

        label_rename_tab: "Rename tab",
        label_close_tab: "Close tab",
        label_close_other_tabs: "Close other tabs",
        label_close_tabs_left: "Close tabs left",
        label_close_tabs_right: "Close tabs right",
        label_close_all_tabs: "Close all tabs",
        label_close_inactive_tabs: "Close inactive tabs",

        label_clear_input: "Clear input",
        label_reveal_password: "Reveal password",
        label_hide_password: "Hide password",
        label_generate_random: "Generate random value",
        label_search_input: "Search for the entered value",

        label_note: "Note",
        label_tip: "Tip",
        label_info: "Info",
        label_warning: "Warning",
        label_question: "Question",
        label_error: "Error",
        label_success: "Success",
        label_caution: "Caution",
        label_alert: "Alert",
        label_bug: "Bug",
        label_fuck: "Fuck",
        label_important: "Important",
        label_shit: "Shit",
        label_air: "Air",

        label_select_all: "Select all",
        label_select_more: "Select...",
        label_select: "Select",
        label_filter: "Filter",

        label_collapse: "Collapse",
    }
}

Built-in labels you can see in Metro UI source code on GitHub.

Methods

load(lang = 'en') - load language file to current locale
add(lang, data) - add locale
get(key, lang) - get specified label from locale
updateUI(context, lang) - update labels for specified context and language, by default, this method uses document as context and attr lang from html tag
extend(data) - extend locales with custom labels

Properties

Metro.i18n.language - current language ID
Metro.locales - available locales
Metro.locale - current locale - is an object contains pairs key, value

Each component has a property strings that contains current locale labels.

How it works

When Metro UI is initialized, it loads the language, defined in attr lang from html tag or en if attribute is not specified. Each Metro UI component has a property strings, which contains labels for the current loaded language.

Extends locales

You can extend locales with custom labels. To extend the locale, you need to call the Metro.i18n.extend(data) method and pass an object with custom labels.

1
Metro.i18n.extend({
2
    "en": {
3
        "custom_label": "Custom label"
4
    }
5
});

Update UI

To set i18n labels, add attr data-i18n to the HTML element and specify the label key. To update labels for the specified context and language, you need to call the Metro.i18n.updateUI(context, lang) method. By default, this method uses document as context and attr lang from html tag.

1
<div data-i18n="custom_label"></div>

1
Metro.i18n.updateUI(document, 'en');