Localization
All components supports localization (i.e. get translated to a specific language) through the Microsoft Graph Toolkit localization feature. The localization process covers the following elements:
- Static labels in components (i.e. translations).
- Use defined labels from component attributes data (ex: filter names, tab names, etc.)
Localize components
The language is managed globally on the page for all components. By default all components are displayed in English using en-us
locale. Use the pnp-language-provider
component and locale
attribute to change the language:
<pnp-language-provider id="languageSwitcher" locale="fr-fr">
</pnp-language-provider>
You can also programmatically change the language using Javascript:
document.getElementById("languageSwitcher").setAttribute('locale','ro-ro')
!!! notice
- You can use the
show-picker
attribute to test the language switching behavior. - If no language provider is present on the page, the default language will be
en-us
.
Localize data
You can also localize the data passed as attribute for specific components using localized string format like this:
{
"default":"Default string for en-us",
[key: locale culture]: "FR",
}
The following components are localizable:
Component | Property in configuration |
---|---|
pnp-search-verticals | tabName |
pnp-search-filters | displayName |
Example for search verticals
[
{
"key":"all",
"tabName":{
"default":"All",
"fr-fr":"Tout le contenu",
"ro-ro":"Toate"
},
"tabValue":"",
"isLink":false,
"linkUrl":null,
"openBehavior":0
}
]
If the label shouldn't be localized, you can also use a string value instead of an object (Ex: "tabName": "Non localized value"
).