i18n
Metro UI ready for internationalization and localisation.
About
Some components in Metro UI use text labels, example calendar component.
Metro UI supports i18n mechanism to display text labels.
By default components use value of METRO_LOCALE variable. This ia a global variable and can be modified before Metro UI js loaded.
You can set locale for component with special attribute data-locale.
<script>
window.METRO_LOCALE = "de-DE";
</script>
<script src="metro.js"></script>
Meta tag
You can set global locale with <meta> tag. To set it use meta tag with name metro4:locale.
<meta name="metro4:locale" content="uk-UA">
Locales
You can get hard stored locales with method Metro.utils.getLocales().
var locales = Metro.utils.getLocales();
console.log(locales);
Add locale
You can add own locale at runtime. To add locale you must use method Metro.utils.addLocale().
<script>
Metro.utils.addLocale({
'de-DE': {
"calendar": {
"months": [
"Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember",
"Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"
],
"days": [
"Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag",
"Sn", "Mn", "Di", "Mi", "Do", "Fr", "Sa",
"Son", "Mon", "Die", "Mit", "Don", "Fre", "Sam"
],
"time": {
"days": "TAGE",
"hours": "UHR",
"minutes": "MIN",
"seconds": "SEK"
}
},
"buttons": {
"ok": "OK",
"cancel": "Abbrechen",
"done": "Fertig",
"today": "Heute",
"now": "Jetzt",
"clear": "Reinigen",
"help": "Hilfe",
"yes": "Ja",
"no": "Nein",
"random": "Zufällig"
}
}
});
</script>
if you put your javascript in <head>, you must use method after Metro UI js loaded.
If you put javascript in bottom of page, you must set <meta> tag metro4:init to false and manually initialise Metro UI, after locale is added.
For head
<head>
<script src="metro.js"></script>
<script>
Metro.utils.addLocale(...);
</script>
</head>
For bottom of page
<head>
<meta name="metro4:init" content="false">
</head>
<body>
...
<script src="metro.js"></script>
<script>
Metro.utils.addLocale(...);
Metro.init();
</script>
</body>