UdeS.LanguageMixin
A simple mixin to be aware of the current language application.
The language
property is computed from supported languages and from the browser languages.
It implements the observer pattern. You should call the updateLanguage
function if you want to update the language of all observers. When the language is changed, the lang attribute of html element is update automatically.
<html lang="en"></html>
The mixin also provide some read-only properties to your component:
defaultLanguage
: Default language defined globally.language
: Current language.navigatorLanguage
: Navigator language (see window.navigator.language).navigatorLanguages
: Navigator languages (see window.navigator.languages).supportedLanguages
: Supported languages defined globally.
Demo
<udes-language-demo></udes-language-demo>
Installation
npm install @udeselements/udes-language-mixin
Usage
To set the default language and the supported languages of your site, add the following code inside your index.html
BEFORE you import any HTML component using this mixin.
window.UdeS.Language = {
defaultLanguage: 'en',
supportedLanguages: ['en', 'fr'],
};
Localized files with Sherby.LocalizeMixin
If you want also to load some localized files, you should take a look on Sherby.LocalizeMixin
instead.