本地化 Microsoft Graph Toolkit组件Localizing the Microsoft Graph Toolkit components

本地化是应用程序开发的重要方面,可支持具有全球各种语言要求的用户。Localization is an important aspect of application development to support users with various language requirements globally.

你可以本地化 Microsoft Graph Toolkit组件,以确保 UI 反映目标语言。You can localize the Microsoft Graph Toolkit components to ensure that the UI reflects the target language.

使用 LocalizationHelper 添加本地化字符串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. 为便于本地化,工具包公开 LocalizationHelper 静态类。To facilitate localization, the toolkit exposes the LocalizationHelper static class.

以下示例演示如何本地化多个组件。The following example shows how to localize several components.

import { LocalizationHelper } from "@microsoft/mgt";

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: "ابدأ الدردشة",
      showMoreSectionButton: "أظهر المزيد", // global declaration
    },
    "person-card-contact": {
      contactSectionTitle: "اتصل",
    },
    "person-card-organization": {
      reportsToSectionTitle: "تقارير ل",
      directReportsSectionTitle: "تقارير مباشرة",
      organizationSectionTitle: "منظمة",
      youWorkWithSubSectionTitle: "انت تعمل مع",
      userWorksWithSubSectionTitle: "يعمل مع",
    },
  },
};

分配属性后,所有组件将自动选取新字符串并重新呈现,从而允许您动态 strings LocalizationHelper 更改字符串。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.

可以在全局级别或每个组件设置字符串 (_components: 属性) 。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-PickerTeams-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-BaseTasks-Base

"tasks-base": {
  removeTaskSubtitle: "Delete Task",
  cancelNewTaskSubtitle: "cancel",
  newTaskPlaceholder: "Task...",
  addTaskButtonSubtitle: "Add"
}

TodoTodo

"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-ContactPerson-Card-Contact

"person-card-contact": {
  contactSectionTitle: "Contact"
}

Person-Card-OrganizationPerson-Card-Organization

"person-card-organization": {
  reportsToSectionTitle: "Reports to",
  directReportsSectionTitle: "Direct reports",
  organizationSectionTitle: "Organization",
  youWorkWithSubSectionTitle: "You work with",
  userWorksWithSubSectionTitle: "works with"
}

Person-Card-MessagesPerson-Card-Messages

"person-card-messages": {
  emailsSectionTitle: "Emails"
}

Person-Card-FilesPerson-Card-Files

"person-card-files": {
  filesSectionTitle: "Files",
  sharedTextSubtitle: "Shared"
}

Person-Card-ProfilePerson-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"
}