Share via

Localizando os componentes do Kit de Ferramentas do Microsoft Graph

  • Artigo

A localização é um aspecto importante do desenvolvimento de aplicativos para dar suporte aos usuários com vários requisitos de idioma globalmente.

Você pode localizar os componentes do Microsoft Graph Toolkit para garantir que a interface do usuário reflita o idioma de destino.

Usar LocalizationHelper para adicionar cadeias de caracteres localizadas

Nenhuma das cadeias de caracteres no kit de ferramentas é localizada, mas você pode fornecer suas próprias cadeias de caracteres localizadas e gerenciar idiomas diferentes por meio do mesmo processo que você usa para localizar seu aplicativo. Para facilitar a localização, o kit de ferramentas expõe a LocalizationHelper classe estática.

O exemplo a seguir mostra como localizar vários 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: "يعمل مع",
    },
  },
};

Quando a strings propriedade de LocalizationHelper é atribuída, todos os componentes pegarão automaticamente as novas cadeias de caracteres e renderizarão novamente, permitindo que você altere cadeias de caracteres dinamicamente.

As cadeias de caracteres podem ser definidas em um nível global ou por componente (com a _components: propriedade).

Cadeias de caracteres

Logon

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

Seletor de Pessoas

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

Tarefas

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

Cartão de pessoa

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

Contato pessoa-cartão

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

Organização de Cartão de Pessoa

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

Mensagens de Cartão de Pessoa

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

Arquivos de cartão de pessoa

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

Perfil de Cartão de Pessoa

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

Arquivo

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

File-List

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