42 lines
1.2 KiB
Text
42 lines
1.2 KiB
Text
import { Story, Meta, html } from '@open-wc/demoing-storybook';
|
|
import { render } from '@lion/core';
|
|
import { localize, formatNumber, formatDate } from '../index.js';
|
|
|
|
<Meta title="Localize/Translate Text" />
|
|
|
|
<Story name="Function"></Story>
|
|
|
|
# Translate Text
|
|
|
|
Is meant to translate text into multiple languages.
|
|
In it's simplest form it is a function that returns the translated text for a `namespace` + `key`.
|
|
|
|
<Story id="localize-system-internals--as-function" />
|
|
|
|
```js
|
|
localize.msg('lit-html-example:body'); // for en-GB: I am from England
|
|
localize.msg('lit-html-example:body'); // for nl-NL: Ik kom uit Nederland
|
|
// ...
|
|
```
|
|
|
|
## Web Component
|
|
|
|
<Story name="Web component"></Story>
|
|
|
|
For use in a web component we have `LocalizeMixin` that lets you define namespaces and awaits loading of those translations.
|
|
|
|
<Story id="localize-system-internals--web-component" />
|
|
|
|
```js
|
|
class MessageExample extends LocalizeMixin(LitElement) {
|
|
render() {
|
|
return html`
|
|
<div aria-live="polite">
|
|
<p>${localize.msg('lit-html-example:body')}</p>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
```
|
|
|
|
For a full overview of all the features, please checkout the [Localize System Overview](?path=/docs/localize-system-overview--page).
|