app-localize-behavior is a behavior that wraps the format.js library to
help you internationalize your application. Note that if you're on a browser that
does not natively support the Intl
object, you must load the polyfill yourself. An example polyfill can
be found here.
See: Documentation, Demo.
npm install --save @polymer/app-localize-behavior
<html>
<head>
<!-- Optional: Intl polyfill -->
<script src="https://unpkg.com/intl@1.2.5/dist/Intl.min.js"></script>
<script src="https://unpkg.com/intl@1.2.5/locale-data/jsonp/en.js"></script>
<script src="https://unpkg.com/intl@1.2.5/locale-data/jsonp/fr.js"></script>
<!-- Elements using the behaviour -->
<script type="module" src="sample-element.js"></script>
</head>
<body>
<sample-element></sample-element>
</body>
</html>import {PolymerElement, html} from '@polymer/polymer';
import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
import {AppLocalizeBehavior} from '@polymer/app-localize-behavior/app-localize-behavior.js';
class SampleElement extends mixinBehaviors([AppLocalizeBehavior], PolymerElement) {
static get template() {
return html`
<div>{{localize('hello', 'name', 'Batman')}}</div>
`;
}
static get properties() {
return {
language: { value: 'en' },
}
}
function attached() {
this.loadResources(this.resolveUrl('locales.json'));
}
}
customElements.define('sample-element', SampleElement);If you want to send a PR to this element, here are the instructions for running the tests and demo locally:
git clone https://github.com/PolymerElements/app-localize-behavior
cd app-localize-behavior
npm install
npm install -g polymer-clipolymer serve --npm
open http://127.0.0.1:<port>/demo/polymer test --npm