Localización de los componentes del kit de herramientas de Microsoft Graph

Precaución

Microsoft Graph Toolkit está en desuso. El período de retirada comienza el 1 de septiembre de 2025, con la retirada completa prevista para el 28 de agosto de 2026. Los desarrolladores deben migrar al uso de los SDK de Microsoft Graph u otras herramientas de Microsoft Graph compatibles para crear experiencias web. Para obtener más información, consulte el anuncio de desuso.

La localización es un aspecto importante del desarrollo de aplicaciones para admitir a los usuarios con diversos requisitos de lenguaje globalmente.

Puede localizar los componentes del kit de herramientas de Microsoft Graph para asegurarse de que la interfaz de usuario refleja el idioma de destino.

Uso de LocalizationHelper para agregar cadenas localizadas

Ninguna de las cadenas del kit de herramientas está localizada, pero puede proporcionar sus propias cadenas localizadas y administrar diferentes idiomas mediante el mismo proceso que usa para localizar la aplicación. Para facilitar la localización, el kit de herramientas expone la LocalizationHelper clase estática.

En el ejemplo siguiente se muestra cómo localizar varios componentes.

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: "يعمل مع",
    },
  },
};

Cuando se asigna la strings propiedad de LocalizationHelper , todos los componentes recogerán automáticamente las nuevas cadenas y se volverán a representar, lo que le permitirá cambiar las cadenas dinámicamente.

Las cadenas se pueden establecer en un nivel global o por componente (con la _components: propiedad ).

Cadenas

Inicio de sesión

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

Selector de personas

"people-picker": {
  inputPlaceholderText: "Start typing a name",
  noResultsFound: `We didn't find any matches.`,
  loadingMessage: "Loading..."
}

Selector de canales de Teams

"teams-channel-picker": {
  inputPlaceholderText: "Select a channel",
  noResultsFound: `We didn't find any matches.`,
  loadingMessage: "Loading..."
}

Tareas

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

Tarjeta de personas

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

Contacto de tarjeta de persona

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

Mensajes de tarjeta de persona

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

Archivo

'file': {
  modifiedSubtitle: 'Modified',
  sizeSubtitle: 'Size'
};

File-List

"file-list": {
  showMoreSubtitle: 'Show more items'
}