99 lines
2.4 KiB
Text
99 lines
2.4 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/Features Overview" />
|
|
|
|
<Story name="Translate text"></Story>
|
|
|
|
## Translate Text
|
|
|
|
### As a function
|
|
|
|
<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
|
|
|
|
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>
|
|
`;
|
|
}
|
|
}
|
|
```
|
|
|
|
## Numbers
|
|
|
|
To format numbers you can use `formatNumber`. For more details see [Numbers](?path=/docs/localize-system-numbers--formatting).
|
|
|
|
<Story name="Numbers">
|
|
{() => {
|
|
const wrapper = document.createElement('div');
|
|
let value = 1234.56;
|
|
function update() {
|
|
render(
|
|
html`
|
|
<input type="text" value=${value} />
|
|
<p>${formatNumber(value)}</p>
|
|
<sb-locale-switcher></sb-locale-switcher>
|
|
`,
|
|
wrapper,
|
|
);
|
|
}
|
|
localize.addEventListener('localeChanged', () => {
|
|
update();
|
|
});
|
|
update();
|
|
const input = wrapper.querySelector('input');
|
|
input.addEventListener('input', ev => {
|
|
value = ev.target.value;
|
|
update();
|
|
});
|
|
return wrapper;
|
|
}}
|
|
</Story>
|
|
|
|
## Dates
|
|
|
|
To format dates you can use `formatDate`. For more details see [Dates](?path=/docs/localize-system-dates--formatting).
|
|
|
|
<Story name="Dates">
|
|
{() => {
|
|
const wrapper = document.createElement('div');
|
|
let value = '1987/05/12';
|
|
function update() {
|
|
render(
|
|
html`
|
|
<input type="text" value=${value} />
|
|
<p>${formatDate(new Date(value))}</p>
|
|
<sb-locale-switcher></sb-locale-switcher>
|
|
`,
|
|
wrapper,
|
|
);
|
|
}
|
|
localize.addEventListener('localeChanged', () => {
|
|
update();
|
|
});
|
|
update();
|
|
const input = wrapper.querySelector('input');
|
|
input.addEventListener('input', ev => {
|
|
value = ev.target.value;
|
|
update();
|
|
});
|
|
return wrapper;
|
|
}}
|
|
</Story>
|