@openremote/or-translate <or-translate>
Web Component for displaying a translated string based on the 18next library.
Install
npm i @openremote/or-translate
yarn add @openremote/or-translateUsage
For a full list of properties, methods and options refer to the TypeDoc generated documentation.
For a full list of i18next functionality refer to that project's documentation.
If used in conjunction with @openremote/core and the Manager init method has been called then the i18next
default export will be ready to use and would have been configured with the following settings:
- Language:
en - Fallback language:
en - Default Namespace:
app - Fallback namespace:
or - Available namespaces:
ManagerConfig.loadTranslations - OR Namespace path:
managerURL+/shared/locales/{{lng}}/{{ns}}.json - Namespace path:
ManagerConfig.loadTranslationsor fallback tolocales/{{lng}}/{{ns}}.json
There is an or namespace which is used for OpenRemote related translations; apps can use any other namespace(s) it is
recommended to use app as this is set as the default as described above. To translate a string use the following HTML:
<or-translate value="app:asset" />If using the default namespace then the namespace prefix can be omitted:
<or-translate value="asset" />It is also possible to pass an TOptions<InitOptions> object to the 18next.t method by setting the
options attribute.
Translate mixin (dist/translate-mixin)
Exports a translate function/mixin that can be used by any web component to hook into the i18next initialized and
languageChanged events; if the web component is a LitElement an update of the component will be automatically
requested when either event fires; otherwise the initCallback and/or langChangedCallback should be overridden as
required. For usage example see the or-translate source code.
Supported Browsers
The last 2 versions of all modern browsers are supported, including Chrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.