Localización de los componentes de Microsoft Graph ToolkitLocalizing the Microsoft Graph Toolkit components

La localización es un aspecto importante del desarrollo de aplicaciones para admitir usuarios con diversos requisitos de idioma a nivel global.Localization is an important aspect of application development to support users with various language requirements globally.

Puedes encontrar los componentes de Microsoft Graph Toolkit para garantizar que la interfaz de usuario refleje el idioma de destino.You can localize the Microsoft Graph Toolkit components to ensure that the UI reflects the target language.

Usar LocalizationHelper para agregar cadenas localizadasUse LocalizationHelper to add localized strings

Ninguna de las cadenas del kit de herramientas está localizada, pero puedes proporcionar tus propias cadenas localizadas y administrar diferentes idiomas a través del mismo proceso que usas para localizar la aplicación.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. Para facilitar la localización, el kit de herramientas expone la LocalizationHelper clase estática.To facilitate localization, the toolkit exposes the LocalizationHelper static class.

En el ejemplo siguiente se muestra cómo encontrar varios componentes.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: "ابدأ الدردشة",
      showExpandedDetailsButton: 'Show expanded details',
      showMoreSectionButton: "أظهر المزيد", // global declaration
    },
    "person-card-contact": {
      contactSectionTitle: "اتصل",
    },
    "person-card-organization": {
      reportsToSectionTitle: "تقارير ل",
      directReportsSectionTitle: "تقارير مباشرة",
      organizationSectionTitle: "منظمة",
      youWorkWithSubSectionTitle: "انت تعمل مع",
      userWorksWithSubSectionTitle: "يعمل مع",
    },
  },
};

Cuando se asigna la propiedad de, todos los componentes recogerán automáticamente las nuevas cadenas y se volverán a representar, lo que le permite cambiar las strings LocalizationHelper cadenas dinámicamente.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.

Las cadenas se pueden establecer en un nivel global o por componente (con la _components: propiedad).The strings can be set at a global level or per component (with the _components: property).

CadenasStrings

Inicio de sesiónLogin

"login": {
  signInLinkSubtitle: "Sign In",
  signOutLinkSubtitle: "Sign Out"
}

Selector de personasPeople-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..."
}

TareasTasks

"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"
}

Tarjeta de personasPerson-Card

"person-card": {
  sendEmailLinkSubtitle: "Send email",
  startChatLinkSubtitle: "Start chat",
  showMoreSectionButton: "Show more"
}

Persona-tarjeta-contactoPerson-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"
}