i18n
Metro 4 ready for internationalization and localisation.
About
Some components in Metro 4 use text labels, example calendar component.
Metro 4 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 4 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 4 js loaded.
If you put javascript in bottom of page, you must set <meta> tag metro4:init to false and manually initialise Metro 4, 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>