Localizing the Microsoft Graph Toolkit components
Localization is an important aspect of application development to support users with various language requirements globally.
You can localize the Microsoft Graph Toolkit components to ensure that the UI reflects the target language.
Use LocalizationHelper to add localized strings
None of the strings in the toolkit are localized, but you can provide your own localized strings and manage different languages through the same process you use for localizing your app. To facilitate localization, the toolkit exposes the LocalizationHelper
static class.
The following example shows how to localize several components.
import { LocalizationHelper } from "@microsoft/mgt-element";
LocalizationHelper.strings = {
noResultsFound: "لم نجد أي قنوات",
_components: {
"login": {
signInLinkSubtitle: "login",
signOutLinkSubtitle: "خروج",
},
"people-picker": {
inputPlaceholderText: "ابدأ في كتابة الاسم",
noResultsFound: "لم نجد أي قنوات", // will overwrite globally defined noResultsFound in people-picker component
loadingMessage: "...جار التحميل",
},
"teams-channel-picker": {
inputPlaceholderText: "حدد قناة",
noResultsFound: "local NoResultsFound Example",
// loadingMessage: is default string "Loading..." for this example since not defined globally or locally
},
"tasks": {
removeTaskSubtitle: "delete",
cancelNewTaskSubtitle: "canceltest",
newTaskPlaceholder: "newTaskTest",
addTaskButtonSubtitle: "addme",
},
"person-card": {
sendEmailLinkSubtitle: "ارسل بريد الكتروني",
startChatLinkSubtitle: "ابدأ الدردشة",
showExpandedDetailsButton: 'Show expanded details',
showMoreSectionButton: "أظهر المزيد", // global declaration
},
"person-card-contact": {
contactSectionTitle: "اتصل",
},
"person-card-organization": {
reportsToSectionTitle: "تقارير ل",
directReportsSectionTitle: "تقارير مباشرة",
organizationSectionTitle: "منظمة",
youWorkWithSubSectionTitle: "انت تعمل مع",
userWorksWithSubSectionTitle: "يعمل مع",
},
},
};
When the strings
property of LocalizationHelper
is assigned, all components will automatically pick up the new strings and re-render, allowing you to change strings dynamically.
The strings can be set at a global level or per component (with the _components:
property).
Strings
Login
"login": {
signInLinkSubtitle: "Sign In",
signOutLinkSubtitle: "Sign Out"
}
People-Picker
"people-picker": {
inputPlaceholderText: "Start typing a name",
noResultsFound: `We didn't find any matches.`,
loadingMessage: "Loading..."
}
Teams-Channel-Picker
"teams-channel-picker": {
inputPlaceholderText: "Select a channel",
noResultsFound: `We didn't find any matches.`,
loadingMessage: "Loading..."
}
Tasks
"tasks": {
removeTaskSubtitle: "Delete Task",
cancelNewTaskSubtitle: "cancel",
newTaskPlaceholder: "Task...",
addTaskButtonSubtitle: "Add"
}
Tasks-Base
"tasks-base": {
removeTaskSubtitle: "Delete Task",
cancelNewTaskSubtitle: "cancel",
newTaskPlaceholder: "Task...",
addTaskButtonSubtitle: "Add"
}
Todo
"todo": {
removeTaskSubtitle: "Delete Task",
cancelNewTaskSubtitle: "cancel",
newTaskPlaceholder: "Task...",
addTaskButtonSubtitle: "Add"
}
Person-Card
"person-card": {
sendEmailLinkSubtitle: "Send email",
startChatLinkSubtitle: "Start chat",
showMoreSectionButton: "Show more"
}
Person-Card-Contact
"person-card-contact": {
contactSectionTitle: "Contact"
}
Person-Card-Organization
"person-card-organization": {
reportsToSectionTitle: "Reports to",
directReportsSectionTitle: "Direct reports",
organizationSectionTitle: "Organization",
youWorkWithSubSectionTitle: "You work with",
userWorksWithSubSectionTitle: "works with"
}
Person-Card-Messages
"person-card-messages": {
emailsSectionTitle: "Emails"
}
Person-Card-Files
"person-card-files": {
filesSectionTitle: "Files",
sharedTextSubtitle: "Shared"
}
Person-Card-Profile
"person-card-profile": {
SkillsAndExperienceSectionTitle: "Skills & Experience",
AboutCompactSectionTitle: "About",
SkillsSubSectionTitle: "Skills",
LanguagesSubSectionTitle: "Languages",
WorkExperienceSubSectionTitle: "Work Experience",
EducationSubSectionTitle: "Education",
professionalInterestsSubSectionTitle: "Professional Interests",
personalInterestsSubSectionTitle: "Personal Interests",
birthdaySubSectionTitle: "Birthday",
currentYearSubtitle: "Current"
}
File
'file': {
modifiedSubtitle: 'Modified',
sizeSubtitle: 'Size'
};
File-List
"file-list": {
showMoreSubtitle: 'Show more items'
}
意見反應
https://aka.ms/ContentUserFeedback。
即將登場:在 2024 年,我們將逐步淘汰 GitHub 問題作為內容的意見反應機制,並將它取代為新的意見反應系統。 如需詳細資訊,請參閱:提交並檢視相關的意見反應