yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update storybook for localization

Browse Source
This commit is contained in:
Jacob Overgaard
2023-08-01 10:31:50 +02:00
parent 5c30003abb
commit eaecb821aa
2 changed files with 29 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/Umbraco.Web.UI.Client/.storybook/preview.js
View File

@@ -17,7 +17,7 @@ import { UmbDocumentTypeStore } from '../src/packages/documents/document-types/r
import { umbExtensionsRegistry } from '../src/packages/core/extension-registry';
import { UmbIconRegistry } from '../src/shared/icon-registry/icon.registry';
import { UmbLitElement } from '../src/shared/lit-element';
import { UmbLocalizationContext, UMB_LOCALIZATION_CONTEXT } from '../src/libs/localization-api';
import { UmbTranslationRegistry } from '../src/libs/localization-api';
import customElementManifests from '../dist-cms/custom-elements.json';
import '../src/libs/context-api/provide/context-provider.element';
@@ -40,9 +40,7 @@ class UmbStoryBookElement extends UmbLitElement {
this.provideContext(UMB_MODAL_CONTEXT_TOKEN, new UmbModalManagerContext(this));
this._registerExtensions(translationManifests);
const localizationContext = new UmbLocalizationContext(umbExtensionsRegistry);
localizationContext.setLanguage('en-US');
this.provideContext(UMB_LOCALIZATION_CONTEXT, localizationContext);
new UmbTranslationRegistry(umbExtensionsRegistry).loadLanguage('en-us'); // register default language
}
_registerExtensions(manifests) {

41
src/Umbraco.Web.UI.Client/storybook/stories/extending/localization.mdx
View File

@@ -73,25 +73,38 @@ The `umb-localize` component is used to translate text in the UI. It is used lik
Experiment with the component here: [Localize](/story/localization-localize--overview)
### UmbLocalizationContext
### UmbLocalizeController
The `UmbLocalizationContext` is used to translate text in the UI. It is used like this:
The `UmbLocalizeController` is used to translate text in the UI. It is used like this:
**UmbElementMixin**
The controller is already initialised if you use the `UmbElementMixin` in your element:
```ts
this.consumeContext(UMB_LOCALIZATION_CONTEXT, (instance) => {
// Localize one key
instance.localize('general_close').subscribe((value) => {
console.log(value); // should display "Close" in the console
});
// Localize many keys
instance.localizeMany(['general_close', 'general_cancel']).subscribe((values) => {
console.log(values); // should display ["Close", "Cancel"] in the console
});
});
export class MyElement extends UmbElementMixin(LitElement) {
render() {
return html` <uui-button .label=${this.localize.term('general_close')}></uui-button> `;
}
}
```
The values can then be assigned to a stateful property in the component and rendered to the user.
**Reactive controller**
If you do not use the `UmbElementMixin` in your element, you can use the reactive controller like this:
```ts
import { UmbLocalizeController } from '@umbraco-cms/backoffice/localization-api';
export class MyElement extends LitElement {
// Create a new instance of the controller and attach it to the element
private localize = new UmbLocalizeController(this);
render() {
return html` <uui-button .label=${this.localize.localize('general_close')}></uui-button> `;
}
}
```
### Fallback